![[HTML] position 예제](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbZ6emc%2Fbtrpthx5xpG%2F4KERTQLWLBo35xtEwooRM0%2Fimg.png)
개념
- position은 레이아웃을 배치하거나, 객체를 위치시킬 때 사용하는 CSS속성이다.
- 상속되지 않으며 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right)의 위치를 같이 설정할 수 있다.
* static (기본값)
- 위치를 지정하지 않을 때 사용
* ralative
- 위치를 계산할 때 static의 원래 위치부터 계산한다.
* absolute
- 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정된다.
* fixed
- 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.
예제 1
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>Html Basic</title>
<style media="screen">
div{
width:100px;
height:100px;
}
div#a{
background:#52D4FF;
}
div#b{
background:#FF63EA;
}
div#c{
background:#C5FF63;
}
</style>
</head>
<body>
<div id="a">
a 영역
</div>
<div id="b">
b 영역
</div>
<div id="c">
c 영역
</div>
</body>
</html>
예제 2
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>Html Basic</title>
<style media="screen">
div{
width:100px;
height:100px;
}
div#a{
background:#52D4FF;
position: static;
}
div#b{
background:#FF63EA;
position: static;
}
div#c{
background:#C5FF63;
position: static;
}
</style>
</head>
<body>
<div id="a">
a 영역
</div>
<div id="b">
b 영역
</div>
<div id="c">
c 영역
</div>
</body>
</html>
예제 3
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>Html Basic</title>
<style media="screen">
div{
width:100px;
height:100px;
}
div#a{
background:#52D4FF;
position: static;
}
div#b{
background:#FF63EA;
position: relative;
top:0px;
left:100px;
}
div#c{
background:#C5FF63;
position: relative;
top:0px;
left:200px;
}
</style>
</head>
<body>
<div id="a">
a 영역
</div>
<div id="b">
b 영역
</div>
<div id="c">
c 영역
</div>
</body>
</html>
예제 4
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>Html Basic</title>
<style media="screen">
div{
width:100px;
height:100px;
}
div#a{
background:#52D4FF;
position: static;
}
div#b{
background:#FF63EA;
position: absolute;
top:0px;
left:100px;
}
div#c{
background:#C5FF63;
position: absolute;
top:0px;
left:200px;
}
</style>
</head>
<body>
<div id="a">
a 영역
</div>
<div id="b">
b 영역
</div>
<div id="c">
c 영역
</div>
</body>
</html>
예제 5
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>Html Basic</title>
<style media="screen">
div{
width:100px;
height:100px;
}
div#a{
width:300px;
height:300px;
background:#52D4FF;
position: relative;;
top:100px;
left:100px;
}
div#b{
background:#FF63EA;
position: absolute;
top:0px;
left:100px;
}
div#c{
background:#C5FF63;
position: absolute;
top:0px;
left:200px;
}
</style>
</head>
<body>
<div id="a">
a 영역
<div id="b">
b 영역
</div>
<div id="c">
c 영역
</div>
</div>
</body>
</html>
예제 6
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>Html Basic</title>
<style media="screen">
div{
width:100px;
height:100px;
}
div#a{
width:300px;
height:300px;
background:#52D4FF;
position: relative;;
top:100px;
left:100px;
}
div#b{
background:#FF63EA;
position: absolute;
top:0px;
left:100px;
}
div#c{
background:#C5FF63;
position: fixed;
top:0px;
left:200px;
}
</style>
</head>
<body>
<div id="a">
a 영역
<div id="b">
b 영역
</div>
<div id="c">
c 영역
</div>
</div>
</body>
</html>
예제 7
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</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>
* 위치속성
- 절대 위치 좌표 : 요소의 x 좌표, y좌표를 설정해 절대 위치 지정
- 상대 위치 좌표 : 요소를 입력한 순서에 따른 상대 위치 지정
* position 속성
- 절대 위치 좌표 : positon 속성에 absolute나 fixed 키워드 입력
- 상대 위치 좌표 : position 속성에 static 이나 relative 키워드 입력
예제 8
See the Pen Untitled by sunoesun (@sunoesun) on CodePen.
예제 9
See the Pen Untitled by sunoesun (@sunoesun) on CodePen.
* z-index 속성
- 실행 결과에서 도형의 순서를 변경하고 싶을 때 사용
- 숫자가 클수록 앞에 위치
예제 10
See the Pen Untitled by sunoesun (@sunoesun) on CodePen.
* 문제 파악하기
실행 결과에 두 가지 문제가 있다.
1. h1 태그 두 개가 붙어 있다(div 태그가 영역을 차지하지 않는다).
2. 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않는다.
굉장히 중요한 내용이다. position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 않는다. 따라서 자손의 position 속성에 absolute 키워드를 적용할 경우에는 부모 태그에 몇 가지 처리를 해야 합니다.
예제 11
See the Pen Untitled by sunoesun (@sunoesun) on CodePen.
* 문제 해결하기
첫 번째 문제를 해결할 때는 다음 공식을 사용합니다.
"자손의 position 속성에 absolute 키워드를 적용하면 부모에게 height 속성을 입력한다." 이렇게 하면 부모 태그가 영역을 차지하게 만들 수 있다. 예를 들어 style 태그에 다음 코드처럼 width와 height 속성을 추가하여 영역을 만들어준다.
예제 12
See the Pen Untitled by sunoesun (@sunoesun) on CodePen.
* 두 번째 문제를 해결할 때는 다음 공식을 사용
"자손의 position 속성을 absolute 키워드로 적용하면 부모의 position 속성을 relative 키워드로 적용한다."
이렇게 하면 자손 태그가 부모의 위치를 기준으로 절대 좌표를 설정한다. 이 공식에 따라서 div 태그에 position 속성을 입력한다. 부모 태그에 position 속성 부여
예제 13
See the Pen Untitled by sunoesun (@sunoesun) on CodePen.
* overflow 속성
overflow는 내부의 요소가 부모의 범위를 벗어날 때 요소를 처리하는 방법을 지정하는 속성이다.
- hidden : 영역을 벗어나는 부분을 보이지 않게 만든다.
- scroll : 영역을 벗어나는 부분을 스크롤로 만든다.
* hidden 속성
위에 코드의 실행 결과를 보면 색상이 적용된 사각형이 부모의 범위(검은색 테두리로 표시)를 벗어나 있다. 이러한 div 태그의 overflow 속성에 hidden 키워드를 입력하면 부모의 영역을 벗어난 부분이 모두 숨겨진다.
* scroll 속성
overflow 속성에 scroll 키워드를 입력하면 div 태그에 스크롤링 생긴다. 부모의 영역을 벗어나는 부분은 스크롤을 내리면 볼 수 있다.
예제 14
See the Pen Untitled by sunoesun (@sunoesun) on CodePen.
* scroll 속성
overflow 속성에 scroll 키워드를 입력하면 div 태그에 스크롤이 생긴다. 부모의 영역을 벗어나는 부분은 스크롤을 내리면 볼 수 있다.
예제 15
See the Pen Untitled by sunoesun (@sunoesun) on CodePen.
* overflow-x와 overflow-y 속성
overflow 속성에 scroll 키워드를 적용하면 무조건 모든 축에 스크롤이 생성된다. 특정한 방향으로만 스크롤을 생성하고 싶을 때는 overflow-x 속성과 overflow-y 속성을 사용한다.
'HTML > Day40' 카테고리의 다른 글
| [HTML] font 예제 (0) | 2022.01.02 |
|---|---|
| [HTML] 예제 (0) | 2022.01.02 |