CSS : Position Property(위치 속성) 2
2023. 3. 13. 14:41ㆍHTML, CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS - Position Property</title>
<!-- css 폴더 생성 후 style.css 파일 생성 또는 복붙 -->
<link rel="stylesheet" href="../../css/style.css">
<style>
/* 위치 속성을 이용한 요소의 크기 설정 */
#container1 {
width: 400px;
height: 300px;
border: 5px solid black;
margin: 20px auto;
padding: 50px;
/* 하위 요소의 기준 영역으로 지정하기 위해 */
/* position 속성의 값을 'relative'로 설정 */
position: relative;
}
#container1 > div {
background-color: yellowgreen;
position: absolute;
/* position 속성의 값이 'absolute', 'fixed' 인 경우 */
/* - 요소의 기본 크기 = 컨텐츠 만큼의 크기 */
/* - 크기 속성을 지정하지 않고(auto 설정) */
/* 위치 속성으로 크기 설정이 가능하다. */
/* 같은 축의 위치 속성을 동시에 지정 */
/* - 위치 속성은 기준 영역의 가장 자리에서 시작 */
/* 즉, 컨테이닝 블록의 내부 여백의 영향을 받지 않는다. */
/* - 위치 속성을 통해 크기를 지정할 때 해당 */
/* 요소의 전체 크기(외부 여백 포함)로 지정 */
/* 이때, 컨텐츠 영역의 크기는 전체 크기에서 다른 영역의 크기를 뺀 값으로 */
/* 알아서 계산되어 적용된다. */
/* 왼쪽 0px 에서부터 오른쪽 0px 까지의 크기 */
left: 0;
right: 0;
/* 위쪽 20px 에서부터 아래쪽 20px 까지의 크기 */
top: 20px;
bottom: 20px;
/* -------------------------------------------------- */
/* 크기 속성을 이용하게 되면 */
/* 위치 속성으로 크기가 설정되지 않는다. */
width: 50%;
/* 만약 크기 속성이 설정되었다면 */
/* auto 로 설정 */
width: auto;
/* -------------------------------------------------- */
/* 컨테이닝 블록과 여백을 두고 싶다면 */
/* 1. 위치 속성을 이용 */
top: 50px; bottom: 50px;
left: 50px; right: 50px;
/* 2. margin 속성을 이용 */
/* top: 0px; bottom: 0px; */
/* left: 0px; right: 0px; */
/* width: 100%; */
margin: 50px;
padding: 30px;
/* -------------------------------------------------- */
}
/* 특정 요소의 중앙에 배치 */
#container2 {
width: 1200px;
height: 900px;
border: 5px solid black;
margin: 20px auto;
/* 하위 요소의 기준 영역으로 지정 */
position: relative;
}
#container2 > div{
width: 200px;
height: 200px;
background-color: yellowgreen;
/* #container2 요소의 영역을 기준으로 중앙에 배치 */
position: absolute;
/* #container2 요소의 너비 반절 - 해당 요소의 너비 반절 */
/* left: 300px; top: 200px; */
/* 위치 속성의 백분율 */
/* = 컨테이닝 블록의 크기 */
left: 50%;
top: 50%;
/* margin 속성은 음수를 지원하며 */
/* 음수를 설정할 경우 반대 방향으로 당겨진다. */
/* margin-right: 100px; */
margin-left: -100px;
margin-top: -100px;
}
#container3 {
width: 800px;
height: 600px;
border: 5px solid black;
margin: 20px auto;
position: relative;
}
#container3 > div {
width: 200px;
height: 200px;
position: absolute;
}
/* z-index 속성 */
/* - 중첩된 요소의 레이어 순서를 지정하는 속성 */
/* - 속성 값은 숫자로 지정되며, 숫자가 클수록 위로 올라온다. */
/* - 최소 1로 시작하며, 1 로 지정되더라도 속성이 없는 요소보다 위로 올라온다. */
/* - position 속성이 'static' 인 요소에는 적용되지 않는다. */
#container3 > div:nth-child(1) {
background-color: yellowgreen;
z-index: 20;
}
#container3 > div:nth-child(2) {
background-color: orange;
top: 50px;
left: 50px;
z-index: 10;
}
#container3 > div:nth-child(3) {
background-color: blueviolet;
top: 0px;
left: 100px;
z-index: 1;
}
body{height: 3000px;}
</style>
</head>
<body>
<div id="container1">
<div>Hello World!</div>
</div>
<hr>
<div id="container2" class="div-box">
<div></div>
</div>
<hr>
<div id="container3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
'HTML, CSS' 카테고리의 다른 글
| CSS : Float(float 속성) (0) | 2023.03.14 |
|---|---|
| CSS : Property(속성) 5 (0) | 2023.03.14 |
| CSS : Position Property(위치 속성) 1 (0) | 2023.03.13 |
| CSS : Property(속성) 4 (0) | 2023.03.13 |
| CSS : Property(속성) 3 (2) | 2023.03.13 |