** 영상으로 공부하고 싶다면 아래 주소를 클릭하세요.
https://www.youtube.com/watch?v=1_biCQ6pKdU
1. 속성 정리
| 속성명 | 설명 | |
| position (선택자의 위치를 지정하는 속성) |
static | 선택자가 자신의 원래 위치에 고정되어 있는 상태(기본값) |
| relative | 선택자가 자신의 원래 위치(static)에서 상대적으로 이동하는 속성 | |
| absolute | 선택자가 body의 위치에서 절대적으로 이동하는 속성 | |
| fixed | 선택자가 body의 위치에서 절대적으로 이동하나 처음 지정된 화면에 고정된 상태로 스크롤 이동시 따라다님 | |
| position의 relative, absolute, fixed와 함께 사용되는 위치값 적용 속성 | ||
| top | 위에서부터 지정되는 숫자 적용(px, %) | |
| bottom | 아래쪽에서부터 지정되는 숫자 적용(px, %) | |
| left | 왼쪽에서부터 지정되는 숫자 적용(px, %) | |
| right | 오른쪽에서부터 지정되는 숫자 적용(px, %) | |
| ** X축 이동시에는 right나 left 중 하나만 사용 ** Y축 이동시에는 top이나 bottom 중 하나만 사용 ** 속성 선택 후 화면 안쪽으로 들어올 때는 양수, 화면 바깥쪽으로 나갈때는 음수 |
||
| z-index | position의 relative, absolute, fixed를 받은 선택자들 간의 깊이 조절을 하는 속성 - 숫자가 높을수록 화면 앞에 보임 |
|
기준에서 화면 안쪽으로 들어오면 양수로 처리, 기준에서 화면 바깥쪽으로 처리되면 음수로 처리하면 된다.
2. position의 absolute값 적용
- 화면(body)를 기준으로 절대적 이동 처리
1) 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 - display속성</title>
<style>
*{ padding: 0; margin: 0; }
body{ margin: 50px; }
div{
width: 100px; height: 100px;
border: 5px solid black;
position: absolute;
}
.box01{ background-color: red; top: 0; left: 0; }
.box02{ background-color: green; top: 20px; left: 20px; }
.box03{ background-color: blue; top: 40px; left: 40px; }
</style>
</head>
<body>
<div class="box01">박스1</div>
<div class="box02">박스2</div>
<div class="box03">박스3</div>
</body>
</html>- div태그로 3개의 박스를 생성 후 절대적 위치 조정으로 20px씩 간격 조정
2) 완성
위에 보이는 것처럼 body를 기준으로 절대적 위치에 놓이게 된다.
3. absolute와 fixed 비교
- absolute와 fixed는 body태그를 기준으로 절대적 위치에 존재하는 것은 같지만
스크롤바가 생성시 absolute는 따라다니지 않고, fixed는 따라 다닌다.
1) 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 - display속성</title>
<style>
*{ padding: 0; margin: 0; }
body{ margin: 50px; height: 2000px; }
div{ width: 100px; height: 100px; border: 5px solid black; }
.box01{
background-color: red;
position: absolute; top: 50px; right: 0;
}
.box02{
background-color: green;
position: fixed; top: 200px; right: 0;
}
</style>
</head>
<body>
<div class="box01">박스1</div>
<div class="box02">박스2</div>
</body>
</html>
- body에 높이를 2000px로 처리하여 스크롤바를 생성함
2) 완성 결과
스크롤바를 내릴시 박스1(absolute)은 body에 고정된 채로 따라다니지 않음
스크롤바를 내릴시 박스2(fixed)는 위에 보이는 것 처럼 따라다님
4. relative적용
- position: relative; 는 요소가 현재 자신의 위치에서 상대적으로 이동시키는 것을 말한다.
1) 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 - display속성</title>
<style>
*{ padding: 0; margin: 0; font-size: 12px; }
form{ margin: 50px; }
form input{ position: relative; top: 3px; }
</style>
</head>
<body>
<form action="#">
<input type="checkbox" id="chk" />
<label for="chk">아이디저장하기</label>
</form>
</body>
</html>
2) 상대적 위치 적용 전
3) 상대적 위치 적용 후
position: relative;를 적용하여 top: 3px; 처리는 위에서 아래쪽으로 3px 상대적으로 내리겠다는 의미
5. z-index적용
- position값이 static이 아닌 이상은 깊이 조절이 가능
- z-index의 수치가 높을수록 화면 앞에 존재
1) z-index 적용 전 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 - display속성</title>
<style>
*{ padding: 0; margin: 0; }
body{ margin: 50px; }
div{
width: 100px; height: 100px;
border: 5px solid black;
position: absolute;
}
.box01{ background-color: red; top: 0; left: 0; }
.box02{ background-color: green; top: 20px; left: 20px; }
.box03{ background-color: blue; top: 40px; left: 40px; }
</style>
</head>
<body>
<div class="box01">박스1</div>
<div class="box02">박스2</div>
<div class="box03">박스3</div>
</body>
</html>
2) z-index 적용 전 결과
- 먼저 쓴 태그가 밑에 존재하게 되고, 나중에 쓴 태그가 화면상 앞에 보이게 처리된다.
3) z-index 적용 후 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 - display속성</title>
<style>
*{ padding: 0; margin: 0; }
body{ margin: 50px; }
div{
width: 100px; height: 100px;
border: 5px solid black;
position: absolute;
}
.box01{ background-color: red; top: 0; left: 0; z-index: 10; }
.box02{ background-color: green; top: 20px; left: 20px; z-index: 11; }
.box03{ background-color: blue; top: 40px; left: 40px; z-index: 9; }
</style>
</head>
<body>
<div class="box01">박스1</div>
<div class="box02">박스2</div>
<div class="box03">박스3</div>
</body>
</html>
4) z-index 적용 후 결과
- 가장 높은 숫자를 받은 박스2가 맨 앞으로 나오고 그다음 박스1, 박스3 순으로 처리된다.
6. 부모영역에서 절대적 위치 적용
기본적으로 absolute는 body를 기준으로 절대적 위치를 갖음
relative안의 absolute : 부모 영역안에서 절대적 위치를 갖음
- 부모 혹은 상위 선택자에 position: relative; 처리
- 선택자에 position: absolute; 처리
** 현재 홈페이지들을 대부분 홈페이지 가운데 오는 방식을 선택하기 때문에 body에서 절대적 위치를
갖으면 해상도 별로 위치가 달라지게 된다.
그래서 부모 혹은 상위 선택자를 기준으로 절대적 위치를 갖아야 한다.
1) 부모요소에 position: relative;를 주기 전의 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 - display속성</title>
<style>
*{ padding: 0; margin: 0; }
div{
width: 500px; height: 300px; background-color: orange;
margin: 0 auto;
}
p{
width: 100px; height: 100px; background-color: aqua;
position: absolute; top: 10px; right: 0;
}
</style>
</head>
<body>
<div>
<p>우측상단</p>
</div>
</body>
</html>- position: absolute; top: 10px; right: 0; - 화면의 오른쪽으로 붙임
2) 부모요소에 position: relative;를 주기 전의 결과
- absolute는 body를 기준으로 절대적이기 때문에 부모영역을 벗어나서 body오른쪽을 붙여져 있다.
3) 부모요소에 position: relative;를 준 후의 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 - display속성</title>
<style>
*{ padding: 0; margin: 0; }
div{
width: 500px; height: 300px; background-color: orange;
margin: 0 auto; position: relative;
}
p{
width: 100px; height: 100px; background-color: aqua;
position: absolute; top: 10px; right: 0;
}
</style>
</head>
<body>
<div>
<p>우측상단</p>
</div>
</body>
</html>
4) 부모요소에 position: relative;를 준 후의 결과
- 부모에 position: relative;를 주므로써, 자손이 부모영역에 간섭을 받는다.
- 부모영역의 오른쪽으로 붙어서 처리된다.
'웹언어 > CSS3' 카테고리의 다른 글
| [CSS3강좌] 15강 블록요소의 자손을 가로 세로 가운데 정렬하기 (0) | 2020.05.18 |
|---|---|
| [CSS3강좌] 14강 테이블 태그 관련 CSS속성 (0) | 2020.05.18 |
| [CSS3강좌] 12강 float와 clear속성 (0) | 2020.04.29 |
| [CSS3강좌] 11강 여백속성(padding과 margin) (0) | 2020.04.29 |
| [CSS3강좌] 10강 요소(Element)와 display속성 (0) | 2020.04.28 |
