๊ฐ๋ -> HTML์ ๋์์ธ์ ์ ํ๋ ์ธ์ด
์์ฑ๋ฐฉ์ ->์ธ๋ผ์ธ ์คํ์ผ ์ํธ(์ฐ์ ์์ ์ ์ผ ๋์), ๋ด๋ถ ์คํ์ผ์ํธ(๊ฐ์ ํ์ผ์ <style>์์ ์์ ํ๋ ๊ฒ), ์ธ๋ถ ์คํ์ผ์ํธ(cssํ์ผ์ ๋ถ๋ฌ์์ ๋ด ํ์ด์ง์ ์ ํ๋ ๊ฒ)
์ธ๋ผ์ธ ํ๊ทธ ์์
<p style = "color:white; background-color:black;"> ์ธ๋ผ์ธ ํ๊ทธ </p>
์คํ์ผ ํ๊ทธ ์์
<style type="text/css">
body{
margin: 0px /* ์ธ๋ถ์ฌ๋ฐฑ */
}
p{color : blue};
</style>
์ธ๋ถ ์คํ์ผ ์ํธ ์ ์ฉ ์์
<link rel = "stylesheet" href = "css/test.css">
2. Selector ํํ์
Selector ํํ์์ด๋ ? HTML์ ์คํ์ผ ํ๊ธฐ์ํ ํํ์. HTML์ ๋ง์ ์์ ์์๊ฐ ์๊ธฐ ๋๋ฌธ์ ๋ค์ํ Selector ํํ์์ด ์กด์ฌํจ.
p{
width : 800px;
background-color: orange;
}
strong {
color : red;
}
#a{
font-size : 40px;
}
.c {
color:blue;
}
p{ ;} ์ด ๋ถ๋ถ์ <p>ํ๊ทธ์ ์คํ์ผ์ ์ ํ๊ฒ ๋ค๋ ๋ป์ด๋ค.
strong{ ;}๋ <strong>ํ๊ทธ๋ฅผ ๊ตต๊ณ ํฌ๊ฒ ๋ง๋ค์ด์ ๊ฐ์กฐ๋ฅผ ํ๊ฒ ๋ค๋ ๋ป์ด๋ค .
#a{ ;}์์ #์ ๋ค์ ์์ด๋์ ์ด๋ฆ์ด ๋ค์ด์ฌ๊ฒ์ ํ์ํ๋ ๋ฌธ์์ด๋ค. ๋ฐ๋ผ์ a๋ ์์ด๋์ ์ด๋ฆ์ด๋ค.
<h1>์๋ ์๋ ์๋ <strong id = "a">์๋ !!!!!!!!</strong></h1>
.c{ ;}์์ .์ ๋ค์ ํด๋์ค์ ์ด๋ฆ์ด ๋ค์ด์ฌ ๊ฒ์ ํ์ํ๋ค. ๋ฐ๋ผ์ c๋ ํด๋์ค์ ์ด๋ฆ์ด๋ค.
<p class = "c">13์ผ ์ ์น๊ถ์ ๋ฐ๋ฅด๋ฉด, ๋ฏผ์ฃผ๋น ์ค์์์ํ๋ <span>์ ๋ </span> ๋น์ด ์ํ๋ ๋๋ผ·์ฌํ·๊ตญ๊ฐ์ '๊ธฐ๋ณธ์ฌํ'๋ฅผ ๋ช ์ํ๋ ๋ด์ฉ์ ๋น ๊ฐ๋ น ๊ฐ์ ์์ ํต๊ณผ์์ผฐ๋ค. <!-- ํด๋์ค ํ๊ทธ๋ ์ค๋ณต์ด ๊ฐ๋ฅ ! id๋ x -->
๊ตฌ์ฒด์ ์ผ๋ก ๋ฏผ์ฃผ๋น์ '์ฌํ๊ฒฝ์ ์ ์๊ทนํ·๋ถํ๋ฑ ๊ทน๋ณต๊ณผ ๋ชจ๋ ์ฌ๋์ ๊ธฐ๋ณธ์ ์ธ ์ถ ๋ณด์ฅ'์ ์ํด <b>๊ธฐ๋ณธ์ฌํ</b>๋ฅผ <i>์ถ๊ตฌ</i>ํ๊ฒ ๋ค๋ ๋ฐฉ์นจ์ด๋ค. </p>
/* ์ ์ฒด์ ํ์ */
*{margin: 10px; font-family : '๊ตด๋ฆผ';}
์ด ์ฝ๋๋ <body>์ ์๋ ๋ชจ๋ ๋ฌธ์์ ํจ๊ณผ๋ฅผ ์ ํ๋ ๋ด์ฉ์ด๋ค.
/* ๋ค์ค์ ํ์ */
span,b,i{
color:green;
}
/* ์์ ์ ํ์ */
.c > span { /* pํ๊ทธ ์์ span ํ๊ทธ๋ฅผ ์ ํํจ */
background-color:pink;
}
/* ์ธ์ ์ ํ์ */ /* h1ํ๊ทธ ๋ฐ๋ก ๊ทผ์ฒ์์๋ p์ ํ์๋ง ์ ํ */
h1 + p {
background-color:yellow
}
h1 ~ p { /* h1 ๋ค์์ ๋ชจํผ pํ๊ทธ */
padding : 60px;
}
๋ค์ค ์ ํ์์ ์ด๋ก์ ํฐํธ๋ ํ๊ทธ์ ์ด๋ฆ์ด๋ค ๋ฐ๋ผ์ span,b,i ํ๊ทธ์ ์๋ ๋ชจ๋ ์์์ ๊ธ์์์ด ์ด๋ก์์ด ๋๋ค.
์์ ์ ํ์๋ .c(ํด๋์ค์ ์ด๋ฆ์ด c)์ธ ๊ฒ์ span ํ๊ทธ๋ง ํจ๊ณผ๋ฅผ ์ ์ฉํด์ฃผ๋ ๊ฒ์ด๋ค.
+์ ~๋ ์ฃผ์์ ์ฝ์ด๋ณด๋ฉด ์ดํด๊ฐ ๋ ๊ฒ์ด๋ค.
์๋ฅผ ๋ณด๋ฉด ํ์ดํผ๋งํฌ๊ฐ ๋ฌ๋ ค์๋ ๊ฒ์ ๋ณผ ์ ์๋ค. ์ด๋ aํ๊ทธ๋ก ๋ง๋ ๊ฒ์ด๋ค.
a:link{
color:green;
}
a:active{
color:yellow; /*๋ง์ฐ์ค๋ฅผ ๊ฐ์ ธ๋ค๋๊ณ ๊พน ๋๋ฅด๊ณ ์์ผ๋ฉด ๋ ธ๋์*/
}
p:hover{
background-color:red; /* ๋ง์ฐ์ค ์ปค์๋ฅผ ๊ฐ์ ธ๋ค๊ฐ ๋๋ฉด ์์ด ๋ฐ๋์ด ์ ์ผ ์ค์ํด ์์๋ฌ */
}
์ ๋งํฌ์ ์คํ์ผ์ ์ ํ์ฃผ๋ ์ฝ๋์ด๋ค. link ์์ฑ์ ๋งํฌ์ ๊ธฐ๋ณธ ์์ฑ์ ๋ฐ๊ฟ์ฃผ๊ณ active ์์ฑ์ ๊พน ๋๋ฅด๊ณ ์์ ๋ ์์ ๋ฐ๊ฟ์ค๋ค. hover๋ ๋ง์ฐ์ค๋ฅผ ๊ฐ์ ธ๋ค๋๋ฉด ์์ด ๋ฐ๋์ด ์ด ๋ถ๋ถ์ ๋ฌด์ธ๊ฐ ์์์ ์ฌ์ฉ์์๊ฒ ์๋ ค์ฃผ๋ ์ญํ ์ ํ๋ค.
๋๊ฐ์ ๋ด์ฉ์ div ํ๊ทธ๋ก ๊ฐ์ธ์ ๋๊ฐ๋ฅผ ๋ง๋ค์ด์ฃผ๊ณ id๋ง ๋ค๋ฅด๊ฒ ํ์๋ค. ๊ทธ๋ผ ๋ฐ์ ๋๊ฐ์ ๊ฒ์ด ๋๊ฐ๊ฐ ์ถ๊ฐ๊ฐ ๋๋ค.
/* ์๋ ํด๋์ค ์ ํ์ */
#container2 p:first-letter{
font-size:40px;
}
#container2 h1:first-child{ /* h1ํ๊ทธ๊ฐ ์ฝํ ์ด๋ ๋ฐ๋ก ์์ ์๋ค๋ฉด์ด๋ ๋ป */
background-color: yellow;
}
#container2 p:after{
content : "๋ค์ ๊ฐ์์ ์์๋ฅผ ์ถ๊ฐํ๋ค.";
color:red;
}
์์ ๊ฐ์ด ์์ด๋๋ฅผ ํ์ฉํด ์ํ๋ ๋ถ๋ถ์ div ํด๋์ค๋ง ๋ฐ๊ฟ์ค ์ ์๋ค. first_letter์ ํ๊ทธ์ ์ฒซ๊ธ์๋ง ๋ฐ๊ฟ์ค๋ค.
'FRONT > css' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| padding, margin ์ฐจ์ด์ ์ดํดํ๊ธฐ (1) | 2024.08.21 |
|---|
