공간차지요소(display 속성)

 

display 속성

요소를 어떤 방식으로 표시를 할 건지 결정하는 속성

 

📢 들어가기전 살펴봐야 할 것

요소가 두가지 형식으로 나누어지는데

1. block 형식

•  차곡차곡 쌓아 올려지는 형식

•  언제나 새로운 라인에서 시작

•  웹페이지의 너비만큼 공간 차지

•  한 줄에 하나씩 수직방향으로 디스플레이됨

•  width, height 속성으로 요소 크기 지정 가능

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

2. inline 형식

•  한줄 안에 차례대로 위치하는 형식

•  해당 요소의 내용만큼 공간차지

•  수평방향으로 디스플레이됨

•  요소 크기 지정 불가능

•  <span>, <a>, <img>, <input>, <textarea>...

 

display 속성 설명

1. display : block → 요소를 block요소처럼 표시합니다.

2. display : inline → 요소를 inline요소처럼 표시합니다. (기본값)

3. display : inlune-block → 요소는 inline, 내부는 block처럼 표시
   (화면에 수평방향으로 디스플레이하고, 크기 조절이 가능)

4. display : none → 요소를 렌더링 하지 않도록 설정 (영역 차지 X)

 

<div class="container">
	<div class="red">Red</div>
	<div class="blue">Blue</div>
	<div class="green">Green</div>
	<div class="yellow">Yellow</div>
</div>

 

---

실행결과

 

div요소 네개 배치

▼ 실행결과 살펴보기

 

• div요소 네 개를 background-color 속성을 이용하여 배치
• 또한 width, height 값을 각각 100px 적용
• div요소는 기본적으로 block형태임으로 수직방향으로 네 개가 배치
• div요소에 display: inline을 주게 되면 어떻게 될까요??

 

.container > div{
	display: inline;
}

 

---

실행결과

 

display : inline 적용

 

▼ 실행결과 살펴보기

 

• div요소에 inline 형식으로 변환
• div요소지만 inline이 적용되어서 수평방향으로 배치
• 또한 크기를 지정했지만(width, height 각각 100px) 내용의 크기만큼 영역을 차지
• div요소에 display:inline-block을 주게 되면 어떻게 될까요??

.container > div{
	display: inline-block;
}

 

---

실행결과

 

display:inlune-block 적용

▼ 실행결과 살펴보기

 

• div요소가 inline-block 형식으로 변환
• div요소지만 inline-block이 적용되어서 수평방향으로 배치
• inline과 다르게 지정한 크기(width, height 각각 100px)만큼 영역 차지
• div요소에 display:none을 주게되면 어떻게 될까요??

.container > div{
	display: none;
}

---

실행결과

 

display:none 적용

▼ 실행결과 살펴보기

 

• 화면에서 요소들이 사라지게 된다.
• 개발자 모드(F12)를 켜서 확인을 해보니 영역 자체가 없다