CSS 속성 선택자
CSS 속성
- 텍스트 속성
- 배경 색상 / 이미지 관련 속성
- 테두리 속성
- 여백 속성
- display 속성 : inline / block / inline-block
- float 속성
- 목록 관련 속성
- 위치 관련 속성
- 겹침 (레이어)
- overflow
- visibility / opacity
- 그림자
텍스트 속성
배경색
배경 이미지 / 반복
테두리 유형 / 굵기 / 색상 지정
여백 속성 (padding / margin)
inline과 block
display에서 inline과 block의 차이
block
- 행으로 배치
- 옆으로 나란히 배치 안 됨
- 여백 있음
- display 속성이 없으면 디폴트
inline
- 옆으로 나란히 배치
- 여백 없이 내용물 만큼만 공간 차지
inline-block
- 인라인, 블록 성격 모두 포함
- 옆으로 나란히 배치되면서, 여백도 있음
inline-block 연습문제 : inline-block.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inline - block 예제</title>
<style type = "text/css">
/* display 속성이 없으면 block이 디폴트 : 행으로 배치/ 여백 있음 */
.greenBox{
/*display:block;*/ /* 디폴트 */
/*display:inline;*/ /* 옆으로 배치되고 내용만큼만 공간 차지 */
/*display:inline-block;*/ /* 옆으로 배치되고 여백 있음 */
float:right;
width:150px;
height:75px;
margin:10px;
border:solid 3ps #73AD21;
}
</style>
</head>
<body>
<h2>display 속성 (block /inline / inline-block)</h2>
<div class="greenBox">박스1</div>
<div class="greenBox">박스2</div>
<div class="greenBox">박스3</div>
<div class="greenBox">박스4</div>
</body>
</html>float 속성
- 해당 요소를 떠 있게 만든 속성
- 즉, 기본 레이아웃 흐름에서 벗어나 왼쪽이나 오른쪽으로 이동하는 것을 의미
- left : 왼쪽에 배치
- right : 오른쪽 배치
목록 관련 속성
목록 관련 속성 예제 : list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록 관련 예제</title>
<style type="text/css">
/* ul {list-style-type:square;}*/
/* ul {list-style-type:none;}*/
ul li {display:inline; }
</style>
</head>
<body>
<ul>
<li>봄</li>
<li>여름</li>
<li>가을</li>
<li>겨울</li>
</ul>
</body>
</html>
위치 관련 속성 : position 속성
- static
- 디폴트
- 다른 요소와 겹치지 않게 배치
- 위치를 지정하지 않으면 static 적용
- relative
- static의 원래 위치를 기준으로 위치 계산
- absolute
- 가장 가까운 상위 요소(부모)를 기준으로 배치
- 상위 요소가 static 인 경우에는 브라우저 화면 기준
- fixed
- 브라우저 화면을 기준으로 고정 위치에 배치
position 속성 예제 : position.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position 속성</title>
<style type="text/css">
body {margin:0; }
#parent {
position:relative;
top:0px;
left:0px;
width:200px;
height:300px;
border:solid 5px #000000;
/* margin: 50px 0 0 50px; */
}
#boxA, #boxB, #boxC {
width:80px;
height:80px;
}
#boxA { background-color:#ff0000;}
#boxB { background-color:#00ff00;}
#boxC { background-color:#ffff00;}
#boxB {
/* position:relative; */ /* relative 위치 지정 : static에 해당되는 원래 위치를 기준으로 20, 30 이동해서 배치 */
position:absolute; /* 상위 요소에 위치를 지정하지 않았기 때문에 브라우저 화면(body)를 기준으로 배치 */
top:20px;
left:30px;
}
</style>
</head>
<body>
<div id="parent">
<div id="boxA">A</div>
<div id="boxB">B</div>
<div id="boxC">C</div>
</div>
</body>
</html>
absolute
- 가장 가까운 상위 요소(부모)를 기준으로 배치
- 상위 요소가 static인 경우에는 브라우저 화면(body)를 기준으로 배치
- 현재 parent 안에 들어 있지만 parent의 position을 설정하지 않았기 때문에 parent가 static이므로 브라우저 화면을 기준으로 배치되었음
parent 박스 안에서 배치되게 하기 위해서는
- parent의 position 설정
정리
- div를 parent 내에 위치 시키기 위해서는
- 먼저 parent의 position 설정(absolute 또는 relative 상관 없음)
- absolute과 relative 차이점은 약간의 여백인데
- 문서 전체에서 margin을 0으로 설정하면 여백 없어짐
- body {margin:0; } 또는 * {margin:0; }
fixed : 지정된 위치에 고정 배치
- 스크롤 시에도 고정되어 있음
- fixed.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fixed 예제</title>
<style type = "text/css">
#fixedBox{
position:fixed;
width:50px;
height:50px;
background:blue;
top:50px;
left:50px;
}
</style>
</head>
<body>
<div id = "fixedBox"></div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
문서 끝
</body>
</html>
겹침(레이어) 표현 속성
z-index 속성
- 요소들이 겹칠 때 순서 지정
- 나중에 배치하는 것이 위에 놓임
- z-index 값이 클수록 위에 놓임
z-index 속성 예제 : z-index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index 속성</title>
<style type="text/css">
#outBox {
margin:0 auto; /* 브라우저 화면의 가운데 정렬 */
width:1020px;
position:relative; /* absolute인 경우 가운데 정렬 안 됨 */
}
#box1 {
position:absolute; /* 부모 박스 기준으로 배치 */
left:25px;
top:181px;
z-index:1;
}
#box2 {
position:absolute; /* 부모 박스 기준으로 배치 */
left:187px;
top:155px;
z-index:2;
}
#box3 {
position:absolute; /* 부모 박스 기준으로 배치 */
left:369px;
top:129px;
z-index:5;
}
#box4 {
position:absolute; /* 부모 박스 기준으로 배치 */
left:603px;
top:155px;
z-index:4;
}
#box5 {
position:absolute; /* 부모 박스 기준으로 배치 */
left:795px;
top:181px;
z-index:3;
}
</style>
</head>
<body>
<div id = "outBox">
<div id ="box1"><img src="image/img1.png"></div>
<div id ="box2"><img src="image/img2.png"></div>
<div id ="box3"><img src="image/img3.png"></div>
<div id ="box4"><img src="image/img4.png"></div>
<div id ="box5"><img src="image/img5.png"></div>
</div>
</body>
</html>