[CSS] display 속성

https://webcoding.tistory.com/entry/CSS-display-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

block 속성

 

항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지 합니다.

 

<span>span1</span>
<span id=name>span2</span>
<span>span3</span>

 

span {
  background-color: #888888;
  display: block;
}
#name {
  background-color: #aa4477;
  width: 100px;
  height: 100px;
}

보시다 시피 다들 한따까리식 하고 있습니다.

 

무서운 속성이네요 ㄷㄷ 

 

Inline 속성

새로운 라인에서 시작 하지 않으면 다른 요소들과 같은 줄에 배치될 수 있고 content의 너비만큼의 영역을

차지 합니다.

 

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

li {
  display: inline;
}

 

li는 월레 디폴드 값이 block인 태그입니다.

 

display:inline을 안쓰면 

 

one

two

three

 

이렇게 출력 됩니다.

 

inline-block 

 

block 요소와 inline 레벨 요소의 특징을 모두 가지고 있는 요소입니다.

 

한 줄에서 inline 요소와같이 배치될 수 있으면 width와 hight속성으로 영역의 크기를 지정 할 수 있습니다.

 

<span>one</span>
<li>two</li>
<span>three</span>

li {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #787878;
}

span {
  background-color: #339944;
}

 

none

 

선택한 요소를 화면에 나타나지 않게 합니다.

특이점은 영역까지 없어집니다.

 

<h1>none</h1>
<h1 class="none">This is a hidden heading</h1>
<h1>none</h1>

<h1>hidden</h1>
<h1 class="hidden">This is a hidden heading</h1>
<h1>hidden</h1>

h1.none {
  display: none;
}

h1.hidden {
  visibility: hidden;
}