[왕초보 HTML5] 무작정 따라하기 2. 인라인 요소? 블록 요소?

안녕하세요.

HTML5 무작정 따라하기 2탄 가장 많이 쓰이는 태그 몇가지를 소개 해드릴까 합니다.

(사실 모든 태그에 대해서 설명하고 싶었으나 제가 안써본것도 있고 잘못된 정보를 전달할까봐..)

설명하기 전. 태그의 요소에 대해서 설명드리겠습니다.

인라인 요소(inline)  블록 요소 (block) 으로 이루어져 있습니다.

두가지의 큰 차이점이라고 하면 일단.

인라인요소

- 인라인요소는 height , width 등이 적용되지 않습니다. 

- 세로정렬(vertical-align) , 글자 정렬 (text-align) 등이 적용되지않는다.

대표적인 인라인요소인 span 태그로 예를 들어볼까요?

(보시면. CSS  문법이 적혀있어서 테두리가 쳐져있는겁니다. 설명용이니 넘어가셔 됩니다.)

Result 탭을 눌러보시면.  왕초보 HTML5 따라하기 2편   

이렇게 되어 있죠? 

인라인 요소들은 쓰고. 바로뒤에 다음 인라인요소들이 붙는 습성을 가지고 있습니다. 

블록요소

- 블록요소는 가로폭 전체의 넓이를 가지는 직사각형 모양이 됩니다. 

- 인라인 요소랑은다르게 height,width,vertical-align 등등 넓이 또는 길이속성 정렬속성 이 모두 가능합니다.

대표적인 블록요소인 div 태그로 예를 들어볼까요? 

보시는거와 같이 한줄 한줄 문서의 가로 끝까지 쭈욱 커지면서 블록 처럼 쌓이는게 보이시나요?

여기서 짚고 넘어가야 할점.  ! (무조건 알아둡시다 이내용만 이번에 건져서 가져가도 이득! 개이득!)

블록요소들은. 다른 블록요소와 인라인요소들을 포함시킬수있다. 

인라인요소들은 블록요소를 포함시키지 못하며 다른인라인 요소들만 포함 시킬수있다.

그리고 이 인라인요소, 블록요소는 CSS로 제어가 가능합니다. 

기본적인 속성만 알고 가자는것이죠. 아는것과 모르는것은 이해도에 대한 상당한 차이가 있습니다.

감사합니다. 다음에는 가장 많이 사용하는 태그에 대하여 설명 드리겠습니다.