태그들이 자신만의 부피를 차지하는 방식
각 태그 요소들은 화면에서 자기가 차지하는 부피가 있습니다. 물론 부유하는 형태도 있지만 이 글에서는 배제하도록 합시다.
어떤 태그는 화면에서 줄 전체를 차지하는 태그도 있고 (줄 바꿈이 자동으로 되는)
화면에서 자기가 실질적으로 차지하는 자리만큼만 있는 태그도 있습니다. (줄 바꿈이 자동으로 안 되는)
전자는 block element라고 하고 후자는 inline element라고 합니다.
각 태그마다 block인지 inline인지 default 값이 있습니다.
가령 div태그는 block, span태그는 inline이 default입니다.
* 예시 코드
하지만 CSS를 이용하면 이 값을 바꿔줄 수 있습니다.
block element로 바꿔주고 싶으면 display속성 값을 block으로,
inline element로 바꿔주고 싶으면 display속성값을 inline으로 설정해주면 됩니다.
display의 속성값
- none
차지하는 공간이 아예 없습니다.
- block
실질적인 크기와 상관없이 한 줄 전체를 차지합니다. display값이 block인 element의 height값만큼 그 element에게 자리를 내줘야 합니다.
- inline
실질적으로 차지하는 부피만큼만 자리를 차지합니다. 해당 element에게 width값이나 height값을 아무리 지정해도 무시합니다.
- inline-block
이 속성값을 가진 element는 inline인 상태에서 width와 height을 수정할 수 있는 권한이 부여됩니다. 즉, 차지하는 공간을 수정할 수 있습니다.
- table
해당 element를 <table> 태그처럼 쓸 수 있게 만듭니다.
- table-row
해당 element를 <tr> 태그처럼 쓸 수 있게 만듭니다. 조상 태그에 display: table 속성 값이 있어야 합니다.
- table-cell
해당 element를 <td> 태그처럼 쓸 수 있게 만듭니다. 조상 태그에 display: table 속성값이 있어야 합니다.
- flex or grid
display 속성 값으로 flex나 grid를 사용할 수 있습니다. flex나 grid는 여러 부가적인 css속성들을 알면 레이아웃을 편리하게 잡을 수 있게 하는 속성입니다. 사용하면 퍼블리싱을 하기 매우 편리합니다. 그러나 내용이 많으므로 다른 포스팅으로 분할해서 작성해보도록 하겠습니다.
display 속성이 레이아웃에서 기본인 이유?
티스토리 홈페이지를 예를 들어보겠습니다.
티스토리 홈페이지를 만들기 위해 저 이미지에 보이는 부분을 만드려고 합니다. 레이아웃을 잡기 위해서 각 요소들의 display 속성은 어때야 할까요?
맨 위에 나열된 메뉴들 T모양의 점 5개 문양과, 피드, 스토리, 스킨, 등등 가로로 나열되어 있습니다.
즉 저 요소들의 display 속성은 절대 block이 아니란 것이죠. 같은 열에 나열되려면 inline이거나 inline-block이어야 합니다.
자 메뉴를 inline-block을 사용해서 같은 가로 줄에 나열하는 것을 끝냈다고 칩시다.
이제 다음 엘리먼트들을 다음 줄에서 출력하기 위해서 block 속성 값을 사용해보려고 합니다.
저 메뉴들을 통째로 묶은 wrapper 요소를 만들어서 그 요소에 display: block 값을 주면 메뉴가 끝난 다음에 다음 줄로 넘어가게 되겠죠? 이해를 돕기 위해 예시 코드를 보여드리겠습니다.
일단 메뉴의 html 요소는 다음과 같다고 가정합니다.
<ul>
<li>피드</li>
<li>스토리</li>
<li>스킨</li>
<li>포럼</li>
</ul>
다음 엘리먼트
이 리스트를 가로로 나열하고 난 뒤 다음 줄로 넘어가는 것이 우리의 목적입니다.
<style>
li {
display: inline-block; width: 50px;
}
</style>
li요소에 display: inline-block 값을 주면 가로로 쭉 나열이 될 것이고 그 li태그들을 묶어서 감싸는 ul 태그에 display: block 값을 주면 리스트가 끝난 뒤에 다음 줄로 넘어가게 되는 것이죠.
그런데 ul태그는 display: block 이 default 값이기 때문에 따로 코딩해줄 필요가 없습니다. 크롬 개발자 도구에서 elements 탭에 들어가면 확인할 수 있습니다.
최근댓글