μμΉ μμ±
μμΉ μ€μ κΈ°μ€κ³Ό ν¬κΈ°λ₯Ό μ§μ νλ μμ±
β’
μμΉ μμ± μ’
λ₯
β’
μμΉ μ€μ κΈ°μ€
β¦
static
β¦
relative
β¦
absolute
β¦
fixed
β¦
sticky
β’
κΈ°λ³Έ μμ μ½λ
β’
μμΉ μμ± νμ©
μμΉ μμ± μ’ λ₯
μμ± | μ€λͺ
| κΈ°λ³Έ μμ μ½λ |
position | μμμ μμΉ μ§μ λ°©μ μ€μ | position: relative; |
top | μμμ μλ¨ μμΉ μ€μ | top: 20px; |
right | μμμ μ°μΈ‘ μμΉ μ€μ | right: 20px; |
bottom | μμμ νλ¨ μμΉ μ€μ | bottom: 20px; |
left | μμμ μ’μΈ‘ μμΉ μ€μ | left: 20px; |
z-index | μμμ μμ μμ μ€μ | z-index: 10; |
μμΉ μ€μ κΈ°μ€
β’
static
β’
relative
β’
absolute
β’
fixed
β’
sticky
static
relative
β’
μ΄κΈ° μμΉλ₯Ό κΈ°μ€μΌλ‘ μλμ μΌλ‘ λ°°μΉ
β’
top, bottom, left, right λ‘ μ§μ ν κΈΈμ΄λ§νΌ μ΄κΈ° μμΉμμ λ¨μ΄μ§ μμΉμ λ°°μΉ
β’
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position : relative;</title>
<link rel="stylesheet" href="css/01_relative.css">
</head>
<body>
<center><h1>position : relative;</h1></center>
<div class="container">
<!-- .relative*4{$} -->
<div class="relative first">1</div>
<div class="relative second">2</div>
<div class="relative third">3</div>
<div class="relative fourth">4</div>
<!-- .absolute*4{$} -->
<div class="absolute fifth">1</div>
<div class="absolute sixth">2</div>
<div class="absolute seventh">3</div>
<div class="absolute eighth">4</div>
</div>
</body>
</html>
HTML
볡μ¬
β’
CSS
h1 { text-align: center; }
.container {
position: relative;
width: 1200px;
height: 800px;
border: 5px dashed orange;
margin: auto;
}
.container div {
margin: auto;
width: 200px;
height: 200px;
box-sizing: border-box;
text-align: center;
font-size: 48px;
line-height: 200px;
border-radius: 10%;
}
/* position : relative; */
.container .relative {
position: relative;
border: 3px solid black;
}
/* μ΄κΈ°μμΉ */
.container .absolute {
position: absolute;
border: 1px dashed #ddd;
color: #ddd;
z-index: -1;
}
/* relative */
.first { left: 100px; }
.second { right: 100px; }
.third { top: 100px; left: 200px; }
.fourth { bottom: 100px; right: 200px; }
/* absolute */
.fifth { top: 0; left: 500px; }
.sixth { top: 200px; left: 500px; }
.seventh { top: 400px; left: 500px; }
.eighth { top: 600px; left: 500px; }
CSS
볡μ¬
absolute
β’
λΆλͺ¨ μμλ₯Ό κΈ°μ€μΌλ‘ μ λμ μΈ μμΉλ‘ λ°°μΉ
β’
νμ΄μ§μ μ μμ μΈ νλ¦μμ μ μΈ
β’
λ€λ₯Έ μμμ κ²Ήμ³μ Έμ(over-lap) λ°°μΉλ μ μμ
β’
top, bottom, left, right λ‘ μ§μ ν κΈΈμ΄λ§νΌ λΆλͺ¨ μμμμ λ¨μ΄μ§ μμΉμ λ°°μΉ
β’
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position : absolute;</title>
<link rel="stylesheet" href="css/02_absolute.css">
</head>
<body>
<center><h1>position : absolute;</h1></center>
<div class="container">
<div class="absolute first">1</div>
<div class="absolute second">2</div>
<div class="absolute third">3</div>
<div class="absolute fourth">4</div>
<!-- μ κ°μ΄λ° -->
<div class="absolute center">CENTER</div>
<div class="base fifth">1</div>
<div class="base sixth">2</div>
<div class="base seventh">3</div>
<div class="base eighth">4</div>
</div>
</body>
</html>
HTML
볡μ¬
β’
CSS
h1 { text-align: center; }
.container {
position: relative;
width: 1200px;
height: 800px;
border: 5px dashed orange;
margin: auto;
}
.container div {
margin: auto;
width: 200px;
height: 200px;
box-sizing: border-box;
text-align: center;
font-size: 48px;
line-height: 200px;
border-radius: 10%;
}
/* position : absolute; */
.container .absolute {
position: absolute;
border: 3px solid black;
}
/* μ΄κΈ°μμΉ */
.container .base {
position: absolute;
border: 1px dashed #ddd;
color: #ddd;
z-index: -1;
}
/* absolute */
.first { top: 0; left: 0; }
.second { top: 0; right: 0; }
.third { bottom: 0; left: 0; }
.fourth { bottom: 0; right: 0; }
/* base */
.fifth { top: 0; left: 500px; }
.sixth { top: 200px; left: 500px; }
.seventh { top: 400px; left: 500px; }
.eighth { top: 600px; left: 500px; }
/* λΆλͺ¨μμλ₯Ό κΈ°μ€μΌλ‘ μ κ°μ΄λ° */
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* top, left : % λ λΆλͺ¨μμμ λν λΉμ¨ */
/* translate() : % λ ν΄λΉμμμ λν λΉμ¨ */
}
CSS
볡μ¬
fixed
β’
λΈλΌμ°μ (λ·°ν¬νΈ)λ₯Ό κΈ°μ€μΌλ‘ μλμ μΈ μμΉλ‘ λ°°μΉ
β’
νμ΄μ§λ₯Ό μ€ν¬λ‘€ν΄λ κ³ μ λ μμΉλ₯Ό μ μ§
β’
top, bottom, left, right λ‘ μ§μ ν κΈΈμ΄λ§νΌ νμ΄μ§μ ν
λ리μμ λ¨μ΄μ§ μμΉμ λ°°μΉ
β’
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position : fixed;</title>
<link rel="stylesheet" href="css/03_fixed.css">
</head>
<body>
<center><h1>position : fixed;</h1></center>
<div class="container">
<div class="fixed first">1</div>
<div class="fixed second">2</div>
<div class="fixed third">3</div>
<div class="fixed fourth">4</div>
<!-- μ κ°μ΄λ° -->
<div class="fixed center">CENTER</div>
<div class="base fifth">1</div>
<div class="base sixth">2</div>
<div class="base seventh">3</div>
<div class="base eighth">4</div>
</div>
<div style="height: 2000px;"></div>
<div class="floating-btn">
λ²νΌ
</div>
</body>
</html>
HTML
볡μ¬
β’
CSS
h1 { text-align: center; }
.container {
position: relative;
width: 1200px;
height: 800px;
border: 5px dashed orange;
margin: auto;
}
.container div {
margin: auto;
width: 200px;
height: 200px;
box-sizing: border-box;
text-align: center;
font-size: 48px;
line-height: 200px;
border-radius: 10%;
}
/* position : fixed; */
.container .fixed {
position: fixed;
border: 3px solid black;
}
/* μ΄κΈ°μμΉ */
.container .base {
position: absolute;
border: 1px dashed #ddd;
color: #ddd;
z-index: -1;
}
/* absolute */
.first { top: 0; left: 0; }
.second { top: 0; right: 0; }
.third { bottom: 0; left: 0; }
.fourth { bottom: 0; right: 0; }
/* base */
.fifth { top: 0; left: 500px; }
.sixth { top: 200px; left: 500px; }
.seventh { top: 400px; left: 500px; }
.eighth { top: 600px; left: 500px; }
/* λΆλͺ¨μμλ₯Ό κΈ°μ€μΌλ‘ μ κ°μ΄λ° */
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* top, left : % λ λΆλͺ¨μμμ λν λΉμ¨ */
/* translate() : % λ ν΄λΉμμμ λν λΉμ¨ */
}
/* νλ‘ν
λ²νΌ */
.floating-btn {
position: fixed;
right: 50px;
bottom: 250px;
background-color: red;
border-radius: 50%;
width: 100px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
font-size: 30px;
cursor: pointer;
}
CSS
볡μ¬
sticky
β’
μ€ν¬λ‘€ μμΉλ₯Ό κΈ°μ€μΌλ‘ λ°°μΉ
β’
μ€ν¬λ‘€ μμΉ
β’
νμ΄μ§ μμ~μμμ μμΉ : relative
β’
κ·Έ μ΄ν : fixed
β’
IE μμλ μ§μνμ§ μμ
β’
Safari μμλ βwebkit- prefix κ° νμν¨
β’
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position : sticky;</title>
<link rel="stylesheet" href="css/04_sticky.css">
</head>
<body>
<center><h1>position : sticky;</h1></center>
<div class="container">
<div class="box"></div>
<header>HEADER</header>
<div class="box"></div>
<div class="sticky first">1</div>
<div class="sticky second">2</div>
<div class="sticky third">3</div>
<div class="sticky fourth">4</div>
<div class="base fifth">1</div>
<div class="base sixth">2</div>
<div class="base seventh">3</div>
<div class="base eighth">4</div>
</div>
<div style="height: 2000px;"></div>
</body>
</html>
HTML
볡μ¬
β’
CSS
h1 { text-align: center; }
.container {
position: relative;
width: 1200px;
height: 3000px;
border: 5px dashed orange;
margin: auto;
}
.container div {
margin: auto;
width: 200px;
height: 200px;
line-height: 200px;
box-sizing: border-box;
text-align: center;
font-size: 48px;
border-radius: 10%;
}
/* position : sticky; */
.container .sticky {
position: sticky;
border: 3px solid black;
}
/* μ΄κΈ°μμΉ */
.container .base {
position: absolute;
border: 3px dashed #ddd;
color: #ddd;
z-index: -1;
}
/*
μ€ν¬λ‘€ μμ μ : relative
μ€ν¬λ‘€ μμ λ° : fixed
*/
/* sticky */
.first { top: 100px; float: left; }
.second { top: 100px; float: left; }
.third { top: 100px; float: right; }
.fourth { top: 100px; float: right; }
/* base */
.fifth { top: 0; left: 500px; }
.sixth { top: 200px; left: 500px;}
.seventh { top: 400px; left: 500px;}
.eighth { top: 600px; left: 500px;}
.center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* top, left μ % λ λΆλͺ¨μμμ λν λΉμ¨ */
/* translate() μ % λ ν΄λΉμμμ λν λΉμ¨ */
/* translate( xμΆ, yμΆ ) */
}
header {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-color: cornflowerblue;
color: white;
font-size: 40px;
text-align: center;
line-height: 80px;
}
.box {
width: 1200px !important;
height: 300px !important;
margin-top: 80px;
border-radius: 0 !important;
background-color: royalblue;
}
CSS
볡μ¬
κΈ°λ³Έ μμ μ½λ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>μμΉ μμ± μμ</title>
<style>
/* κΈ°λ³Έ μ€νμΌ μ€μ */
body {
margin: 0;
font-family: Arial, sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
/* μμΉ μμ± μμ */
.container {
position: relative;
width: 200px;
height: 200px;
background-color: lightblue;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: coral;
top: 20px; /* μλ¨μμ 20px μμΉ */
right: 20px; /* μ°μΈ‘μμ 20px μμΉ */
z-index: 10; /* μμ μμ, κ°μ΄ ν΄μλ‘ μμ νμλ¨ */
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
HTML
볡μ¬
μμΉ μμ± νμ©
β’
μ κ°μ΄λ° μμΉ μ§μ
β’
κ³ μ ν€λ
β’
μ€ν°ν€ ν€λ
β’
νλ‘ν
λ²νΌ
μ κ°μ΄λ° μμΉ μ§μ
λΆλͺ¨ μμ λλ λΈλΌμ°μ μμ κΈ°μ€ κ°μ΄λ° μμΉνλλ‘ μ€μ ν΄λ΄
λλ€.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>μ κ°μ΄λ° μμΉ</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
.centered {
width: 200px;
height: 100px;
background-color: lightcoral;
text-align: center;
line-height: 100px;
color: white;
}
</style>
</head>
<body>
<div class="centered">μ€μ μμΉ</div>
</body>
</html>
HTML
볡μ¬
κ³ μ ν€λ
νμ΄μ§λ₯Ό μ€ν¬λ‘€ νμ¬λ, ν€λκ° μλ¨μ κ³ μ λλλ‘ ν©λλ€.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>κ³ μ ν€λ</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 15px;
text-align: center;
z-index: 1000;
}
.content {
margin-top: 60px; /* ν€λ λμ΄λ§νΌ μ¬λ°± μΆκ° */
padding: 20px;
}
</style>
</head>
<body>
<header>κ³ μ ν€λ</header>
<div class="content">
<p>μ€ν¬λ‘€νμ¬ λ΄μ©μ νμΈνμΈμ.</p>
<p>λ§μ λ΄μ©μ΄ λ€μ΄κ°λ©΄ ν€λλ κ³μ μλ¨μ κ³ μ λ©λλ€.</p>
</div>
</body>
</html>
HTML
볡μ¬
μ€ν°ν€ ν€λ
μ€ν¬λ‘€ μ μ€ν°μ²λΌ λ¬λΌλΆμ΄ κ³ μ λλ ν€λλ₯Ό λ§λ€μ΄λ΄
λλ€.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>μ€ν°ν€ ν€λ</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
position: sticky;
top: 0;
background-color: #444;
color: white;
padding: 15px;
text-align: center;
z-index: 1000;
}
.content {
height: 2000px; /* μΆ©λΆν μ€ν¬λ‘€μ μν΄ λμ΄ μ€μ */
padding: 20px;
}
</style>
</head>
<body>
<header>μ€ν°ν€ ν€λ</header>
<div class="content">
<p>μ€ν¬λ‘€νμ¬ ν€λμ μ€ν°ν€ ν¨κ³Όλ₯Ό νμΈνμΈμ.</p>
</div>
</body>
</html>
HTML
볡μ¬
νλ‘ν λ²νΌ
ν€μ΄μ§ μ°μΈ‘ νλ¨μ λ μλ λ²νΌμ λ§λ€μ΄λ΄
λλ€.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>νλ‘ν
λ²νΌ</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.floating-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background-color: #007bff;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
</style>
</head>
<body>
<div class="floating-button">+</div>
</body>
</html>
HTML
볡μ¬