Web/WEB기본

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

saltdoll 2021. 2. 19. 08:16
반응형

 

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를 익혀보자

이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누

studiomeal.com

 

반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)