๐ CSS์ ๊ตฌ์ฑ์์
์ ํ์ { ์์ฑ : ์์ฑ๊ฐ; }- ์ ํ์: ๋์์ธ์ ์ ์ฉํ HTML ์์ญ
- ์์ฑ: ์ด๋ค ๋์์ธ์ ์ ์ฉํ ์ง ์ ์
- ์์ฑ๊ฐ: ์ด๋ค ์ญํ ์ ์ํํ ์ง ๊ตฌ์ฒด์ ์ผ๋ก ๋ช ๋ น
๐ CSS ์์ฑ
/* ์์ */
h1 {
font-size: 20px; /* ํฐํธ ์ฌ์ด์ฆ */
font-family: sans-serif; /* ๊ธ๊ผด */
color: blue; /* ํฐํธ ์์ */
background-color: yellow; /* ๋ฐฐ๊ฒฝ์ */
text-align: center; /* ํ
์คํธ ์ ๋ ฌ */
}๐ CSS ์ฐ๋ ๋ฐฉ๋ฒ
1. Inline Style Sheet: ํ๊ทธ ์์ ์ง์ ์ํ๋ ์คํ์ผ ์ ์ฉ
<h1 style="color: red;"> coding 101 </h1>2. Internal Style Sheet: <style> ํ๊ทธ ์์ ๋ฃ๊ธฐ
<head>
<style>
h1 { background-color: yellow; }
</style>
</head>3. External Style Sheet: <link> ํ๊ทธ๋ก ๋ถ๋ฌ์ค๊ธฐ
<head>
<link rel="stylesheet" href="style.css">
</head>๐ CSS ์ ํ์
1. Type Selector: ํน์ ํ๊ทธ์ ์คํ์ผ ์ ์ฉ
<style>
h2 { color: blue; }
</style>2. Class Selector: ํด๋์ค ์ด๋ฆ์ผ๋ก ํน์ ์์น์ ์คํ์ผ ์ ์ฉ
<style>
.coding { color: blue; }
</style>3. ID Selector: ID๋ฅผ ์ด์ฉํด ์คํ์ผ ์ ์ฉ
<style>
#coding { color: green; }
</style>๐ ์บ์ค์ผ์ด๋ฉ : CSS์ ์ฐ์ ์์๋ฅผ ๊ฒฐ์ ํ๋ ์ธ ๊ฐ์ง ์์
1. ์์: ๋์ค์ ์ ์ฉํ ์์ฑ๊ฐ์ ์ฐ์ ์์๊ฐ ๋์
p { color: red; }
p { color: blue; }
/* ํ๋์ */2. ๋ํ ์ผ: ๋ ๊ตฌ์ฒด์ ์ผ๋ก ์์ฑ๋ ์ ํ์์ ์ฐ์ ์์๊ฐ ๋์
header p { color: red; }
p { color: blue; }
/* ๋นจ๊ฐ์ */3. ์ ํ์: style > id > class > type ์์ผ๋ก ์ฐ์ ์์๊ฐ ๋์
<h3 style="color: pink" id="color" class="color"> color </h3>
#color { color: blue; }
.color { color: red; }
h3 { color: green; }
/* ํํฌ */๐ CSS ์ฃผ์ ์์ฑ
1. width, height
<p class="paragraph"> ํ๋ก๊ทธ๋๋ฐ์ ๋ฐฐ์๋ด์! </p>
.paragraph {
width: 500px;
height: 500px;
}2. font
- .font-family: ๋ธ๋ผ์ฐ์ ๋ง๋ค ์ง์ํ๋ ํฐํธ๊ฐ ๋ค๋ฆ, ์ ๋ ฅํ ์์๋๋ก ์ฐ์ ์์ ์ ์ฉ. ์ฝค๋ง(,)๋ก ๊ตฌ๋ถ, sans-serif๋ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ์ง์ ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ๋ง์ง๋ง์ ์์ฑํ๋ ๋ํดํธ ๊ฐ
- .font-weight: 100-900 ์ฌ์ด์ ์ซ์๋ฅผ ์ ๋ ฅํ ์๋ ์์
<p class="paragraph"> ์ฆ๊ฑฐ์ด ์น ํ๋ก๊ทธ๋๋ฐ! </p>
.paragraph {
font-size: 50px;
font-family: Arial, sans-serif /* ์ฝค๋ง(,)๋ก ๊ตฌ๋ถ */
font-style: italic;
font-weight: bold;
}3. border
- .border-style: ์ค์ ์ solid, ์ ์ ์ dotted ํน์ dashed๋ก ํ๊ธฐ
- ์ฃผ์๊ณผ ๊ฐ์ด ํ ์ค์ ์ด์ด ์ธ ์๋ ์์. ์ด ๋ ๋์ด์ฐ๊ธฐ๋ก ๊ตฌ๋ถํ๊ณ ์์๋ ์๊ด ์์
<p class="paragraph"> ์ฆ๊ฑฐ์ด ์นํ๋ก๊ทธ๋๋ฐ </p>
.paragraph {
width: 500px;
height: 500px;
border-style: solid;
border-width: 10px;
border-color: red;
}
/* border: solid 10px red; */4. background
- .background-repeat: x์ถ์ผ๋ก ๋ฐ๋ณต์ repeat-x, y์ถ์ผ๋ก ๋ฐ๋ณต์ repeat-y, ๋ฐ๋ณตํ์ง ์์ ๊ฒฝ์ฐ no-repeat์ผ๋ก ํ๊ธฐ
- .background-position: ๊ณต๊ฐ ์์์ ์ด๋ฏธ์ง์ ์ขํ ๋ณ๊ฒฝ (top, bottom, center, left, right ๋ฑ)
- ์ฃผ์๊ณผ ๊ฐ์ด ํ ์ค์ ์ด์ด ์ธ ์๋ ์์. ์ด ๋ ๋์ด์ฐ๊ธฐ๋ก ๊ตฌ๋ถํ๊ณ ์์๋ ์๊ด ์์
<p class="paragraph"> ์ฆ๊ฑฐ์ด ์น ํ๋ก๊ทธ๋๋ฐ! </p>
.paragraph {
background-color: yellow;
background-image: url(์ด๋ฏธ์ง ๊ฒฝ๋ก);
background-repeat: no-repeat;
background-position: left;
}
/* background: yellow url(์ด๋ฏธ์ง ๊ฒฝ๋ก) no-repeat left; */'JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [HTML] HTML์ ๊ธฐ๋ณธํ๊ทธ (0) | 2023.09.06 |
|---|---|
| [Javascript] ๊ฐ์ฒด์ ํน์ key๊ฐ ์๋์ง ํ์ธ / Object.keys(obj).includes(key), key in obj (0) | 2023.08.03 |
| [Javascript] isNaN(value) : ๋งค๊ฐ๋ณ์๊ฐ ์ซ์์ธ์ง ๊ฒ์ฌํ๋ ํจ์ (0) | 2023.08.03 |
| [Javascript] ๋ฐ์ดํฐ ์ค๋ณต์ ์ ๊ฑฐํ๋ Set ์๋ฃ๊ตฌ์กฐ (0) | 2023.08.03 |
| [Javascript] ๋ฐฐ์ด ์ด๊ธฐํ / map() ํ์ฉ (0) | 2023.08.03 |
