CSS - display 속성

누리·2022년 9월 20일
0

HTML CSS

목록 보기
3/4

CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다.

1. inline

display 속성이 inline 으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
대표적인 인라인 엘리먼트로 <span> <a> <em> 태그 등을 들 수 있다.

inline 속성의 특징

  • 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지한다
    >> width height 속성을 무시해도된다

  • margin padding 속성은 좌우 간격만 반영되고 상하 간격은 반영되지 않는다

2. block

display 속성이 block 으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.
대표적인 block 엘리먼트로 <div> <p> <h1> 태그 등을 들 수 있습니다.

block 속성의 특징

  • 해당 태그가 마크업하고 있는 컨텐트는 디폴트값으로 화면 가로길이 전체의 공간을 차지한다.

  • width height margin padding 속성 모두 반영할 수 있다.

3. inline-block

display 속성이 inline-block 으로 지정된 엘리먼트는 inline 속성과 block 속성을 모두 가지고 있다.
대표적인 inline-block 엘리먼트로 <button> <input> <select> 태그 등을 들 수 있습니다.

inline-block 속성의 특징

  • 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되면서
  • block 엘리먼트처럼 width height 속성 지정 및 margin padding 속성의 상하 간격 지정이 가능하다

inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다.
그러나 내부 스타일이 지정되어 있기 때문에 기본 margin 값을 가져 요소간에 간격이 있기때문에 요소간 간격 조정시 약간의 오차가 생길수 있다.
정확한 레이아웃을 위해서는 block 요소를 flex속성을 이용해 레이아웃 하는게 좋아 보인다.

profile
프론트엔드 개발자

0개의 댓글