본문 바로가기

개발공부/궁금증아카이브

[CSS]display 속성 : inline, block, inline-block

CSS에서 display속성은 HTML요소가 웹 페이지에서 레이아웃이나 렌더링 측면에서 동작하는 방식을 제어하는 데 사용된다.
HTML요소에 사용되는 박스 모델을 지정한다.

  1. inline : 엘리먼트가 inline 엘리먼트처럼 동작하도록 만든다.
    새줄을 강제로 작성하지 않으며 필요한 만큼만 너비를 차지한다.
    인라인 엘리먼트의 예시로는 <span>, <a>가 있다.
    width, height와 같은 크기 속성이 적용되지 않는다.

  2. block : 엘리먼트가 block 엘리먼트처럼 동작하도록 만든다.
    새줄에서 시작하여 사용가능한 전체 너비를 차지한다.
    블록 엘리먼트의 예시로는 <div>, <p>가 있다.
    기본적으로 너비를 가득 채우기 때문에 width 속성이나 margin, paddinge등의 박스 모델 속성을 사용하여 조절할 수 있다.

  3. inline-block : 'inline'과 'block'의 특성을 결합한다.
    엘리먼트는 인라인 요소처럼 흐르지만 내부컨텐츠에 대해 너비, 높이, 여백(margin), 패딩을 블록 엘리먼트처럼 설정할 수 있다.
    다른 인라인 엘리먼트는 여전히 존중되며 명시적으로 설정하지 않는 한 새 줄에서 시작되지 않는다.
    레이아웃을 구성하는데 유용하며, 가로로 배치되는 엘리먼트 그룹을 만들 때 많이 사용된다.