[CSS] display: 속성으로 여러개의 li 한줄로 표시하기(메뉴 버튼 처럼)

 

display Property (속성)

 display  속성은 요소를 어떻게 보여줄지를 결정하는 속성입니다.

4가지 속성 값을 많이 사용합니다. HTML element 요소(태그)마다 기본값이 다릅니다.

•  none : 보이지 않음
•  block : 블록박스
•  inline : 인라인 박스
•  inline-block : block과 inline의 중간 형태

그 외도 다양한 속성 값들이 있습니다.

• contents 
• flex : 요소들을 블록 박스 단위로 쌓아서 정렬한다. (한쪽방향으로만 정렬)
• grid : 요소들을 블록박스 단위로 격자 모양으로 정렬한다. (좌우, 상하 2차원 정렬)
• inlin-block
• inline-flex
• inline-grid
• inlin-table
• run-in
• table : 요소를 <table>처럼 처리합니다.
• table-caption
• table-column-group
• table-header-group
• table-row-group
• table-cell
• table-column
• table-row
• initial
• inherit

 

 

속성 값  none 은 렌더링을 하지 않습니다.  visibility 속성을  hidden으로 설정하는 것과 다르게, 영역도 차지하지 않습니다.

 

 

<style type="text/css">

div, span, li { border: solid 1px red; padding:5px; }

 

 span {
  display: block;
 }

 li {
display: inline;
 }

div {
   display: inline;
 }
</style>

 

 

Span : 블록형으로 표시

<span>span1</span>

 <span>span2</span>

 <span>span3</span>

한줄을 사용하는 display:block값

 

ul : 한 라인으로 표시 

<ul>

  <li>li1</li>

  <li>li2</li>

  <li>li3</li>

 </ul>

작은 속성으로 변경

 

 Div : 한 라인으로 표시

 <div>div1</div>

 <div>dIv2</div>

 <div>div3</div>

inline값으로 박스 형태로 변경

 

disapy:none과 visibility:hidden의 차이

<div><div style="display:none">display:none</div></div>
<div><div style="visibility:hidden">visibility:hidden</div></div>

display:none은 랜더링 처리를 하지 않습니다.

visibility:hidden은 랜더링되면 눈에만 안보임

 

 

참고: www.w3schools.com/cssref/pr_class_display.asp

추가 참조: 이번에야말로 CSS Flex를 익혀보자

이번에야말로 CSS Flex를 익혀보자