[HTML/CSS] Day5. CSS Basic ๐ท
์ค๋์ ๊ฐ์๋ ํน๊ฐ์ผ๋ก ์ด๋ฃจ์ด์ก๋ค.
ํน๊ฐ์ ์งํํ๋ ๊ฐ์ฌ๋์ ๋ฌด๋ ค ์ ํ๋ธ์ฑ๋ "๋น์บ ํ"์ ์ด์ข
์ฐฌ ๊ฐ์ฌ๋!
ํ์ฐฝ ๊ตญ๋นํ์์์ CSS๋ฅผ ๋ฐฐ์ธ ๋ ์ข
์ข
๋ณด๋ ์ ํ๋ธ์ ๊ทธ ๊ฐ์ฌ๋๊ป์ ์ฐ๋ฆฌ์๊ฒ ํน๊ฐ์ ์ค์๋ค๋?!
๊ฐ์ฌ๋๊ป์ ๊ฐ๋ฅด์ณ์ฃผ์๋๋ฐ ์ ํ๋ธ ์์์ ๋ณด๋ ๊ฒ์ฒ๋ผ ๋๊ฐ์ผ์
์ ๋๋ฌด ์ ๊ธฐํ๊ณ ์ฌ๋ฏธ์์๋ค. ํน๋ณํ๊ณ ์ ๋ง ์ฌ๋ฐ๋ ๊ฐ์์๊ธฐ๋ ํ์ง๋ง ๋๋ฌด ์ธ์๊น์๋ ๊ฐ์์ธ ๊ฒ ๊ฐ์ ์๊ฐ์ด ๋๋ฌด ๋นจ๋ฆฌ ๊ฐ๋ค. ๐ข
ํ๋ฒ ๋ ์ค์
จ์ผ๋ฉด...(์ ๋ฐ...)
์ค๋์ ํน๊ฐ์ ์ด์ข
์ฐฌ ๊ฐ์ฌ๋์ ํธ๋ ์ด๋ ๋งํฌ์ธ CSS ํน๊ฐ!
์ญ์ CSS์ ์ฅ์ธ์ด์ ๊ฐ์ฌ๋๊ป์ ๊ฐ๋ฅด์ณ ์ฃผ์๋ ๋๋ฌด ์๊ด์ด์๋ค! ๐คฉ
์ด์ ๋ถํฐ ๊ฐ์ฌ๋์ด ๊ฐ๋ฅด์ณ์ฃผ์ ๋ชจ๋ ๊ฒ์ ์ ๋ฆฌํด๋ณด์!
ํ๋กํ ๊พธ๋ฏธ๊ธฐ ๐
์ฐ๋ฆฌ๊ฐ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์ ๋ง๋ค์ด์ผํ๋ ๊ฒ์ "ํ๋กํ ๊พธ๋ฏธ๊ธฐ"์๋ค.
๋ง์ฝ ๋ด๊ฐ ์ทจ์
์ ์ํด ์๊ธฐ์๊ฐ๋ฅผ ํ๋ ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋ค๋ ์ ์ฉํ ์์
์ด๊ณ
๋ค์ํ CSS๋ฅผ ์ฌ์ฉํด๋ณผ ์ ์๋ ์์ ๋ผ์ ์์ํ ๋๋ถํฐ ๋ค๋ ์๋ ์ํ์๋ค.
์ ์ฒด์ ์ธ HTML ์์ค ์ฝ๋๋ ์ด๋ ๋ค.
๋๋ .wrapper
.header
.contents
.footer
๋ณ๋ก ์ค๋ช
์ ํด๋ณผ ๊ฒ์ด๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PROFILE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- wrapper ์์ -->
<div class="wrapper">
<!-- header ์์ -->
<div class="header">
<img class="profile" src="./images/profile02.png" alt="">
<h1>GLENN LEE</h1>
<p>FRONTEND DESIGNER</p>
</div>
<!-- header ๋ -->
<!-- contents ์์ -->
<div class="contents">
<div class="section information">
<h2>Information</h2>
<ul class="list">
<li><a href="#">Shin Hyunwoo</a></li>
<li><a href="#">[email protected]</a></li>
<li><a href="#">Busan, Korea</a></li>
</ul>
</div>
<div class="section skills">
<h2>Skills</h2>
<ul class="list">
<li><a href="#">Photoshop</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">HTML + CSS</a></li>
</ul>
</div>
</div>
<!-- contents ๋ -->
<!-- footer ์์ -->
<div class="footer">
<a class="icon github" href="#">Github</a>
<a class="icon facebook" href="#">Facebook</a>
<a class="icon email" href="#">Contact</a>
</div>
<!-- footer ๋ -->
</div>
</body>
<!-- wrapper ๋ -->
</html>
reset CSS ๐
reset CSS
๋ ํ๊ทธ๋ง๋ค ๊ธฐ๋ณธ๊ฐ์ผ๋ก ๊ฐ์ง๋ ๊ฐ์ด ์๋ค. ์ด๊ฒ์ User agent stylesheet
๋ผ๊ณ ํ๋ค.
์ด๋ ๋ธ๋ผ์ฐ์ ๋ง๋ค ์ค์ ๊ฐ์ด ๋ค ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ํ ๊ฐ์ง ์ฝ๋๋ฅผ ์ ์ฉํ์ ๋ ๊ฒฐ๊ณผ๊ฐ ๋ค๋ฅธ ๊ฒฝ์ฐ๊ฐ ์๋ค.
์ด๋ฌํ ๋ถํธํจ์ ์์ ๊ธฐ ์ํด ํ๊ทธ๊ฐ ๊ฐ์ง๊ณ ์๋ ๋ธ๋ผ์ฐ์ ๋ณ ๊ธฐ๋ณธ๊ฐ์ ์ด๊ธฐํ ์์ผ์ฃผ๋ ๊ฒ์ด "reset CSS
๋ฅผ ์ค์ ํ๋ค." ๋ผ๊ณ ํ๋ค.
<body>
ํ๊ทธ๊ฐ ๊ฐ์ง๋ ๊ธฐ๋ณธ ๊ฐ์ ์ด๋ ๋ค.
<body>
๋ display:block
์ด ์ ์ฉ๋ "๋ธ๋ก ๋ ๋ฒจ ์์"์ด๋ฉฐ, margin:8px
์ด ๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ์ง๋ค๊ณ ๋์์๋ค.
์ด๋ฅผ ์ด๊ธฐํ ์ํค๊ธฐ ์ํด์ <body>
์ ์ด๊ธฐํ๋ฅผ ์ํ CSS๋ฅผ ์ ์ฉ์์ผ์ผ ํ๋ค.
body{
margin:0;
padding:0;
}
์ด๋ ๊ฒ ์ ์ฉ์ ์ํค๋ฉด margin:8px
์ ์ทจ์์ ์ด ๊ทธ๋ ค์ง๋ฉด์ ์ด๊ธฐํ๊ฐ ๋๋ค.
๊ฐ์ฌ๋๊ป์๋ ๋ฌผ๋ก ์ด๋ฏธ ๊ฐ๋ฐ์๋ค์ด ๋ง๋ ๋ค์ํ reset CSS
๊ฐ ์์ง๋ง ์ง์ ์์ฑํ๊ณ ์ด๋ ๊ฒ ํ๋์ฉ ์ด๊ธฐํ๋ฅผ ์์ผ๋๊ฐ๋ ๊ณผ์ ์ CSS ๊ณต๋ถ์ ์์ฃผ ๋์์ด ๋๋ค๊ณ ํ๋ค. ๊ทธ๋์ ํ๋์ฉ ๋ค ์์ฑํด์ ๋ง์ ํ๊ทธ๋ฅผ ์ด๊ธฐํ ์์ผ์ฃผ์๋ค.
๊ฐ์ฌ๋์ด ๋ง์ํ์ ๊ฐ๋ฐ์๋ค์ด ๋ง๋ reset CSS
๋ ์ด ๊ณณ์์ ๋ณผ ์ ์๋ค.
/* reset */
body,p, ul{
margin:0;
padding:0;
}
body{
background-image: url(./images/background.gif);
background-position: center;
background-attachment: fixed;
background-size: cover;
}
h1, h2{
margin: 0;;
font-size:inherit;
font-weight: initial;
}
li{
list-style: none;
}
a{
text-decoration: inherit;
color:inherit;
}
<body>
์ .wrapper ๋ถ๋ถ ์ค๋ช
๐
<body>
์๋ reset CSS
๋ฅผ ์ ์ธํ๊ณ ์๋์ CSS๋ฅผ ์ ์ฉํ์๋ค.
body{
background-image: url(./images/background.gif);
background-position: center;
background-attachment: fixed;
background-size: cover;
}
<body>
ํ๊ทธ์ "๋ฐฐ๊ฒฝ์ด๋ฏธ์ง"์ ๊ด๋ จ๋ Property
๊ฐ ๋ง์ ๊ฒ์ด ๋ณด์ผ ๊ฒ์ด๋ค.
background-image
: ์ค์ ํ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ํ์ผ์ ์ ํํ๋ค.background-position
: ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ์์น๋ฅผ ์ค์ ํ๋ค.background-attachment
: ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ๋ทฐํฌํธ ๋ด์์ ๊ณ ์ ํ ์ง, ์์ ์ ์ปจํ ์ด๋ ๋ธ๋ก๊ณผ ํจ๊ป ์คํฌ๋กคํ ์ง ์ง์ ํ๋ค.background-size
: ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ์ฌ์ด์ฆ๋ฅผ ์ค์ ํ๋ค. ์ฃผ๋ก ๊ฝ ์ฑ์ฐ๊ธฐ ์ํดcover
๋ฅผ ์์ฑ๊ฐ์ผ๋ก ์ฌ์ฉ๋๋ค.
์์ ์ด๋ฏธ์ง๋ background-size:cover
๋ฅผ ์ ์ฉํ์ง ์์์ ๋์ด๋ค. ์์ธํ ๋ฐฐ๊ฒฝ์ ๋ณด๋ฉด ๋ฐ๋ํ์์ผ๋ก ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๊ฐ ๋ฐ๋ณต๋์ด ์๋ ๊ฒ์ ๋ณผ ์ ์๋ค. ํ์ง๋ง ์ ์ฉ์ ์ํค๋ฉด ์ ์์ ์ธ ๊น๋ํ ๋ฐฐ๊ฒฝ์ด ๋์ค๊ฒ ๋๋ค.
background-size:cover
๋ ์ด๋ฏธ์ง๊ฐ ์ฐ๊ทธ๋ฌ์ง์ง ์๋ ํ๋ ๋ด์์ ์ ์ผ ํฌ๊ฒ ์ค์ ํ๊ณ ๋ง์ฝ ์ด๋ฏธ์ง์ ๊ฐ๋ก์ธ๋ก๋น๊ฐ ๋ค๋ฅด๋ค๋ฉด ์ธ๋ก ๋๋ ๊ฐ๋ก ๋ฐฉํฅ์ผ๋ก ๋น ๊ณต๊ฐ์ด ์์ด ์ค์ ํ๋ ๊ฒ์ด๋ค.
์ฝ๊ฒ ์๊ฐํด์ ๊ฐ๋ก ์ธ๋ก์ ๋ง๊ฒ ์ด๋ฏธ์ง๋ฅผ ์์๋์ง ์๋ ์ ์์ ๊ฝ ์ฑ์์ค๋ค๊ณ ์๊ฐํ๋ฉด ๋๋ค.
๋ฌผ๋ก ๋ฐฐ๊ฒฝ์ด ๋ฐ๋ํ์์ผ๋ก ๋ฐ๋ณต๋์ด ์ ์ฉ์ด ๋๋ ๊ฒ์ background-repeat:no-repeat
๋ก ํด๊ฒฐํ ์ ์์ผ๋ background-size:cover
๋ฅผ ํตํด ๋ฌธ์ ๋ฅผ ๋ฐ๋ก ํด๊ฒฐํ ์ ์๋ค.
background-attachment:fixed
๋ ๋ฐฐ๊ฒฝ์ ๋ทฐํฌํธ์ ๋ํด ๊ณ ์ ํ๋ค. ์ค๊ฐ์ ํ๋กํ ์นด๋๋ ์์ง์ด์ง๋ง ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ๊ณ ์ ์ด ๋์ด ์คํฌ๋กค์ด ํํด์ ธ๋ ๋ทฐํฌํธ์ ๊ทธ๋๋ก ๊ณ ์ ๋์ด ์๋ค.
์ด ์์ฑ์ ์ฃผ๋ก ๊ณต๊ฐ๊ฐ์ ์ฃผ๋ 'ํจ๋ด๋ ์ค ๋์์ธ'์ ์ฃผ๋ก ์ฌ์ฉ๋๋ค.
๋ค์ ์์ค์ฝ๋๋ฅผ ๋ณด๋ฉด ๊ฐ์ฅ ๋ฐ๊นฅ์ชฝ์ ์ ์ฒด ํ๊ทธ๋ฅผ ๊ฐ์ผ .wrapper
ํ๊ทธ๊ฐ ์์ ๊ฒ์ด๋ค.
์ฌ๊ธฐ์ ์ ์ฉ๋ CSS๋ฅผ ์ดํด๋ณด์
.wrapper{
background-color: #ddd;
width:800px;
margin:100px auto;
}
์ฐ์ .wrapper
์ ์ ์ฒด ๋ฐฐ๊ฒฝ์์ #ddd
๋ก ์ ์ฉ์์ผฐ๊ณ width:800px
์ ์ ์ฉ์์ผฐ๋ค.
width
๋ฅผ ์ค์ ํ ์ด์ ๋ ์ ์ฒด ํ๊ทธ๋ฅผ ๊ฐ์ธ๋ .wrapper
๋ฅผ margin:100px auto
๋ฅผ ํตํด ํ์ด์ง์ "์ค์ ์ ๋ ฌ"์ ํ๋ ค๋ ๋ชฉ์ ์ด ์๋ค.
๊ทธ๋ฆฌ๊ณ ๊ตณ์ด .wrapper
๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ฒด ํ๊ทธ๋ฅผ ๊ฐ์ธ๋ ์ด์ ๋ ์ถํ์ ๋์์ธ์ด๋ ๊ธฐ๋ฅ์ด ์
๋ฐ์ดํธ ๋์์ ๋ ์ถ๊ฐํ ์ฝ๋๋ฅผ ๋ฃ๊ธฐ๋ง ํด๋ ํ์ด์ง์ ์ค์ ์ ๋ ฌ์ด ๋์ด์๊ธฐ ๋๋ฌธ์ ๋ฏธ๋์ ํธ์์ฑ๊ณผ ๋ฒ์ฉ์ฑ์ ์ํด ํ๋ค๊ณ ํ์
จ๋ค.(๋ฉ๋ชจ๋ฉ๋ชจ)
๊ฐ์ฌ๋๊ป์๋ ๋จ์ํ ๋์์ธ์ด์ง๋ง "๋ฏธ๋๋ฅผ ์๊ฐํ๋ CSS"๋ฅผ ๊ณ ๋ฏผํ๋ ๊ฒ์ด ์ค์ํ๋ค๊ณ ํ์ จ๋ค.
.header ๋ถ๋ถ ์ค๋ช ๐
.header
์์ ์ด๋ฏธ์ง๊ฐ ๋ํ๋ด๋ ๋ถ๋ถ์ ๊ฐ๋ฆฌํจ๋ค.
- ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง
- ํ๋กํ ์ด๋ฏธ์ง
- ์ด๋ฆ
- ์ง์
์ด๋ ๊ฒ 4๊ฐ์ง๋ก ๊ตฌ์ฑ์ด ๋์ด ์๋ค.
div{
margin: 0 auto;
}
.header{
background-image: url(./images/cover04.png);
background-size: cover;
height: auto;
text-align: center;
color:#fff;
padding:50px 0;
}
.header img.profile{
border:10px solid #fff;
border-radius: 200px / 50px;
}
.header h1 {
font-size: 100px;
}
.header p{
border-top:4px solid;
display: inline-block;
padding: 10px 20px;
margin:20px auto;
}
.header
์ background-image
background-size
๋ฅผ ์ค์ ํ์ฌ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ ์ฒด ๋์ด๋งํผ ์ ์ฉํ์๋ค.
.header
์์ ์ค์ํ ๊ฒ์ text-align: center
๋ถ๋ถ์ด๋ค. ์ ์ด ์์ฑ์ด ์ค์ํ์ง ์ค๋ช
ํ๊ฒ ๋ค.
<!-- header ์์ -->
<div class="header">
<img class="profile" src="./images/profile02.png" alt="">
<h1>GLENN LEE</h1>
<p>FRONTEND DESIGNER</p>
</div>
<!-- header ๋ -->
๋ณด์๋ค์ํผ .header
์์๋ <img>
, <h1>
, <p>
ํ๊ทธ๊ฐ ์๋ค.
๊ทผ๋ฐ ์ด ํ๊ทธ๋ค์ text-align: center
๊ฐ ์์ผ๋ฉด ์ด๋ป๊ฒ ๋ ๊น?
์์ฒ๋ผ ์ผ์ชฝ ์ ๋ ฌ์ด ๋๋ค.
์ฐ๋ฆฌ๋๋ผ๋ ๊ธ์ ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ์ ์ฝ๋๋ค. ์ด๋ ์ฌ๊ธฐ์๋ ์ ์ฉ์ด ๋๋๋ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ๋๋ผ๋ง๋ค ๋ค๋ฅด์ง๋ง ์ฐ๋ฆฌ๋๋ผ๋ ์ ๋ ฌ์ ์ค์ ํ์ง ์์ผ๋ฉด ๊ธฐ๋ณธ์ ์ผ๋ก "์ผ์ชฝ ์ ๋ ฌ"์ ์ ์ฉํ๋ค.
๊ทธ๋์ .header
์ ์์ ํ๊ทธ๋ค์ด ์ผ์ชฝ์ผ๋ก ์ ๋ ฌ์ด ๋ ๊ฒ์ด๋ค. ์ด๋ฅผ ๋์์ธ์ ์ผ๋ก ๋ง๋ค๊ธฐ ์ํด text-align: center
์ ์ ์ฉํ์๋ค.
๊ฐ์ฌ๋๊ป์ ์ฝ๋ฉ์ ํ ๋ ๋ฌธํ์ ์ธ ์ฐจ์์์ ์ ๊ทผํ๋ฉด ์ด์ ๊ฐ ๋์ค๋ ๊ฒฝ์ฐ๊ฐ ์๋ค๋ ๋งํ์ จ๋๋ฐ ์ฝ๋ฉ์ ํ๋ฉด์ ๊ทธ๋ฐ ์๊ฐ์ ํ์ ๋ค๋ ๊ฒ์ด ๋ ํ๋ฒ ์กด๊ฒฝ์ฌ์ ๊ฐ์ง๊ฒ ๋์๋ค.
๊ทธ๋ฆฌ๊ณ ๋ค์ ๋ด์ผํ๋ ํฌ์ธํธ <p>
์ "์์ชฝ ์ "์ด๋ค.
.header p{
border-top:4px solid;
display: inline-block;
padding: 10px 20px;
margin:20px auto;
}
<p>
๋ ๊ธฐ๋ณธ์ ์ผ๋ก ํ ์ค์ ์ฐจ์งํ๋ "๋ธ๋ก ๋ ๋ฒจ ์์"์ด๋ค. ๊ทธ๋ฌ๋ฉด ์์ ์ ์ ํ ์ค์ ์ฐจ์งํ๋ ๊ฒ์ด ์ ์์ธ๋ฐ ์ ์กฐ๊ธ๋ง ์ฐจ์งํ๋ ๊ฒ์ผ๊น?
์ด๋ display: inline-block
๊ฐ ์ ์ฉ์ด ๋์๊ธฐ ๋๋ฌธ์ด๋ค. <p>
๋ ๊ธฐ๋ณธ์ ์ผ๋ก "๋ธ๋ก ๋ ๋ฒจ ์์"์ด์ง๋ง display
์์ฑ์ ์ฌ์ฉํ์ฌ ๋ธ๋ก ๋ ๋ฒจ ์์์ ์ธ๋ผ์ธ ์์์ ํน์ง์ ๋ ๋ค ๊ฐ์ง๋ "์ธ๋ผ์ธ ๋ธ๋ก ๋ ๋ฒจ ์์"๊ฐ ๋๋ค.
์ธ๋ผ์ธ ๋ธ๋ก ๋ ๋ฒจ ์์๋ ์ธ๋ผ์ธ์ ํน์ง์ธ "์ฝํ
์ธ ๋งํผ์ ๋์ด๋ง์ ์ฐจ์ง"ํ๋ฉฐ ๋ธ๋ก ๋ ๋ฒจ ์์์ ์ฌ์ฉํ๋ ์์ฑ์ธ width
/height
์ padding
/margin
์ ์ ์ฉ์ด ๊ฐ๋ฅํ๋ค.
์๋ฅผ ์ ๋ฆฌํด๋ณด๋ฉด <p>
๋ ์ธ๋ผ์ธ ๋ธ๋ก ์์๊ฐ ๋์ด ์ฝํ
์ธ ๋งํผ์ ๋๋น๋ฅผ ์ฐจ์งํ๊ฒ ๋์ด ์์ ์ ๋ํ ๊ทธ์ ๋ง์ถฐ์ง๊ฒ ๋์์ผ๋ฉฐ padding
๋ฅผ ์ ์ฉ์์ผ์ ์ฝํ
์ธ ๋๋น๋ฅผ ๋ํ ๋ ๊ธธ์ด์ง๊ฒ ํ๊ณ ํ
์คํธ์ ์ ๊ฐ์ ๊ฑฐ๋ฆฌ์ ์ฃผ์๋ค.
.contents ๋ถ๋ถ ์ค๋ช ๐
<!-- contents ์์ -->
<div class="contents">
<div class="section information">
<h2>Information</h2>
<ul class="list">
<li><a href="#">Shin Hyunwoo</a></li>
<li><a href="#">[email protected]</a></li>
<li><a href="#">Busan, Korea</a></li>
</ul>
</div>
<div class="section skills">
<h2>Skills</h2>
<ul class="list">
<li><a href="#">Photoshop</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">HTML + CSS</a></li>
</ul>
</div>
</div>
<!-- contents ๋ -->
.contents{
padding:30px;
}
.section{
background-image: url(./images/icon-information.png);
background-repeat: no-repeat;
background-position: right 30px center;
background-color: white;
padding: 20px;
margin-bottom: 20px;
}
.section:last-child{
margin-bottom: 0;
}
.section.skills{
background-image: url(./images/icon-skills.png);
}
.section h2{
color:salmon;
font-size:20px;
margin-bottom: 20px;
}
.list li{
border-left: 5px solid #ddd;
padding : 2px 10px;
}
.list li:hover{
border-color:pink;
color:pink;
}
๊ฐ์ธ์ ์ผ๋ก ์กฐ๊ธ ๊ณ ๋ฏผ์ ํ๊ฒ ๋๋ ๋ถ๋ถ์ด์๋ค.
๋์๋ค๋ฉด <section>
์ ์ด๋ฏธ์ง๋ฅผ ๋ฐฐ๊ฒฝ์ด ์๋ <img>
๋ก ๋ฃ์์ ๊ฒ์ด๋ค.
ํ์ง๋ง ๊ฐ์ฌ๋๊ป์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ก ์ ์ฉํ๋ ์ด์ ๋ ์ฌ์ฉํ๋ ์ด๋ฏธ์ง ์์ฒด์๋ ์๋ฌด๋ฐ ์๋ฏธ๊ฐ ์๊ธฐ ๋๋ฌธ์ด๋ผ๊ณ ํ์
จ๋ค.
<img>
๋ ์ปจํ
์ธ ์ผ ๋, ์ฆ ๋ด์ฉ์ ๋ด๊ณ ์์ ๋ ์ฌ์ฉํ๋ ๊ฒ์ด๋ผ๊ณ ํ์
จ๋ค.
๊ทธ๋ฆฌ๊ณ background-position: right 30px center
์ด ์กฐ๊ธ ํท๊ฐ๋ ธ๋ค.
๋ณดํต ์์ฑ์ ๊ฐ์ center
๋ง ์ฐ๋ค๋ณด๋ ๋ค๋ฅด๊ฒ ์ฐ๋ ๋ฐฉ๋ฒ์ ์์ด๋ฒ๋ฆฐ ๊ฒ ๊ฐ์ ๋ค์ ์ ๋ฆฌํ๋ค.
/* ๊ฐ์ด 1๊ฐ */
background-position: x์ถ ์ด๋ ๊ฐ
/* ๊ฐ์ด 2๊ฐ */
background-position: x์ถ ์ด๋ ๊ฐ | y์ถ ์ด๋ ๊ฐ
/* ๊ฐ์ด 3๊ฐ */
background-position: ํค์๋1 | ํค์๋1์ ๊ธฐ์ค์ผ๋ก ์ด๋ํ ๊ฐ | ํค์๋2
* ํค์๋1์ด x๋ y์ถ์ด๋ฉด ํค์๋2๋ ์๋์ ์ผ๋ก ํค์๋1๊ณผ ๋ฐ๋๋๋ ์ถ์ผ๋ก ์ ์๋จ
ex) background-position: right | 45px | bottom
: ์ค๋ฅธ์ชฝ์์ 45px๋ฅผ ์ด๋ํ๊ณ ์๋์ชฝ์์ 0px ๋ฐฐ์น
/* ๊ฐ์ด 4๊ฐ */
background-position: ํค์๋1 | ํค์๋1์ ๊ธฐ์ค์ผ๋ก ์ด๋ํ ๊ฐ | ํค์๋2 | ํค์๋2์ ๊ธฐ์ค์ผ๋ก ์ด๋ํ ๊ฐ
* ํค์๋1์ด x๋ y์ถ์ด๋ฉด ํค์๋2๋ ์๋์ ์ผ๋ก ํค์๋1๊ณผ ๋ฐ๋๋๋ ์ถ์ผ๋ก ์ ์๋จ
ex) background-position: right | 45px | bottom | 20px
: ์ค๋ฅธ์ชฝ์์ 45px๋ฅผ ์ด๋ํ๊ณ ์๋์ชฝ์์ 20px ๋ฐฐ์น
๊ฐ์ผ๋ก ์ฌ์ฉ๋๋ ํค์๋
์ด๋ top
,bottom
,left
,right
,center
๊ฐ ์๋ค.
๊ทธ๋์ background-position: right 30px center
๋ "right๋ฅผ ๊ธฐ์ค์ผ๋ก 30px๋ฅผ ์ด๋ํ๊ณ y์ถ์์ ๊ฐ์ด๋ฐ๋ก ๋ฐฐ์น"๋ฅผ ๋ปํ๋ค.
์ค๋๋ง์ ์ฐ๋ฉด ๋ค์ ์์๊ฐ๋ฉด ๋๋ ์กฐ๊ธํดํ์ง ๋ง์! ๐
.footer ๋ถ๋ถ ์ค๋ช ๐
<!-- footer ์์ -->
<div class="footer">
<a class="icon github" href="#">Github</a>
<a class="icon facebook" href="#">Facebook</a>
<a class="icon email" href="#">Contact</a>
</div>
<!-- footer ๋ -->
.footer{
background-color: #f4f4f4;
text-align: center;
padding:20px 0;
}
.icon{
display: inline-block;
width:48px;
height:48px;
border-radius: 30px;
border:2px solid #ddd;
color:white;
text-indent: -9999px;
background-image: url(./images/icons.png);
background-size: 144px 96px;
}
.icon.github{
background-color: black;
background-position: left top;
}
.icon.facebook{
background-color: dodgerblue;
background-position: center top;
}
.icon.email{
background-color: orangered;
background-position: right top;
}
.icon:hover{
background-position-y: bottom;
}
๋๋์ด ๋๋ง์ .footer
ํํธ!
.footer
๋ถ๋ถ ๋ํ ๊ณ ๋ฏผํ ๊ฒ์ด ์ข ์์๋ค.
- ์ธ๋ผ์ธ ์์๊ฐ ๋๋ํ ์์ ๋ ์ฌ์ด์ ๊ฐ๊ฒฉ์
margin
์ธ๊ฐ? - IR๊ธฐ๋ฒ์ด๋?
- ์ด๋ฏธ์ง ์คํ๋ผ์ดํธ ๊ธฐ๋ฒ์ด๋?
1. ์ธ๋ผ์ธ ์์๊ฐ ๋๋ํ ์์ ๋ ์์ ๊ฐ์ ๊ฐ๊ฒฉ์ margin์ธ๊ฐ?
๋์ ๋ต์ ๋น๋นํ๊ฒ margin
์ด๋ค! ๋ผ๊ณ ๋งํ๋ค.
ํ์ง๋ง ์ ๋ต์ "margin์ด ์๋๋ค."์ด๋ค.
<!-- footer ์์ -->
<div class="footer">
<a class="icon github" href="#">Github</a><!--์ด ๊ณณ์ด ๊ฐ๊ฒฉ์ ์์ธ-->
<a class="icon facebook" href="#">Facebook</a><!--์ด ๊ณณ์ด ๊ฐ๊ฒฉ์ ์์ธ-->
<a class="icon email" href="#">Contact</a><!--์ด ๊ณณ์ด ๊ฐ๊ฒฉ์ ์์ธ-->
</div>
<!-- footer ๋ -->
์ธ๋ผ์ธ ์์ ๊ฐ์ ๋ฐ์ํ๋ ์ข์ ๊ฐ๊ฒฉ์ ํ๊ทธ๋ฅผ ์์ฑํ ๋ ํ ์ค์ ๋์ ์ ๋ ๋ฐ์ํ๋ ๊ณต๋ฐฑ์ผ ๋ฟ์ด๋ค.
HTML ํ์ผ์์ ์๋ฌด๋ฆฌ ์ํฐ๋ฅผ ์ฌ๋ฌ๋ฒ ์ณ๋ ์ค๋ฐ๊ฟ์ ๋์ง ์๊ณ ๊ณต๋ฐฑ์ด ๋ณํฉ์ด ๋๋ค.
๊ทธ๋์ ์ํฐ ํ๋ฒ์ ์ธ๋ผ์ธ ์์ ๊ฐ์ ๊ฐ๊ฒฉ์ด ๋๋ค.
em์ "๋ถ๋ชจ"์ ์ค์ ๋
font-size
์ ๋ฐฐ์
์ฐธ๊ณ ๋ก ์ด ๊ฐ๊ฒฉ์ em ๋จ์๋ก ๊ณ์ฐ๋๊ธฐ ๋๋ฌธ์ ํฐํธ ํฌ๊ธฐ๊ฐ ์ปค์ง๋ฉด ๊ทธ์ ๋น๋กํ์ฌ ์ฆ๊ฐํ๋ค.
<!-- footer ์์ -->
<div class="footer">
<a class="icon github" href="#">Github</a><a class="icon facebook" href="#">Facebook</a><a class="icon email" href="#">Contact</a>
</div>
<!-- footer ๋ -->
ํฌํํ ๊ฑด ์์ฒ๋ผ ์ค๋ฐ๊ฟ์ด ์์ด ์์ฑ์ ํ๊ฒ ๋๋ฉด ๊ฐ๊ฒฉ ๋ํ ์๊ธฐ์ง ์๊ฒ ๋๋ค.
์ฐธ์ผ๋ก ์ ๊ธฐํ CSS์ ์ธ๊ณ...๐ตโ๐ซ
2. IR๊ธฐ๋ฒ์ด๋?
IR๊ธฐ๋ฒ์ด๋ CSS ์์ฑ์ผ๋ก ๋ณด์ฌ์ค๋ค๋ฉด text-indent: -9999px
์ด๋ค.
Image Replacement์ ์ฝ์ด๋ก ์ด๋ฏธ์ง์ ๋์ฒดํ ์คํธ๋ฅผ ์ ๊ณตํ๊ธฐ ์ํ CSS ๊ธฐ๋ฒ์ด๋ค.
์ด ์ค์ต์์๋ .icon
์ ๊ธฐ๋ฅ์ ์ค๋ช
ํ๋ ์ด๋ฏธ์ง๋ฅผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ก ๋ฃ๊ณ ์๋ค.
ํ์ง๋ง background
์ ๊ด๋ จ๋ ์์ฑ ์ค์ ์ด๋ฏธ์ง๋ฅผ ์ค๋ช
ํ๋ ๋์ฒด ํ
์คํธ๋ฅผ ์ค์ ํ๋ ์์ฑ์ ์กด์ฌํ์ง ์๋๋ค.
๊ทธ๋์ "์น์ ๊ทผ์ฑ"์ ์ํด ์ด๋ฏธ์ง๋ฅผ ์ค๋ช
ํ๋ ๋์ฒด ํ
์คํธ๊ฐ ์์ด ์คํฌ๋ฆฐ ๋ฆฌ๋๊ธฐ๋ฅผ ์ฌ์ฉํ๋ ์ฅ์ ์ธ์๊ฒ๋ ๋ถํธํจ์ ์ด๋ํ๋ค.
๊ทธ๋์ <a>
์ ์ด๋ฏธ์ง๋ฅผ ์ค๋ช
ํ๋ ํ
์คํธ๋ฅผ ์ฝํ
์ธ ๋ก ์
๋ ฅํ๊ณ "๋ค์ฌ์ฐ๊ธฐ"๋ฅผ ํด์ฃผ๋ text-indent
์์ฑ์ ์ด์ฉํ์ฌ ๊ฐ์ -9999px
์ฒ๋ผ ํฐ ๊ฐ์ผ๋ก ์ค์ ํ์ฌ ํ
์คํธ๋ฅผ ๋ฉ๋ฆฌ ๋ณด๋ด์ค๋ค.
์ด๋ ๊ฒ ๋๋ฉด ํ ์คํธ๋ ๋ทฐํฌํธ์์ ์๋ณด์ด๋ ๊ณณ์์ ์ฌ์ ํ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ์คํฌ๋ฆฐ ๋ฆฌ๋๊ธฐ๊ฐ ์ธ์ํ์ฌ ์ฝ์ด์ค๋ค.
3. CSS ์คํ๋ผ์ดํธ ๊ธฐ๋ฒ์ด๋?
์นํ์ด์ง๋ฅผ ํด๋ก ํ ๋ ์ด๋ฏธ์ง๋ฅผ ๊ตฌํ๋ค๋ณด๋ฉด ์์ฒ๋ผ ์ฌ๋ฌ๊ฐ์ง ์ด๋ฏธ์ง๊ฐ ํ ์ด๋ฏธ์ง์ ๋ถ์ด์๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
์ด๋ ํ์ด์ง์ ๋ก๋ฉ ์๋๋ฅผ ์ค์ฌ์ฃผ๋ ๋ฑ ์น ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํด ์ฌ์ฉํ๋ CSS ๊ธฐ๋ฒ์ด๋ค.
์์ด์ฝ์ด๋ ๋ฒํผ ๊ฐ์ด ์์ฃผ ์ฐ์ด๋ ์ด๋ฏธ์ง๋ค์ ์ธ ๋๋ง๋ค ๋ถ๋ฌ์ค๋ ๊ฒ์ด ์๋๋ผ ์์ ํ์ผ์ฒ๋ผ ์ฌ๋ฌ ์ด๋ฏธ์ง๊ฐ ๋ณํฉ๋์ด ์๋ ํ๋์ ์ด๋ฏธ์ง๋ฅผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ก ํ์ฌ ์ขํ๊ฐ์ ์ค์ ํด์ ์ฌ์ฉํ๋ค.
์ขํ๊ฐ์ background-position: x์ถ ์ด๋ ๊ฐ | y์ถ ์ด๋ ๊ฐ
์์ฑ์ ์ฌ์ฉํ๋ค.
.icon{
display: inline-block;
width:48px;
height:48px;
border-radius: 30px;
border:2px solid #ddd;
color:white;
text-indent: -9999px;
background-image: url(./images/icons.png);
background-size: 144px 96px;
}
์ค์ต ์์ ์์๋ ์ฌ๋ฌ ์ด๋ฏธ์ง๊ฐ ๋ณํฉ๋ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ค์ ํ๊ณ width
์ height
์ ๊ฐ์ ์ ํด์ค ํ ์๋์ background-size
์ ์ขํ๊ฐ์ ์ด์ฉํ์ฌ ์ค์ ํ๊ณ ์๋ค.
์ด๋ฐ ์์ผ๋ก ์ค์ ํด์ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ์๋์ฒ๋ผ 48*48px ํฌ๊ธฐ๋ก ์ ๋ค์ด๊ฐ ๊ฒ์ ๋ณผ ์ ์๋ค.
๊ทธ ๋ฐ์ ์ค์ํ ํ๋ค!
-
์ธ๋ผ์ธ ์์์ ์ธ๋ผ์ธ ๋ธ๋ญ ๋ ๋ฒจ ์์๋ ๋ฒ ์ด์ค๋ผ์ธ์ ๊ธฐ์ค์ผ๋ก ์ธ๋ก ์ ๋ ฌ์ ํ๋ค.
-
ํ์ ์ ๋ ํฐ(ํ๊ทธ)๋ ๋๋๋ก์ด๋ฉด resetํ ๋๋ง ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค. ์ ์ฒด ํ๊ทธ๋ฅผ ๋ค ๋ฐ๊พธ๊ธฐ ๋๋ฌธ์ ์ฝ๋์ ํผ๋์ด ์ฌ ์ ์๋ค.
-
์์ฑ๊ฐ
initial
์ ์ฌ์ฉํ๋ ๊ฒ์ ๋น๋ถ๊ฐ ์์ ํ์. ์๋ํ๋ฉด ๋ธ๋ผ์ฐ์ ์ํ๊ณ๋ฅผ ๋ฐฉํดํ๋ 'IE'๊ฐ ์ง์ํ์ง ์์ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ์ข์ง ์๋ค.์ต์ค ์ด์์.. -
์์์ด ์ง์๋๋ ์์ฑ์ ์ด๊ธฐํ ํด์ค ๋
inherit
๋ฅผ ์ฌ์ฉํ๊ณ ํค์๋๋ฅผ ์ฌ์ฉํ๊ณ ์์์ด ์ง์์ด ์๋๋ค๋ฉดinitial
์ฌ์ฉํ๋ฉด ๋๋ค. ํ์ง๋งinitial
์ ์ฌ์ฉ์ ์์ ํ๋ค. -
์์ฑ๊ฐ
unset
์inherit
์ด ๋๋ ๊ฒ์inherit
์ผ๋ก ํด์ฃผ๊ณ ์๋๋ฉดinitia
๋ก ํด์ค -
์์์ด ๋๋ ์์น๋ ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋จ์์ ๋ณผ ์ ์๋ค.
-
๊ฐ๊ฐ์
Property
์ ๋ฐ๋ผinitial
์ ๊ฐ์ ๋ค๋ฅด๋ค. ์๋ํ๋ฉดinitial
์ ๊ฐ์ ์ ์ฉํ๋Property
์ "๊ธฐ๋ณธ๊ฐ"์ด๊ธฐ ๋๋ฌธ์ด๋ค. ๊ฐ๊ฐ์Property
์ ๊ธฐ๋ณธ๊ฐ์ MDN์์ ๊ฒ์ํ์ฌ ํ์ธํ๋๋ก ํ๋ค. -
width:100%
์width:auto
๋ ๋ ๋ค ๋ถ๋ชจ์ ์ฌ์ฉ ๊ฐ๋ฅํ ์์ญ์ ์ฑ์ฐ๋ ๊ฒ์ ๋๊ฐ๋ค. ํ์ง๋งwidth:100%
์ํฉ์์margin
์ ์ฃผ๋ฉดmargin
๋งํผ ์์ญ์ด '์ถ๊ฐ'๊ฐ ๋๋ค. ์ฆ, 100%๊ฐ ์ด๊ณผ๋๋ค.
ํ์ง๋งauto
๋margin
์ "ํฌํจ"ํด์ 100%๋ก ๊ณ์ฐํ๋ค. -
์์ฑ์
text-align:center
์ธ๋ผ์ธ ์์(์ฝํ ์ธ ํ ์คํธ ํฌํจ)๊ฐ ๋ถ๋ชจ์ ๊ธฐ์ค์ผ๋ก ์ค์ ์ ๋ ฌํ๋ ๊ฒ์ด๊ณ ํ๊ทธ ์์ฒด๊ฐ ์ด๋ํ๋ ๊ฒ์ด ์๋๋ค. ๋ฐ๋ฉด์margin:0 auto
๋ ๋ธ๋ก ๋ ๋ฒจ ์์ ์์ฒด๋ฅผ ์ค์ ์ ๋ ฌํ๋ ๊ฒ์ด๋ค. -
์์๋๋ก ์๋ ๋ธ๋ก ๋ ๋ฒจ๊ฐ์ ์ํ๋จ
margin
์ ๊ฒน์น๊ฒ ์ค๊ณํด๋์๋ค. ์ด๋ฅผ ๋ง์ง ๋ณํฉ ํ์์ด๋ผ๊ณ ํ๋ค. ์ด ํ์์ ์์ํ ๋ธ๋ญ ๋ ๋ฒจ์ ์์์๊ฒ๋ง ์ ์ฉ์ด ๋๋ค. ์์ธํ ๋ด์ฉ์ ๋งํฌ๋ฅผ ํตํด ํ์ธํ๊ธธ ๋ฐ๋๋ค.
** ์ถ๊ฐ์ ์ธ ํด๊ฒฐ๋ฒ :display:flow-root
๊ฐ ์์ง๋ง ๋ธ๋ผ์ฐ์ ๊ฐ ํธํ์ฑ์ด ๋จ์ด์ ธ ํ์ธํ๊ณ ์ฌ์ฉํ๋๋ก ํ๋ค. -
class
๋ช ์ ๋ฐ๋์ ๋ณด๊ณ ํ๋ฒ์ ์ด๋ค ํ๊ทธ์ธ์ง ์ ์ ์๋๋ก "์ง๊ด์ "์ผ๋ก ์์ฑํ ๊ฒ์ ๋น๋ถํ๋ค. -
Selector Specificity์ ์คํ์ผ ์ ์ฉ์ ์ฐ์ ์์์ ๊ด๋ จ๋ ๋ฒ์น์ด๋ค. ์ ํ์(Selector)์ ๊ฒฝ๋ก๊ฐ ๊ตฌ์ฒด์ ์ผ์๋ก ๋์ ์ฐ์ ์์๋ฅผ ๊ฐ์ง๋ค. ์๋ ์ด๋ฏธ์ง๋ฅผ ์ฐธ๊ณ ํ๋ฉด ๋์์ด ๋ ๊ฒ์ด๋ค.
-
ํ๊ทธ์ ์ ์ฉํ๋
attribute
์ธid
๋ ์ ์ผํ๊ฒ ํ๋๋ง ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ ์คํ์ผ ์์ฑ์ ์ ์ฉํ๋๋ฐ ์ ํฉํ์ง ์๋ค. ์คํ์ผ์ ๋๋๋กclass
๋ฅผ ์ฌ์ฉํ๋๋ก ํ์! -
์ฝ๋๋ฅผ ํ๋ฒ์ ์จ๋๊ณ ๊ณ ์น๋๊ฑด ๋ง์ง๋ง์ ๋ชจ๋ ์์ ํ๊ธฐ ํ๋ค๊ธฐ ๋๋ฌธ์ ์๊ท๋ชจ๋ก ๋งํฌ์ ํ๊ณ ์คํ์ผ ์ ์ฉ/ํ์ธ ํ ์๊ท๋ชจ๋ก ์์ ํ๋ ๊ฒ์ผ๋ก ํ๋ ๊ฒ์ด ์ข๋ค.
-
๋ ์ด์์์ ํ์ ํ ๋ ํฐ ๋ฐ์ค์์ ์์ ๋ฐ์ค ์์ผ๋ก ๊ตฌ๋ถํ์ฌ ๋งํฌ์ ํ๋ผ!
- ๊ฐ์ฌ๋๊ป์ ์ถ์ฒํ๋ ๋งํฌ์ ์์ โญ๏ธ
- ์ปจํ ์ธ ๋ถํฐ ๋ง ์๋๋ฌ ๋ฃ์ง ์๊ณ ์ ์ฒด์ ์ธ ๋ฉ์ด๋ฆฌ๋ฅผ ๋จผ์ ๋๋๊ธฐ.
- ๊ตฌ๋ถ์ ์ํด ๊ฐ๊ฐ ์๊ฐ์ ์ผ๋ก ํํธ๋ฅผ ์ค์ผํ๋ค. ๋ฐฐ๊ฒฝ ์์ ์ฃผ๊ณ ์์ญ์ด ํ๋์ ๊ตฌ๋ถ์ด ๋๊ฒ ๋ง๋ค๊ธฐ
- ๋ ์ด์์ ๊ด๋ จ ์คํ์ผ๋ง ์ ์ฉํ๋ค. ์์ ๋ด์ฉ๋ฌผ์ ๋ง ๋ฃ๊ธฐ ์ ์
margin
/padding
๊ฐ์ ์์ฑ์ ์ฌ์ฉํ์ฌ ๊ณต๊ฐ ๊ตฌ์ฑํ๊ธฐ- type-selector๋ฅผ ์ด์ฉํ
reset CSS
๋ง๋ค๊ธฐ (margin:0
,padding:0
๋ฑ)
** inherit๋ ์ฌ์ฉํ๋ initial์ IE์ ํธํ์ฑ์ ์ํด ๋น๋ถ๊ฐ ์ฌ์ฉ์ ์์ ํ๊ธฐ- class selector๋ฅผ ์ฌ์ฉํ์ฌ ์ธ์ธํ ๋ด๋ถ ์คํ์ผ ์ ์ฉํ๊ธฐ
"๋น์บ ํ" ์ด์ข ์ฐฌ ๊ฐ์ฌ๋์ ํน๊ฐ ์ ๋ฆฌ๋ฅผ ๋ง์น๋ฉฐ.. ๐ญ
์์งํ "๋ฉ์์ด์ฌ์์ฒ๋ผ ํ๋ก ํธ์๋ ์ค์ฟจ" ๊ณผ์ ์ ํ๊ธฐ ์ ์ HTML๊ณผ CSS์ ์ค์์ฑ์ ์๊ณ Javascript๋ง ์ํ๋ฉด ๋๊ฒ ์ง๋ผ๋ ์๊ฐ๋ง ๊ฐ์ง๊ณ ๊ณต๋ถ๋ฅผ ํ๊ณ ์์๋๋ฐ ์ด๋ฒ ํน๊ฐ์ ํตํด ํ๋ฒ ๋ HTML/CSS์ ์ค์์ฑ์ ์์๋ค.
๋ํ ํน๊ฐ์ ํตํด ๋ค์ HTML/CSS์ ๊ธฐ์ด์ ํฅ๋ฏธ๋ฅผ ๋๋ผ๊ฒ ๋์ด ์ด 8์๊ฐ์ ๊ฐ์๊ฐ ์งง๊ฒ ๋๊ปด์ง ์ ๋๋ก ์ฌ๋ฏธ์์๊ณ ์ธ์ ๊น์๋ค.
๊ทธ๋ฆฌ๊ณ ์ด์ข ์ฐฌ ๊ฐ์ฌ๋์ CSS๋ฅผ ํน๋ณํ ๊ด์ ์ผ๋ก ๋ณด๋ ๊ฒ์ ๋ํด์ ์ ๋ง ์กด๊ฒฝ์ค๋ฌ์ ์ผ๋ฉฐ ๊ณ์ํด์ ๋ฐ์ ํ๋ ค๋ ๋ชจ์ต์ ๋ณด๊ณ ์ค์ค๋ก ๋ฐ์ฑํ๋ ๊ณ๊ธฐ๊ฐ ๋์๋ ๊ฒ ๊ฐ๋ค.
์ด๋ฒ ํน๊ฐ์ ๊ณ๊ธฐ๋ก ๊ณ์ ๋ฐ์ ํ๋ ๊ฐ๋ฐ์๋ก ์ฑ์ฅํ๋๋ก ๋์ฑ ๋
ธ๋ ฅํด์ผ๊ฒ ๋ค.
์ธ์๊น์ ์ด๋ก ์ ๋ํ ํน๊ฐ๋ฟ๋ง ์๋๋ผ ๊ฐ๋ฐ์์ ํ๋๋ฅผ ํ๋ฒ ๋ ๊ฐ๋ฅด์ณ์ฃผ์ ์ด์ข
์ฐฌ ๊ฐ์ฌ๋๊ป ๋ค์ ํ๋ฒ ๊ฐ์ฌ์ ์ธ์ฌ๋ฅผ ์ ํ๊ณ ์ถ๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([HTML/CSS] Day5. CSS Basic ๐ท), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@untiring_dev/HTMLCSS-CSS-Basic์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค