1. position
1-1. 속성
- absolute : 부모 요소 기준
- relative : 자기 자신 기준
- fixed : 보이는 화면(viewport) 기준
- static : top, left 적용 x (기본값)
1-2. 예시
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width:100px; height:100px;
opacity:0.7;
}
div:nth-child(1) {
background-color:#ff0000;
position:absolute;
top:0;
left:0;
}
div:nth-child(2) {
background-color:#00ff00;
position:absolute;
top:50px;
left:50px;
}
div:nth-child(3) {
background-color:#0000ff;
position:absolute;
top:100px;
left:100px;
}
#wrap {
width:300px; height:300px;
position:absolute;
top:300px; left:300px;
background-color:yellow;
opacity:1.0;
}
#wrap .content {
width:100px; height:100px;
position:absolute;
top:100px; left:100px;
background-color:red;
opacity:1.0;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div id="wrap">
<div class="content"></div>
</div>
</body>
</html>2. 반응형 디자인 (미디어 쿼리)
- 디바이스 크기에 따라 웹페이지의 모양이 바뀐다.
- 최신 브라우저에만 지원
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Media Queries</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: url(images/bg0.jpg) no-repeat fixed;
background-size: cover;
}
@media screen and (max-width:1024px) {
body {
background: url(images/bg1.jpg) no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width:768px) {
body {
background: url(images/bg2.jpg) no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width:320px) {
body {
background: url(images/bg3.jpg) no-repeat fixed;
background-size: cover;
}
}
</style>
</head>
<body>
</body>
</html>3. 가변 그리드 레이아웃
- 고정 값(px)을 주지 않고 %를 준다.
velog, GitHub, Notion 등에 작업물을 정리하고 있습니다.