box-sizing
์์ฑ์ ๋ฐ์ค์ ํฌ๊ธฐ์ ๋ํ ๊ธฐ์ค์ ์ ํ๋ค.box-sizing: content-box
์ผ ๋,.box {
box-sizing: content-box;
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid black;
margin: 15px;
}
box-sizing: border-box
์ผ ๋,.box {
box-sizing: border-box
/* border๊น์ง width์ ํฌํจ */
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid black;
margin: 15px;
}
[์ถ์ฒ: ์ ์ฃผ์ฝ๋ฉ๋ฒ ์ด์ค์บ ํ - content-box, border-box ๋น๊ต]
display
์์ฑ์ ๋ฐ์ค์ ์ฑ์ง์ ์ง์ ํ์ฌ ์์๋ฅผ ์ด๋ป๊ฒ ๋ณด์ฌ์ค์ง ๊ฒฐ์
inline | ์ค๋ฐ๊ฟ์ด ์ผ์ด๋์ง ์๋๋ค.width , heigth , margin-top , margin-bottom ๊ฐ ์ง์ ๋ถ๊ฐ |
block | ์ค๋ฐ๊ฟ์ด ์ผ์ด๋๋ค.width , heigth , margin , padding ๋ฑ ๋ชจ๋ ๊ฐ์ ์ง์ ๊ฐ๋ฅ |
inline-block | inline ์ฒ๋ผ ํ ์ค์ ์ฌ๋ฌ ์์๊ฐ ์กด์ฌํ ์ ์๊ณ , block ์ฒ๋ผ width , heigth , margin , padding ๋ฑ ๋ชจ๋ ๊ฐ์ ์ง์ ๊ฐ๋ฅ |
contents | ์ ํํ ์์์ ๋ด์ฉ ์์ด๋ ๋ค์ ์ฝํ ์ธ ๋ฅผ ๋ถ์ธ๋ค. |
flex | ๋ ์ด์์์ ๋ค๋ฃฐ ๋ ํ๋์ ํ ๋๋ ์ด์ ๋ค๋ฃธ (1์ฐจ์ ๋ ์ด์์) |
grid | 2์ฐจ์ ๋ ์ด์์์ ์ค์ ํ๋๋ฐ ์ฌ์ฉ |
[์ถ์ฒ: ์๋๋ธ]
[์ถ์ฒ: ํํ ๋ฆฌ์ผ๋ก ๋ฐฐ์ฐ๋ HTML & CSS]
<img>
ํ๊ทธ๋ inline ์์์ธ๋ฐ ์ด๋ป๊ฒwidth
๊ฐ์ ์ง์ ํ ์ ์์๊น?
=><img>
๋ ์์ธ์ ์ผ๋กwidth
๊ฐ์ ์ง์ ํ ์ ์๋ค.
- ์)
<div>์๋ ํ์ธ์</div>
์์ ์์์์ '์๋ ํ์ธ์'๋ ์์๊ฐ ์๋๋ค.
=> ๋ธ๋ผ์ฐ์ ๋ ์์๊ฐ ์๋ ๊ธ์ ํ๋ํ๋๋ฅผinline
์์๋ก ์ธ์ํ๋ค.
- ๋ ์ด์์์ ์งค ๋ ์ํ์ ๋ ฌ์ ๋งค์ฐ ์ค์ํ๋ค. ์ด ๋
display: inline-block
์์ฑ์ ์ด์ฉํ๋ฉด ์ํ์ ๋ ฌ์ ํ ์ ์์ผ๋ ์ด ๋ฐฉ๋ฒ์ ์ฌ์ฉํ์ง ์๋ ๊ฒ์ด ์ข๋ค.
=> ๊ฐ ์์ ์ฌ์ด์ ๋น ์นธ/์ค ๋ฐ๊ฟ์ด ์คํ์ด์ค๋ก ์ธ์๋์ด ์์ ์ฌ๋ฐฑ์ ๊ฐ์ง๊ฒ ๋๋ค.- ํด๊ฒฐ ๋ฐฉ๋ฒ
- ๋น ์นธ ์์ด ํ ์ค๋ก ์ฝ๋ ์์ฑ
<div></div><div></div>
- ๋ถ๋ชจ ์์์
font-siz: 0
์ ์ฉ
=> ์ด ๋ฐฉ๋ฒ์ ํด๋น ์์์ ๋ค์font-size
๋ฅผ ์ ์ฉํด์ผ ํ๋ค.
position: static
top
, bottom
, left
, right
, z-index
๊ฐ ์ ์ฉ๋์ง ์๋๋ค. position
์์ฑ ๊ฐ์ด ์ง์ ๋ ๊ฒฝ์ฐ, ์ด๋ฅผ ๋ฌด์ํ๊ธฐ ์ํด ์ฌ์ฉํ ์ ์๋ค.position: relative
static
, ์ฆ ์๋ ์์ ์ด ์์ด์ผ ํ๋ ์์น์ ์๋์ top
, bottom
, left
, right
๊ฐ์ ๋ฐ๋ผ ๋ฐฐ์นposition: absolute
position:relative, absolute, fixed
์์ฑ์ ๊ฐ์ง ๊ฐ์ฅ ๊ฐ๊น์ด ๋ถ๋ชจ ์์๋ฅผ ๊ธฐ์ค์ผ๋ก, top
, bottom
, left
, right
๊ฐ์ ๋ฐ๋ผ ๋ฐฐ์นposition
๊ฐ์ด ์ง์ ๋์ง ์์ ๊ฒฝ์ฐ, body
๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ฐฐ์น
position: absolute
๋ฅผ ์ฌ์ฉํ๋ ์ด์ ?
=> ์น ์ ๊ทผ์ฑ์ ์ด์ ์ด๋(tab
ํค๋ก ์ด๋) : ์คํฌ๋ฆฐ๋ฆฌ๋ ์ด์ฉ์์ ํค๋ณด๋ ์ฌ์ฉ์๋ฅผ ์ํด ์ฝํ ์ธ ์ ์์๊ฐ ๋ ผ๋ฆฌ์ ์ผ๋ก ์ ๊ณต๋์ด ์น ํ์ด์ง๋ฅผ ํ์ํ๋๋ฐ ์ด๋ ค์์ด ์์ด์ผ ํ๋ค.์) ์ด์ ์ด๋์ด ์์ด๋ ์ ๋ ฅ โ ๋น๋ฐ๋ฒํธ ์ ๋ ฅ โ ๋ก๊ทธ์ธ ๋ฒํผ โ ์์ด๋ ์ ์ฅ ์์๋ผ๋ฉด '๋ก๊ทธ์ธ ๋ฒํผ'์ ๋จผ์ ํด๋ฆญํ๊ธฐ ๋๋ฌธ์ '์์ด๋ ์ ์ฅ์ ๋ชปํ ๊ฐ๋ฅ์ฑ์ด ๋๋ค.
๊ทธ๋ฌ๋ฏ๋ก, ์์ด๋, ๋น๋ฐ๋ฒํธ ์ ๋ ฅ โ ์์ด๋ ์ ์ฅ โ ๋ก๊ทธ์ธ ๋ฒํผ ์์์ธ ๋ ผ๋ฆฌ์ ์ผ๋ก ์ด์ ์ด ์ด๋ํด์ผ ํ๋ค.
=> ๋ ผ๋ฆฌ์ ์ธ ์์๋ก ๋งํฌ์ ํ ํposition
์ ์ด์ฉํด ์์๋ฅผ ๋ณด๊ธฐ ์ข๊ฒ ๋ฐฐ์นํ์ฌ ์คํฌ๋ฆฐ๋ฆฌ๋ ์ด์ฉ์๋ ๋น์ด์ฉ์ ๋ชจ๋ ์น ํ์ด์ง๋ฅผ ํ์ํ๋๋ฐ ์ด๋ ค์์ด ์์ด์ผ ํ๋ค.
position: fixed
position: fixed
๊ฐ ์ง์ ๋ ์์๋ ๊ณ ์ ๋์ด ์์ง์ด์ง ์์ => ํ์
์ฐฝ, ๋ฉ๋ด, top ๋ฒํผ ๋ฑ<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3 relative_box">
position: relative์ธ box3
<div class="box absolte_box">relative ๋ด์ ์์นํ absolute_box1</div>
<div class="box">relative ๋ด์ ์์นํ box2</div>
<div class="box">relative ๋ด์ ์์นํ box3</div>
</div>
<div class="box box4 absolte_box">body ๊ธฐ์ค absolute_box4</div>
<div class="fixed_box">position: fixed</div>
<script src="script.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
/* height: 1500px; */
}
.box {
width: 150px;
height:150px;
background: rgba(0, 0, 0, 0.5);
}
.relative_box {
position: relative;
left: 50px;
width: 400px;
height: auto;
background: tomato;
}
.absolte_box {
position: absolute;
right: 0;
bottom: 50px;
}
.box1 {
background-color: antiquewhite;
}
.box2 {
background-color: aqua;
}
.box3 {
background-color: aquamarine;
}
.box4 {
background-color:slategrey;
}
.relative_box .box:nth-child(1) {
background-color: tomato;
}
.relative_box .box:nth-child(2) {
background-color: yellowgreen;
}
.relative_box .box:nth-child(3) {
background-color: violet;
}
.fixed_box {
position: fixed;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: rgba(0, 0, 0, 0.2);
}
position: sticky
<!DOCTYPE html>
<html lang="ko">
<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" />
<title>position - sticky</title>
<style>
section {
height: 1000px;
border: 3px solid #000;
}
h2 {
position: sticky;
position: -webkit-sticky;
top: 10px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<h1>sticky test</h1>
<section>
<h2>1. ์ค๋์ ์์นจ ๋ฉ๋ด</h2>
<ul>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta
exercitationem odit similique non maiores eveniet quidem reiciendis
aperiam quas fugiat? Minus ducimus culpa inventore sunt pariatur
mollitia dolorum nemo reiciendis, fuga alias voluptatum facere modi
officia debitis soluta error, odio nobis consequuntur. Atque placeat
nulla sed sequi officiis architecto doloribus.
</li>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta
exercitationem odit similique non maiores eveniet quidem reiciendis
aperiam quas fugiat? Minus ducimus culpa inventore sunt pariatur
mollitia dolorum nemo reiciendis, fuga alias voluptatum facere modi
officia debitis soluta error, odio nobis consequuntur. Atque placeat
nulla sed sequi officiis architecto doloribus.
</li>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta
exercitationem odit similique non maiores eveniet quidem reiciendis
aperiam quas fugiat? Minus ducimus culpa inventore sunt pariatur
mollitia dolorum nemo reiciendis, fuga alias voluptatum facere modi
officia debitis soluta error, odio nobis consequuntur. Atque placeat
nulla sed sequi officiis architecto doloribus.
</li>
</ul>
</section>
<section>
<h2>1. ์ค๋์ ์ ์ฌ ๋ฉ๋ด</h2>
<ul>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta
exercitationem odit similique non maiores eveniet quidem reiciendis
aperiam quas fugiat? Minus ducimus culpa inventore sunt pariatur
mollitia dolorum nemo reiciendis, fuga alias voluptatum facere modi
officia debitis soluta error, odio nobis consequuntur. Atque placeat
nulla sed sequi officiis architecto doloribus.
</li>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta
exercitationem odit similique non maiores eveniet quidem reiciendis
aperiam quas fugiat? Minus ducimus culpa inventore sunt pariatur
mollitia dolorum nemo reiciendis, fuga alias voluptatum facere modi
officia debitis soluta error, odio nobis consequuntur. Atque placeat
nulla sed sequi officiis architecto doloribus.
</li>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta
exercitationem odit similique non maiores eveniet quidem reiciendis
aperiam quas fugiat? Minus ducimus culpa inventore sunt pariatur
mollitia dolorum nemo reiciendis, fuga alias voluptatum facere modi
officia debitis soluta error, odio nobis consequuntur. Atque placeat
nulla sed sequi officiis architecto doloribus.
</li>
</ul>
</section>
<section>
<h2>1. ์ค๋์ ์ ๋
๋ฉ๋ด</h2>
<ul>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta
exercitationem odit similique non maiores eveniet quidem reiciendis
aperiam quas fugiat? Minus ducimus culpa inventore sunt pariatur
mollitia dolorum nemo reiciendis, fuga alias voluptatum facere modi
officia debitis soluta error, odio nobis consequuntur. Atque placeat
nulla sed sequi officiis architecto doloribus.
</li>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta
exercitationem odit similique non maiores eveniet quidem reiciendis
aperiam quas fugiat? Minus ducimus culpa inventore sunt pariatur
mollitia dolorum nemo reiciendis, fuga alias voluptatum facere modi
officia debitis soluta error, odio nobis consequuntur. Atque placeat
nulla sed sequi officiis architecto doloribus.
</li>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta
exercitationem odit similique non maiores eveniet quidem reiciendis
aperiam quas fugiat? Minus ducimus culpa inventore sunt pariatur
mollitia dolorum nemo reiciendis, fuga alias voluptatum facere modi
officia debitis soluta error, odio nobis consequuntur. Atque placeat
nulla sed sequi officiis architecto doloribus.
</li>
</ul>
</section>
</body>
</html>
z-index
position
์์ฑ์ ๊ฐ์ง ์์์ ๋ํด z์ถ ์์ ์์นz-index
๊ฐ ์ง์ ๋ ๊ฒฝ์ฐ, ๋์ ๋ฒํธ๋ฅผ ๊ฐ์ง ๋ ์ด์ด๋ ๋ฎ์ ๋ฒํธ๋ฅผ ๊ฐ์ง ๋ ์ด์ด ์์ ์์นfloat
์ ์๋ ์ฌ์ง์ฒ๋ผ ๊ทธ๋ฆผ์ ๋ฐ๋ผ ํ๋ฅด๋ ํ
์คํธ ๋ ์ด์์์ ์น์์ ๊ตฌํํ๊ธฐ ์ํด ํ์ํ ์์ฑfloat: left
/float: right
์ ์ฑ์ง์ ๋ธ๋ก ๋ฐ์ค์ ํด๋นํ๋ ๋งํผ์ ๊ณต๊ฐ๋ง ์ฐจ์งํ๊ณ ๋๋จธ์ง ๋ด์ฉ์ ๋ฐ์ค ์ค๋ฅธ์ชฝ/์ผ์ชฝ์ ์์นํ๋ฉฐ ์์์ ์๋์ ๋ฐฉํฅ์ธ ํ๋ฆ์ ๊ฐ์ง[์ถ์ฒ: Web Animation 1๋ถ css Animation - <img>
์ float
์ ์ฉ]
float
์์ฑ์ ๊ฐ์ง ๋ ๋ถ๋ชจ ์์๊ฐ ์์ ์์๋ค์ ์ธ์งํ์ง ๋ชปํ๋ค.height
๊ฐ์ ์๋๋ค.[์ถ์ฒ: Web Animation 1๋ถ css Animation - float
์ ์ฉ ์ ]
[์ถ์ฒ: Web Animation 1๋ถ css Animation - float
์ ์ฉ ํ]
float
๋ ์์ ์์๋ฅผ ์ธ์ํ ์ ์๊ฒ ํ๋ ๋ฐฉ๋ฒ = float
ํด์ overflow
์์ฑ ์ถ๊ฐoverflow: hidden
/ overflow: scroll
๋ฑ์ ํ์ํ ์์ฑ์ ์ถ๊ฐ display: inline-block
์์ฑ ์ถ๊ฐclear
์์ฑ ์ ์ฉfloat
์ด ์ฌ์ฉ๋ ์์์ ๋ฐ๋ก ๋ค์ ํ์ ์์์ float
์ ๋ ฌ์ ๋ฐฉํฅ์ ๋ฐ๋ผ clear
์์ฑ์ ์ ์ฉ::after
๊ฐ์์์๋ฅผ ์ด์ฉํ์ฌ clear
์์ฑ ์ ์ฉdisplay: block
์์ฑ์ด ์์ผ๋ฉด ์ ์ฉ๋์ง ์๋๋ค..clear::after {
content: "";
display: block;
clear: both;
}
- ๊ฐ์ ์์ ๋ง๋ค๊ธฐ
::after
: ๊ฐ์ฅ ๋ง์ง๋ง ์์ ์์๊ฐ ๋๋ค.::before
: ๊ฐ์ฅ ์ฒซ ๋ฒ์งธ ์์ ์์๊ฐ ๋๋ค.- ๊ฐ์ ์์๋ฅผ ์ด์ฉํ๋ ์ด์ ?
- ์๋ฏธ์๋ html์ ๋ง๋ค์ง ์๊ณ ํ์ํ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ธฐ ์ํด
=> ํ์์๋ html์ ์ต๋ํ ์์ ํด์ผ ํ๋ค.
<!DOCTYPE html>
<html lang="ko">
<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" />
<title>Login Layout</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");
@import "../reset.css";
* {
box-sizing: border-box;
}
body {
color: #404040;
font-family: "Noto Sans KR", sans-serif;
}
.login-container {
width: 350px;
height: 135px;
margin: 20px;
padding: 16px;
border: 1px solid #dae1e6;
background-color: #f7f9fa;
}
.login-container p {
color: #808080;
font-size: 14px;
}
.login-btn {
width: 100%;
margin: 15px 0 10px;
padding: 15px 0;
border: 1px solid #15c654;
background-color: #19ce60;
color: #fff;
font-size: 13px;
}
.login-btn::before {
content: "";
display: inline-block;
width: 60px;
height: 12px;
margin-right: 8px;
background-image: url(images/title.png);
background-size: 60px;
}
a {
color: inherit;
font-size: 13px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.find-id::before {
content: "";
display: inline-block;
width: 10px;
height: 14px;
margin-right: 5px;
background-image: url(images/lock.png);
background-size: 10px;
}
.find-pw::before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
margin-right: 5px;
border-radius: 50%;
background-color: #d7dce0;
vertical-align: middle;
}
.sign-up::before {
content: "";
display: inline-block;
width: 11px;
height: 11px;
margin-right: 5px;
background-image: url(images/user.png);
background-size: 11px;
}
.sign-up {
float: right;
}
footer::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<article class="login-container">
<p>๋ค์ด๋ฒ๋ฅผ ๋ ์์ ํ๊ณ ํธ๋ฆฌํ๊ฒ ์ด์ฉํ์ธ์</p>
<!-- button ๋ณด๋ค a๋ก ์์ฑํ๋ ๊ฒ์ด ์ ์ -->
<button type="button" class="login-btn">๋ก๊ทธ์ธ</button>
<footer>
<a href="#" class="find-id">์์ด๋</a>
<a href="#" class="find-pw">๋น๋ฐ๋ฒํธ์ฐพ๊ธฐ</a>
<a href="#" class="sign-up">ํ์๊ฐ์
</a>
</footer>
</article>
</body>
</html>
<img>
์alt
๊ฐ์ด ํ์ํ์ง ์์๋alt=""
๋ฅผ ์์ฑํ๋ ์ด์
=> ์คํฌ๋ฆฐ๋ฆฌ๋๊ฐalt
๊ฐ์ด ๋น์ด์๋ ๊ฒฝ์ฐ ์ค๋ช ์ด ํ์์๋ ์ด๋ฏธ์ง๋ก ์ธ์ํ์๋ฏผalt
์์ฑ ์์ฒด๊ฐ ์์ผ๋ฉดsrc
์ ๊ธ์ ํ๋ํ๋ ์ฝ๋๋ค.
vertical-align
์์ฑ
=>inline
์์์๋ง ์ ์ฉ์ด ๊ฐ๋ฅ
=>vertical-align: middle
์ ๋ผ์ธ์ ์ค์ฌ์ด ์๋๋ค. ์ฐธ๊ณ ๋งํฌ
div.container
๋ฅผ ํตํด ์์์์์ธ div.item
์ ์ปจํธ๋กคflex-container
, ์ํฅ์ ๋ฐ๋ ์์ ์์๋ฅผ flex-item
์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.flex
๋ ์์ ์ ์ง๊ณ ์์์๊ฒ๋ง ์ํฅ์ ์ค๋ค. <div class="container">
<div class="item">box1</div>
<div class="item">box2</div>
<div class="item">box3</div>
</div>
.container {
display: flex;
/* display: inline-flex; */
}
row
์ผ ๋, cross-axis๋ colum
colum
์ผ ๋, cross-axis๋ row
flex-direction
flex-direction: row | flex-direction: row-reverse |
flex-direction: column | flex-direction: column-reverse |
justify-content
.container {
display: flex;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
}
flex-start | ๊ธฐ๋ณธ๊ฐ, ์์ดํ ์ ์์์ ์ ์ ๋ ฌ |
flex-end | ์์ดํ ์ ๋์ ์ ์ ๋ ฌ |
center | ์์ดํ ์ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌ |
space-between | ์์ดํ
๋ค์ โ์ฌ์ด(between)โ์ ๊ท ์ผํ ๊ฐ๊ฒฉ ์ปจํ ์ด๋ ์ ๋์ ์ฌ๋ฐฑ ์์ด ์ ๋ ฌ |
space-around | ์์ดํ
๋ค์ โ๋๋ (around)โ์ ๊ท ์ผํ ๊ฐ๊ฒฉ ์์ดํ ์ ์์ชฝ ์ฌ๋ฐฑ์ ํฌํจํ์ฌ ์ ๋ ฌ |
space-evenly | ์์ดํ ๋ค์ ์ฌ์ด์ ์ปจํ ์ด๋ ์ ๋์ ๊ท ์ผํ ๊ฐ๊ฒฉ |
ํ ๋ฒ ๊ณต๋ถํ ๊ฒ์ ๊ณต๋ถํ ๊ฒ์ด ์๋๋ค.
๋ผ๋ ๋ง์ด ์๋ฟ์๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฐ์ ๋ด์ฉ์ด๋๋ผ๋ ์ฌ๋ฌ ์ ์๋์ ๊ฐ์๋ฅผ ํตํด ์ตํ๋ฉด ์ดํด๋๊ฐ ๋์์ง๋ค๋ ๋ถ๋ถ๋ ๊ณต๊ฐ์ด ๋์๋ค.