오늘도 개발

CSS display 이해하기 1 (inline, block, inline-block) 본문

웹 프로그래밍/HTML & CSS

CSS display 이해하기 1 (inline, block, inline-block)

Sueeeeeee 2022. 5. 13. 17:10

0. display란?

CSS의 display 속성은 다음과 같은 일을 할 수 있다.

 

- 가로 공간을 다른 요소와 공유할 것인지 정하기 : inline, block, inline-block

- 자식 요소를 어떻게 배치할지 정하기 : flex(포스트 참조), grid

 

여기서는 가로 공간을 다른 요소와 공유할지 여부를 정하는 값 세 가지

inline, block, inline-block에 대해 알아보자. 

1. Inline

  • 한 줄에 여러 요소 넣을 수 있음
  • 컨텐츠 크기에 맞게 자동으로 박스를 생성하며 height, width 설정해도 못 바꿈.
  • span, strong, a 등의 디폴트 값(디폴트 값이 inline이라도 block을 적용하면 block 요소가 된다)
<head>
<style>
    span {
        background-color: yellow;
        width: 240px; /* 설정해도 소용 없음 */
    }

    div{
        background-color: blue;
        display: inline; /* 디폴트 값을 inline으로 바꿈 */
        width: 240px; /* 이제 설정해도 소용없음 */
    }
</style>
</head>

<body>
<span>I'm span</span>
<div>I'm div displayed as inline element<div>
</body>
</head>

2. Block

  • 한 줄에 한 요소만 넣을 수 있음.
  • 화면 너비 전체를 채우는 게 디폴트지만 width로 조절 가능.
  • p, div, 헤딩 등의 디폴트 값
  • 디폴트 값이 inline인 요소에도 쓸 수 있음.

3. Inline-Block

  • 한 줄에 여러 요소 넣을 수 있음
  • 기본적으로 컨텐츠 크기에 맞게 자동으로 박스를 생성하지만 height, width 설정 가능.
  • img의 디폴트 값

 

참고

MDN Web docs - display

'웹 프로그래밍 > HTML & CSS' 카테고리의 다른 글

CSS display 이해하기 3 (grid)  (0) 2022.05.13
CSS display 이해하기 2 (flex)  (0) 2022.05.13
CSS 박스 모델 이해하기  (0) 2022.05.12
HTML로 웹 접근성을 높이는 방법  (0) 2022.05.12
CSS 선택자 활용하기  (0) 2022.03.15
'웹 프로그래밍/HTML & CSS' Related Articles more