본문 바로가기

0x01 Programming/0x013 HTML5&CSS3

#콘텐츠의 흐름, 블록레벨 요소와 인라인 요소

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> 에서 발췌