이다닷

[Frontend Study] Day 6 - Display 속성 본문

Frontend Study

[Frontend Study] Day 6 - Display 속성

이다닷 2024. 3. 19. 18:00

display 속성이란 요소 크기를 어떻게 결정 할건가를 결정하는 속성이다.

 

display 속성

 

display 속성값의 종류

  • none
  • block
  • inline
  • inline-block
 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="none_div">None</div>
    <div class="block_div">Block</div>
    <div class="inline_div">Inline</div>
    <div class="inline-block_div">Inline-block</div>
  </body>
</html>
 

 

 

 
body div {
  font-size: large;
  margin-bottom: 50px;
}

.none_div {
  display: none;
  background-color: #000000;
}

.block_div {
  display: block;
  background-color: aqua;
}

.inline_div {
  display: inline;
  width: 500px;
  background-color: chartreuse;
}

.inline-block_div {
  display: inline-block;
  width: 500px;
  background-color: gold;
}
 

 

 

 

display: none;

 - 화면에서 사라진다.

 

display: block;

 - div의 기본값

 - width가 자신의 컨테이너의 100%가 되게끔한다. 즉, 가로 한 줄을 다 차지한다.

 

display: inline;

 - 컨텐츠를 딱 맞게 감싸준다.

 - bolck 태그와 다르게 줄바꿈이 되지 않고, 반드시 컨텐츠를 감싸게 된고, 크기 변화가 불가능하다. 

 

display: inline-block;

 - inline와 block의 특성을 합쳐놓은 속성

 - 따라서 임의로 크기를 바꿀 수 있다.

 

 

저작자표시

'Frontend Study' 카테고리의 다른 글

[Frontend Study] Day 8 - JavaScript Event loop  (2) 2024.04.01
[Frontend study] Day 7 - 시멘틱 마크업  (0) 2024.03.27
[Frontend Study] Day 5 - position 속성  (0) 2024.03.17
[Frontend study] Day 4 - margin과 padding  (0) 2024.03.13
[Frontend study] Day 3 - ES6란?  (0) 2024.03.12
'Frontend Study' Related Articles more