Display:
display 속성은 레이아웃 정의에 자주 사용되는 중요한 속성이다.
block :
대상 요소를 block처럼 보이게 한다.
요소가 너비가 내용에 상관없이 100%이므로
항상 새로운 라인에 배치
크기, 여백, 마진 지정 가능
div, h, p, ol/ul, li, hr, table, form
inline :
대상 요소를 inline처럼 보이게 함.
요소의 너비는 콘텐츠의 크기에 따라 결정
따라서, 새로운 라인에 배치되지 않고
라인 중간에 배치될 수도 있음
크기, 마진(좌/우만 허용) 지정 불가능
span, a, img, input, select, textarea
inline-block :
대상 요소를 inline과 block처럼 보이게 함.
새로운 라인에 배치되지 않지만
크기, 여백, 마진 지정 가능
가시성 :
visibility 속성은 대상요소를 보이게 할 것인지 말 것인지를 정의
visible : 요소를 보이게 함
hidden : 요소를 보이지 않게함 (대신, 요소가 차지했던 영역은 남아있음)
none : 대상요소를 보이지 않게 할 때 display: none을 사용하기도 하지만 적용 방식이 다름
투명도 :
opactiy 속성은 대상의 투명도를 조절할 수있음
투명도 값은 0(투명) ~ 1(불투명) 사이임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display속성</title>
<style>
div:nth-of-type(1) {padding: 20px; background: orange;}
div:nth-of-type(2) {background: aqua;padding:20px; width:300px}
span { background : limegreen; width: 10px; height:10px; padding: 20px;}
/*span은 상하 마진 적용불가 ! + 크기 적용불가!! */
#inlineblock {background: darkorange; margin: 100px;
width: 200px; height: 200px; display: inline-block;}
#box1 { width:300px; height:300px; background: orange; visibility : hidden;}
#box2 { width:300px; height:300px; background: orange; display: none;}
#box3{width: 300px; height: 250px; background: orange; opacity: 0.55;}
#box3:hover{opacity:1}
img{opacity:0.55}
img:hover{opacity: 1}
</style>
</head>
<body>
<h1>display 속성</h1>
<div>
<p>블록레벨 요소</p>
</div>
<div>
<p>블록레벨 요소2</p>
</div>
<div>
<p>시간은 <span>금이라구</span>, 친구 !</p>
<span>Go Big or Go Extinct</span>
<span>Hello, World!!</span>
</div>
<div>
<span id="inlineblock">시간은 금이라구, 친구 !</span>
</div>
<hr>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<hr>
<div id="box4"></div>
<img src="../img/free-icon-line-124027.png"; width="250">
</body>
</html>
두 번째 사진을 보면 box3 위에 빈 공간이 보이는데 이곳에 box 1,2를 써놨었다. 1은 hidden으로 보이지는 않지만
공간이 잡혀있는 걸 확인할 수 있고 box2 같은 경우 none으로 지정해 아예 공간도 차지 안 하고 있는 것을 확인할 수 있다.
'JAVA & APP :국비지원 학원 복습 > CSS' 카테고리의 다른 글
| CSS : 07 TEXT (0) | 2020.12.29 |
|---|---|
| CSS : 06 Background (0) | 2020.12.29 |
| CSS : 04 BOX (0) | 2020.12.28 |
| CSS : 03 HTML과 CSS 연동하기 (0) | 2020.12.28 |
| CSS : 02 Unit (0) | 2020.12.28 |