html, display 속성 알아보기

display란?

display은 css 레이아웃 속성 중 하나이며 요소를 어떻게 보여줄지 결정한다. 알아둘만한 속성은 6개 정도가 있으며, 태그마다 기본적으로 적용된 속성이 다르다.

 

none

• 요소를 렌더링하지 않도록 설정함
• visibility: hidden으로 설정한 것과 달리, 영역도 차지하지 않음

inline

• 한 줄로 나열됨
• 텍스트의 크기 만큼 영역 차지함 (width, height 설정 불가/ img 는 예외적으로 높이와 너비 설정 가능)
• 줄바꿈되지 않음
• inline 속성인 태그들
  <a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, 
  <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, 
  <q>, <button>, <cite>

block

• 블럭처럼 위에서부터 차곡차곡 쌓이며 줄바꿈 됨
• width는 기본적으로 100%를 차지함 (부모가 있을 경우 부모 너비의 100% 차지)
• 높이는 요소의 높이만큼 차지함 (요소에 아무것도 넣지 않으면 높이가 0이므로 눈에 보이지 않음)
• width, height 설정 가능함
• block 속성인 태그들
  <address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <li>, <ol>, <video>

inline-block

• inline과 block의 특징을 모두 가지고 있음
• 한줄로 나열 (inline) 되고 + width, height 설정 가능함 (block)
• width, height 설정하지 않은 경우 inline처럼 요소 크기 만큼 영역 차지함

flex

• flex는 Container, Items 이렇게 2개의 개념으로 나뉨
  • Container display, flex-flow, justify-content 등의 속성 사용됨
  • Items order, flex, align-self 등의 속성 사용됨
• Items의 flex 속성을 이용하면 자동으로 width 값을 계산하여 레이아웃 구성을 할 수 있음
• 단, 지원 브라우저가 제한적임. 즉, 사용하기 전에 브라우저 사양을 잘 따져봐야 함.

grid

• Flex와 Grid의 가장 큰 차이점은 아래와 같음
  • Flex는 한 방향 레이아웃 시스템이고 (1차원)
  • Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)
• Flex보다 복합적인 레이아웃 표현이 가능
• flex보다 지원 브라우저가 대체로 더 제한적인 편