일주일에 꼭 한편씩은 올릴려고 하는데 욕심도 많고 상황도 안따라주고 참 힘드네요 ㅠㅠ

https://www.w3schools.com/html/html_images.asp 을 보면 메뉴가 4개로 나뉘어서 정리글도 4개로 나눠 작성하게 될 것 같습니다. 일단 어떻게 쓰는지 어떤  속성들이 있는지 살펴보도록 하겠습니다.

자 일단 HTML의 태그 패턴은 기본적으로 처음에 태그을 열고(<태그>), 내용을 적고(어쩌고 저쩌고), 태그를 닫는(</i태그>) 패턴으로 사용합니다.  그런데 <img>태그는 닫힘 태그가 없다고 설명되어 있네요.

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

자 그럼 글이 아니기 때문에 타이핑 할 수는 없고, image를 띄워야 하는데 어떻게 띄울 수 있을까요?

바로 URL, 즉 주소를 사용 하는 것 입니다. 인터넷 주소로요. 주소를 정의하는 속성은 src 입니다.

<img src="url">

태그 글쓰다가 캡쳐 했던 제 블로그내 이미지를 하나 가져와볼게요.

<img src="https://k.kakaocdn.net/dn/omHVf/btqBuv4Vr1D/jEXOPcFg8m4LVkKxbsr0A0/img.png">

자 위와 같이 url 주소를 넣어주면 이미지가 표현됩니다. (위 텍스트 이미지에요^^;)

자 다음 속성은 alt 라는 속성입니다.

alt는 image에 간단한 설명을 붙여주는 속성인데요. w3h 는 아래와 같이 설명했네요.

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

한 번 적용시켜보도록 할게요.

<img src="https://k.kakaocdn.net/dn/omHVf/btqBuv4Vr1D/jEXOPcFg8m4LVkKxbsr0A0/img.png" alt="7번째 태그 정리 글">

아마 마우스 커서를 갖다대면 설명이 뜰텐데.....?! 현재는 확인 할 수 없네요. (아... 아닌가;;?!)

위 설명대로라면 url 경로에 에러가 있는 경우 alt에 정의한 글이 나와야 하는데요, 위 url 글자를 일부 지워 경로가 틀리도록 해보겠습니다. 

자 위 처럼 image 파일이 보여지지 않고, alt에 정의한 글이 표현되네요.

그리고 note가 하나 있습니다. 

Note: The alt attribute is required. A web page will not validate correctly without it.

반드시 사용하라고 하네요! 웹 유효성을 위해서요!

자 이제 image를 띄우는 방법은 배웠는데... 아마 하다보니 image 크기를 조정하고 싶은 순간이 올 것 입니다.

그 때 사용하는 속성이 바로 width 와 height 인데요. 사용 패턴이 2가지 방법이 있습니다.

첫 번째 방법은

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

위와 같이 width 값과 height 값을 명시해주는 방법입니다. 위 방법은 기본 픽셀 단위로 너비와 높이를 정의합니다.

두 번째 방법은 style 속성을 사용하여 한번에 너비와 높이를 지정하는 방법입니다.

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

위와 같은 방법으로 말이죠~! 세미콜론 빼먹지 않게 주의하시구요~!

자, 이제 image 크기를 조정하는 법을 알게 되었으니 image를 정렬하는 법도 궁금하실텐데요.

align 이라는 속성이 있었으나, 아쉽게도 HTML5에서는 지원하지 않는 속성이 되어버렸답니다.

image의 정렬 부분은 CSS 정리글에서 다뤄보도록 하겠습니다. (언젠가 될련지...)

감사합니다.!

안녕하세요~! 오랜만에 HTML5 정리 글을 쓰고 있습니다. ㅎ 방금전까지만해도 설날이였는데 다들 설은 잘 지내셨는지요?! 새해복 많이 받으시고 좋은 한해 되시길 바랍니다! 

오늘 정리 할 Tag는 아래와 같습니다. w3schools 사이트를 참고 하였습니다.

 https://www.w3schools.com/html/html_formatting.asp

• <b> - Bold text (굵게)
• <strong> - Important text (중요 부분 강조)
• <i> - Italic text (기울임꼴)
• <em> - Emphasized text (강조)
• <mark> - Marked text (하이라이트)
• <small> - Small text (작게)
• <del> - Deleted text (취소선)
• <ins> - Inserted text (밑줄)
• <sub> - Subscript text (아래첨자)
• <sup> - Superscript text (위첨자)

자 이제 하나씩 가볼게요~!

<b> Bod text

The HTML  element defines bold text, without any extra importance.

<b> tag는 글씨를 굵게 만들어주는 태그 입니다. 중요성을 띈 문장에 적용하지 않아요. 예제 볼게요!

<p>This text is normal.</p>
<p><b>This text is bold.</b></p>

결과는?

This text is normal.

This text is bold.

감이 오시쥬?????????????

<strong> important text

The HTML  element defines strong text, with added semantic "strong" importance.

<strong> 태그는 <b>태그와 시각적으로 다르지 않습니다. 그러나, HTML5 표준화를 위해, 의미적으로 중요성이 있는 문장을 강조하기 위해 사용합니다. 

예제 볼게요!

<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>

결과는?

This text is normal.

This text is strong.

<b>와 다르지 않쥬?! 하지만 웹 접근성을 위해 구분해 사용해요!

<i> Italic text

The HTML <i> element defines italic text, without any extra importance.

<i> 태그는 기울임 글꼴 입니다. 중요성이 없는곳에 사용 합니다. 예를 들면 참고하는 문서 제목 같은 것.

예제 볼게요~!

<p>This text is normal.</p>
<p><i>This text is italic.</i></p>

결과는?

This text is normal.

This text is italic.

<em> Emphasized text

The HTML <em> element defines emphasized text, with added semantic importance.

<em>태그 역시 시각적으로 <i>태그와 다를게 없습니다. 그러나 강조된 텍스트에 중요하고 의미있는 내용을 추가 할 때 사용 하는 태그 인 것 같습니다.

<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>

<small> smaller text

<small>태그 경우 예제로 실습을 해보니 함께 사용되는 <h>태그 크기에 비례하여 작아지는 효과를 보여주는 태그 인 듯 합니다. 

예제 볼게요~!

<h2>HTML <small>Small</small> Formatting</h2>

Small 부분만 조금 작아졌죠??

<mark>Marked text

The HTML <mark> element defines marked/highlighted text:

<mark> 태그는 우리가 중요한 부분에 형광펜을 치듯 음영처리를 해주는 태그 입니다. 예제 보시죠~!

<h2>HTML <mark>Marked</mark> Formatting</h2>

음영색은 CSS로 바꿀 수 있으니 참고하세요~!

<del> Deleted text

The HTML <del> element defines deleted/removed text.

<del>태그는 저희가 워드에서 자주보던 취소선을 입혀주는 태그 입니다.

<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>

The del element represents deleted (removed) text.

My favorite color is blue red.

<ins> Inserted text

The HTML <ins> element defines inserted/added text.

<ins>태그는 insert의 약자인듯 싶죠?! 무언가 중간에 삽입되거나 추가 되는 경우에 사용 하는 태그인 듯 합니다.

<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>

밑줄이 그어지네요.

<sub> Subscript text / <sup> Superscript text

<sub> 태그는 아래 첨자. <sup>태그는 위 첨자로 한 코드에 한 번에 보도록 하겠습니다.

<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>

참 쉽쥬잉!?!?!

정리 하면서 저도 참 몰랐던 태그들을 만나네요. 

요즘 계획한 프로젝트는 손대지 못하고 있네요.

기초 잠깐 하고 하면 되겠다 싶었는데 성격상 안되겠더라구요 ㅠㅠ 

그냥 닥치는대로 하면 되긴 할 것 같은데 책 예제 쳐보며 코드 조금 바꿔보며 공부하고 있습니다...

시간이 좀 많았으면 좋겠네요 ㅠㅠ 잠을 포기 하자니 건강이 나빠질까봐 두렵고

육아남은 힘듭니다. 일찍좀 자주면 좋으련만 ㅠ

푸념푸념 ㅎㅎ

모두 행복하길 바라~~~!!

자 오늘은 6번째 html 태그 정리 시간입니다.

뭔가 글 남기기 참 힘드네요.. 요즘 유튜브에 메모하는 습관 같은 영상 가끔씩 보는데,

참 유용하다는 것을 알고 느꼈던 바도 있지만, 기록을 남기는게 참 쉽지가 않습니다. 특히 싱글이 아니라면 더욱 더 그렇죠 ㅠㅠ

자 각설하고 정리 들어가보겠습니다.

https://www.w3schools.com/html/html_lists.asp 에 따르면 글 제목과 같은 태그들을 List tag로 정의하고 있고,

그 tag의 종류는 글 제목과 같습니다.

늘 그랬듯, 어떤 단어를 축약해놓은 것인지 단어 정리 먼저 들어가볼게요.

<ul> : Unondered List : 정돈되지않은, (질서)정연하지 않은, 순위적이지 않은

<ol> : Ordered List : 정돈된, (질서)정연한, 순위적

<li>: List item : 목록 항목

<dl> : description list : 기술 목록

<dt> :  a term/name in a description list. : 기술 목록의 설명

<dd> : Describes the term in a description list : 기술 목록에 기술된 내용

<dt>와 <dd>태그는 잘 모르겠네요 단어의 뜻을. 그러나 <dl>태그와 관련 있음을 알 수 있을 듯 합니다.

일단 위 링크 페이지의 순서에 따라 태그 사용 목적 사용법, 코드 등을 보도록 할게요.

<ul> 태그 입니다.

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:

순서가없는 목록은 <ul> 태그로 시작합니다. 각 목록 항목은 <li> 태그로 시작합니다. <li> 목록 항목은 기본적으로 글 머리 기호 (작은 검은 색 원)으로 표시됩니다.

어떻게 쓰는건지 코드를 보도록 할게요.

<h2>An Unordered HTML List</h2>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

결과 값은 아래와 같습니다.

An Unordered HTML List

• Coffee
• Tea
• Milk

자 어떻게 써야하는지 감이 오시나요?

일단 <ul>태그로 <li>태그를 감싼 모습을 볼 수 있고, <li>태그내 기술된 목록은 검은 점으로 표시 된 것을 알 수 있습니다. 그리고 아래로 정렬되는 것을 보아 block 성격의 태그임을 알 수 있습니다.

그리고 위 사이트를 보시면 알겠지만, <ul>태그 속성값으로 기호 모양을 바꿀 수 있습니다. CSS로 적용시켜야 합니다.

<ol> 태그 입니다. 

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:

정렬 된 목록은 <ol> 태그로 시작합니다. 각 목록 항목은 <li> 태그로 시작합니다.  기본적으로 숫자로 표시됩니다.

<h2>An ordered HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

An ordered HTML list

1. Coffee
2. Tea
3. Milk

<ul>태그와 다르게 번호가 적용되는 것을 알 수 있습니다.

<ol>태그의 속성값으로 번호가 아니라 알파벳으로 바꿀 수도 있고 로마 숫자로도 바꿀 수 있는데요. 위 사이트 설명에 CSS가 명시되어 있지 않은것으로 보아 태그에 속성값이 적용 가능한 것으로 보입니다.

TypeDescription

추가로 시작 번호도 바꿀 수 있네요! 속성은 start 이구요 값은 정수로만 반영 가능 한 것으로 생각됩니다.

깔끔하게 위 속성들이 적용 된 하나의 코드를 더 보도록 하겠습니다.

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="I" start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

결과값은 아래와 같습니다.

<dl><dt><dd>태그 입니다.

HTML also supports description lists. A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

HTML은 설명 목록도 지원합니다. 설명 목록은 각 용어에 대한 설명이 포함 된 용어 목록입니다.
<dl> 태그는 설명 목록을 정의하고 <dt> 태그는 용어 (이름)를 정의하며 <dd> 태그는 각 용어를 설명합니다.

음.. <ul><ol>태그와 비슷하게 사용 하면 될 것 같습니다. 그쵸?

위 단어 정의 부부에서 보면 <ul><ol>태그는 order, list라는 단어가 공통적으로 들어가 있었습니다. 즉 책의 목차 같은 느낌이고, 위 <dl><dd><dt>태그는 description 이라는 단어가 공통적으로 추가하여 들어가 있는 것을 보아 목차의 항목을 설명하는 항목으로써 태그를 사용하면 될 것 같습니다. 왜냐면 HTML5는 웹 접근성을 중요시하니까요!

코드 볼게요~!

<h2>A Description List</h2>

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

결과는 아래와 같습니다.

A Description List

Coffee

         - black hot drink

Milk

         - white cold drink

'-'는 태그에서 처리해주는 것이 아니라 코드를 보면 직접 타이핑 한 것을 알 수 있습니다. 

그런데.... '-'로 표시 되면 더 좋았을 것 같다는 생각이 드는데요??

마지막으로 Nested HTML Lists 라는 내용이 있는데요,

List can be nested (lists inside lists):

List의 중첩이 가능하다. 즉, list 내 list가 존재 가능하다라는 내용이지요.

Note: List items can contain new list, and other HTML elements, like images and links, etc.

목록 항목에는 새 목록 및 이미지 및 링크 등의 다른 HTML 요소가 포함될 수 있습니다.

무슨 말인지 코드를 한 번 보도록 하죠.

<h2>A Nested List</h2>
<p>List can be nested (lists inside lists):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

결과값은 아래와 같습니다.

A Nested List

List can be nested (lists inside lists):

• Coffee
• Tea
  • Black tea
  • Green tea
• Milk

지금 <li> Tea 라고 적고 닫힘 태그를 바로 쓰지 않고,  <ul> 태그로 한 번 더 감써서 tea의 종류를 더 써놓은 듯 합니다.

또 한 Black tea, Green tea 의 기호가 하얀점으로 나오는 것을 알 수 있습니다.

CSS가 적용되어 있는것인가 싶어, VSC(Visual studio code editor)로 쳐보았는데 똑같이 나오네요. 

<li>태그의 자식 항목으로 <ul>이 들어간건데 이렇게도 사용 할 수 있군요. 신기하네요 ㅎㅎ

저도 사실 <dl><dt><dd>태그는 처음보는거라 호기심이 생겨 한 번 아래와 같이 쳐보았습니다.

	<ul>
                <li>Coffe</li>
                <li>Tea
                    <ul>
                        <li>Black tea</li>
                        <dl>
                           <li><dt>Hong Cha</dt></li>
                            <dd>홍차는 어쩌고 저쩌고</dd>
                            <dt><li>Corn cha</li></dt>
                            <dd>옥수수차가 어쩌고 저쩌고</dd>
                        </dl>
                        <li>Green tea</li>
                        <dl>
                            <dt>green tea</dt>
                            <dd>녹차가 어쩌고 저쩌고</dd>
                        </dl>
                    </ul>
                </li>
                <li>Milk</li>
            </ul>

결과값은,

이렇게 나오는 걸 확인 할 수 있었습니다. ㅎ

벌써 새벽 3시네요 ㅎㅎ 위닝 한 판 하려고 했는데 스트레스만 쌓일 듯 싶습니다.

오늘의 과제를 마무리하며, 저와 같이 코딩에 관심있으신 분들께 도움이 되는 글이 되었으면 좋겠습니다.

다가 올 신년 잘 맞이하세요~!

감사합니다.

안녕하세요. 오늘은 크리스마스네요 ㅎㅎ

크리스마스 새벽부터 자바, 자바스크립트 책 보다가 지겨워서 블로그를 하고 있습니다.

육아중이다보니 이렇게 새벽밖에 시간이 안나네요 ㅠㅠ 아침형 인간은 아니라 아침에 하긴 힘들군요..

자 저번시간에는 <h> 태그에 대해 정리해보았는데, 오늘은 제목과 같이 <p><br><pre>태그를 한 번에 정리해보도록 하겠습니다.!

일단 각 각의 단어의 의미와 w3c에서 정의한 내용을 살펴보도록 할게요.

<p> : Paragraphs : 단락(긴 글에서 독자들이 이해하기 쉽도록 내용 상으로 매듭을 짓는 단위), 절 

The HTML <p> element defines a paragraph: <p> 요소는 단락을 정의합니다.

<br> : break : 깨어지다, 부서지다; 깨다, 부수다, 중단시키다, (날씨가 좋다가) 갑자기 바뀌다

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

줄 바꿈을 정의합니다. 새 단락을 시작하지 않고 줄 바꿈을 원하면 사용하십시오.

<pre> : preformatted : 사전 서식 있는 텍스트

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks

사전 형식화 된 텍스를 정의합니다.

<pre>요소 안의 텍스트는 고정 너비 글꼴(일반적으로 courier)로 표시되며 공백과 줄 바꿈을 유지 합니다.

어떤가요? 태그에 감이 오시나요? ㅎㅎ 자 이제 이 태그를 어떻게 쓰는지 보도록 하죠! 

이 글을 쓰다보니 블로그 에디터에 코드 블럭이라는 기능이 있는 걸 알았네요. 위 기능을 적용해 코드를 깔끔하게 보이도록 하겠습니다.!

w3c exapmle 에 따라서 <p>태그 2가지의 코드를 보고 어떻게 다른지 보도록 할게요.

예제 1.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

예제2.

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

자 어떻게 나오실 것 같나요? 결과물을 보도록 하겠습니다.

예제1.

This is a paragraph.
This is a paragraph.

예제2.

This paragraph contains a lot of lines in the source code, but the browser ignores it.
This paragraph contains a lot of spaces in the source code, but the browser ignores it.

차이가 보이시나요?

<p>태그는 block 성격을 가지고 있어 태그를 끝내버리면 자동으로 줄을 바꾸게 됩니다.

소스코드 작성시 줄바꿈을 한다고 하더라도 예제2번처럼 한 단락안에 나오게 되죠. 

이때 줄을 바꾸려면? 위 에 정의를 보았듯이 <br> 태그를 사용 합니다.

예제3.

<p>This is<br>a paragraph<br>with line breaks</p>

예제3.

This is
a paragraph
with line breaks

자 이렇게 줄바꿈을 하고 싶은 글자뒤에 <br>태그를 입력하시면 됩니다.

<br>태그는 줄바꿈 행위가 전부이므로 닫힘 태그(</br>)를 사용하지 않습니다.

아 나는 내가 소스코드에 쓴 문장대로 출력되었으면 좋겠어~~~! 하면 바로 <pre>태그를 사용하면 되는 것이지요~!

예제4.

<pre>
   My Bonnie lies over the ocean.

   My Bonnie lies over the sea.

   My Bonnie lies over the ocean.
   
   Oh, bring back my Bonnie to me.
</pre>

예제4.

   My Bonnie lies over the ocean.

   My Bonnie lies over the sea.

   My Bonnie lies over the ocean.
   
   Oh, bring back my Bonnie to me.

참 쉽네요~^^

모뎀 사용했던 시절부터 프로그래밍공부를 했으면 어땠을까 하는 마음이 갑자기 듭니다.....

흑흑흑 ㅠㅠ

모두 즐거운 메리크리스마스 보내세요~~!!

참고 : https://www.w3schools.com/html/html_paragraphs.asp

오늘은 오랜만에 HTML 태그 정리글을 작성해보려고 합니다.

시간이 늦은 관계로 정리 대상이 된 태그는 바로 <h> 태그 입니다.

<h> 태그는 headings의 약자 입니다.

축구에서 헤딩은 아니고요 ㅎㅎㅎ

사전적 정의를 살펴보면 '표제', '제목' 이라는 뜻이라는 것을 알 수 있습니다.

보통 한 주제에 대한 제목인 것이죠. 

자 이제 이 태그가 어떻게 쓰이는지 아래 소스를 보겠습니다.

<body> </body>안에 쓰이는 태그 입니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

자 이 태그를 적용하여 보시면 아래와 같은 것을 알 수 있습니다.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

어떤 곳에 써야 할지 감이 오시나요?

물론 h1 to h6 각 각의 글씨 사이즈 역시 조정 할 수 있습니다. CSS를 통해서 말이죠.

HTML5는 웹 접근성에 중요한 의미 및 목적을 두고 있기 때문에, 내가 표현하고자 하는, 혹은 유도하고자 하는 목적에 대해 어울리는 태그를 반드시 써줘야 합니다. 위 <h>태그는 제목 또는 작게 쓰일 간단한 제목, 표제 등에 어울리는 태그라고 할 수 있겠죠?!

https://www.w3schools.com/ 에서는 아래와 같이 사용법을 정의하고 있습니다.

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading. <h6>defines the least important heading.

h1은 가장 중요한 제목, h6는 가장 중요도가 낮은 제목을 정의한다고 하네요. 

그럼 <h>태그는 이 정도로 정리 하도록 하겠습니다. 

<h>태그에 쓰이는 속성들은 HTML5에서는 지원하지 않도록 하고 있어 속성 정리는 없습니다.

겨우 이 글 쓰는데도 후딱 한 시간이 지나버렸습니다..

제 스스로의 정리겸 적는것이기도 하지만, 정말 혹시나 html을 처음 접하시는 분을 위해서도 잘못된 정보가 전달 되지 않도록 위 site를 참고하며 적고 있습니다. 

비전공자 여러분들 또는 처음 html을 접하시는 여러분 모두 성부하세요! ㅋ (성공적 공부) ㅎㅎ

이제 본격적으로 태그를 정리해보고자 한다.

먼저 소개 할 인터넷 홈페이지는 https://www.w3schools.com/ 이라는 곳이고, HTML을 표준화 하고 있는 W3C (World Wide Web Constorium, W3C) 에서 제작한 홈페이지가 아닌가 싶다. 

위 사이트를 토대로 태그 하나하나씩 짚고 넘어가면 좋겠지만, 필자는 그리 시간이 많지 않고, 교육을 제공 할 수 있는 실력도 아니기 때문에, 많이 쓰이는 기본적인 태그들을 정리하고 CSS로 넘어가보고자 한다. 

개인 프로젝트는...... 먼 산 이다........ ㅠㅠ  그냥 책만 보고 있습니다......

왠지 블로그에 업데이트 후 진도가 나가지 않을까 싶다..... 정리도 할겸....

1. <a>태그가 뭐야?

위 태그는 2번 글에서도 설명했지만, hyperlink를 만들어주는 태그다. 예를 들면, 사이트 이동, 파일 다운로드에 적용 시킬 수 있다.

2. <a> 태그의 속성 (Attributes)

속성이란 것은 <a>태그 내 활용 할 수 있는, 또는 적용 가능한 기능 or 옵션 정도로 생각하면 될 것 같다.

예를 들면, 사이트 이동시 새로운 브라우저 창이 뜨면서 이동 하는게 있겠다.

일단 속성이 많이 정의되어 있어 링크로 대체 하고 많이 쓰는 속성은 2가지 정도만 보이기 때문에 바로 예제에서 적용하고자 한다.

https://www.w3schools.com/tags/tag_a.asp

스크롤을 내리다 보면 Attributes 표가 나온다. Value에 관한 설명을 위해 태그구조를 다시 한번 살펴보면 아래와 같다.

<a(태그) href(속성, Attribute)="www.naver.com"(값, value)>네이버로 이동</a(태그)>

자, 이렇게 속성이 가져야 할 어울리는 재료를 넣어주는 것이 '값(value) 이다.

3. 예제 살펴보기

위 링크된 페이지의 스크롤을 조금 더 내리다 보면 Try it Yourself - Examples 가 나온다. 여기서 살펴보겠다.

Text에 Hyperlink를 거는 것은 위 2번 섹션에서 언급했기 때문에 넘어가겠다. ('()' 괄호안에 써준것들만 지우면 됩니다.)

Creat clickable image 이미지 링크 거는 방법의 예제를 보면 간단하다.

<a href="URL"><img src="URL"></a>

위와 같은 방법으로 <a> 태그 내용 안에 <img> 태그 내용을 넣어주면 된다. 이미지 크기 조정은 예제 보면 감이 오겠지만, img 태그 정리시 언급하겠다.

Open a link in a new browser window 예제를 살펴보면, 새로운 윈도우 창에 띄우는 법은 알게 되었을 것이다.

그러나 우리는 그것으로 멈추면 안된다. 값 하나하나를 다 집어넣어서 적용해보도록 하자.

태그 전부 복사해서 붙여넣고 value 값만 바꿔도 되고, 그냥 valuea만 바꿔서 테스트해봐도 좋다.

"_blank" 경우 새 브라우저에서 열리는 것은 확인 되었고,

"_self" 경우 자신의 영역에서 페이지가 바뀌는 것을 확인 할 수 있다. 프레임이 적용되어 있지 않다면 _top과 비슷하게 작용 할 것 이다.  target 속성이 정의되지 않는 다면 이 옵션이 기본적으로 작용한다.

"_parent" 경우 자신의 부모 프레임에서 바뀌는데 <frame> 태그를 지양하는 HTML5에서 어떻게 써야할지는 잘 모르겠다.

"_top"의 경우 링크를 클릭한 기존 페이지에서 완전히 바뀌는 것을 확인 할 수 있다.

"framename"의 경우 <frame><iframe>태그 사용 시, frame name을 지정하여 지정된 name에 띄우는 것을 말한다.

 Creat an email link 예제를 살펴보면, 아래와 같이 정의되어도 다를 건 없다. 과거도 지금도 윈도우내 메일 앱이 실행되다.

<a href="mailto:E-mail주소">Send email</a> 

Create another email link 예제는 넘어가겠다. 잘 활용되지 않을 기능인 것 같다.

수신인을 넣고 참조인을 반영 할 수 있는 것으로 보이고, 메일 제목 까지 반영 할 수 있는 방법 인 듯 하다.

문자 사이의 공백이 있을 경우 HTML에서는 &nbsp; 로 표현하지만, href 속성의 value 값에는 %20이 공백을 표현 하는 방법으로 보인다.

Creat a phone link 예제 역시 넘어가고자 한다. OS 앱이 연동되어야 한다.

<a href="tel:+국가번호 포함하여 전화번호 입력">+123423434</a>

Link another section on the same page 는 홈페이지 내용을 쭉 내려보다가 다시 상위로 올라 갈 때 사용하는 예제로 보인다.

소스를 살펴보면 <h2 id="top">Top of page! </h2>라는 코드에 id=top 이라고 지정한듯한 문구가 보이고 하단 <a>태그는 <a href="#top">Go to top</a> 이라고 작성한 코드가 보인다. 대충 감이 오지 않는가?

바로 id를 top으로 지정한 <h2> 태그로 이동하라는 코드인 것이다. 그러니까 Top of page! 라는 문구로.

Link to a JavaScript 예제는 JavaScript에 대해 아직 배운바 없으나 이렇게 사용 할 수 있구나라고 생각하고 넘어 가자.

자바스크립트가 요즘 영역이 굉장히 넓어졌다고 해서 필자도 공부해볼 예정이다. 

HTML 태그 성격엔 대표적으로 2가지가 있다. 

바로 block과 Inline 이라는 성격이다.

아직 태그를 하나도 언급하지 않았고 정리되지는 않았지만, 위 성격을 가진 태그들이 각 각 있다는 것을 먼저 공부해도 상관없을 것 같다. 

위 성격을 바꿀 수 없는 것은 아니다. 상황에 따라 바꿀 수 있다.

1. Block

Block은 단어의 느낌처럼 뭔가 차곡차곡 쌓아올릴 것 같은 장난감 블럭 같은 느낌과, 도로가 나뉘는 구역을 표현 하는 느낌이 있다.

위 단어의 느낌처럼, 위 성격을 가진 태그는 작성시 연속적으로 표현되지 않는다.

다시 말하면 block 성격의 태그는 마치 우리가  Enter 키를 치는 것과 같은 효과가 있다. 줄바꿈이 있다는 이야기다.

상상이 되는가? 상상이 되지 않는다면 그냥 이런게 있구나 라고 알고 넘어가면 될 것 같다.

그래도 알고 싶으신 분을 위해 간단히 설명하면, <div> 라는 섹션을 정의하는 태그가 있다.

지난 번 정리한 기본구조 중 <body> </body>태그 안에 아래 태그를 집어 넣으면

<div style="background-color:yellow">yellow</div><div style="background-color:blue">blue</div>

2. Inline

네이버로 이동 구글로 이동

줄바꿔 태그를 작성해도 위와 같이 줄바꿈 없이 표현됨을 알 수 있다.

3. 성격을 바꾸는 방법.

태그의 성격은 HTML 기본 구조 중 <head> </head> 태그 안에서 바꿀 수 있고, CSS에 적용시켜 바꿀 수도 있다.

CSS는 아직 언급하지 않았으므로, HTML에서 성격 바꾸는 법을 설명하도록 하겠다. 

위 언급한 것 처럼 <head></head> 태그 안에 적용시킨다.

<style>

  a {display : block; }

  div {display : inline; }

</style>

위 소스를 해석하자면 <style> 태그 안에 a 태그는 { 보여줘 : 블럭으로; } div 태그는 { 보여줘 : 라인안으로; } </style>

라는 뜻이 된다. 

이렇게 태그의 성격을 바꿀 수 있다.

그러나 페이지 레이아웃을 짜다보면 같은 태그를 쓰더라도 어느 부분은 block 으로, 어느 부분은 inline 성격으로 사용하고 싶은 순간이 온다. 물론 가능하다. 그러나 그 설명은 잠시 미뤄두도록 하겠다.

오늘은 그냥 태그에도 성격이 있다 라는 것을 정리 한 것이다.

공부가 요즘 안되서 정리하는 식으로 진도를 나가보는것으로 변경해보고자 한다.

적용하면서 코드도 짜보는걸로.

글은 최대한 짧게, 최대한 나눠서 작성.

1. HTML의 가장 기본이 되는 문장 형식

HTML은 태그의 언어이다. 모든 것이 태그로 되어있다.

태그가 뭐냐? tag?

네이버에 사전적 의미를 검색해보니 아래와 같다.

1.[C] [흔히 합성어에서] (어떤 표시를 하기 위해 붙인) 꼬리표[태그] 참조 price tag

2.[C, 주로 단수로] (사람사물을 묘사하기 위해 붙인) 꼬리표

그렇다. 어떤 표시를 하기 위한 이름표 같은 것.

어쩌면 기능에 대한 이름이 될 수도 있고, 공간에 대한 이름이 될 수도 있겠다.

하지만 SNS에서처럼 #을 붙이거나 ','로 태그를 붙이는 건 아니고 아래의 문법으로 태그를 작성한다.

<태그명> 내용 </태그명>

 위를 풀어서 설명하면 <야 아무개 기능아 너 쓸거니까 이리와봐> 내용 </야 수고했다 가봐> 의 구조 인 것이다. 

끝의 태그에서는 항상 ' / '를 붙여 위 구조로 닫아야 한다.  각설하고 아래를 참고해보자.

2. HTML5 기본 구조

자 이제 조금 더 써보면 HTML은 기본적으로 아래의 구조를 가진다.

<!DOCTYPE html> <!-- html5로 작성하겠다는 선언 -->

<html> <!-- html 언어를 사용하겠다는 선언 -->

  <head> <!-- body를 구성하기 위한 선언 장소. head 뜻 그대로 머리부분이라고 생각하면 된다. 머리에 관련 지식이 있어야 일을 하겠지?! 지식을 넣어주는 공간이라고 생각하면 됨-->

    <title> HTML 기본 구조 입니다. </title> <!-- 인터넷 브라우저 창에 뜨는 web page 제목이다. -->

  </head>

  <body> <!--말 그대로 몸이다. 몸으로 우린 일한다. body에 구현하고자 하는 태그 및 언어 등을 기술한다 -->

  HTML 기본 구조를 작성해 보았습니다. 

  </body> <!-- '나 구현 다 끝냈다' 라는 마침부 -->

</html> <!-- html 다 작성했어 수고 -->

브라우저에 'HTML 기본 구조를 작성해 보았습니다.' 만 출력하는 아주아주 간단한 구조다.

뼈대가 저렇게 생겼다라고 이해하면 된다.

뼈가 있으면 뼈를 움직여야 할 근육도 있어야겠지?

다음 정리 할 것은 속성 개념이다.

그리고 왜 HTML5냐? 뭐가 HTML5야??? 를 정리 해야 할 것 같다.

3. HTML5 란?

HTML5는 웹 접근성, 웹 표준화를 위해 버전 업 된 web page langaue로 생각하면 될 것 같다.

위 말이 무엇이냐?

몸이 불편하신분들도 차별 없이 인터넷을 사용 할 수 있도록 웹페이지에 접근성이 있어야 한다는 것이다.

위를 구현하고자 정의 된 것. 그러니까 표준화 된 것이 바로 HTML5 다.

그래서 HTML5에서는 사용을 지양하는 태그들이 생겨났다.

그 중 하나가 <frame> 태그이다. 메뉴 구성을 쉽게 할 수 있는... <iframe> 태그는 사용 가능 한 듯 하다.

왜 Frame 태그가 사용 지양 된 건지 잘 모르겠다 ㅠㅠ.

고정되어 있는 메뉴바를 어떻게 작성해야 할 지 잘 모르겠다.ㅠ

웹페이지의 레이아웃은 공간 태그들을 통해 작성하게끔 유도되고 있다.

예전에는 Frame 으로 편하게 레이아웃을 구성했는데... 프레임 없이 공간태그로 작성하려하니 어렵다 ㅠ

어쨌든, 이전 버전과의 차이라면, 지양되고 있는 태그가 있다는 것. 웹 표준화가 이루어졌다는 것. 웹접근성을 염두해두고 코드를 작성해야 한 다는 것.