์์
CSS์์ฑํ๊ณ HTML ๋ฌธ์์ ํฌํจ์ํค๋ ๋ฐฉ์์ ํฌ๊ฒ 4๊ฐ์ง ๋ฐฉ์์ผ๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค.
- ๋ด์ฅ๋ฐฉ์
- ์ธ๋ผ์ธ๋ฐฉ์
- ๋งํฌ๋ฐฉ์
- @import ๋ฐฉ์
๋ด์ฅ๋ฐฉ์
HTML์ ํค๋ ์์์ ์์ฑ ํ๋ฉฐ.<style></style>ํ๊ทธ๋ก ์คํ์ผ์ ์์ฑํ๋ ๋ฐฉ์
์ด ๋ฐฉ์์ ๋๋ถ๋ถ์ ํ๋ก์ ํธ์์ HTML, CSS, JS ํ์ผ์ ๋๋์ด ๊ด๋ฆฌํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋ฏ๋ก
์์ฃผ ์ฌ์ฉ๋์ง ์๋ ๋ฐฉ์์ ๋๋ค.
<head>
<style>
div {
color : red;
margin : 20px;
}
</style>
</head>
<body>
..
</body>
์ธ๋ผ์ธ๋ฐฉ์
์์์ style ์์ฑ์ ์ง์ ์คํ์ผ์ ํ๋ ๋ฐฉ์.
...
<div style="color : royalblue; margin: 20px;"></div>
...
CSS์ฐ์ ์์๊ฐ ์ง๋์น๊ฒ ๋๊ธฐ๋๋ฌธ์ ๊ณตํต๊ธฐ๋ฅ์ ๋ํด์ CSSํ์ผ๋ก ๋ฐ๋ก ๊ด๋ฆฌํ๋ ๊ฒฝ์ฐ
์ธ๋ผ์ธ ๋ฐฉ์์ผ๋ก ์ฐ์ฌ์ง ์์๋ ๋ฎ์ด์ฐ๊ธฐ๊ฐ ๋ถ๊ฐ๋ฅํ๋ฉฐ ๋ณ๊ฒฝ์ด ๋ถ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ์ ์ง๋ณด์์ ์ด๋ ค์์ด ์๋ค.
( ๊ถ์ฅํ์ง ์๋ ๋ฐฉ์. )
๋งํฌ ๋ฐฉ์
HTML์ ํค๋ ์์์ ์์ฑ ํ๋ฉฐ <link /> ํ๊ทธ๋ก CSS๋ฌธ์๋ฅผ ๋ถ๋ฌ์์ ์ฐ๊ฒฐํ์ฌ ์คํ์ผ์ ์์ฑํ๋ ๋ฐฉ์
<link rel="stylesheet" herf="./main.css">
๊ฐ์ฅ๋ง์ด ์ฌ์ฉํ๋ ๋ฐฉ์์ด๋ค.
@import ๋ฐฉ์
CSS ์ @import ๊ท์น์ผ๋ก CSS ๋ฌธ์ ์์์ ๋ ๋ค๋ฅธ ๋ฌธ์๋ฅผ ๊ฐ์ ธ์ ์ฐ๊ฒฐํ๋ ๋ฐฉ์
์ง๋ ฌ ๋ฐฉ์์ด๊ธฐ ๋๋ฌธ์ ์ฐ๊ฒฐ์ด ๋๋๊ธฐ์ ๊น์ง ์ ์ฉ์ด ๋ถ๊ฐ
๋ณดํต link ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ cssํ์ผ์ ๋ถ๋ฌ์ฌ๋๋ ๋ชจ๋ cssํ์ผ์ ํ๋ฒ์ ๋ค๊ฐ์ด ๋ถ๋ฌ์ค์ง๋ง
@import ๋ฐฉ์์ผ๋ก cssํ์ผ์์ ๋ถ๋ฌ์ฌ๊ฒฝ์ฐ html ํ์ผ์ ์๋ link๋ฐฉ์์ css๋ฅผ ๋ถ๋ฌ์จ๋ค์
๊ธฐ๋ค๋ ธ๋ค๊ฐ ๋ถ๋ฌ์ค๊ธฐ ๋๋ฌธ์ ์๊ฐ์ฐจ์ด๊ฐ ๋ฐ์ํ๋ค.
<link rel="stylesheet" herf="./main.css"/>
/* main.css */
@import url("./particle.css");
div {
color : royalblue;
margin: 16px;
}
/* particle.css */
.particle {
color: orange;
font-size: 10px;
}
๋จ, ๋ง์ฝ ์ฒ์ ๋ถ๋ฌ์ค๋ ํด๋นํ๋ cssํ์ผ์ ์ ์ฉํ๋ค์ @import ๋ฐฉ์์ผ๋ก ๋ถ๋ฌ์ค๋ cssํ์ผ์ด ์ ์ฉ์ด ๋์ผํ๋ ์ํ์ฌ์ผ ํ๋ฉด import๋ฐฉ์์ด ๋ ์ข๋ค.
'๐โ๐จFRONT-END > ๐จCSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[๋ ๋ง๋ค 3๋ถ CSS] CSS ์ ํ์ #๊ฐ์ํด๋์ค ์ ํ์ (1) | 2022.10.19 |
---|---|
[๋ ๋ง๋ค 3๋ถ CSS] CSS ์ ํ์ #๋ณตํฉ (0) | 2022.10.13 |
[๋ ๋ง๋ค 3๋ถ CSS] ๊ธ์์ ์์ (0) | 2022.10.07 |
[๋ ๋ง๋ค 3๋ถ CSS] ๊ฐ์์์ ์ ํ์ ::before ::after (0) | 2022.10.06 |
[๋ ๋ง๋ค 3๋ถ CSS] ๊ฐ์ํด๋์ค :active (0) | 2022.10.04 |