HTML 태그의 기본 속성을 변경하는 CSS display 옵션

기본적으로 HTML의 태그에는 고유 속성이 있습니다. 이 부분에 대해서는 이미 한 차례 자세히 언급을 한 글이 있으니 아래의 내용을 한번 더 확실히 이해하시는것이 도움이 될 것입니다.

 

HTML 태그 기본 분류 - 블록요소 인라인요소

HTML 태그 기본 분류 - 블록요소 인라인요소

위의 글에도 나와있듯 태그(Tag)에는 고유 속성이 있는데 그 속성에 따라 블록요소, 인라인요소, 인라인-블록요소 이렇게 3가지의 요소로 나뉩니다. 각 요소마다 가지는 특징을 정확히 이해한다면 HTML+CSS의 절반은 이해했다고 보시면 됩니다. 진짜 너무나 중요한 부분이라 반드시 이해를 해야 합니다. 그래야 CSS에서 떡주무르듯 제어를 할 수 있게 됩니다.

 

CSS : display

혹시 티스토리에 사용된 수 많은 태그 중, 각 요소에 적용된 CSS의 여러 스타일 중, display라는 옵션이 적용된 요소를 보신 적 있으십니까? 위에서 언급한 세가지 고유 속성을 바로 이 display 옵션을 통해 자유롭게 원하는 속성으로 변경할 수 있습니다. 예시를 들어보겠습니다.

 

<div>블록요소</div>
<div>블록요소</div>

위에 마크업한 div의 고유 속성은 블록요소의 성격을 가집니다. 블록요소는 크기를 가지고 있으며 세로로 쌓이는 특징이 있습니다. 따라서 위의 HTML 결과를 브라우저에서 확인한다면 블록요소라는 텍스트가 세로로 쌓여있는 모습으로 보여지게 될 것입니다. 그러면 가로로 정렬하려면 이 블록요소의 성격을 변경해주면 될 것 같습니다. 따라서 CSS에서 이렇게 제어하면 됩니다.

 

div {
    display: inline;
}

/* 또는 */

div {
    display: inline-block;
}

div의 블록요소 성격을 display 옵션을 통해 인라인 또는 인라인-블록요소로 바꿔주는 것입니다. 인라인요소의 특징은 크기를 갖지 않고 가로로 정렬되는 성격을 가지고 있죠. 그렇기에 display 스타일을 사용해서 각 요소의 속성을 자유롭게 변형해 사용할 수 있습니다.

 

각 태그에는 이 display 옵션이 기본적으로 들어가있지만 생략되어있다고 생각하시면 됩니다. 예를 들어서 위에 언급한 div 태그에는 display: block; 옵션이 생략되어 있는 것이고 span 태그는 display: inline;이 생략되었으며 img 태그는 display: inline-block; 옵션이 생략된 것입니다.

 

현재 친효스킨에서는 display 옵션이 제법 많이 활용되고 있습니다. 가상요소인 ::before나 ::after에도 사용되고있고 사이드바의 a태그에도 사용 중입니다. 주로 display: block; 옵션을 쓰고 있죠. 블록요소의 쓰임새는 생각보다 많습니다. 개인적으로는 a 태그를 블록요소로 사용하는 이유가 마우스 호버 때문인데 빈 공간에 마우스를 올려도 작동 되도록 하기 위해서 사용 중이죠. 이건 말로 설명하기가 참 어렵네요. 아무튼 본문에서는 CSS의 display 옵션으로 각 태그의 고유 속성을 자유자재로 변경할 수 있다는 점만 명확히 알고 넘어가시면 되겠습니다. 끝.