더욱 다양한 레이아웃을 만들때에 사용
모든 태그들의 default
값 position:static;
기존의 static default
위치를 기준으로 top
, right
, bottom
, left
방향으로 이동이 가능하다.
<!DOCTYPE html>
<html>
<head>
<style>
.relative{display:inline-block; position:relative; width:100px; height:100px; background-color:#009ec3; top:60px; left:60px; color:#fff;}
.boxTest{display:inline-block; width:100px; height:100px; background-color:skyblue;}
</style>
</head>
<body>
<h1>relative Test</h1>
<div class="boxTest">1</div>
<div class="boxTest">2</div>
<div class="relative">안녕 나는 relative!</div>
<div class="boxTest">3</div>
</body>
</html>
relative
가 static default
위치를 기준으로 움직였다면, absolute는 부모의 포지션을 기준으로 움직인다. 예를 들어 부모 태그 중 relative
, absolute
, fixed
인 태그가 없다면 body를 기준으로 움직인다.
body
가 부모인 경우<!DOCTYPE html>
<html>
<head>
<style>
.relative{display:inline-block; position:relative; width:100px; height:100px; background-color:#009ec3; top:60px; left:60px; color:#fff;}
.body_absolute{display:inline-block; position:absolute; top:150px; left:50px; width:200px; height:200px; background-color:pink; }
.boxTest{display:inline-block; width:100px; height:100px; background-color:skyblue;}
</style>
</head>
<body>
<h1>body가 부모인 absolute Test 출력</h1>
<div class="boxTest">1</div>
<div class="boxTest">2</div>
<div class="relative">안녕 나는 relative!</div>
<div class="body_absolute">안녕 나는 body가 부모인 absolute!</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.boxTest{display:inline-block; width:100px; height:100px; background-color:skyblue;}
.relative{position:relative; width: 400px; height:300px;background-color:#eee;}
.absolute{position:absolute; top:200px; right:0; display:inline-block; width:100px; height:100px; background-color:pink;}
</style>
</head>
<body>
<h1>태그가 부모인 absolute Test 출력</h1>
<section class="relative">
<div class="boxTest">1</div>
<div class="boxTest">2</div>
<div class="absolute">안녕 나는 태그 기준 absolute!</div>
<div class="boxTest">4</div>
</section>
</body>
</html>
고정 navigation에 많이 쓰이는 속성이다. fixed를 쓸 경우 헤더가 메인 컨텐츠를 가려버리는 경우가 발생하는데, header의 부모인 body 엘리먼트로 부터 독립 되면서 body 엘리먼트에서 점유되고 있던 header의 공간이 사라져 버렸기 때문, 이런 경우 header의 height값 만큼 body에 paddding-top 값을 주면 쉽게 해결된다.
<!DOCTYPE html>
<html>
<head>
<style>
*{box-sizing:border-box; list-style:none;}
.boxTest{display:inline-block; width:100px; height:100px; background-color:skyblue;}
header{position:fixed; top:0; left:0; right:0; background-color: rgba(45,45,45,0.95) ; height:50px;}
ul{text-align:center;}
li{color:#fff; display:inline-block;}
</style>
</head>
<body>
<div style="width: 600px;height:1000px;">
<h1 style="margin-top:50px;">'fixed'를 header nav로 쓸 경우 출력</h1>
<header>
<nav>
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</nav>
</header>
<section>
<div class="boxTest">1</div>
<div class="boxTest">2</div>
<div class="boxTest">3</div>
<div class="boxTest">4</div>
</section>
<section style="width: 500px; height: 300px; overflow: scroll; margin-top:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. ...</p>
</section>
</div>
</body>
</html>
쇼핑몰, 웹서비스 모든 곳에서 꼭 사용하는 fixed
혹은 sticky
속성의 기능이 있는데,
바로 Top Button
이다.
웹 서비스가 주를 이루고 있는 사이트라면 못 본 적이 없는 거 같다.
한참 스크롤을 내리다보면 다시 다른 카테고리 혹은 뒤로가기를 하고싶은데, header
가 fixed
되어 있지 않을 경우 스크롤을 다시 처음으로 올려야 됨에 사용자는 불편함을 느낀다.
내가 그렇다.
Top button
나 add to cart
를 이미지로 사용하여 fixed
하는 것도 많이 봤다.
<!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">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
<title>Document</title>
<style>
*{box-sizing:border-box; list-style:none;}
h1{text-align:center;}
div{
height:1000px;
}
.fas{
color:pink;
font-size:55px;
position: fixed;
right:30px;
bottom:30px;
}
.fa-shopping-cart{
bottom:110px;
color:skyblue;
}
</style>
</head>
<body>
<h1>fixed cart, top button 출력</h1>
<!-- <header>
<nav>
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</nav>
</header> -->
<div>
<img src="https://p0.pikrepo.com/preview/902/207/blue-sky.jpg" alt="sky_img" width="100%">
<ul>
<li><i class="fas fa-arrow-circle-up"></i></li>
<li><i class="fas fa-shopping-cart"></i></li>
</ul>
</div>
</div>
</body>
</html>
sticky
의 엘리먼트는 사용자의 스크롤 위치에 따라 relative
와 fixed
를 오가는 position 속성
이다.
쉽게 말해 fixed
가 브라우저 화면의 절대 위치를 사용하는 반면 sticky
는 부모 태그의 절대 위치값을 사용한다.
자바스크립트 없이 순수 CSS로 구현할 수 있어 편리하지만 IE, 엣지 15 및 이하 버전에서는 sticky를 지원하지 않는다.
Safari에서는 -webkit-을 같이 지정해주어야 한다.
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:20px 0;
}
.sticky {
position: -webkit-sticky; /* Safari 호환 */
position: sticky;
top: 0;
background-color: rgba(45,45,45,0.85);
color:#fff;
padding:10px;
}
.sticky, h1{
text-align:center;
}
</style>
</head>
<body>
<h1>Sticky Test 출력</h1>
<div class="sticky">나는 스크롤과 만나면 상단에 붙어!</div>
<div style="padding-bottom:2000px">
<p>'Cause I-I-I'm in the stars tonight
So watch me bring the fire and set the night alight</p>
<p>Shoes on, get up in the morn'
Cup of milk, let's rock and roll
King Kong, kick the drum, rolling on like a Rolling Stone
Sing song when I'm walking home
Jump up to the top, LeBron
Ding dong, call me on my phone
Ice tea and a game of ping pong, huh...</p>
</div>
</body>
</html>
* 레이아웃 이해에 많은 도움이 된 영상
* 레이아웃 이해에 많은 도움이 된 사이트
position
을 엉망진창으로 사용하고 있던 거 같음HTML/CSS 블로그 정리 후
자기소개 페이지를 똑같은 디자인으로 다시
만들어서 전후비교를 해봐야겠다.