[css 속성] display (block, inline, inline-block, table)

2020. 3. 6. 14:40

css 속성들 모든 것들이 다 중요하겠지만

특히나 전체적인 레이아웃을 이해하고 잡아나갈 때 중요한 것이

display 라는 속성이다.

이전에 따로 포스팅한 적이 있는 인라인, 블록 요소도

이 display 속성과 관련된 내용이다.

기본적으로 블록 요소의 특성을 가진 태그들은 (ex. div, p, h1~h6, ul, li...)

display:block의 속성을 기본 값으로 갖고있고

인라인 요소의 특성을 가진 태그들은 (ex. a, span, strong, em...)

display:inline의 속성을 기본 값으로 갖는다.

1. display 속성 값 (block, inline)

가장 기본적으로 사용되는 속성 값으로는

block, inline 속성이 있다.

html의 특성상 기본으로 가지고 있는 특성을

css에서 display라는 속성을 이용해 바꾸고 레이아웃을 잡아나갈 수 있다.

예를들어,

a태그를 가지고 사각형의 도형을 만들려할 때,

<style>
   a{width:50px; height:50px; background:#999;}
</style>

<body>
   <a href="#">test1</a>
</body>

위와 같은 소스를 작성하게 되면 아래와 같은 형태로 출력이 될 것이다.

그 이유는 a태그는 기본적으로 display:inline의 특성을 갖고 있기 때문에

inline은 width, height 값을 적용할 수 없기 때문에

width, height 값을 주기 위해서는 a태그의 display 속성을 변경해줘야한다.

<style>
   a{display:block; width:50px; height:50px; background:#999;}
</style>

<body>
   <a href="#">test1</a>
</body>

위의 소스 같이 a태그에 display:block 값을 적용하니

아래의 형태로 제대로 출력 되는 것을 볼 수 있다.

inline, block에 대한 좀 더 자세한 내용은 아래의 링크에서 확인할 수 있다.

2020/02/11 - [HTML] - HTML inline(인라인) vs block(블록) 요소

HTML inline(인라인) vs block(블록) 요소

HTML의 태그 요소는 HTML5 이전에 inline(인라인) 요소와 block(블록) 요소로 구분 되어왔다. HTML5에 들어서는 태그들을 단순히 인라인, 블록으로 구분하는 것이 아닌 Contents Model(컨텐츠 모델)로 각 태그별..

abcdqbbq.tistory.com

2. display 속성 값 (inline-block)

inline-block은 말 그래도 inline 속성 + block 속성을 더한 값이라고 생각할 수 있다.

inline 처럼 한 줄로 나열이 되면서

block 처럼 width나 height, margin, padding 등의 값을 줄 수 있다.

<style>
   a{display:inline-block; margin-right:5px; width:50px; height:50px; background:#999;}
</style>

<body>
   <a href="#">test1</a>
   <a href="#">test2</a>
   <a href="#">test3</a>
   <a href="#">test4</a>
</body>

위의 코드 작성시 아래의 화면처럼 출력 된다.

width, height, margin 값을 다 주면서도 일렬로 나열되는 모습을 볼 수 있다.

3. display 속성 값 (table)

table 태그를 사용하지 않아도

div나 다른 태그에 table의 속성을 부여해 table 태그처럼 사용할 수 있다.

<style>
   .div_table{display:table; border-collapse:collapse; width:400px; table-layout:fixed;}
   .div_table_row{display:table-row;}
   .div_table_cell{display:table-cell; border:1px solid #333; background:skyblue; color:#fff;}
</style>
<body>
   <div class="div_table">
      <div class="div_table_row">
         <div class="div_table_cell">table-cell1</div>
         <div class="div_table_cell">table-cell2</div>
      </div>
   </div>
</body>

위의 코드같이 작성을 하면 아래와 같은 형태로 출력이 된다.

display:table을 사용해서 .div_table 클래스를 table태그와 같게 만들고

display:table-row를 사용해서 .div_table_row 클래스를 tr태그와 같게 만들고

display:table-cell을 사용해서 .div_table_cell 클래스를 td태그와 같게 만들어서

table태그를 사용하지 않고 table 형태를 만들 수 있다.

* table 관련 display 속성

속성	설명
table	<table> 태그의 역할로 사용
table-caption	<caption> 태그의 역할로 사용
table-column-group	<colgroup> 태그의 역할로 사용
table-header-group	<thead> 태그의 역할로 사용
table-footer-group	<tfoot> 태그의 역할로 사용
table-row-group	<tbody> 태그의 역할로 사용
table-cell	<td> 태그의 역할로 사용
table-column	<col> 태그의 역할로 사용
table-row	<tr> 태그의 역할로 사용

4. 그 밖의 display 속성 값

flex(유동적 레이아웃), grid(그리드 레이아웃), list-item(li와 같이 리스트 표현) 등의 속성이 있다.

저작자표시

'Frontend > CSS' 카테고리의 다른 글

[css 속성] float (float 해제, clear) (0)	2020.03.24
[css 속성] position (static, relative, absolue, fixed) (0)	2020.03.23
가상 클래스 vs 가상 요소 (0)	2020.03.06
CSS 우선순위 (0)	2020.03.04
CSS 적용을 위한 또 다른 방법, @import (0)	2020.03.03

About Web