중립적인 태그인 div, span를 배우고, block 요소와 inline 요소에 대해서 배워보도록 하겠습니다.
div 요소는 의미를 가지고 있지 않습니다. 앞에서 배운 내용은 단락, 표제 태그 등은 하나씩 특정한 의미의 콘텐츠를 담는 요소였는데요, div는 그렇지 않습니다. 중립적인 태그라고도 합니다. div는 생성된 요소를 묶는 역할을 하거나, 기존의 의미를 가진 태그로는 만들 수 없는 요소를 만드는 역할을 합니다.
디자인 상의 이슈가 있을 때 레이아웃을 만드는 역할을 할 수 있고, 계층 구조를 부여할 수도 있습니다. 마크업 문서의 가독성을 향상시킬 수 있고, 또 문서 구조를 파악하기에도 편리합니다.
(참고로, codepen에는 tidy HTML이라는 기능이 있는데요. HTML이 공백 또는 줄바꿈을 무시하기 때문에, 코드를 작성할 때 이런 식으로 들여쓰기를 통해서 계층구조를 손쉽게 파악할 수 있습니다.)
class나 id 속성을 결합하면 포함하는 콘텐트에 특정한 의미를 넣거나 디자인 스타일 또한 쉽게 적용할 수 있습니다.
span 요소는 div와 비슷하게, 콘텐트를 묶어주지만 의미를 가지지 않습니다. 하지만 div가 줄바꿈하지만 span은 줄바꿈을 하지 않는데요.
div는 블록 요소, span을 인라인 요소라고 부릅니다. 블록요소와 인라인 요소의 차이에 대해서 배워봅시다.
블록요소는 다른 블록 요소를 포함할 수 있으며 또 다른 블록 요소 안으로 들어갈 수 있습니다. 인라인 요소는 화면에 출력할 때 줄이 바뀌지 않고 같은 줄에 등장합니다. 다른 인라인 요소를 포함할 수 있으나, 블록요소를 포함할 수는 없습니다.
인라인 요소로는 a, em/strong, span 태그 등이 있습니다. 블록 요소로는 구조를 나타내는 모든 코드들, p나 h1/h2..., ul/ol, li, div 등이 있습니다.
이렇게 block 과 inline으로 레이아웃을 만든 상태를 노멀 플로우라고 부릅니다.
하지만 블록 요소와 inline 요소가 위치하는 방식을 CSS를 통해 변경할 수 있습니다. css의 display 속성을 사용하면 가능합니다.
display: block
=> 줄바꿈이 일어납니다. 양 옆에 다른 요소를 가질 수 없습니다.
display: inline
=> inline 속성으로 생성한 요소는 새 블록을 생성하지 않고 바로 다른 요소 사이에 배치됩니다.
display 속성에는 그 외에도 inline과 block의 속성을 모두 지니는 inline-block, 아예 화면에서 사라지게 할 수 있는 가시성 관련된 값들(hidden 등), 그리고 최신 레이아웃 기법을 적용할 수 있는 flex나 grid 등을 값으로 가질 수 있는데요. 찬찬히 알아보도록 하겠습니다.
다음으로는 기본적으로 텍스트를 꾸밀 수 있는 font 관련 속성과, background 속성에 대해서 배워보도록 하겠습니다.