1. Static
스태틱(static)은 고정되었다는 의미이다.
레이아웃의 가장 기본되는 형태이며 수직으로만 배치된다.
그리고 문서의 흐름에 맞추어 요소들을 배치시킨다.
적용시키는 코드는 아래와 같다.
style="position: static;"
이 스태틱은 문서의 기본적인 형태를 그대로 표현하기 때문에 굳이 주지는 않는다.
스태틱이 적용된 코드를 살펴보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>08_static.html</title>
</head>
<body>
<h3>position:static</h3>
<div style="position: static;">
가장 기본<br>
수직으로만 배치<br>
<div>문서의 흐름에 맞추어 배치</div>
</div>
</body>
</html>
출력된 화면을 보다시피, 코드의 순서 그대로 화면에 출력된 것을 확인할 수 있다.
그리고 이 요소들의 현 위치가 아래에서도 계속 말할 요소들의 '원래 위치'이다.
position은 이 원래 위치에서 어떻게 요소들을 움직이게 할 것인가를 결정하는 명령어라고 이해하면 된다.
2. Absolute
앱솔루트(Absolute)는 절대적이라는 말 때문에 릴레티드(relative);상대적인 의 정반대의 효과라고 생각할 수도 있지만 사실 절대 그렇지 않다. 오히려 absolute는 relative 속성값과 함께 사용하는 경우가 많기 때문이다.
심지어 absolute는 사실 절대적으로 요소를 배치해주지 않으며 배치되어지는 기준값에 따라 그 결과가 다르게 표출이 된다.
그럼 왜 이런 이름이 붙은 것일까?
바로 absolute는 상위 요소의 기준값을 따라 요소를 배치시켜주기 때문이다.
그렇기에 absolute의 상위 요소의 position 값이 다 정해져있어야만 반응을 하고 기준 값으로 잡게 된다.
그렇지 않으면 상위 요소가 아니라 코드 트리의 최상위인 <body> 영역에 잡히게 되는 것이다.
아, 복잡해보이지만!
사실 absolute를 쓰기 위해 상위 요소의 포지션을 일일이 지정해주지 않고 상위 요소에 relative 속성값을 부여해준다.
그러면 상위 포지션의 위치가 정해지기에 absolute는 자신의 원래 위치를 잃고 그것에 맞춰 움직이게 된다.
적용시키는 코드는 아래와 같다.
style="position: absolute;"
일단 코드에 적용해보면서 더 자세히 알아보자.
먼저 아래와 같이 코드를 작성했다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>09_absolute.html</title>
<!-- 현재 페이지에서 CSS 초기화 -->
<link rel="stylesheet" href="reset.css">
<style>
</style>
</head>
<body>
<!-- 절대적 위치 position:absolute -->
<section id="s1">
<h3>position:absolute</h3>
<ul>
<li>국어</li>
<li>영어</li>
<li>수학</li>
</ul>
</section>
</body>
</html>
위의 코드를 살펴보면 알 수 있듯 #2-3에서 배웠던 리셋을 적용시켜두었다!
아래와 같은 화면이 출력된다.
(리셋을 해서 글자들이 다 리셋되어진 값으로 출력되어있다)
이제 여기에 앱솔루트 포지션을 적용해보자.
코드는 아래와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>09_absolute.html</title>
<!-- 현재 페이지에서 CSS 초기화 -->
<link rel="stylesheet" href="reset.css">
<style>
#s1 li:nth-child(1){background-color: red; position: absolute; left: 100px; top 30px;}
</style>
</head>
<body>
<!-- 절대적 위치 position:absolute -->
<section id="s1">
<h3>position:absolute</h3>
<ul>
<li>국어</li>
<li>영어</li>
<li>수학</li>
</ul>
</section>
</body>
</html>
현재 앱솔루트 포지션을 nth:child(1) 코드를 사용해 '국어' 요소에 주었다.
어떻게 출력이 될까?
국어가 정해진 포지션과 색깔에 맞춰서 변환되어 옆으로 빠져나왔다.
그리고 국어의 자리는 아예 사라지고 영어가 치고 위로 올라왔다.
이것이 absolute의 효과이다.
absolute를 사용하면 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않게 된다.
다음으론 섹션에 노란 바탕을 주고 국어에 다른 포지션을 주려한다.
아래의 코드를 봐보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>09_absolute.html</title>
<!-- 현재 페이지에서 CSS 초기화 -->
<link rel="stylesheet" href="reset.css">
<style>
#s1 ul{background-color: yellow; height: 300px;}
#s1 li:nth-child(1){background-color: red; position: absolute; right: 0; bottom: 0;}
</style>
</head>
<body>
<!-- 절대적 위치 position:absolute -->
<section id="s1">
<h3>position:absolute</h3>
<ul>
<li>국어</li>
<li>영어</li>
<li>수학</li>
</ul>
</section>
</body>
</html>
국어의 위치가 이상해졌다.
분명 국어 요소는 섹션 안에 들어가있다.
그리고 섹션의 범위는 노란색으로 색칠되어있는 범위이다.
그런데 섹션의 자식 요소인 국어가 섹션을 넘어가있는 것이다.
이것이 상위요소의 포지션이 정해지지 않았기에 최상위인 <body>의 위치 안에서 움직였기 때문인 것이다.
그럼 relative 요소를 알아보자.
3. Relative
기본적으로 position은 정해진 기준 좌표를 중심으로 움직인다.
이 경우는 크게 두 가지가 있는데 1) 본문<body> 영역이 기준일 때와 2)부모 영역을 기준으로 할 때이다.
한번 더 반복해서 이야기해보자면 본문 영역이 기준일 때는 당연하게도 부모 영역에 정해진 포지션이 따로 없을 때이다.
그럴 땐 더 큰 영역인 <body>의 영역을 기준으로 두고 position을 옮기게 된다.
그러나 부모 영역을 기준으로 할 때에는 부모 영역을 기준으로 position을 옮기게 된다.
relative를 적용하면 요소가 원래 위치를 벗어나게 되고 top, bottom, left, right의 값을 조정하여 요소를 이동시킬 수 있다.
이 때 이동하는 기준점이 '원래 위치'이며 이 위치에서 상대적(relative)으로 움직이기 때문에 relative 라는 이름이 붙은 것이다.
여기서 absolute와의 차이점이 있다면 relative로 요소를 옮기더라도 원래 위치에서 차지하고 있던 자리값을 잃지 않는다.
아래의 코드를 봐보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>10_relative.html</title>
<link rel="stylesheet" href="reset.css">
<style>
#s1 ul {background: yellow; height: 300px; width: 300px; position: relative;}
#s1 li:nth-child(1) {background: red;}
#s1 li:nth-child(2) {background: green;}
#s1 li:nth-child(3) {background: blue;}
</style>
</head>
<body>
<section id="s1">
<h3>position:relative</h3>
<ul>
<li>손흥민</li>
<li>박지성</li>
<li>김연아</li>
</ul>
</section>
</body>
</html>
위의 코드를 출력하면 위의 사진처럼 '손흥민', '박지성', '김연아' 세 요소가 각기 다른 배경색을 가지고 부모 요소 위에서 자리를 차지한 상태로 출력이 된다.
그런데 여기서 '박지성' 요소의 위치를 relative로 옮기면 어떻게 될까?
박지성 요소가 아래로 움직였다.
여기서 absolute 와의 차이점이 눈에 확 띈다.
원래 박지성이 있던 곳이 그대로 빈칸으로 두어진다는 것이다.
이것이 relative와 absolute의 차이점이다.
4. Fixed
화면을 스크롤해도 한 곳에 멈춰서 움직이지 않는 창이 뜰 때가 있다.
이렇게 고정된(fixed) 위치에 요소를 배치할 때 쓰는 것이 바로 fixed 이다.
이것이 가능한 이유는 fixed의 기준점이 부모 요소가 아닌 뷰포트(viewport), 즉 웹사이트의 전체 화면이기 때문이다.
그렇기에 어떤 부모 요소에도 종속되지 않는다.
위의 참조링크를 클릭하면 나오는 사이트를 살펴보자.
오른쪽 하단에 떠있는 메세지창은 스크롤을 하더라도 같은 곳에 고정되어있다.
이 fixed로 요소를 움직이게되면 absolute와 같이 자신이 차지하고 있던 자리를 잃고 어느 공간에 고정된다.
(창을 하나 띄우려고 했는데 그 창의 원래 자리가 텅 비어버린채로 그대로 남아있으면 안되니깐)
아래의 코드를 살펴보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>11_fixed.html</title>
<link rel="stylesheet" href="reset.css">
<style>
#s1 ul {background-color: yellow;}
#s1 li:nth-child(1) {background: red;}
#s1 li:nth-child(2) {background: green;
position: fixed;
bottom: 0;
height: 80px;
width: 100%;
}
#s1 li:nth-child(3) {background: blue;}
</style>
</head>
<body>
<!-- 고정 위치 position:fixed -->
<section id="s1">
<h3>position:fixed</h3>
<ul>
<li>개나리</li>
<li>진달래</li>
<li>라일락</li>
</ul>
</section>
<!-- 문서의 길이를 강제로 길게. 수직 스크롤이 나올 수 있게 하여 테스트 한다. -->
<p>대한민국만세</p>
<p>대한민국만세</p>
<p>대한민국만세</p>
<p>대한민국만세</p>
...
<p>대한민국만세</p>
<p>대한민국만세</p>
<p>대한민국만세</p>
</body>
</html>
5. Sticky
sticky는 fixed와 비슷하게 요소를 고정시키는 데 사용이 된다.
차이점이 있다면 fixed는 지정된 위치에 고정을 시키는게 목적이라면 sticky는 요소를 상단에 지속적으로 노출시키는 것에 목적을 두고 있다는 것이다(마치 표의 제목표시줄이 페이지를 넘어가도 상단에 계속 보이게 할 수 있는 것처럼).
아래의 두 사진을 비교해보자.
또 fixed는 다른 요소들의 위에 위치해 덮어버리는데 sticky는 다른 요소들 사이에 자리를 차지하고 있다.
이런 차이점을 잘 살려서 각각의 용도에 맞게 잘 활용할 수 있다.
그. 런. 데.
이상하다.
분명 position:sticky로 잘 적용을 했는데 스크롤을 내려도 적용이 되지가 않는다.
왜냐하면 스티키를 적용할 때 꼭 상단(top)의 수치를 0으로 만들어서 가장 윗부분에 딱 달라붙게 해야하기 때문이다.
그래서 꼭 [ top: 0; ] 의 코드를 적용시켜야한다.
아래가 완성된 코드이다.
#header{height: 70px;
background-color: antiquewhite;
text-align: center;
position: sticky;
width: 100%;
top: 0;}
이렇게 총 5가지의 position 속성을 배웠다.
잘 복습하고, 또 필요할 때마다 참조 사이트를 찾아보며 활용하기를 :)
'⁂ CSS > : 기본 익히기' 카테고리의 다른 글
| [CSS] #3-4 레이아웃 4 : z-index 속성 (0) | 2022.08.01 |
|---|---|
| [CSS] #3-3 레이아웃 3 : float 속성, clear 속성 (0) | 2022.08.01 |
| [CSS] #3-1 레이아웃 1 : 레이아웃 이해하기 (0) | 2022.08.01 |
| [CSS] #2-3 Reset(리셋) (0) | 2022.08.01 |
| [CSS] #2-2 고급 선별자 사용해보기 (0) | 2022.08.01 |