이미지 보기

[CSS] 레이아웃에 영향을 주는 CSS 속성 'display'

21.07.06 작성

22.02.07 수정

읽는 데 2분

display 속성

Block 요소와 Inline 요소를 변경할 때 사용

< Block 요소와 Inline 요소와의 차이>

줄 바꿈 현상 유무

width와 height 속성 적용 유무

margin-top/bottom, padding-top/bottom 속성 적용 유무

Inline 요소인 <span> 태그의 특징을 알아보자.

Inline 요소(가로 정렬) 이므로 줄 바꿈 현상이 나타나지 않음
width, height, margin-top, margin-bottom 속성이 적용되지 않음

*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>display 속성값의 활용</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <span>Inline -> Block</span>
    <span>Inline -> Block</span>
  </body>
</html>

* css 파일 span {
  width: 300px;
  height: 300px;
  background-color: yellow;
  margin-bottom: 100px;
}

위의 속성들 중 background-color: yellow; 만 span에 적용된다.
위의 속성값을 부여하기 위해 display: block; 속성값을 추가하여 Inline 요소를 Block 요소로 바꿔보자.

* css 파일 span {
  display: block;
  width: 300px;
  height: 300px;
  background-color: yellow;
  margin-bottom: 100px;
}

Inline 요소(ex. span)를 Block 요소로 바꾸었듯이, Block 요소(ex. h1)를 Block 요소로 바꿀 수 있다.

만약 가로 정렬이지만 width/height, margin 등의 속성을 적용하고 싶다면?

display: inline-block 을 이용하자.

*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>inline-block 속성값의 활용</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <h2>Inline + Block</h2>
    <h2>Inline + Block</h2>
  </body>
</html>

* css 파일 h2 {
  display: inline-block;
  width: 300px;
  height: 300px;
  background-color: yellow;
  margin-bottom: 100px;
}

FE Developer 박승훈

노력하는 자는 즐기는 자를 이길 수 없다

Github

[CSS] 레이아웃에 영향을 주는 CSS 속성 'display'

TOC

display 속성