display 속성

📌Language/HTML & CSS

display 속성

hellohailie 2022. 4. 19. 21:07

display 속성

요소의 렌더링 박스 유형을 결정하는 속성입니다.

기본 값 : - (요소마다 다름)

display: value;

< 속성 값 >

none	요소가 렌더링 되지 않음
inline	inline level 요소처럼 렌더링 / 그 구역만 차지
block	block level 요소처럼 렌더링 / 전체 다 차지
inline-block	inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다. 배치는 inline처럼, box model은 block처럼!

그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재

inline level 요소 사이의 공백과 개행 처리 inline 요소의 경우 공백과 개행에 대해서 하나의 여백으로 받아들입니다. 따라서 inline와 inline-block의 경우 태그 사이의 공백이나 개행이 있을 경우 약 4px의 여백을 가지게 됩니다.

display와 box model의 관계 / 값마다 box model에 모든 속성값이 적용되지는 않는다.

display	width	height	margin	padding	border
block	ㅇ	ㅇ	ㅇ	ㅇ	ㅇ
inline	X	X	좌/우	ㅇ(설명) 좌/우	ㅇ(설명) 좌/우
inline-block	ㅇ	ㅇ	ㅇ	ㅇ	ㅇ

inline 요소의 padding/border 속성이 좌/우 만 적용 된다고 표시한 이유 추가 설명

실제로 inline 요소의 padding/border는 좌/우뿐만 아니라 상/하에도 적용이 됩니다.

parent 는 <div>, child 는 <span> 하지만 상/하 padding/border는 line-box에는 영향을 주지 못하기 때문에 위와 같이 부모 요소의 박스에 반영되지 않습니다.

parent 는 <div>, child 는 <span>
또한 인접한 다른 line-box 에도 반영되지않습니다. 즉 콘텐츠가 겹칠 수 있기 때문에 실무에서는 잘 사용하지 않습니다.
line-box에 대해 궁금하거나 기억이 나지 않으신다면 Chapter06에 line-height 강의를 참고하시면 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>display</title>
  <style>
    body>div {
      padding: 5px;
      border: 1px dashed #aaa;
    }

    .box {
      padding: 15px;
      background-color: #eee;
      border: 1px solid #aaa;
    }

    .none .box {
      display: none;
    }

    .inline .box {
      display: inline;
    }

    .block .box {
      display: block;
    }

    .inline-block .box {
      display: inline-block;
    }

    .list-item .box {
      display: list-item;
    }
  </style>
</head>

<body>
  <h1>display</h1>
  <h2>none</h2>
  <div class="none">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
  </div>
  <h2>inline</h2>
  <div class="inline">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
    <div class="box">box4</div>
    <div class="box">box5</div>
    <div class="box">box6</div>
    <div class="box">box7</div>
    <div class="box">box8</div>
    <div class="box">box9</div>
    <div class="box">box10</div>
  </div>
  <h2>block</h2>
  <div class="block">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
  </div>
  <h2>inline-block</h2>
  <div class="inline-block">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
  </div>
  <h2>list-item</h2>
  <div class="list-item">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
  </div>
</body>
</html>

display

none

box1

box2

box3

inline

box1

box2

box3

box4

box5

box6

box7

box8

box9

box10

block

box1

box2

box3

inline-block

box1

box2

box3

list-item

box1

box2

box3

저작자표시 비영리 변경금지

'📌Language > HTML & CSS' 카테고리의 다른 글

css display float과 clear (0)	2022.04.19
css visibility 속성 (0)	2022.04.19
css font를 알아보자 (0)	2022.04.19
css 속성 공부, width, height, boxmodel (0)	2022.04.19
css boxmodel, Border영역, Padding 영역, Margin 영역 (0)	2022.04.19

현재글display 속성

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Today Hailie Learned

display 속성

display

none

inline

block

inline-block

list-item

'📌Language > HTML & CSS' 카테고리의 다른 글

'📌Language/HTML & CSS'의 다른글

티스토리툴바

display 속성

display

none

inline

block

inline-block

list-item

'📌Language > HTML & CSS' 카테고리의 다른 글

'📌Language/HTML & CSS'의 다른글

관련글

티스토리툴바