Orchemi

Orchemi

I start where others stop.

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

작성:    

업데이트:

카테고리:

태그: , ,

display 속성

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

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

  1. 줄 바꿈 현상 유무
  2. width와 height 속성 적용 유무
  3. 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;
}

댓글남기기

참고