์๋ ํ์ธ์ Foma ๐ป ์ ๋๋ค!
์์ฆ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ฅผ ๊ณต๋ถํ๊ณ ์๋๋ฐ CSS์ ๋ํ ๊ธฐ์ต์ด ๊ฐ๋ฌผ ๊ฐ๋ฌผํด์ ํท๊ฐ๋ฆฌ๋๋ผ๊ตฌ์..
๊ทธ๋์ CSS์ ๋ํด ๋ค์ ํ๋ฒ ์ ๋๋ก ์ ๋ฆฌํ๊ณ ๋์ด๊ฐ๋ ค๊ณ ํฉ๋๋ค.
๋ฐ๋ก ์์ํ ๊ฒ์~
CSS๋?
Cascading Style Sheets์ ์ค์๋ง์ด๋ฉฐ ์ง๋ ํ๋ฉด ๊ณ๋จ์์ผ๋ก ์์ฑํ๋ ์คํ์ผ ์ํธ์ ๋๋ค.
๋งํฌ์ ์ธ์ด๊ฐ ์ค์ ํ์๋๋ ๋ฐฉ๋ฒ์ ๊ธฐ์ ํ๋ ์คํ์ผ ์ธ์ด๋ก HTML๊ณผ XML์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
HTML์ด ์น์ฌ์ดํธ์ ๋ชธ์ฒด๋ฅผ ๋ด๋นํ๋ค๋ฉด CSS๋ ๊ทธ ๋ชธ์ฒด๋ฅผ ์์๊ฒ ๊พธ๋ฏธ๋ ์ญํ ์ ๋ด๋นํ๋ค๊ณ ํ ์ ์์ต๋๋ค.
1994๋ ํ์ฝค ๋น์ ๋ฆฌ๊ฐ ์ฒ์ ์ ์ํ์ฌ ์ดํ W3C์์ CSS2,CSS3๋ฅผ ๊ฐ๋ฐํด์์ต๋๋ค.
CSS ๊ตฌ๋ฌธ ์์ฑํ๋ ๋ฒ
์ํ๋ HTML ์์๋ฅผ ์ ํํ ๋ค ๋ฐ๊พธ๊ณ ์ถ์ ์์ฑ์ ์ ํํ์ฌ ๊ฐ์ ๋งค๊ฒจ์ฃผ๋ฉด ๋ฉ๋๋ค.
HTML {
์์ฑ1:value;
์์ฑ2:value;
}
๋ง์ฝ h1ํ๊ทธ์ ์์ ํ๋์์ผ๋ก ํ๊ณ , ํฐํธ ํฌ๊ธฐ๋ฅผ 15ํฝ์ ๋ก ํ๊ณ ์ถ๋ค๋ฉด ์๋์ ๊ฐ์ด ์์ฑํด์ฃผ๋ฉด ๋ฉ๋๋ค.
<style>
h1 {
color:blue;
font-size: 15px;
}
</style>
<body>
<h1>์๋
ํ์ธ์</h1>
</body>
์๋์ ๊ฐ์ด ์ฌ๋ฌ HTML์์๋ฅผ ์ ํํ์ฌ ์ธํ ํ ์ ์์ต๋๋ค.
<style>
h1,h2 {
color:blue;
font-size: 15px;
}
</style>
<body>
<h1>์๋
ํ์ธ์</h1>
<h2>์๋
</h2>
</body>
.css ํ์ผ์ ๋ฐ๋ก ๋ง๋ค์ด์ link๋ก ์ฒจ๋ถํ ์๋ ์์ต๋๋ค.
style.css
h1 {
color: green;
}
index.html
<body>
<h1>์๋
ํ์ธ์</h1>
</body>
๋ง์ฝ ์๋์ ๊ฐ์ด ํ HTML ์์์ ์ค๋ณตํด์ ์ด ๊ฒฝ์ฐ ๋ ๋ฆ๊ฒ ์ด ๊ฐ์ผ๋ก ์ ์ฉ๋ฉ๋๋ค.
h1 {
color: green;
}
h1 {
color: red;
}
Class
.์ํ๋ ํด๋์ค ์ด๋ฆ์ผ๋ก ์์ฑํ๋ฉด ํด๋์ค๋ฅผ ๋ง๋ค์ด์ ์ ์ฉํ ์๋ ์์ต๋๋ค.
์๋์ ๊ฐ์ด ํํฌ์์ ์ ์ฉํ๋ ํด๋์ค๋ฅผ ๋ง๋ค๊ณ
.pink {
color: pink;
}
h1 ํ๊ทธ์ ํด๋์ค๋ฅผ ์ ์ฉ์์ผ ์ฃผ๋ฉด ๊ธ์์ ํํฌ์์ด ์ ์ฉ๋ฉ๋๋ค.
<h1 class="pink">์๋
ํ์ธ์</h1>
ID
#์ํ๋ ์์ด๋ ์ด๋ฆ์ผ๋ก ํน์ ์์ด๋๋ฅผ ์ ํด์ ์ฌ์ฉํ ์๋ ์์ต๋๋ค.
์๋์ ๊ฐ์ด ์ด๋ก์์ ํฐํธ ์ฌ์ด์ฆ๊ฐ 100ํฝ์ ์ธ ๊ตฌ๋ฌธ์ ์์ฑํ๊ณ
#greenBigLetter {
color: green;
font-size: 100px;
}
id๊ฐ์ ์ ์ฉํ๋ฉด ํฐ ์ด๋ก์ ๊ธ์๊ฐ ์ ์ฉ๋๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค.
<h1 id="greenBigLetter">์๋
ํ์ธ์</h1>
class์ id์ ์ฐจ์ด์
์ธ๋ป ๋ณด๊ธฐ์ class์ id๊ฐ ๋์ผํ ๊ธฐ๋ฅ์ ํ๋ ๊ฒ์ฒ๋ผ ๋ณด์ผ ์ ์์ต๋๋ค.
ํ์ง๋ง ๋ช ๊ฐ์ง ์ฐจ์ด์ ์ด ์์ต๋๋ค.
1. class๋ ์ฌ๋ฌ ๊ฐ๋ฅผ ์ ์ฉํ ์ ์์ง๋ง id๋ ํ๋๋ง ์ ์ฉํ ์ ์๋ค.
ํด๋์ค๋ ์ฌ๋ฌ ํด๋์ค๋ฅผ ๋ง๋ค๊ณ
.pink {
color: pink;
}
.bigSize {
font-size: 100px;
}
๋์ด์ฐ๊ธฐ๋ก ๊ตฌ๋ถํ๋ฉฐ ์ฌ๋ฌ ํด๋์ค๋ฅผ ์ ์ฉํ ์ ์์ต๋๋ค.
<h1 class="pink bigSize">์๋
ํ์ธ์</h1>
id๋ ์ฌ๋ฌ id๋ฅผ ๋ง๋ค๊ณ
#pink {
color: pink;
}
#bigSize {
font-size: 100px;
}
์ ์ฉํ๋ฉด ์๋ฌด ๊ฒ๋ ์ ์ฉ๋์ง ์๊ณ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ๋์ค๊ฒ ๋ฉ๋๋ค.
<h1 id="pink bigSize">์๋
</h1>
2. id๊ฐ class๋ณด๋ค ์ฐ์ ์์๊ฐ ๋๋ค.
์๋์ ๊ฐ์ด ํด๋์ค๋ ํํฌ์, ์์ด๋๋ ์ด๋ก์์ผ๋ก ์ง์ ํด๋๊ณ
.pink {
color: pink;
}
#green {
color: green;
}
์๋์ ๊ฐ์ด ํด๋์ค์ ์์ด๋๋ฅผ ๋์์ ์ ์ผ๋ฉด ์์ด๋์ ์๊น์ธ ์ด๋ก์์ด ์ ์ฉ๋์ด ๋์จ๋ค. (์์๋ฅผ ๋ฐ๊ฟ๋ ๋์ผ)
<h1 id="green" class="pink">์๋
ํ์ธ์</h1>
์ฐ์ ์์
id์ class ์ด ์ธ์๋ CSS๋ ์ฐ์ ์์๊ฐ ์กด์ฌํฉ๋๋ค.
!important > ์ธ๋ผ์ธ ์คํ์ผ > id > class > tag ์์ผ๋ก ์ฐ์ ์์๊ฐ ๊ฒฐ์ ๋ฉ๋๋ค.
์๋์ ๊ฐ์ด !important,id,class,tag๋ฅผ ๋ง๋ค์ด ๋์์ต๋๋ค. (์ธ๋ผ์ธ์ ์ง์ ์ ๋ ฅํด์ผ ๋๊ธฐ ๋๋ฌธ์ ์๋ต)
red {
color:red !important
}
#yellow {
color:yellow;
}
.green {
color:green
}
blue {
color:blue
}
์๋์ ๊ฐ์ด ์ ์ฉํ๋ฉด ๊ฐ์ฅ ์ฐ์ ์์๊ฐ ๋์ ๋นจ๊ฐ์์ด ๊ธ์์ ์ ์ฉ๋ฉ๋๋ค.
<red style:"color:orange" id="yellow" class="green">์๋
ํ์ธ์</red>
!important๋ฅผ ๋นผ๊ณ ํ๊ทธ๋ฅผ ๋ฃ์ ๋ค ์คํ์์ผ ๋ณด๋ฉด ๋ ๋ฒ์งธ ์ฐ์ ์์์ธ ์ธ๋ผ์ธ ์คํ์ผ์ธ ์ฃผํฉ์์ด ์ ์ฉ๋ฉ๋๋ค.
<blue style="color: orange;" id="yellow" class="green">์๋
ํ์ธ์</blue>
์ธ๋ผ์ธ ์คํ์ผ์ ๋นผ๊ณ ์คํ์์ผ ๋ณด๋ฉด ์ธ ๋ฒ์งธ ์ฐ์ ์์์ธ id๊ฐ์ธ ๋ ธ๋์์ผ๋ก ์ ์ฉ๋ฉ๋๋ค.
<blue id="yellow" class="green">์๋
ํ์ธ์</blue>
idํ๊ทธ๋ฅผ ๋นผ๊ณ ์คํ์ํค๋ฉด ๋ค ๋ฒ์งธ ์ฐ์ ์์์ธ class์ ๊ฐ ์ด๋ก์์ผ๋ก ์ ์ฉ๋ฉ๋๋ค.
<blue class="green">์๋
ํ์ธ์</blue>
๋ชจ๋ ๋นผ๊ณ ํ๊ทธ๋ง ์คํ์ํค๋ฉด ํ๋์์ด ์ ์ฉ๋ฉ๋๋ค.
Reference
CSS: Cascading Style Sheets | MDN
Cascading Style Sheets(CSS)๋ HTML์ด๋ XML(XML์ ๋ฐฉ์ธ์ธ SVG, XHTML ํฌํจ)๋ก ์์ฑ๋ ๋ฌธ์์ ํ์ ๋ฐฉ๋ฒ์ ๊ธฐ์ ํ๊ธฐ ์ํ ์คํ์ผ ์ํธ ์ธ์ด์ ๋๋ค. CSS๋ ์์๊ฐ ํ๋ฉด, ์ข ์ด, ์์ฑ์ด๋ ๋ค๋ฅธ ๋งค์ฒด ์์ ์ด๋ป๊ฒ ๋
developer.mozilla.org
CSS - ์ํค๋ฐฑ๊ณผ, ์ฐ๋ฆฌ ๋ชจ๋์ ๋ฐฑ๊ณผ์ฌ์
์ข ์ํ ์ํธ ๋๋ ์บ์ค์ผ์ด๋ฉ ์คํ์ผ ์ํธ(Cascading Style Sheets, CSS)๋ ๋งํฌ์ ์ธ์ด๊ฐ ์ค์ ํ์๋๋ ๋ฐฉ๋ฒ์ ๊ธฐ์ ํ๋ ์คํ์ผ ์ธ์ด(style sheet language)๋ก[1], HTML๊ณผ XHTML์ ์ฃผ๋ก ์ฐ์ด๋ฉฐ, XML์์๋ ์ฌ์ฉํ
ko.wikipedia.org
CSS Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'๐ Language > HTML&CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[CSS] Flex ์์ฑ ์์๋ณด๊ธฐ (List of flex properties) (0) | 2022.02.22 |
---|---|
[CSS] ์ปฌ๋ฌ์ ๊ดํ ์์ฑ ์์๋ณด๊ธฐ (List of color properties) (0) | 2022.02.22 |
๋๊ธ