[๐ฑ๋ชฉ์ฐจ๐ฑ]
- CSS ๋?
- CSS ์ฌ์ฉํ๋ ์ด์ ๋?
- CSS ์ฐธ์กฐ๋ฐฉ์
- ์ค์ต) CSS ๋ง๋ณด๊ธฐ -๋ฌด์ง๊ฐ ๊ทธ๋ฆฌ๊ธฐ
01. CSS๋?
Cascading Style Sheet์ ์ฝ์๋ก ์น ํ์ด์ง๋ฅผ ๋์์ธ ํ๊ธฐ ์ํด ์ฌ์ฉํ๋ ์ธ์ด์
๋๋ค. 'cascading'์ ์๋ฏธ๋ ํญํฌ, ์ฐ์์ ์ธ ์ฆ, ์์ ์์์์ ์ง์ ํ ์คํ์ผ์ด ํ์ ์์๊น์ง ์ฐ์์ ์ผ๋ก ์ ์ฉ๋๋ค๋ ์๋ฏธ์
๋๋ค. (๊ทธ๋ ๋ค๊ณ ๋ชจ๋ ์์ฑ์ด ๋ค cascading ๋์ง ์์ต๋๋ค์)
02. CSS ์ฌ์ฉํ๋ ์ด์ ๋ ?
๊ฑด๋ฌผ์ ์ง์ด ๋ผ๋๋ฅผ ๋ง๋๋๊ฒ์ด HTML ์ด๋ผ๋ฉด ์ธํ ๋ฆฌ์ด๋ฅผ CSS ๋ผ๊ณ ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ๊ฐ๋ฐ์ ๋๊ตฌ์์ apple ์น ์ฌ์ดํธ์ CSS๋ฅผ ์์ ๋ด ์๋ค. [๊ฐ๋ฐ์๋๊ตฌ (์๋์ฐ F12, mac cmd + option + i)]
์ด๋ผ.. ์ญ์ ์ธํ ๋ฆฌ์ด ์๋ CSS๋ ์ค์ํจ์ ์ ์์์ต๋๋ค. CSS๋ HTML์ ์ด๋ค์์ผ๋ก ์ฐธ์กฐ ๋ ๊น์ ?
03. CSS ์ฐธ์กฐ๋ฐฉ์
1. ์ธ๋ผ์ธ ๋ฐฉ์
๊ฐ ์์์ด style ์์ฑ์ ์ ๋ถ ์คํ์ผ์ ์ง์ ์ ์ด์ค์ผ ํฉ๋๋ค. ํ์ง๋ง ์ด๋ฌํ ๋ฐฉ๋ฒ์ ์ฌ์ฌ์ฉ์ด ์ ํ ๋ถ๊ฐ๋ฅ ํฉ๋๋ค.
<h1 style="color: blue; background-color:pink">Hello CSS!</h1>
2. ๋ด์ฅ ๋ฐฉ์
html์ <head>ํ๊ทธ ๋ด๋ถ์ ์ฌ์ฉํ style์ <style>ํ๊ทธ๋ก ๋ฏธ๋ฆฌ ์ ์ธํ์ฌ ์ฌ์ฉํฉ๋๋ค. ํด๋น html ๋ฌธ์์ ๋์์ ๊ฐ์ ์คํ์ผ ์ ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค.
<style>
h1{
color : red;
background-color : skyblue;
}
</style>
3. ๋งํฌ ๋ฐฉ์
CSS ํ์ผ์ ๋ณ๋๋ก ๋ง๋ค๊ณ ํ์ํ html ์ ๊ฐ์ ธ์์ ํด๋น ํ์ผ์ ๋งํฌํด์ ์ฌ์ฉํ๋ ๋ฐฉ์์
๋๋ค. ์ฌ์ฌ์ฉ์ด ์ฉ์ดํ๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค.
<link rel="stylesheet" href="./index.css">์ด 3๊ฐ์ง ๋ฐฉ์์ด ๊ฒน์น๋ฉด ์ด๋ป๊ฒ ๋ ๊น์? ๊ธฐ๋ณธ ๋ฒ์น์ ๊ฐ์ฅ ๋ฆ๊ฒ ์ฝํ๋ ๊ฒ์ด ์ฐ์ ์ผ๋ก ์ ์ฉ๋ฉ๋๋ค.
์ฐ์ ์์๋ ๋ณดํต ์ธ๋ผ์ธ๋ฐฉ์>๋ด์ฅ๋ฐฉ์>๋งํฌ๋ฐฉ์์
๋๋ค. ์ธ๋ผ์ธ๋ฐฉ์์ ๋ด์ฅ,๋งํฌ๋ฐฉ์์ ๋ฌด์กฐ๊ฑด ์ฐ์ ์ผ๋ก ๊ฐ์ฅ ๋จผ์ ์ ์ฉ๋๊ณ ๋ด์ฅ, ๋งํฌ๋ฐฉ์์ ๋ฆ๊ฒ ์ฐ์ฌ์ง ๊ฒ์ด ์ฐ์ ์ผ๋ก ์ ์ฉ๋ฉ๋๋ค.
+์ค์ต) CSS ๋ง๋ณด๊ธฐ
์ธ๋ผ์ธ๋ฐฉ์, ๋ด์ฅ๋ฐฉ์, ๋งํฌ๋ฐฉ์์ ์ฌ์ฉํ์ฌ ์๋์ฌ์ง๊ณผ ๊ฐ์ด ๋ง๋ค์ด ๋ด
์๋ค.
01.์ธ๋ผ์ธ ๋ฐฉ์์ผ๋ก ๋ง๋ค๊ธฐ
<body>
<h1>CSS ์ฐธ์กฐ๋ฐฉ์ ์ค์ต </h1>
<div style="background-color: red; width: 50px; height: 50px;"></div>
<div style="background-color: orange; width: 100px; height: 50px;"></div>
<div style="background-color: yellow; width: 150px; height: 50px;"></div>
<div style="background-color: green; width: 200px; height: 50px;"></div>
<div style="background-color: blue; width: 250px; height: 50px;"></div>
<div style="background-color: navy; width: 300px; height: 50px;"></div>
<div style="background-color: purple; width: 350px; height: 50px;"></div>
</body>
02.๋ด์ฅ ๋ฐฉ์์ผ๋ก ๋ง๋ค๊ธฐ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ์ฐธ์กฐ๋ฐฉ์</title>
<!-- <link rel="stylesheet" href="./start_css.css"> -->
<style>
.title{
background-color: black;
color: white;
}
div{
height: 50px;
}
#red{
background-color: red;
width: 50px;
}
#orange{
background-color: orange;
width: 100px;
}
#yellow{
background-color: yellow;
width: 150px;
}
#green{
background-color: green;
width: 200px;
}
#blue{
background-color: blue;
width: 250px;
}
#navy{
background-color: navy;
width: 300px;
}
#violet{
background-color: violet;
width: 350px;
}
</style>
</head>
<body>
<hr>
<hr>
<span class="title">๋ฌด์ง๊ฐ</span>
<div id="red"></div>
<div id="orange"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="navy"></div>
<div id="violet"></div>
</body>
</html>
ํ๋ฉด์ ๋ธ๋ญ๋ค์ด ํ๋ฉด์ ์๋์์ ์๊ฐ์ ์ข ๋ฒ๋ ธ๋๋ฐ divํ๊ทธ์ width , height๋ฅผ ์ง์ ํด์ฃผ์ง ์์ background-color๊ฐ ์
ํ์ง์ง ์๊ณ ์๋ฌด๊ฒ๋ ๋จ์ง ์์๋ค. ๋ํ๋ ์ค์ํ์ ์ span ํ๊ทธ๋ inline์์๋ผ width height๋ฅผ ์ง์ ํ ์ ์๋๋ฐ ์ง์ ํ๋ ๋ฐ๋ณด์ง์ ํ๋ค..
03. ๋งํฌ๋ฐฉ์์ผ๋ก ๋ง๋ค๊ธฐ
๋งํฌ๋ฐฉ์์ ๋ด์ฅ๋ฐฉ์์ ์ฌ์ฉํ๋ ์ฝ๋ ๊ฑฐ์ ๊ทธ๋๋ก ๋ค๋ฅธ ํ์ผ์ ์
๋ ฅํ๊ณ ๋งํฌ๋ก ์ฐ๊ฒฐํด์ฃผ๋ฉด ๋์ด๋ค.
<link rel="stylesheet" href="./start_css.css">ํค๋ ๋ถ๋ถ์ <link>ํ๊ทธ๋ฅผ ๋ฌ์์ฃผ๊ณ ํ์ผ ๊ฒฝ๋ก๋ฅผ ์จ์ฃผ๋ฉด ๋๋ค.
css ํ์ผ์
.title{
background-color: black;
color: white;
}
div{
height: 50px;
}
#red{
background-color: red;
width: 50px;
}
#orange{
background-color: orange;
width: 100px;
}
#yellow{
background-color: yellow;
width: 150px;
}
#green{
background-color: green;
width: 200px;
}
#blue{
background-color: blue;
width: 250px;
}
#navy{
background-color: navy;
width: 300px;
}
#violet{
background-color: violet;
width: 350px;
}์
๋ ฅํ ํ์ธํ๋ฉด ๋!
