HTML5도 엄연히 하나의 문서입니다. 당연히 이 문서 안에는 글도 들어갈 수 있고 그림도 들어갈 수 있습니다.
글과 그림은 일반 워드프로세서의 문서처럼 나열되면서 흐르게 됩니다. 그러나 일반 워드프로세서와 다른 점이 있습니다.
그것은 바로 HTML문서에는 블록레벨(block level)요소와 인라인(inline)요소라고 하는 두 개의 큰 흐름의 줄기가 있다는 겁니다.
블록레벨 요소
<div>나 <p>,<h1>과 같은 요소들은 블록레벨 요소입니다. 블록레벨 요소의 특징은 줄 바꿈 태그인 <br>과 같은 요소를
쓰지 않아도 스스로 줄 바꿈이 된다는데 있습니다. 이 요소들은 기본적으로 문서 내에서 가로로 흐르지 않고 세로로 흐릅니다.
그리고 주변에 일정량의 공간을 만듭니다. 또한 너비를 지정해 주지 않으면 풀사이가 되어 가로로 가득 찹니다. CSS를
적용하지 않고 이 요소들을 브라우저에서 확인해 보면 세로로 쭉 나열되는 것을 볼 수 있습니다. 블록레벨 요소는
가로, 세로 일정량의 여백을 가지고 있는데 이것은 브라우저마다 조금씩 다릅니다.
<h1>블록레벨 요소</h1>
<p>블록 레벨 요소는 BR태그 없이도 기본적으로 세로로 요소가 정렬됩니다.</p>
<div>너비는 풀사이즈, 그리고 위아래에 약간의 여백도 자동으로 붙고요...</div>
<블록레벨 요소의 예>
인라인 요소
<img>, <span>, <strong>과 같은 요소들은 인라인 요소입니다.
이 요소들의 특징은 줄 바꿈 태그를 사용하지 않거나 블록레벨 태그 안에 단독으로 포함하지 않는 한 가로로 쭉 나열된다는 데 있습
니다. 그리고 이 요소들의 주변에는 공간이 생기지 않습니다.
문법적으로는 인라인 요소 안에 블록레벨 요소가 들어가면 안됩니다. 블록레벨 요소 안에 인ㄹ아ㅣㄴ 요소가 포함되록 마크업해야
문법을 바르게 준수 할 수 있게 됩니다.
<span>인라인 요소 : </span>
<strong>가로</strong>쭉 나열됩니다. 물론 너비는 딱 자기가 가진 만큼만 가지고요.
<블록레벨 요소의 예>
블록레벨 태그 안에는 인라인 레벨 태그가 들어갈 수 있습니다. 아니 들어가야만 하는 경우가 많습니다.
그러나 문법적으로 인라인 레벨 태그는 블록레벨 태그를 담을 수 없습니다.
<블록레벨 태그와 인라인 레벨 태그를 쉽게 이해할 수 있는 구조도>
인라인 레벨 태그는 기본적으로 옆으로 흐릅니다. 블록레벨 태그는 아래로 흐릅니다.
너비 또한 화면 전체를 차지합니다.
자 그러면 도대체 언제 어떤 태그를 사용해야 할까요?
특정단어를 강조하고 싶을때는 <b>태그보다 <strong>태그를 사용하는 것이 좋습니다. 외관상으로는 두 태그 모두
텍스트를 굵게 보이게 하여 강조해 주지만, <b>태그는 단지 굵게 만들어 줄 뿐 강조하는 아무 의미가 없는 태그입니다.
반면에 <strong>태그는 외형적으로도 텍스트를 굵게 해주고 실제로 의미있는 텍스트라고 강조해 주는 역할도 합니다.
웹사이트의 메뉴나 목록형태의 콘텐츠를 만들 때는 <ul>과 <li>태그를 조합합니다.
만약에 사이트의 이용약관과 같이 목록 앞에 일정한 숫자를 순차적으로 붙이고 싶을 때는 <ol>, <li> 를 이용하면
관리하기도 쉬운 훨씬 의미 있는 마크업이 됩니다.
<span>이나 <mark>와 같은 태그는 특정한 부분에 별다른 의미를 부여하지 않아도 시각적으로 무언가 효과를
주고 싶을 때 사용합니다. <span>으로 감싸고 CSS로 접근을 하여 스타일링을 하면 되겠습니다.
이 밖에도 주로 레이아웃을 짜거나 박스를 만들 때는 <div>를 많이 사용했는데, HTML5에서는 이것이 조금 더 세분화 되었습니다.
부분별로 <header>, <footer>, <section>과 같은 태그를 사용하면 됩니다.
<앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS3> 에서 발췌
'0x01 Programming > 0x013 HTML5&CSS3' 카테고리의 다른 글
# CSS의 특수 선택자 (0) | 2012.09.19 |
---|---|
# HTML문서에 CSS를 적용하는 세가지 방법 (0) | 2012.09.18 |
#HTML5의 새로운 요소(hgroup,article,section) (0) | 2012.08.27 |
#CSS3 배경지식 쌓기 (0) | 2012.08.25 |
#HTML5 문서계층 구조 (0) | 2012.08.25 |