[44-4 HTML] Block, Inline, Inline-Block, grid, None, visibility:hidden

CSS display 속성

 

아래의 그림에서 상단 구름은 파랑 상자의 범위가 이미지 영역에만 국한하지만

찰나의 순간이 영원이 되기를 이라는 h2 요소는, 파랑상자의 범위가 화면 끝까지 이어진다.

이렇듯 HTML에서 display되는 상자의 크기는

HTML 요소마다 다른 규칙(속성)으로 적용되는데,

 

CSS display 속성은 4가지가 있다.

Block, Inline, Inline-Block, None

 

1) Block 

블록은 상자크기의 기본값을 block display(화면 폭 전체)로 둔다.

이렇게 화면 전체를 블록(block=상자)으로 지정하는 이유는, 

다른 요소가 이 요소의 옆에 나란히 오지 못하도록 막은 것이다.

반면, 유연하게 상자의 폭(width)를 줄이고 늘릴 수 있다는 장점이 있다.

CSS에서 display 속성 값을 block으로 주면,

기본값이 다른 것도 block값으로 바뀐다.

 

- block display를 기본값으로 하는 요소

<p>, <h1>~<h6>, <div>, <ol>, <ul>, <li>, <form>

 

 

2) inline

인라인은 박스를 '필요한 만큼'의 크기로 둔다. 

또 inline이라는 뜻 자체가 줄을 세운다라는 뜻처럼,

양 옆으로 다른 요소가 오는 것을 허용한다.

반면, 상자 폭의 크기를 조절할 수 없다는 한계가 있다.

 

CSS에서 display 속성 값을 inline으로 주면, 

기본값이 block이었던 것도 inline 값으로 바뀐다.

- inline display를 기본값으로 하는 요소

<span>, <img>, <a>

 

 

3) inline-block

인라인 블록은 같은 라인을 다른 요소와 점유하면서, 폭도 조절할 수 있다.

블록과 인라인의 장점을 혼합한 것이다.

 

4) grid

화면 구성, 배치를 직관적으로 할 수 있다. 

grid_container라는 블럭에 1~9까지의 블럭이 들어 있다. 

이 블럭들을 배치해보도록 하겠다. 

grid_template-columns: 

grid_template-rows:

칼럼/로우의 간격을 조절한다. auto를 하면 전체 가로 화면 비율에 맞게 자동 조절된다.

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 100px auto 10px auto;
  gap: 50px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

https://www.w3schools.com/css/css_grid_container.asp

 

5) none

아무것도 표시하지 않는다. 즉 요소를 제거하는 것이다.

완전히 흔적도 없이 사라진다.

<기본>

<display:none;>

 

 

5. visibility: hidden;

만약 그저 감추고마나 싶을 때,

즉 그것이 있었던 자리, 흔적은 남기고 내용은 보이지 않게 만들고 싶다면

다른 속성을 쓰면 된다.