HTML 기본태그들과 역할 (1)

Heading (제목) - 블록 요소

제목 태그는 웹 페이지에 표시하려는 제목이다.
＜h1＞ ~ ＜h6＞ 까지 쓰인다 하나의 프로젝트에 ＜h1＞ 제일 큰 주제에 하나만 써주는게 좋다. w3c validation에 오류는 안뜨나 사용자들이 검색 엔진을 통해 무언가 검색을 할 때 가장 큰 제목부터 보기 마련이다. ( 제목으로 글씨크기를 조절하는 것은 별로 안좋다. font-size로 조절하는 방법이 합리적이다. )

  <h1> 가장 중요한 큰 제목 </h1>
  <h2> 그 다음 중요한 제목 </h2>
  <h3> 그 다음 </h3>
  <h4> 그 다음 </h4>
  <h5> 그 다음 </h5>
  <h6> 그 다음... </h6>

Paragraphs (단락) - 블록 요소

단락 태그는 문단을 정의할 때 사용된다. ( ＜p＞내용＜/p＞ )
브라우저는 자동으로 ＜p＞요소의 위쪽과 아래쪽에 약간의 여백을 추가한다.
단락은 항상 새 줄에서 시작한다.

  <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>

Preformatted Text (단락) - 블록 요소

＜pre＞태그는 형식화된 텍스트를 나타낸다. 보통 다른 태그들안에 텍스트를 넣으면 엔터(Enter), 스페이스바(Space)를 해도 공백하나로 인식을 하는데 ＜pre＞태그는 HTML 형태 그대로 유지가 가능하다. 때문에 독특한 포맷을 가진 '시'나 들여쓰기의 형식을 가진 코드 소스또는 특수문자로 그린 그림을 주로 넣는다.

<pre>
        _______________________
      < 나는 이 분야의 전문가다. >
        -----------------------
               \   ^__^
                \  (oo)\_______
                   (__)\       )\/\
                       ||----w |
                       ||     ||
</pre>

List (목록) - 블록 요소

목록 태그는 HTML 문서에서 목록을 나타내는 태그다. ( 크게 3가지로 나뉘어 진다. )
순서가 있는 목록 ( Ordered List ), 순서가 없는 목록 ( Unordered List ), 개념과 정의로 이루어진 목록 ( Description List )

1. 순서가 있는 목록 ( Ordered List )

＜ol＞태그를 이용하여 정의하고 안에 ＜li＞로 항목을 정의합니다.
＜ol＞태그안에는 ＜li＞외에 다른 태그가 들어올 수 없습니다. ( 웹 표준 )
＜ol＞태그에 같은 ＜ol＞도 들어올 수 없습니다. ( ＜li＞안에는 사용가능 )
＜ol＞의 기본 표현은 숫자이며 CSS로 로마자 같은 다른 형식으로도 표현 가능
( ＜ol type="1"＞, ＜ol type="a"＞, ＜ol type="A"＞,＜ol type="i"＞ 등등 )
( ＜ol＞과 ＜li＞는 전부 블록요소 )

  <ol>
    <li>첫 번째</li>
    <li>두 번째</li>
    <li>세 번째</li>
  </ol>

＜ol＞의 순서는 보통 1부터 시작하나 ＜ol＞의 속성값을 줘서 바꿀 수 있다.

  <ol start="10">
    <li>첫 번째</li>
    <li>두 번째</li>
    <li>세 번째</li>
  </ol>

또 역순으로도 가능하다.

  <ol reversed="reversed">
    <li>첫 번째</li>
    <li>두 번째</li>
    <li>세 번째</li>
  </ol>

reversed속성의 속성값은 reversed만 사용가능

2. 순서가 없는 목록 ( Unordered List )

＜ul＞태그를 이용하여 정의하고 안에 ＜li＞로 항목을 정의합니다.
＜ul＞태그안에는 ＜li＞외에 다른 태그가 들어올 수 없습니다. ( 웹 표준 )
＜ul＞태그에 같은 ＜ul＞도 들어올 수 없습니다. ( ＜li＞안에는 사용가능 )
＜ul＞은 순서가 없는 목록이라 ＜ol＞에서 썻던 start,reversed 속성은 사용 불가능
정말 자주쓰이는 목록 태그
( ＜ul＞과 ＜li＞는 전부 블록요소 )

  <ul>
    <li>첫 번째</li>
    <li>두 번째</li>
    <li>세 번째</li>
  </ul>

앞에 동그라미는 type속성으로 변경가능하다. ( circle, square 등등 )

3. 개념과 정의로 이루어진 목록 ( Description List )

앞에 ＜ol＞과 ＜ul＞과는 조금 다른 형태이다.
개념은 ＜dt＞ 정의는 ＜dd＞로 작성한다.
＜dl＞안에는 ＜dt＞,＜dd＞만 사용가능하다.
( dt는 인라인 요소이며, dd는 블럭 요소입니다 )
＜dt＞와 ＜dd＞는 1:1 뿐만아니라 1:다, 다:1 형식도 가질 수 있다.

<dl>
  <dt>이름</dt>
  <dt>Name</dt>
  <dd>홍길동</dd>
  <dt>취미</dt>
  <dt>Hobby</dt>
  <dd>축구</dd>
  <dd>Football</dd>
</dl>

Break (개행) - 인라인 요소

일반적인 방법으로는 코드 내에서 엔터(Enter)를 써도 줄바꿈이 안되기 때문에 줄바꿈을 목적으로 하는 ＜br＞태그 주소 또는 시를쓰기에 유용하다.

• ＜br＞, ＜br /＞, ＜br＞＜/br＞의 차이점

HTML4 : ＜br＞만 허용

HTML5 : ＜br＞ 선호, ＜br/＞ 및 ＜br /＞ 사용 가능

XHTML : ＜br /＞ 선호, ＜br/＞ 및 ＜br＞＜/br＞ 사용 가능

<p>
  가나다라마바사 <br>
  아자차카타파하
</p>

Horizontal Rule (수평선) - 블록 요소

장면의 전환, 다른 화제로의 전환 등을 위해 사용하는 요소
( 시각적인 용도로도 사용 )

선종류: solid dotted dashed double groove ridge inset outset 등이 있다. 　　　　( border 속성 사용 )
선굵기: 단위는 px, pt, %, em 등을 쓸 수 있다.
선색상: red blue black 등과 같이 색상이름을 쓰도 되고, #eeeeee 와 같이 코드로 써도 된다.
( align으로 정렬도 가능 width기본값 100% )

<hr style="border: 1px solid red">

Text Formatting (텍스트 서식) - 인라인 요소

특별한 의미를 가진 텍스트를 정의하기 위한 요소
텍스트에 다양한 효과를 줄 때 사용한다.

• ＜b＞, ＜strong＞
  ＜b＞와 ＜strong＞의 공통점은 둘다 글씨의 굵기를 두껍게 한다.
  두 태그의 차이점은 ＜b＞는 사람의 눈에만 굵게 보이고 '강조' 의 의미는 있지 않고 ＜strong＞은 굵게 보이고 '강조' 의 의미도 있다.
  ( ＜strong＞은 객관적인 중요성 강조의 의미는 html5 부터 생긴다. )

  <p>
    <b>글씨를 굵게</b> <br>
    <strong>글씨를 굵으면서 강조의 의미도 적용</strong>
  </p>

• ＜i＞, ＜em＞
  ＜i＞와 ＜em＞의 공통점은 둘다 글씨를 기울이게 한다.
  두 태그의 차이점은 ＜i＞는 사람의 눈에만 기울이게 보이고 '강조' 의 의미는 있지 않고 ＜em＞은 기울이기도 보이고 '강조' 의 의미도 있다.
  ( ＜em＞의 주관적인 중요성 강조의 의미는 html5 부터 생긴다.
  ＜i＞는 Font Awesome에서 Icon넣을 때 쓴다.)

  <p>
    <i>글씨를 기울이게</i> <br>
    <em>글씨를 굵으면서 강조의 의미도 적용</em>
  </p>

• ＜small＞
  먼저 ＜big＞은 더이상 html5에서는 지원하지 않는다.
  ＜small＞은 작은 텍스트를 정의한다.

  <p>
    다른것들 보다 좀더 <small>작게</small>
  </p>

• ＜mark＞
  ＜mark＞태그는 현재 맥락에 관련이 깊거나 중요해 하이라이트( 형광펜 )로 표시한다. ＜mark＞는 문서 콘텐츠에서 사용자의 현재 행동과 관련 있는 부분을 나타낼 때 사용한다.
  ex) 현재 검색 키워드를 강조 표시할 때 사용할 수 있다.

  <p>
    맥락에서 <mark>하이라이트</mark>된 부분
  </p>

• ＜ins＞,＜del＞,＜s＞,＜strike＞,＜u＞
  ＜ins＞,＜del＞은 기본적으로 짝을 이루어 쓰인다. ＜del＞은 텍스트의 가운데 선을 그어 취소 혹은 삭제의 느낌을 주고자 사용한다. ＜ins＞는 삭제된 정보대신 새로운 정보를 삽입할 때 사용한다. 일반적인 홈페이지에선 쓰이지 않고 위키피디아,나무위키 같은 백과사전 느낌의 사이트에서 사용한다.
  ( ＜ins＞와 ＜del＞은 'inline-block' 이며 인라인 요소안에도 들어가고 블록요소안에도 들어간다. ＜ins＞와 ＜del＞이 인라인 형태로 사용되면 블록요소를 포함할 수 없다. )

  <p>
    텍스트가 <del>취소된</del> 새로 <ins>추가된</ins>
  </p>

＜del＞대신 ＜s＞나 ＜strike＞를 사용할 수 있다. 하지만 ＜strike＞는 html5에서는 더이상 지원하지 않는다. html5에선 ＜s＞를 사용한다.
＜ins＞대신 ＜u＞를 사용가능하다.

• ＜sub＞, ＜sup＞
  ＜sub＞, ＜sup＞는 첨자 텍스트로 정의된다. ＜sub＞은 아랫첨자 텍스트를 표현할 때 사용되고 ＜sup＞은 윗첨자 텍스트를 표현할때 사용한다.
  ex) 수학 공식, 부가설명(주석)

  <p>
    <sub>아랫</sub> 첨자 <br>
    2<sup>2</sup>
  </p>

Quotation (인용)

인터넷에서 글을 쓰다보면 분명 다른 글의 인용하는 경우가 종종 있는데
＜blockquote＞,＜q＞,＜cite＞는 이 경우에 사용한다.

• ＜blockquote＞ - 블록요소
  기본 브라우저에서는 들여쓰기로 표현된다. 블록요소이기 때문에, 다른 블록요소들을 포함 할 수 있다. 상대적으로 긴 내용의 인용을 담기에 적합한 요소이다.

• ＜q＞ - 인라인 요소
  기본 브라우저에서는 따옴표로 표현되기 때문에 굳이 따옴표를 넣어줄 필요가 없다. 비교적 짧은 인용문에서 사용된다.

  이순신은 이렇게 말했다. <br>
  <q>나의 죽음을 적에게 알리지마라</q>
  <br>
  <p>마틴 루터 킹은 이렇게 말했다.</p>
  <blockquote>"비폭력이란 강력하고 정당한 무기로서 상처없이 잘라내며 그것을 휘두르는 사람을 고상하게 만들어 준다. 비폭력은 치료의 검이다." </blockquote>

• ＜cite＞
  인용된 자원을 나타낸다 작품의 제목을 넣어야 된다. ( 창작물 ) 또는 출처를 밝힐때도 사용한다.
  ＜cite＞ 태그안의 텍스트는 일반적으로 기울임꼴 로 표시된다.
  ＜cite＞ 는 요소가 아닌 속성으로도 존재한다. ＜blockquote＞와 ＜q＞요소에 속성으로 넣고 속성값으로 브라우저 주소를 넣는다.

<p><cite>The Scream</cite> <br>by Edvard Munch. Painted in 1893.</p>

• ＜address＞ - 블록요소
  HTML 문서에서 주소를 입력하는 방법이다. 그냥 ＜p＞태그를 사용해서 써도 되는데 address를 사용하는 이유는 검색엔진 때문이다. 만약 어떠한 기업 주소를 인터넷에서 찾는다고 가정하면 검색 엔진인 address를 먼저 찾아서 유리하다.
  ( 기울임체로 표시된다. )

<address>경기도 의정부시 센트럴파크</address>

• ＜abbr＞ - 인라인 요소
  ＜abbr＞태그는 두문자어(acronym)와, 약어(abbreviation)에 사용하는 요소로, 브라우저나 검색엔진에 유용한 정보를 준다.
  보통 title속성과 같이 사용하고 ＜abbr＞안에 텍스트는 밑줄로 표시된다.

<abbr title="Hyper Text Markup Language">HTML</abbr>