<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>์ฐ๊ฒฐ์ ํ์+์์ฑ์ ํ์</title>
</head>
<style>
/* ํ์ ์ ํ์. */
section div{ /* section ์์ ์๋ ๋ชจ๋ div ์ ํํด๋ผ(์์+ํ์) */
color: darkred;
}
/* ์์ ์ ํ์. */
section > span{ /* section ๋ฐ๋ก ํ์(์์)์ธ span๋ง ์ ํํด๋ผ */
color: blue;
}
article > span {} /* >๋ ์ํฉ์ ๋ง๊ฒ ๋ฃ๊ณ ,๋นผ๊ณ ๊ฐ๋ฅ */
section > article > span { /* ์ด๋ ๊ฒ๋ ๊ฐ๋ฅ */
color: orange;
}
/* ์์ฑ ์ ํ์ => ํด๋น ํ๊ทธ์ ํด๋น ์์ฑ์ ๊ฐ์ง ์์๋ง ์ ํ */
/* a, input์ ๋ถ๋ชจ์ (๋๋ถ๋ถ์)์คํ์ผ์ ์๋ฐ๋ฅธ๋ค */
input[type=text]{
color: lightcoral;
}
input[required]{ /* input์ด๋ฉด์ required ์์ฑ์ด ์๋ ์์๋ฅผ ์ ํํด๋ผ */
background-color: pink;
}
input[checked] { /* input์ด๋ฉด์ checked ์์ฑ์ด ์๋ค */
width: 100px;
height: 100px;
}
a{
color: black;
text-decoration: none; /* ๋ฐ์ค ์์ ๋ผ */
}
input[href ~="naver"] {
font-size: 100px;
}
/*!* ์ธ์ ํ์ฌ ์ ํ์ (์์, ํ์๋ณด๋ค ์ ์ฐ์ด์ง ์์, ์ ๋ชฐ๋ผ๋ ๊ด์ฐฎ) *!*/
/*p + div{ !* p ๋ฐ๋ก ๋ค์์ ์๋ div์ ํํด๋ผ *!*/
/* color: green;*/
/*}*/
/*!* ํ์ ์ ํ์ (์์, ํ์๋ณด๋ค ์ ์ฐ์ด์ง ์์, ์ ๋ชฐ๋ผ๋ ๊ด์ฐฎ) *!*/
/*div ~ div { !* divํ๊ณ ํ์ ์ธ (์์๋ ์๋๊ณ ๋ถ๋ชจ๋ ์๋ ๊ฐ์ ๋ผ์ธ ์น๊ตฌ๋ค) *!*/
/* color: darkgoldenrod;*/
/*}*/
</style>
<body>
<section>
SECTION ๊ธ์
<span>SECTION-SPAN</span>
<div>SECTION-DIV</div>
<article>
<span>SECTION-ARTICLE-SPAN</span>
<div>SECTION-ARTICLE-DIV</div>
</article>
<button>๋ฒํผ!</button>
</section>
<section>
<div>SECTION-DIV2</div>
</section>
<div>DIV1</div>
<p>DIV2</p>
<div>DIV3</div>
<br>
<form>
TEXT1<input type="text" value="1"><br>
TEXT2<input type="text" value="2"><br>
EMAIL<input type="email" value="3" required><br>
<!-- required : ์
๋ ฅ์ ํด์ผ, ์ ์กํด์ผํจ -->
PW<input type="password" value="4"><br>
CH1<input type="checkbox" value="5" checked><br>
CH2<input type="checkbox" value="6"><br>
<a href="https://www.naver.com">๋ค์ด๋ฒ๋ก ์ด๋</a>
<a href="https://www.google.com">๊ตฌ๊ธ๋ก ์ด๋</a>
<button>์ ์ก</button> <!-- ์๋ submit ๋จ -->
</form>
</body>
</html>
