[CSS] display에 대하여

 

# inline

- 전후 줄바꿈없이 한 줄에 다른 엘리먼트들과 나란히 배치

- 대표 lnline 엘리먼트 : <span>, <a>, <em>태그 등

 

여러 개의 inline 엘리먼트들을 아래와 같이 마크업하면, 줄바꿈없이 순서대로 한 줄에 보이게 된다.

See the Pen display:inline by Ria (@riaoh) on CodePen.

 

- width, height 속성 : 무시

→ 해당 태그가 마크업하고있는 컨텐츠의 크기만큼만 공간을 차지하도록 되어 있기 때문

- margin, padding 속성 : '좌우'간격만 반영 O. 상하 간격은 반영 X.

 

*inline요소는 안에 내용이 있어야 화면에 표시된다.

See the Pen Untitled by Ria (@riaoh) on CodePen.

 

<span>, <a>, <em>태그 모두 CSS로 꾸몄음에도 불구하고 화면에 나오지 않고 있다.

 

 

# block

- 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지

- 대표 block 엘리먼트 : <div>, <p>, <h1> 태그 등

- width, height, margin, padding 속성 : 모두 반영

See the Pen display:block by Ria (@riaoh) on CodePen.

 

 

# inline-block

- inline 요소처럼 전후 줄바꿈없이 한 줄에 다른 엘리먼트들과 나란히 배치

- 하지만, block 요소처럼 width, height, margin, padding 속성의 좌우상하 간격 지정 모두 가능

- block 엘리먼트의 규칙(내부적) + inline 엘리먼트 규칙(외부적)

- 대표 inline-block 엘리먼트 : <button>, <input>, <select> 태그 등

See the Pen display:inline-block by Ria (@riaoh) on CodePen.

 

 

 

 

# display 속성값 변경

- HTML 태그별로 기본적으로 적용되어 있는 display 속성값은 원하는 값으로 CSS를 이용하여 자유롭게 변경이 가능.

ex) inline요소도 display:block값으로 block요소로 만들 수 있다.

See the Pen display:inline->block by Ria (@riaoh) on CodePen.

 

 

 

**참고사이트 : https://www.daleseo.com/css-display-inline-block/

CSS의 display 속성: inline, block, inline-block