CSS) display

🎨 CSS(Cascading Style Sheets)
   ▶▶▶ display

 

✅ display

✅ visibility

✅ opacity

---

 

1. display 프로퍼티

: layout 정의할때

1.1 block

ex) div, h1~h6, p, ol, ul, li, hr, table, form, ...

• 항상 새 줄에 시작
• width: 100%(화면 크기만큼 가로폭이 꽉 참
• width, height, margin, padding 속성 지정 가능 

1.2 inline

ex) span, a, strong, img, br, input, select, textarea, button, ...

• 문장 중간에 들어갈 수 있음 = 줄을 안 바꾸고 다른 요소와 같은 줄에 함께 위치 가능
• content의 너비만큼 가로폭 차지
• width, height, margin, padding 속성 지정x

1.3 inline-block

• inline 레벨 요소처럼 같은 줄에 위치 가능 & width, height, margin, padding 속성 지정 가능

박스 간격 제거) font-size: 0;

css

.wrapper {
	font-size: 0;
}

.inline-block {
	display: inline-block;
	vertical-align: middle;
	border: 5px;
	font-size: 20px;
}

.box1 {
	background-color:  lime;
	width: 200px;
	height: 50px;
}

.box2 {
	background-color: orange;
	width: 200px;
	height: 50px;
}

.box3 {
	background-color: pink;
	width: 200px;
	height: 50px;
}

 

html

<div class="wrapper">	
	<div class = "inline-block box1">lime box</div>
	<div class = "inline-block box2">orange box</div>
	<div class = "inline-block box3">pink box</div>
</div>

 

2. visibility 프로퍼티

: 요소의 렌더링 여부(보이게 할지 안보이게할지)

 

• visible: 해당 요소를 보이게 (기본값)
• hidden: 해당 요소를 안보이게(실제 공간은 사라지지 않음)

.visible { visibility: visible;}
.hidden { visibility: hidden;}

<h3 class="visible">visibility: visible</h3>
<h3 class="hidden">visibility: hidden</h3>

 

• collapse: table에서 행이나 열이 안보이게

.collapse { visibility: collapse;}

<table border="1">
	<tr>
		<td>A</td>
		<td>B</td>
	</tr>
	<tr class="collapse">
		<td>C</td>
		<td>D</td>
	</tr>
</table>

 

 

3. Opacity 프로퍼티

: 투명도(0.0 ~ 1.0 - 숫자가 커질수록 불투명)

div {
	width: 200;
	height: 200;
	background-color: gold;
	color: white;
	opacity: 0.5;
	transition: opacity 1s;
}
div:hover { opacity: 1; }

<div>투명도</div>