JunO3O
위치 속성
위치 속성
2023. 3. 21. 03:04ㆍCSS
위치 속성
ㅁ 위치 속성
: 요소의 위치 지정 형식을 설정할 때는 position 속성을 사용하면 됩니다.
: 절대 위치 좌표를 사용하려면 position 속성에 absolute 나 fixed 키워드를 입력합니다.
: 상대 위치 좌표를 사용하려면 static이나 relative 키워드를 입력합니다.
| 키워드 | 설명 |
| absolute | 절대 위치 좌표 설정 |
| fixed | 화면을 기준으로 절대 위치 좌표 설정 |
| relative | 초기 위치에서 상하좌우로 이동 |
| static | 위쪽에서 아래쪽으로 순서대로 배치 |
ㅁ position 속성 absolute 키워드
: box 클래스를 가지는 div 태그의 position 속성에 absolute 키워드를 적용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
}
.box:nth-child(2) {
background-color: green;
}
.box:nth-child(3) {
background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
ㅁ position 속성에 absolute 키워드를 적용하고 left 속성과 top 속성 적용하기
: 모든 웹 브라우저의 출력 방식을 통일하려면 left 속성과 top 속성을 적용하면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px;
top: 10px;
}
.box:nth-child(2) {
background-color: green;
left: 50px;
top: 50px;
}
.box:nth-child(3) {
background-color: blue;
left: 90px;
top: 90px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
ㅁ z-index 속성 적용하기
: 도형의 순서를 변경하고 싶을 때는 z-index 속성을 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px;
top: 10px;
z-index: 100; // z-index 속성을 사용하여 숫자가 높은 빨간색 사각형이 위로 오게 한다.
}
.box:nth-child(2) {
background-color: green;
left: 50px;
top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px;
top: 90px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
ㅁ 위치 속성 공식
: 위치 속성을 사용할 때 필요한 공식 !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px;
top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px;
top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px;
top: 90px;
z-index: 1;
}
</style>
</head>
<body>
<h1>위치 속성 공식</h1>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>위치 속성 공식</h1>
</body>
</html>
: 위의 코드를 실행하면 아래와 같은 결과가 나옵니다.
: 3개의 박스와 <h1> 태그의 글자가 겹쳐서 출력됩니다.
: 이 실행 결과에는 두 가지 문제가 있습니다.
: (1) h1 태그 2개가 붙어있습니다 = div 태그가 영역을 차지하지 않습니다.
: (2) 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 못합니다.
=> 이는 position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 않습니다. 따라서 자손의 position 속성에 absoulte 키워드를 적용할 때는 부모 태그에 몇 가지 작업을 해줘야 합니다.
: (1) 자손의 position 속성에 absolute 키워드를 적용하려면 부모에 height 속성을 입력합니다.
=> 이렇게 하면 부모 태크가 영역을 차지하게 만들 수 있습니다. style 태그에 아래 코드처럼 width 속성과 height 속성을 추가해 부모 태그 영역을 추가해 부모 태그 영역을 차지하게 만들 수 있습니다.
body > div {
width: 400px;
height: 100px;
border: 3px solid black;
}
: (2) 자손의 position 속성에 absolute 키워드를 적용하려면 부모의 position 속성에 relative 키워드를 적용합니다.
=> 이렇게 하면 자손 태그가 부모 위치를 기준으로 절대 위치 좌표를 설정합니다. 이 공식에 따라 부모 태그의 position 속성을 지정합니다.
body > div {
width: 400px;
height: 100px;
border: 3px solid black;
position: relative;
}
위의 두 코드를 적용하면 아래와 같은 결과가 출력됩니다.
ㅁ 내용이 요소 크기를 벗어날 때 처리
: overflow 속성은 내용이 요소 크기를 벗어나 모두 보여주기 힘들 때 어떻게 보여줄지 결정합니다.
| 키워드 | 설명 |
| hidden | 영역을 벗어나는 부분 감추기 |
| scroll | 영역을 벗어나는 부분을 스크롤로 만들기 |
ㅁ overflow 속성 hidden 키워드 적용하기
: 위의 결과를 보면 3개의 색상 사각형이 부모의 범위(검은색 사각형)를 벗어나 있습니다.
: 이를 div 태그에 overflow 속성을 적용시켜 부모 영역에서 벗어난 색상 사각형들을 감출 수 있습니다.
body > div {
width: 400px;
height: 100px;
border: 3px solid black;
position: relative;
overflow: hidden;
}
ㅁ scroll 키워드 적용하기
: overflow 속성에 scroll 키워드를 입력하면 div 태그에 스크롤이 생겨 부모 영역을 벗어나는 부분은 스크롤을 내리면 볼 수 있습니다.
body > div {
width: 400px;
height: 100px;
border: 3px solid black;
position: relative;
overflow: scroll;
}
ㅁ overflow-x와 overflow-y 속성 적용하기
: overflow 속성에 scroll 키워드를 적용하면 무조건 모든 축에 스크롤이 생깁니다.
: 만약 특정한 방향으로만 스크롤을 생성하고 싶을 때는 overflow-x 속성 또는 overflow-y 속성을 사용하면 됩니다.
body > div {
width: 400px;
height: 100px;
border: 3px solid black;
position: relative;
overflow-y: scroll;
}
'CSS' 카테고리의 다른 글
| 그림자 / 그레이디언트 속성 (0) | 2023.03.21 |
|---|---|
| 유동 속성 (0) | 2023.03.21 |
| 글자 속성 (0) | 2023.03.21 |
| 배경 속성 (0) | 2023.03.21 |
| 가시 속성(display) (0) | 2023.03.21 |