๐ CSS๋?
Cascading Style Sheets์ ์ฝ์๋ก, ์นํ์ด์ง๋ฅผ ๋ณด๊ธฐ ์ข๊ฒ ๊พธ๋ฏธ๊ธฐ ์ํด ์์ฑํ๋ ์ฝ๋
HTML์ด ์น๋ฌธ์์ ๋ผ๋๋ฅผ ์ด๋ฃฌ๋ค๋ฉด, CSS๋ ๊ทผ์ก์ด๋ผ๊ณ ๋ณผ ์ ์์ (๋์ค์ ๋ฐฐ์ฐ๊ฒ ๋ JS๋ ๋์ ์ธ ์น์ฌ์ดํธ ๊ตฌํํ๋ ๋์ ์ญํ )
/* ์ ํ์ { ์์ฑ1: ์์ฑ๊ฐ, ์์ฑ2: ์์ฑ๊ฐ2} */
p {
text-align: center;
color: red;
}
๐ ์คํ์ผ ์ํธ
์คํ์ผ ์ํธ๋ ํฌ๊ฒ '๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ์คํ์ผ'๊ณผ '์ฌ์ฉ์ ์คํ์ผ'๋ก ๋๋๊ณ , ์ฌ๊ธฐ์ ์ฌ์ฉ์ ์คํ์ผ์ ๋ค์ '์ธ๋ผ์ธ ์คํ์ผ', '๋ด๋ถ ์คํ์ผ ์ํธ', '์ธ๋ถ ์คํ์ผ ์ํธ' ์ธ ๊ฐ์ง๋ก ๋๋๋๋ฐ ์ด ์ค์์ ๋ด๋ถ ์คํ์ผ ์ํธ์ ์ธ๋ถ ์คํ์ผ ์ํธ์ ๋ํด ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํ๋ค.
1. ๋ด๋ถ ์คํ์ผ ์ํธ
: ๊ฐ์ HTML ์น๋ฌธ์ ์์ ์์ฑํ๋ ๊ฒฝ์ฐ๋ฅผ ๋งํ๋ฉฐ, <head> ํ๊ทธ ์์์ <style></style> ํ๊ทธ ์ฌ์ด์ ์์ฑํ์ฌ ์ ์
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>๋ด๋ถ ์คํ์ผ ์ํธ</title>
<style>
p {
color: #434cb0;
background-color: #c4c4c4;
}
</style>
</head>
<body>
<p> '๋ด๋ถ ์คํ์ผ ์ํธ'๋ ์น๋ฌธ์ ์์์ ์ฌ์ฉํ ์คํ์ผ์ ๊ฐ์ HTML ์น๋ฌธ์ ์์ ์์ฑํ ๊ฒ์ ๋งํ๋ค. </p>
</body>
</html>
2. ์ธ๋ถ ์คํ์ผ ์ํธ
: .css ๋ผ๋ ํ์ฅ์๋ฅผ ์ฌ์ฉํ์ฌ ์คํ์ผ ์ํธ๋ฅผ ๋ฐ๋ก ํ์ผ๋ก ์ ์ฅํ๊ณ , <link> ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ์น๋ฌธ์์ ์ฐ๊ฒฐํ๋ ๋ฐฉ๋ฒ
p {
color: #434cb0;
background-color: #c4c4c4;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>์ธ๋ถ ์คํ์ผ ์ํธ</title>
<link rel="stylesheet" href="p.css">
</head>
<body>
<p> '์ธ๋ถ ์คํ์ผ ์ํธ'๋ ์น๋ฌธ์ ์์์ ์ฌ์ฉํ ์คํ์ผ์ ์ธ๋ถ ํ์ผ๋ก ์์ฑํ์ฌ ์น๋ฌธ์์ ์ฐ๊ฒฐํ๋ ๊ฒฝ์ฐ์ด๋ค. </p>
</body>
</html>
'๐ป Programming > HTML, CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] html, :root, * ์ ํ์ (0) | 2024.01.10 |
|---|---|
| [CSS] em, rem, % (0) | 2024.01.09 |
| [HTML] ์น ๋ฌธ์์ ๊ธฐ๋ณธ ๊ตฌ์กฐ: header, main, footer (0) | 2023.05.19 |
| [CSS] BEM (Block-Element-Modifier) (0) | 2023.02.25 |
| [HTML] Tag & Attribute (0) | 2023.02.18 |
