CSS์ ํฌ๊ธฐ ๋จ์
์ด ์ธ์๋ mm, cm, in, pt๊ฐ ์์ง๋ง ์์ฃผ ์ฌ์ฉ๋์ง๋ ์๋ ๋จ์์ด๋ค.
CSS์ ์์ ๋จ์
CSS์ ์ ํ์
์ ์ฒด ์ ํ์์ ์์(ํ๊ทธ) ์ ํ์
โถ ์์ ๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ ์ฒด ์ ํ์์ ์์(ํ๊ทธ) ์ ํ์</title>
<style>
* { font-size: 12px; } /*์ ์ฒด ์ ํ์*/
h3 { font-size: 1.35em; width: 600px;}
p {
width: 600px;
border: 1px solid #C9C9C9;
padding: 10px 20px 30px;
}
h3, p {
margin: 10px auto;
}
</style>
</head>
<body>
<h3>CSS ์ ํ์</h3>
<article>
<p>CSS์์ HTML ๋ฌธ์์ ํน์ ์์์ ์คํ์ผ์ ์ง์ ํ๊ธฐ ์ํด ๊ทธ ์์๋ฅผ
์ ํํ ์ ์๋ ํ๊ทธ๋ ํด๋์ค ๋๋ ์์ด๋ ๋ฑ์ ์ผ์ปซ๋ ๋ง๋ก ์ ํํ๋ ์์๋ฅผ
๊ตฌ๋ถํ ์ ์๋ ๋ช
์นญ์ <em>์ ํ์(Selector)</em>๋ผ ํ๋ค.</p>
<p>๋ํ ์ ํ์๋ HTML ๋ฌธ์์ ํน์ ์์์ CSS๋ฅผ ํตํด ์คํ์ผ์ ์ ์ฉํ๊ฑฐ๋
ํจ๊ณผ๋ฅผ ์ ์ฉํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ <strong>CSS ๋ฌธ๋ฒ์ ํ์ ๊ตฌ์ฑ์์</strong>
์ด๋ค.</p>
<p>CSS์์ ์ฌ์ฉ๋๋ <em>์ ํ์</em>๋ ๋งํฌ์
๊ธฐ๋ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ
ํ๋ ์์ํฌ์ธ <em>jQuery</em>์์ ๋๋ถ๋ถ ์ฌ์ฉํ ์ ์๋ค.</p>
</article>
</body>
</html>
- ์ ์ฒด ์ ํ์๋ HTML ๋ฌธ์ ๋ด์ ๋ชจ๋ ํ๊ทธ๋ฅผ ์ ํ ํ ๋ ์ฌ์ฉํ๋ ์ ํ์๋ก
๋ฌธ์์ ์ฌ๋ฐฑ์ด๋ ๋ง์ง๋ฑ์ ์ด๊ธฐํ ํ ๋๋ ๋ง์ด ์ฌ์ฉ๋๋ ์ ํ์์ด๋ค.
- ํ์ ์ ํ์๋ ํน์ ํ๊ทธ๋ฅผ ์ ํํ ๋ ์ฌ์ฉ๋๋ ์ ํ์๋ก ํ๊ทธ ์ ํ์๋ผ๊ณ ๋ ํ๋ค.
ํด๋์ค ์ ํ์์ ์์ด๋ ์ ํ์
โถ ์์ ๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํด๋์ค ์ ํ์์ ์์ด๋ ์ ํ์</title>
<style>
* {
margin: 0px;
padding: 0px;
font-size: 12px;
}
header, section {
width: 600px;
margin: 10px auto;
}
#selectorDescription {
height: 60px;
line-height: 1.5em;
}
#classSelector {
border: 1px dashed orange;
}
#idSelector {
border: 1px dashed blue;
margin-top: 10px;
}
.selectorTitle {
background-color: #f02;
color: white;
}
.selectorTitle, articleContent {
padding: 5px;
}
.redDotLine {
color: blue;
/* border-bottom: 1px dotted red; */
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>ํด๋์ค ์ ํ์์ ์์ด๋ ์ ํ์</h1>
</header>
<section>
<p id="selectorDescription">ํ๊ทธ์ ์์ฑ์ผ๋ก id์ class ์์ฑ์ ์ง์ ํ๊ณ
CSS์์ ์์ด๋๋ ํด๋์ค ์์ฑ์ ์ง์ ํ ์์ฑ ๊ฐ์ ์ ํ์๋ก ์ง์ ํ๋
๋ฐฉ๋ฒ์ผ๋ก ์น ๋ฌธ์์ ๋ ์ด์์์ ๊ตฌ์ฑํ๊ณ ์คํ์ผ์ ์ ์ฉํ ๋ CSS์์
๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ์ ํ์ ์ด๋ค.</p>
<article id="classSelector">
<h3 class="selectorTitle">ํด๋์ค ์ ํ์</h3>
<p class="articleContent"><span class="redDotLine">id ์์ฑ์</span>
์ง์ ํ ์์ฑ ๊ฐ์ ํ๋์ HTML ๋ฌธ์ ๋ด๋ถ์์ <span class="redDotLine">
์ค๋ณต๋์ง ์๊ณ ์ ์ผํด์ผ ํ๋ค.</span></p>
</article>
<article id=idSelector>
<h3 class="selectorTitle">์์ด๋ ์ ํ์</h3>
<p class="articleContent"><span class="redDotLine">class ์์ฑ์</span>
์ง์ ํ ์์ฑ ๊ฐ์ <span class="redDotLine">์ฌ๋ฌ ์์์ ์ค๋ณต์ผ๋ก
์ง์ ํ ์ ์๋ค.</span></p>
</article>
</section>
</body>
</html>- ํ๊ทธ์ ์์ฑ์ผ๋ก id์ class ์์ฑ์ ์ง์ ํ๊ณ CSS์์ ์์ด๋๋ ํด๋์ค ์์ฑ์ ์ง์ ํ ์์ฑ ๊ฐ์
์ ํ์๋ก ์ง์ ํ๋ ๋ฐฉ๋ฒ์ผ๋ก ์น ๋ฌธ์์ ๋ ์ด์์์ ๊ตฌ์ฑํ๊ณ ์คํ์ผ์ ์ ์ฉํ ๋
CSS์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ์ ํ์ ์ด๋ค.
์์ ์ ํ์์ ์์ ์ ํ์
โถ ์์ ๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์์ ์ ํ์์ ์์ ์ ํ์</title>
<style>
* {
font-size: 12px;
}
h2 {
font-size: 30px;
}
section > h2 {
font-size: 20px;
}
section > div > h2 {
font-size: 16px;
}
section h2 {
color: blue;
}
.description {
height: 100px;
width: 400px;
padding: 10px;
border: 1px solid darkgray;
}
p.description {
height: 60px;
border: 1px solid red;
}
</style>
</head>
<body>
<header>
<h2>์์ ์ ํ์์ ์์ ์ ํ์</h2>
</header>
<section>
<h2>์์ ์ ํ์</h2>
<div class="description">
ํ ๋จ๊ณ ์๋์ ์์๋ ํ์ ์์๋ฅผ ์ ํํ๊ธฐ ์ํด ์ฌ์ฉํ๋ ์์ ์ ํ์</div>
<h2>์์ ์ ํ์</h2>
<div class="description">
์ ์ฒด ํ์ ์์ ์ค์ ์ง์ ํ ๋ชจ๋ ์์๋ฅผ ์ ํํ๋ ์์ ์ ํ์</div>
<div>
<h2>์ฌ๋์ ์</h2>
<p class="description">
๋ด ๋ถ๋ชจ์ ๋ฐ๋ก ์๋์ ์์นํ ๋๋ ์์์ด๊ณ ๋๋ฅผ ํฌํจํ ๋ด ์์๊ณผ ๊ทธ ์๋
์์์ ์์๋ค์ ๋ด ๋ถ๋ชจ์ ์์์ผ๋ก ๋ถ๋ฅธ๋ค.</p>
</div>
</section>
</body>
</html>- section > div > h2 ๋ ์น์ ์์ div์์ h2๋ผ๋ ํ๊ทธ๋ฅผ ์ ํํ๋ ๊ฒ์ด๋ค.
- section h2๋ ์น์ ์์ ๋ชจ๋ h2 ํ๊ทธ๋ค์ ์ ํํ๋ ๊ฒ์ด๋ค.
- p.description์ pํ๊ทธ์ ์์ฑ์ด description์ธ ๊ฒ๋ค๋ง ์ ํํ๋ ๊ฒ์ด๋ค.
์์ฑ ๊ด๋ จ ์ ํ์์ ์ธ์ ์ ํ์
โถ ์์ ๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์์ฑ ๊ด๋ จ ์ ํ์์ ์ธ์ ์ ํ์</title>
<style>
* { fonr-size : 12px; }
div {
width: 600px;
margin: 0px auto;
}
img {
margin: 10px;
}
#imgs {
margin: 50px auto;
}
#buttons {
margin: 20px auto;
text-align: center;
}
input[type='text'] {
text-align: right;
}
div > a[class~='11st'] {
color: white;
font-weight: bold;
background-color: black;
}
input[name^='first'] {
color: red;
font-weight: bold;
}
input[name^='second'] {
color: blue;
font-weight: bold;
}
/* imgํ๊ทธ์ src์ 'png'๋ก ๋๋๋ ์ ํ์ */
img[src$='png'] {
border: 2px solid red;
}
/* imgํ๊ทธ์ src์ 'javascript'๊ฐ ํฌํจ๋ ์ ํ์ */
img[src*='javascript'] {
border: 2px solid blue;
}
/* spanํ๊ทธ์ class์ 'first'๊ฐ ํฌํจ๋ ์ ํ์ */
span[class*='first']
{ color:red;
font-weight: bold;
}
/* spanํ๊ทธ์ class์ 'second'๊ฐ ํฌํจ๋ ์ ํ์ */
span[class*='second']
{ color:blue;
font-weight: bold;
}
/* ์ธ์ ์ ํ๊ฐ */
span + input {
background-color: darkgray;
}
</style>
</head>
<body>
<div id="link">
<a href="http://www.yes24.com">YES 24 ์ฐธ๊ณ ํ๊ธฐ</a>
<a href="http://book.11st.co.kr/index.html"
target="_blank" class="blank 11st">11๋ฒ๊ฐ ์ฐธ๊ณ ํ๊ธฐ</a>
</div>
<div id="imgs">
<img src="images/modern_javascript.jpg" />
<img src="images/responsive_web.png" />
<img src="images/javascript_guide.jpg" />
</div>
<div id="form">
<form name="form1">
<span class="first_info">์ ์ผ ์ฝ๊ณ ์ถ์ ๋์๋ฅผ ์
๋ ฅํด ์ฃผ์ธ์</span>
<input type="text" name="first_book" size="30"/><br/>
<span class="second_info">๊ทธ ๋ค์ ์ฝ๊ณ ์ถ์ ๋์๋ฅผ ์
๋ ฅํด ์ฃผ์ธ์</span>
<input type="text" name="second_book" size="30" /><br/>
<div id="buttons">
<input type="submit" value="ํ์ธ" />
<input type="reset" value="์ทจ์" /></div>
</form>
</div>
</body>
</html>- input[type=text] { text-align: right; }
input ์์์ type ์์ฑ ๊ฐ์ด text์ธ ์์๋ฅผ ์ ํํ๋ค.
- div a[class~='11st'] {color: white; font-weight: bold; background-color: black;}
a์์์ class ์์ฑ ๊ฐ์ด 11st๋ฅผ ํฌํจํ๊ณ ์๋ ์์๋ฅผ ์ ํํ๋ค.
class ์์ฑ์ ๊ฐ์ ํ๋๊ฐ ์๋ ์ฌ๋ฌ ๊ฐ๋ฅผ ์ง์ ํ ์ ์๊ธฐ ๋๋ฌธ์ ์ ํํ 11st์ ์ผ์นํ๊ฑฐ๋ ์ฌ๋ฌ ๊ฐ์ ๊ฐ ์ค์์ 11st๋ฅผ ํฌํจํ๋ ์์ ๋ ๋ค ์ ํ๋๋ค.
- input[name^=first] { color: red; font-weight: bold; }
input ์์์ name ์์ฑ ๊ฐ์ด first๋ก ์์ํ๋ ์์๋ฅผ ์ ํํ๋ค.
- img[src$=png] { border: 2px solid red; }
img ์์์ src ์์ฑ ๊ฐ์ด png๋ก ๋๋๋ ์์๋ฅผ ์ ํํ๋ค.
- img[src*=javascript] { border: 2px dotted blue; }
img ์์์ src ์์ฑ ๊ฐ์ด javascript๋ฅผ ํฌํจํ๋ ์์๋ฅผ ์ ํํ๋ค.
- span + input { background-color: darkgray; }
span ์์ ๋ฐ๋ก ๋ค์์ ์ค๋ ๊ฐ์ ๋ ๋ฒจ์ input ์์๋ฅผ ์ ํํ๋ค.
- div ~ div { background: #FFEAEA; }
div ์์ ๋ค์์ ์ค๋ ๊ฐ์ ๋ ๋ฒจ์ ๋ชจ๋ div ์์๋ฅผ ์ ํํ๋ค.
๋งํฌ ๊ฐ์ํด๋์ค์ ๋ฐ์ ๊ฐ์ํด๋์ค ์ ํ์
โถ ์์ ๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋งํฌ ๊ฐ์ํด๋์ค์ ๋ฐ์ ๊ฐ์ํด๋์ค ์ ํ์</title>
<style>
* { font-size: 12px;}
div {
width: 600px;
margin: 0px auto;
}
h2 {
margin-top: 30px;
text-align: center;
font-size: 16px;
font-weight: bold;
}
h3 {
font-size: 14px;
font-weight: 900;
}
#a_tag {
height: 200px;
padding: 10px;
}
#tags {
height: 200px;
padding: 10px;
border: 1px dotted blue;
}
a {
text-decoration: none;
}
a:link { color : blue }
a:visited {color: darkgray;}
a:hover {color: red;}
a:active {color : orange}
#a_tag:hover {border: 1px dotted blue;}
#a_tag:active {background-color: #EAEAEA;}
#tags:hover {border: 1px solid red;}
</style>
</head>
<body>
<h2>๋งํฌ ๊ฐ์ํด๋์ค ์ ํ์์ ๋ฐ์ ๊ฐ์ํด๋์ค ์ ํ์</h2>
<div id="a_tag">
<a href="#">ํ์ฌ ๋ฌธ์ ์๋ก๊ณ ์นจ</a><br/>
<a href="http://www.naver.com">๋ค์ด๋ฒ ๊ฐ๊ธฐ</a><br/>
<a>href ์์ฑ์ด ์๋ a ํ๊ทธ</a><br/>
</div>
<div id="tags">
<h3>๋ฐ์ ์ ํ์</h3>
<p>๋ฐ์ ๊ฐ์ํด๋์ค ์ ํ์๋ ์ฌ์ฉ์๊ฐ ๋ง์ฐ์ค ํฌ์ธํฐ๋ฅผ ํน์ ์์ ์์ ์์น
์ํค๊ฑฐ๋ ํด๋ฆญํ ์ํฉ์ด ๋ฐ์ํ๋ฉด ๊ทธ ์์๋ฅผ ์ ํํด ์ฃผ๋ ์ ํ์ ์ด๋ค.</p>
<div class="description">
๋ฐ์ ๊ฐ์ํด๋์ค ์ ํ์๋ฅผ ํตํด ์คํ์ผ์ ์ง์ ํ ์์์ ๋ง์ฐ์ค ํฌ์ธํฐ๊ฐ
์์น๋ ์ํ์ด๊ฑฐ๋(hover) ํด๋ฆญ๋(active) ์ํ์ด๋ฉด ์ง์ ํ ์คํ์ผ์ด ์ ์ฉ๋๊ณ
๋ง์ฐ์ค ํฌ์ธํฐ์ ์์น๋ฅผ ์์ ๋ฐ์ผ๋ก ์ด๋ํ๊ฑฐ๋ ํด๋ฆญ์ ํด์ ํ๋ฉด
์คํ์ผ์ ์ ์ฉ๋์ง ์๋๋ค.
</div>
</div>
</body>
</html>- a:link {color : blue}
๋งํฌ ์์
- a:visited {color : darkgray}
๋ฐฉ๋ฌธํ ๋งํฌ์ ์์
- a:hover {color : red}
๋ง์ฐ์ค ํฌ์ธํฐ๊ฐ ์ฌ๋ผ๊ฐ์ ๋์ ์์
- a:active {color : orange}
๋ง์ฐ์ค๋ก ํด๋ฆญํ์ ๋์ ์์
(hover์ active๋ ๋ฒํผ์ด ์๋์ฌ๋ ์ ์ฉ๋๋ค,)
์ํ ๊ฐ์ํด๋์ค ์ ํ์
โถ ์์ ๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ํ ๊ฐ์ํด๋์ค ์ ํ์</title>
<script>
function checkedEmail() {
var chk = document.getElementById('input_email');
if(chk.checked) {
document.form1.email.disabled = false;
document.form1.email.style.backgroundColor = '#FFFFFF';
document.form1.email.style.color = 'black';
} else {
document.form1.email.disabled = true;
document.form1.email.style.backgroundColor = 'gray';
document.form1.email.style.color = 'white'
}
}
</script>
<style>
* { font-size: 12px; }
div { line-height: 3em; }
input { padding: 3px 5px; }
#id:focus, #pass:focus {
background-color: #FFEAEA;
border: 1px solid #FF9999;
outline: 0;
}
#interest_select:checked ~ #check {
height: 5px;
width: 500px;
display: block;
}
#interest_noselect:checked ~ #check {
display: none;
}
#choice:checked ~ #selection {
height: 50px;
}
#choice ~ #selection {
width: 300px;
height: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<h2>์ํ ์ ํ์</h2>
<form name="form1" action="#">
<div>
์์ด๋ : <input type="text" name="id" id="id" size="30"/> <br/>
๋น๋ฐ๋ฒํธ : <input type="password" name="pass" id="pass" size="30"/><br/>
์ด๋ฉ์ผ : <input type="text" name="email" id="email"size="30" disabled/>
<input type="checkbox" name="input_email" id="input_email"
onclick="checkedEmail()"/>์ด๋ฉ์ผ ์
๋ ฅ<br/>
๊ด์ฌ๋ถ์ผ : <input type="radio" name="interest_select" id="interest_select"
value="interest_select" checked="checked"/>
<label for="interest_select">์ ํํ๊ธฐ</label>
<input type="radio" name="interest_select" id="interest_noselect"
value="interest_noselect"/>
<label for="interest_noselect">์ ํํ์ง ์์</label>
<div id="check">
<label><input type="checkbox" name="interest"
id="webapp" value="webapp"/>์น์ฑ</label>
<label><input type="checkbox" name="interest"
id="hybridapp" value="hybridapp">ํ์ด๋ธ๋ฆฌ๋์ฑ</label>
<label><input type="checkbox" name="interest"
id="nativeapp" value="nativeapp"/>๋ค์ดํฐ๋ธ์ฑ</label>
</div><br/>
์ง์ญ์ ํ : <input type="checkbox" name="choice_area"
id="choice" value="choice" /><label for="choice">์ง์ญ์ ํ ํจ</label>
<div id="selection">
๊ด์ฌ์ง์ญ : <select name="area" id="area">
<option value="์์ธ">์์ธ</option>
<option value="์ธ์ฒ/๊ฒฝ๊ธฐ">์ธ์ฒ/๊ฒฝ๊ธฐ</option>
<option value="๊ฐ์๋">๊ฐ์๋</option>
<option value="์ถฉ์ฒญ๋">์ถฉ์ฒญ๋</option>
<option value="์ ๋ผ๋">์ ๋ผ๋</option>
<option value="๊ฒฝ์๋">๊ฒฝ์๋</option>
<option value="์ ์ฃผ๋">์ ์ฃผ๋</option>
</select>
</div>
</div>
</form>
</body>
</html>- #interest_select:checked ~ #check {width: 500px; height: 10px; display: block;}
id ์์ฑ ๊ฐ์ด interest_select์ธ ์์๊ฐ checked ์ํ์ด๋ฉด ๊ทธ ๋ค๋ก ์ค๋ id๊ฐ check์ธ ์์๋ฅผ ์ ํํ์ฌ
์ ํํ ์์์ ๋๋น์ ๋์ด๋ฅผ ์ง์ ํ๊ณ ๋ธ๋ก ๋ ๋ฒจ ์์๋ก ํ๋ฉด์ ํ์๋๋๋ก ์ค์ ํ๋ค.
- #interest_noselect:checked ~ #check {display: none;}
id ์์ฑ ๊ฐ์ด interest_noselect์ธ ์์๊ฐ checked ์ํ์ด๋ฉด
๊ทธ ๋ค๋ก ์ค๋ id๊ฐ check์ธ ์์๋ฅผ ์ ํํ์ฌ ์ ํํ ์์๋ฅผ ํ๋ฉด์์ ๋ณด์ด์ง ์๋๋ก ์ค์ ํ๋ค.
display: none์ด ์ง์ ๋๋ฉด ํ๋ฉด์๋ ๋ณด์ด์ง ์๊ณ ๋ฌธ์์ ๊ทธ ์์น์์ ์๋ฆฌ ์ฐจ์ง๋ ํ์ง ์๋๋ค.
- input:disabled { background-color: gray; }
input ์์ ์ค์์ disabled๋ ์์๋ฅผ ์ ํํ์ฌ ๋ฐฐ๊ฒฝ์์ ์ง์ ํ๋ค.
- #choice:checked ~ #selection {height: 50px;}
id ์์ฑ์ ๊ฐ์ด choice์ธ ์์๊ฐ ์ฒดํฌ๋(checked) ์ํ์ด๋ฉด ๊ทธ ์์ ๋ค์ ์ค๋ id ์์ฑ์ ๊ฐ์ด selection์ธ ์์๋ฅผ ์ ํํ์ฌ
์ ํํ ์์์ ๋์ด 50px๋ก ์ง์ ํ๋ค.
- #choice ~ #selection {width: 300px; height: 0px; overflow: hidden;}
id ์์ฑ์ ๊ฐ์ด choice์ธ ์์ ๋ค์ ์ค๋ id ์์ฑ์ ๊ฐ์ด selection์ธ ์์๋ฅผ ์ ํํ๊ณ
์ ํํ ์์์ ๋๋น์ ๋์ด๋ฅผ ์ค์ ํ๋ค.
๋์ด๋ฅผ 0px๋ก ์ง์ ํ์์ง๋ง #selection ์์์ ๋ด๋ถ์ ์ ํ์์๊ฐ ์์ผ๋ฏ๋ก ๋ถ๋ชจ์ธ
#selection ์์์ ๋์ด๊ฐ 0px์ด ๋๋ฉด ๋ถ๋ชจ์ ํฌ๊ธฐ ๋ฐ์ผ๋ก ์ ํ์์๊ฐ ์์ ธ๋์ค๊ธฐ ๋๋ฌธ์
#selection ์์์ ๋ด์ฉ๋ฌผ์ด #selection ์์์ ํฌ๊ธฐ๋ฅผ ์ด๊ณผํ๋ฉด ํ๋ฉด์์ ์จ๊ธฐ๋๋ก overflow: hidden์ผ๋ก ์ค์ ํ์๋ค.
๊ตฌ์กฐ ๊ฐ์ํด๋์ค ์ ํ์
โถ ์์ ๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๊ตฌ์กฐ ๊ฐ์ํด๋์ค ์ ํ์</title>
<style>
li {list-style-type: none; float: left; padding: 10px;}
body > p { clear: both; margin: 50px auto 20px;}
li:first-child {border-radius: 5px 0px 0px 5px;}
li:last-child {border-radius: 0px 5px 5px 0px;}
li:nth-child(2n) {background-color: #FFEAEA;}
li:nth-child(2n+1) {background-color: #FFC9C9;}
li:hover { background-color: #FF0000; color: white;}
p:first-child {font-size: 24px;}
p:first-child > em {color: blue;}
p:first-of-type {border: 1px solid blue;}
</style>
</head>
<body>
<!-- body ์์์ ์ฒซ ๋ฒ์งธ ์์นํ๋ ul ์์ -->
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
<li>seventh</li>
</ul><br>
<p>body ๋ ๋ฒจ์ p ํ๊ทธ๊ฐ<em>์ฒ์์ด๋ฉด์ ๋ง์ง๋ง์ผ๋ก</em> ๋ฑ์ฅ</p>
<div id="div1">
<p>div 1 ๋ ๋ฒจ์ p ํ๊ทธ๊ฐ<em>์ฒซ ๋ฒ์งธ์ด๋ฉด์ ์ฒ์์ผ๋ก</em> ๋ฑ์ฅ</p>
<p>div 1 ๋ ๋ฒจ์ p ํ๊ทธ๊ฐ<em>๋๋ฒ์งธ</em>๋ฑ์ฅ</p>
<p>div 1 ๋ ๋ฒจ์ p ํ๊ทธ๊ฐ<em>๋ง์ง๋ง์ด๋ฉด์ ์ธ๋ฒ์งธ, ๋ง์ง๋ง ๋ฒ์งธ</em> ๋ฑ์ฅ</p>
<div>11</div>
</div>
<div id="div2">
<div id="divSub">
<p>divSub ๋ ๋ฒจ์ p ํ๊ทธ๊ฐ<em>์ฒซ ๋ฒ์งธ ์ด๋ฉด์ ์ฒ์์ผ๋ก ๋ง์ง๋ง์ผ๋ก,
์ฒซ๋ฒ์งธ, ๋ง์ง๋ง ๋ฒ์งธ</em> ๋ฑ์ฅ</p></div>
<p>div2 ๋ ๋ฒจ์ p ํ๊ทธ๊ฐ <em>์ฒ์์ผ๋ก ๋ง์ง๋ง์ผ๋ก, ๋ง์ง๋ง๋ฒ์งธ</em> ๋ฑ์ฅ</p>
</div>
</body>
</html>- li:first-child { border-radius: 5px 0px 0px 5px; }
li ์์์ ๋ถ๋ชจ์์ ์ฒซ ๋ฒ์งธ์ ๋ง์ง๋ง ๋ฒ์งธ li ์์๋ฅผ ์ ํํด ๋ฅ๊ทผ ๋ชจ์๋ฆฌ๋ฅผ ์ค์ ํ๋ค.
์๋์ ๊ฐ์ด 4๊ฐ๋ฅผ ์ง์ ํ๋ฉด ์ข ์๋จ๋ถํฐ ์๊ณ๋ฐฉํฅ์ผ๋ก 4๋ฐฉํฅ์ ๋ฅ๊ทผ ๋ชจ์๋ฆฌ์ ๊ฐ์ ์ง์ ํ๋ ๊ฒ์ผ๋ก
์ข ์๋จ - ์ฐ ์๋จ - ์ฐ ํ๋จ - ์ข ํ๋จ ์์ผ๋ก ์ง์ ํ๋ ๊ฒ์ด๋ค.
2๊ฐ๋ฅผ ์ง์ ํ๋ฉด ์๋ก ๋ง์ฃผ ๋ณด๋ ๋๊ฐ์ ์ ์ง์ผ๋ก ๋ง์ถฐ ๋ฅ๊ทผ ๋ชจ์๋ฆฌ๋ฅผ ์ค์ ํ๋ ๊ฒ์ผ๋ก
์ข ์๋จ - ์ฐ ํ๋จ, ์ฐ ์๋จ - ์ข ํ๋จ์ ๋ฅ๊ทผ ๋ชจ์๋ฆฌ์ ๊ฐ์ ์ค์ ํ๋ ๊ฒ์ด๋ค.
- li:nth-child(2n) { background-color: #FFEAEA; }
- li:nth-child(2n+1) { background-color: #FFC9C9; }
์์ด์ ์ ์ฉํ ์์น๋ฅผ ์ง์ ํ๋ ๊ฒ์ผ๋ก n์ ๊ฐ์ 0๋ถํฐ 1์ฉ ์ฆ๊ฐํ๋ ์์ด ๋ฒ์งธ๋ฅผ ์๋ฏธํ๋๋ฐ
์๋์ ๊ฐ์ด 2n์ด ์ง์ ๋๋ฉด 0, 2, 4,... ์ ๊ฐ์ด ์ฆ๊ฐํ๋ ์์ด์ด ๋์ด li ์์ ๋ถ๋ชจ์ ์์ ์ค์์
๋ ๋ฒ์งธ, ๋ค ๋ฒ์งธ li๋ฅผ ์ ํํ๊ฒ ๋๋ฉฐ 2n+1์ด ์ง์ ๋๋ฉด 1, 3, 5,...์ ๊ฐ์ด ์ฆ๊ฐํ๋ ์์ด์ด ๋๋ฏ๋ก
li ์์ ๋ถ๋ชจ์ ์์ ์ค์์ ์ฒซ ๋ฒ์งธ,์ธ ๋ฒ์งธ ์์๊ฐ ์ ํ๋์ด ์ง์ ํ ์คํ์ผ์ด ์ ์ฉ๋๋ค.
- p:first-child { font-size: 24px; }
p ์์ ๋ถ๋ชจ์ ์ฌ๋ฌ ์์ ์์ ์ค์์ ์ฒซ ๋ฒ์งธ ์์นํ๋ p ์์๋ฅผ ์ ํํ๋ค.
div1 ์์์ ์ฒซ ๋ฒ์งธ p ์์์ divSub ์์์ ์ฒซ ๋ฒ์งธ p ์์๊ฐ ์ ํ๋์ด ๊ธ์์ ํฌ๊ธฐ๊ฐ 24px๋ก ์ง์ ๋๋ค.
- p:first-child > em { color: blue; }
p ์์ ๋ถ๋ชจ์ ์ฌ๋ฌ ์์ ์์ ์ค์์ ์ฒซ ๋ฒ์งธ ์์นํ๋ p ์์์ ์์์ธ em ์์๋ฅผ ์ ํํ๋ ๊ฒ์ผ๋ก
์๋ HTML์์๋ id๊ฐ div1 ์์์ ์ฒซ ๋ฒ์งธ ์์์ธ p ์์ ์์ em ์์์ id๊ฐ divSub ์์์
์ฒซ ๋ฒ์งธ ์์์ธ p ์์ ์์ em ์์๊ฐ ์ ํ๋์ด ๊ธ์์์ ํ๋์์ผ๋ก ์ค์ ํ๋ค.
- p:first-of-type { border: 1px solid blue; }
p ์์ ๋ถ๋ชจ์ ์ฌ๋ฌ ์์ ์์ ์ค์์ p ์์๋ฅผ ์ถ์ถํ์ฌ ์ถ์ถํ p ์์ ์ค์์
๋ถ๋ชจ ์์๋ฅผ ๊ธฐ์ค์ผ๋ก ์ฒ์์ผ๋ก ๋ฑ์ฅํ๋ p ์์๋ง ์ ํํ๋ ๊ฒ์ผ๋ก ์๋ HTML์์๋
body ์์์ ์์ ์ค์์ p ์์๋ง ์ถ์ถํด์ ๊ทธ ์ค์ ์ฒ์์ผ๋ก ๋ฑ์ฅํ๋ p ์์,
id๊ฐ div1 ์์์ ์์ ์ค์์ p ์์๋ง ์ถ์ถํด์ ๊ทธ ์ค์์ ์ฒ์ ๋ฑ์ฅํ๋ p ์์,
id๊ฐ div2 ์์์ ์์ ์ค์์ p ์์๋ง ์ถ์ถํด์ ๊ทธ ์ค์์ ์ฒ์ ๋ฑ์ฅํ๋ p ์์,
id๊ฐ divSub ์์์ ์์ ์ค์์ p ์์๋ง ์ถ์ถํด์ ๊ทธ ์ค์์ ์ฒ์ ๋ฑ์ฅํ๋ p ์์,
์ด๋ ๊ฒ 4๊ฐ์ p ์์๊ฐ ์ ํ๋์ด ํ๋์ ์ค์ ์ ํ
๋๋ฆฌ๊ฐ ์ ์ฉ๋๋ค.
๋ถ์ ์ ํ์
โถ ์์ ๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋ถ์ ์ ํ์</title>
<style>
fieldset {
width: 300px;
}
ul li {
list-style-type: none;
font-size: 16px;
margin-top: 10px;
}
ul li label {
width: 80px;
display: inline-block;
}
input:not([type='text']) {
background-color: maroon;
border: 1px solid #000;
}
</style>
</head>
<body>
<section>
<h1>์๊ฐ ๋ฑ๋กํ๊ธฐ</h1>
<form name="form1" action="#" method="post">
<fieldset>
<legend>๋ฑ๋ก์ ์ ๋ณด</legend>
<ul>
<li>
<label for="name">์ด ๋ฆ</label>
<input type="text" name="name" id="name"></li>
<li>
<label for="address">์ฃผ ์</label>
<input type="text" name="bank"></li>
<li>
<label for="contact">์ฐ๋ฝ์ฒ</label>
<input type="tel" name="contact"></li>
</ul>
</fieldset>
</form>
</section>
</body>
</html>- input:not([type="text"]) {background-color: maroon; border: 1px solid #000;}
input ์์ ์ค์์ type="text"๊ฐ ์๋ input ์์๋ฅผ ์ ํํ์ฌ ๋ฐฐ๊ฒฝ์๊ณผ ํ ๋๋ฆฌ๋ฅผ ์ ์ฉํ๋ค.
'๐จ๏ธ Language > HTML, CSS, JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] ์คํ์ผ ์์ฑ (0) | 2024.08.12 |
|---|---|
| [HTML] <table>๊ณผ <form> (0) | 2024.08.08 |
| [HTML] ํ๊ทธ์ Style (0) | 2024.08.07 |
| [HTML] ๋ฌธ์์ ๊ธฐ๋ณธ ๊ตฌ์กฐ (0) | 2024.08.07 |
| Web์ ์ญ์ฌ์ ์น ํ์ค์ ํ์ํ ๊ธฐ์ (0) | 2024.08.07 |
