※ 본 포스팅은 책 <실전 프로젝트 반응형 웹 퍼블리싱>을 참고하여 작성됨

블록 요소(Block Elememt)

• 블록 요소는 마크업 시 줄바꿈이 일어나는 성질을 가지고 있다.
• 한 요소가 한 라인의 전체를 차지함, 가로 세로 크기 지정 가능
• 일반적으로 화면 레이아웃을 그리는 데 사용함
• inline 요소보다 상위 요소임 (block 안에 inline 포함 가능 / inline 안에 block 포함 불가능)

인라인 요소(Inline Element)

• 인라인 요소는 블록 요소와 달리 줄바꿈 성질이 없다. 즉, 행이 바뀌지 않고 한 줄로 출력됨
• 한 라인에 여러 요소가 존재할 수 있음, 필요한 폭만 유지해서 다른 요소와 같은 라인에 위치함
• 상 · 하단 margin 속성이 적용되지 않음
• inline 태그끼리 연속해서 사용하는 경우 별도 속성이 없으면 좌우 margin 5px 생성됨

XHTML 태그 정리

※ 이하, block요소는 '_b'로, inline요소는 '_i'로 구분한다.

제목(Title) : <h#>_b

<h#></h#> : 일반적인 문서 작업에서 상단에 가장 먼저 쓰이는 큰제목과 소제목처럼 문서 내에서 큰 줄기가 되는 부분들을 제목으로 처리할 때 쓰는 요소.
큰제목 순으로 <h1> ~ <h6>까지 사용할 수 있다.

• 웹 표준 문서 작업 시 <h1>은 꼭 마크업해주어야 하는데 웹 문서의 <h1>은 보통 회사나 단체의 상호명(로고)으로 처리한다.
• 마크업 시 <h1> → <h2> → <h3> → <h4> → <h5> → <h6> 순서로 정의해야 하며 <h1> 다음에는 반드시 <h2>가 와야 하며 <h3>가 올 수 없다.
• 내용의 흐름이나 중요도에 따라 <h1> ~ <h6>는 여러번 정의 될 수 있다.
• <h#>은 블록 요소이며, 텍스트나 인라인 요소를 포함할 수 있지만 블록요소는 포함할 수 없다.

<h1>가나다라</h1> (O)
<h1><a href="#">가나다라</a></h1> (O)
<h1><p>가나다라</p></h1> (X)

• 사실 <h#>요소는 기본 개념은 어렵지 않지만, 실제 작업에 있어서는 어느 부분에 어느 번호를 정의해야 할지 애매한 경우가 많다. 웹페이지 기획 단계에서 내용의 중요도와 흐름에 따라 어느 부분을 제목을 처리해야 할지 잘 판단해야 한다.

단락(Paragraph) : <p>_b

<p> : 단락을 정의 하는 태그. 문장과 같은 텍스트들은 인라인 요소의 성질을 가지고 있기 때문에 단독으로 쓰지 않고 보통 블록 요소인<p>요소 안에 포함 시킨다.

• 마크업할 때 아무리 엔터를 쳐서 행을 만들어도 실제 출력화면에는 한 줄로 나타난다.
• 문맥상 특정 부분에서 강제적으로 줄 바꿈을 하고 싶을 때 <br /> 요소를 마크업하면 된다.
  '줄 바꿈'을 해주는 요소인<br />은 빈 요소이기 때문에 <br></br>로 마크업하지 않는다.
• <p>는 block요소이며 텍스트와 inline요소는 포함할 수 있지만 block요소는 포함할 수 없다.

<p>가나다라</p> (O)
<p><a href="#">가나다라/a></p> (O)
<p><h1>가나다라</h1></p> (X)

주소(Address) : <address>_b

<address> : 웹 문서 하단(footer)에 보면 문서와 관련된 연락처나 주소, 전화번호, 저작권 등에 관련된 내용처럼 연락처 정보를 나타내는 요소.

• <address>요소 안의 텍스트들은 이탤릭체로 출력된다.
• <address>는 block요소이며 텍스트와 inline요소는 포함할 수 있지만 block요소는 포함할 수 없다.

<address>연락처 02-1111-2222</address> (O)
<address><a href="#">e-mail:abc123@abc.com</a><address> (O)
<address><h3>COPYRIGHT&copy; Jay.</h3></address> (X)

구분선(Horizontal line) : <hr />_b

<hr /> : 웹 문서 내에서 구분선을 그을 때 사용하는 요소

• <hr />은 빈 요소이기 때문에 <hr></hr>로 마크업하지 않는다.
• <hr />요소는 단순해 보이지만 마크업 시 복잡한 내용들을 헷갈리지 않게 구분해주는 역할을 하여 매우 유용하게 쓰인다.

인용문(Quotation) : <blockquote>,<q>_i

다른 사람의 말이나 글을 인용할 때 쓴다.

<blockquote cite="href://..." title="가나다라"><p>...<p></blockquote>

• 다른 요소들과 구분되어 보이기 위해 텍스트가 들여쓰기 되어 출력됨.
• cite에는 인용한 곳의 URL주소를 넣을 수 있다.
• title이란 속성을 이용하여 인용한 곳의 타이틀을 명시할 수 있다.
• block요소이며 다른 block요소와 다르게 텍스트나 inline요소를 포함하지 않고 <p>요소와 같은 block요소를 포함해야 한다.

<q cite="http://...">...</q>

• "..." 로 출력되는 inline요소이며 텍스트와 inline요소를 포함할 수 있다.
• 보통 짧은 인용문을 쓸 때 사용한다.

텍스트(Text)

텍스트 관련 요소들은 텍스트의 강조, 생략어와 두문자어, 추가글, 취소글, 첨자 등을 출력할 때 쓰는 요소

• <em>_i : 이탤릭체, 일반적인 강조 *css에서 단위로서의 em과 다름
• <strong>_i : 볼드체, <em>보다 더 강한 강조
  ※ <i>_i , <b>_i : <i>(이탤릭체), <b>(볼드체)는 각각 위의 태그들과 모양만 같고 강조의 의미가 없다는 것이 차이점이다.
• <abbr>_i : 생략어 ex) <abbr title="World Health Organization">WHO</abbr>
• <del>_i/b : 삭제글(취소선) ex) 올 때 메로나
• <ins>_i/b : 추가글(밑줄) ex) 올 때 메로나 바밤바
  ※ <ins>, <del>요소는 상황에 따라 block요소도, inline요소도 될 수 있다.
• <sup>_i : 윗첨자 ex) m2
• <sub>_i : 아래첨자 ex) CO2

이미지(Images)

이미지 : <img />_i

<img /> : 웹 문서에 이미지를 불러오는 요소

<img src="이미지파일명" width="가로길이" height="세로길이" alt="대체텍스트" />

※ 같은 <img>태그를 각각<h1>과 <p>에 넣었을 때, 정상적으로 작동한다면 두 요소의 차이는 없다. 그러나 만약 통신환경의 문제로 이미지를 불러올 수 없는 상황이 된다면 이미지가 사라지고 alt의 속성값이 각 요소의 사이즈에 따라 다르게 출력된다.

이미지 맵(Image map) : <map>_i

<map> : 이미지 맵은 하나의 이미지에 여러 개의 링크를 적용할 수 있다.

<img src="이미지파일명" alt="대체텍스트" usemap="#맵이름" />
<map id="맵이름" name="맵이름">
  <area shape="rect(사각형),circle(원),poly(다각형)," coords="맵좌표" href="url" alt="대체 텍스트" />
</map>

링크(Link) : <a>_i

<a> : 텍스트나 이미지를 통하여 다를 곳으로 정보를 연결해 주는 역할

<a href="url">텍스트 또는 이미지</a>

• <a>요소 안의 텍스트나 이미지 또는 연결된 정보에 대한 부연 설명은 title 속성으로 할 수 있다.
• target 속성의 "_blank"는 연결된 정보 페이지를 새 창에 띄운다.

리스트(List) : <ol>,<ul>,<li>_b

일반적으로 목록을 작성할 때 쓰이며 목록의 종류에는 순차적 목록 ol(Order List), 비순차적 목록 ul(Unorder List), 정의형 목록 dl(Dedinition List)이 있다.

ol(Order List)

순차적인 목록을 작성할 때 사용됨

<h5>신입직원 채용절차</h5>
<ol>
  <li>입사지원</li>
  <li>서류전형</li>
  <li>1차면접</li>
  <li>적성검사</li>
  <li>최종면접</li>
</ol>

이를 출력하면,

신입직원 채용절차

1. 입사지원
2. 서류전형
3. 1차면접
4. 적성검사
5. 최종면접

와 같다.

• 순차적 목록 <ol>은 항목 앞에 번호가 부여됨.
• <ol> 요소는 block요소이며 <li>요소 이외의 다른 요소는 포함할 수 없다. <li>요소는 block요소이며 텍스트, inline요소, block요소를 포함할 수 있다.

ul(Unorder List)

비순차적 목록은 웹 문서의 주요 메뉴 등을 마크업할 때 가장 많이 쓰는 요소 중의 하나

<h5>주메뉴</h5>
<ul>
  <li><a href="#">기업소개</a></li>
  <li><a href="#">사업영역</a></li>
  <li><a href="#">제품소개</a></li>
  <li><a href="#">고객센터</a></li>
  <li><a href="#">홍보자료실</a></li>
  <li><a href="#">인재채용</a></li>
</ul>

이를 출력하면,

주메뉴

• 기업소개
• 사업영역
• 제품소개
• 고객센터
• 홍보자료실
• 인재채용

와 같다.

• 순차적 목록 <ol>은 항목의 순서가 바뀌기 어려운 반면, 비순차적 목록<ul>의 항목은 순서에 크게 상관 없다.
• <ul>은 block요소이며 <li>요소 이외의 다른 요소를 포함할 수 없다. <li>요소는 block요소이며 텍스트, inline요소, block요소를 포함할 수 있다.

dl(Definition List)

순차적 목록과 비순차적 목록은 항목들을 나열하는 데 비해 정의형 목록 <dl>은 '이것은 무엇이다'처럼 정의내리고자 하는 용어에 대한 정의 리스트

<dl><dt>용어</dt><dd>용어 정의</dd><dl>

<dl>
  <dt>웹 표준 수업과목</dt>
  <dd>XHTML</dd>
  <dd>HTML5</dd>
  <dd>CSS</dd>
  <dd>CSS3</dd>
  <dd>Javascript</dd>
  <dd>jQuery</dd>
</dl>

이를 출력하면,

웹 표준 수업과목 XHTML HTML5 CSS CSS3 Javascript jQuery

와 같다.

• <dd>요소 항목들이 들여쓰기 되어 출력되는 것을 확인할 수 있다.
• <dl>요소는 block요소이며 <dt>요소와 <dd>요소 이외의 다른 요소는 포함할 수 없다.
• <dt>요소는 inline요소이며 텍스트와 inline요소를 포함할 수 있다.
• <dd>요소는 block요소이며 텍스트와 inline요소, block요소를 포함할 수 있다.

그룹핑(Grouping)

그룹핑 요소에는 <div>요소와 <span>요소가 있다.
<div>_b : block요소들을 그룹핑하는 데에 사용
<span>_i : inline요소들을 그룹핑하는 데에 사용

<h5>div 요소</h5>
<div id="footer">
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">회사소개</a></li>
  </ul>
  <address>COPYRIGHT &copy; Jay. All Rights Reserved</address>
</div>
<br />
<h5>span 요소</h5>
<ul>
  <li>
    <span>
      <strong>
        <a href="#">
          오늘의 book
        </a>
      </strong>
      <br />
      <em>
        <a href="#">
          HTML5와 CSS3
        </a>
      </em>
    </span>
  </li>
</ul>

이를 출력하면 다음과 같다.

div 요소

span 요소

• 오늘의 book
  HTML5와 CSS3

위를 보면 <di>요소 안에 블록 요소인 <ul>요소와 <address>요소가 포함되어 있는 것을 알 수 있다.
요소들 중에 문서의 꼬리말의 의미를 가진 요소는 없다. 그래서 <div>요소 안에 id 속성값 'footer'를 주어 의미를 부여한 것이다. 그렇다고 <di>요소가 실제 footer의 의미를 갖는 것은 아니다.

<span>요소의 경우 인라인 요소인 <strong>요소와 <em>요소를 포함하고 있다.