<!DOCTYPE html>
<html lang="ko"> <!--์ ๊ทผ์ฑ์ ์งํค๊ธฐ ์ํด์ lang์์์ ko (ํ๊ตญ์ด ์ฌ์ดํธ)-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ํ์ ํ๋ฐ์ฝ</title>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<a href="#contents" class="skip">๋ณธ๋ฌธ๋ฐ๋ก๊ฐ๊ธฐ</a>
<header>
<!--๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ด๋ ๊ทธ ์ด๋ฏธ์ง๋ฅผ ์ค๋ช
ํ ๋์ฒด ํ
์คํธ๊ฐ ํ์ํ๋ค.-->
<h1><a href="#a">ํ์ํ๋ฐํฌ</a></h1>
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<h2 class="hide">๋๋ฉ๋ด</h2>
<nav class="lnb"> <!--๋ค๋น๊ฒ์ด์
๋ฉ๋ด-->
<ul>
<li><a href="#a"><span>์๊ณต์ฌ๋ก</span></a></li>
<li><a href="#a"><span>์ ํ์ ๋ณด</span></a></li>
<li><a href="#a"><span>๊ณ ๊ฐ์ผํฐ</span></a></li>
<li><a href="#a"><span>๊ธฐ์
์๊ฐ</span></a></li>
<li><a href="#a"><span>์ง์๊ฐ๋ฅ๊ฒฝ์</span></a></li>
<li><a href="#a"><span>์ฌ์
๋ถ์ผ</span></a></li>
</ul>
</nav>
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<h2 class="hide">๊ด๋ จ์๋น์ค</h2>
<nav class="spot">
<ul>
<li><a href="#a">๋งค์ฅ์ฐพ๊ธฐ</a></li>
<li><a href="#a">์ ํ์ฐพ๊ธฐ</a></li>
<li><a href="#a">์นดํ๋ก๊ทธ</a></li>
<li><a href="#a">SITEMAP</a></li>
<li><a href="#a">ENGLISH</a></li>
</ul>
</nav>
<!-- ๋น์ฃผ์ผ ์์ญ ์์ -->
<section class="visual">
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<h2 class="hide">๊ด๊ณ ์์ญ</h2>
<a href="#a" class="prev">์ด์ </a>
<a href="#a" class="next">๋ค์</a>
<div class="control">
<div>
<div>
<a href="#a" class="play on">์์</a>
<a href="#a" class="pause">์ผ์์ ์ง</a>
</div>
<ul>
<li class="on"><a href="#a">ํ์ํ๋ฐ์ฝ ๋น์ </a></li>
<li><a href="#a">xxx ์ ์ํ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
</ul>
</div>
</div>
<div class="con">
<div class="slide">
<div class="txt">
๊ฐ๊ตฌ์์ฌ์์<br>
์ธํ
๋ฆฌ์ด ์์ฌ๊น์ง
<p>ํ์ํ๋ฐ์ฝ ํธ๋ฆฌํ๊ณ ํ๋ณตํ ๊ณต๊ฐ์ ๋ง๋ค์ด ๊ฐ๋๋ค.</p>
</div>
</div>
</div>
</section> <!-- ๋น์ฃผ์ผ ์์ญ ๋ -->
<section class="product"> <!-- ์ ํ ์ ๋ณด ์์ญ ์์ -->
<h2>์ ํ์ ๋ณด</h2> <!-- ๊ฐ์์ ์ ๋ณด -->
<ul>
<li><a href="#a">๋ฐ๋ฅ์ฌ</a></li>
<li><a href="#a">๋ฒฝ๋ฉด์ฌ</a></li>
<li><a href="#a">๋์ด์ฌ</a></li>
<li><a href="#a">์ํธ์ฌ</a></li>
<li><a href="#a">๊ฐ๊ตฌ์ฌ</a></li>
</ul>
</section> <!-- ์ ํ ์ ๋ณด ์์ญ ๋ -->
</header>
</body>
</html>๐ ์์ด์ฝ ์ปค์ ๊ฐ๊น์ด ํ ๋ ์ ๋ณํ๊ธฐ
์ด ์์ญ๋ง ๋ฐ๋ก ์ง์ ํด์ ์ด ์์ ์ด๋ฏธ์ง๊ฐ ๋ค์ด๊ฐ ์ ์๋๋ก ๋ง๋ค์ด์ผ ํ๋ค.
/* ์ ํ ์ ๋ณด */
/* ์ ํ ์ ๋ณด ์์ญ ํฌ๊ธฐ 64*52*/
์ ํ ์ ๋ณด๋ ๊ฐ์์ ์ ๋ณด์ด๊ธฐ ๋๋ฌธ์ ์จ๊ฒจ์ฃผ๋ css๊ฐ ํ์ํ๋ค.
.hide {
/* display: none; ํ๋ฉด๋ญ๋
๊ธฐ๊ฐ ์๋์ ์ํด์ ์ฌ์ฉX */
position: absolute;
left: -5000px; /*ํ๋ฉด ๋ฐ์ผ๋ก position์ ๋ ๋ฆฐ๋ค.*/
}
befor ๋ after๋ก ๊ฐ์์ ์ปจํ ์ธ ๋ฅผ ๋ง๋ค๊ธฐ
.product a:before { /*a์์ ์ด์ */
content: ""; /*๊ฐ์์ ์ปจํ
์ธ ์์ฑ*/
background: url("img/sp_com.png") no-repeat;
}/* ์ ํ ์ ๋ณด */
/* ์ ํ ์ ๋ณด ์์ญ ํฌ๊ธฐ 64*52*/
.product a {
color: #001829;
font-size: 15px;
}
.product a:hover { /*๊ธ์ ์์ด์ฝ์ ์ปค์ ๊ฐ๊น์ด ํ์ ๋*/
color: #2d5b79; /*์ ๋ฐ๋๊ฒ*/
font-weight: bold; /*๊ตต๊ธฐ ๋ฐ๋๊ฒ*/
}
์ด๋ฏธ์ง๊ฐ ์๋ฌ๋ค.
์ด์ ๋ before๋ after์ content๋ฅผ ํ๊ฒ ๋๋ฉด content: " "; ์ด๊ฒ์ด ๊ฐ์์ ์ธ๋ผ์ธ ์์๋ค.
์ธ๋ผ์ธ ์์์ ๋ฐฐ๊ฒฝ์ ๋ฃ์ด๋ ์๋ฌด๊ฒ๋ ๋ณด์ด์ง ์๊ธฐ ๋๋ฌธ์ ์ด๋ฏธ์ง๊ฐ ์๋ณด์ธ๋ค. ( ์ธ๋ผ์ธ ์์์๋ ๊ฐ๋ก,์ธ๋ก ๊ฐ์ด ๋ค์ด๊ฐ์ง ์๋๋ค. )
๊ทธ๋ฌ๋ฉด ์ด๋ป๊ฒ ํ๋?
๊ฐ์ ๋ก display:block; ์ ํด์ ๊ฐ๋ก,์ธ๋ก๋ฅผ ๋ฃ์ด์ค๋ค.
.product a:before { /*a์์ ์ด์ */
content: ""; /*๊ฐ์์ ์ปจํ
์ธ ์์ฑ*/
background: url("../img/sp_com.png") no-repeat; /*๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง*/
/*๊ฐ์ ๋ก ์ด๋ฏธ์ง ํฌ๊ธฐ ๋ถ์ฌ*/
display: block;
width: 64px;
height: 52px; /*์ด ์ฌ์ด์ฆ๋ก display block ํ๊ธฐ ๋๋ฌธ์ ์ฌ์ด์ฆ ๋ถ์ฌ๊ฐ ๊ฐ๋ฅ ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ก ์ธ๋ก ์ฌ์ด์ฆ๊ฐ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๊ฐ ๋์จ๋ค.*/
}
์ด์ ์ด๋ฏธ์ง๋ฅผ ๋ฐฐ์น์ํค์.
๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ์ขํ๋ ์ฌ๊ธฐ ๋นจ๊ฐ์ ๋ถ๋ถ 1ํฝ์ ๋ถํฐ ์์ํ๋ค. ( ์ขํ 0,0 )
.product a:before { /*a์์ ์ด์ */
content: ""; /*๊ฐ์์ ์ปจํ
์ธ ์์ฑ*/
background: url("../img/sp_com.png") no-repeat; /*๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง*/
/*๊ฐ์ ๋ก ์ด๋ฏธ์ง ํฌ๊ธฐ ๋ถ์ฌ*/
display: block;
width: 64px;
height: 52px; /*์ด ์ฌ์ด์ฆ๋ก display block ํ๊ธฐ ๋๋ฌธ์ ์ฌ์ด์ฆ ๋ถ์ฌ๊ฐ ๊ฐ๋ฅ ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ก ์ธ๋ก ์ฌ์ด์ฆ๊ฐ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๊ฐ ๋์จ๋ค.*/
}
.product li:nth-child(1) a:before { /*ํน์ ๋ฒ์งธ์ ์์ ์ ํ. ์ฌ๊ธฐ์๋ 1๋ฒ์งธ ์์์ด๋ค. ์ฆ ์ฒซ๋ฒ์งธ ์์์ a์ ์์์ ์ด์ ์์*/
/*a์์ ์ด์ ์์๋ฅผ ์ก๋ ์ด์ ๋ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ปจํธ๋กคํ๊ธฐ ์ํด์ ์ด๋ค.*/
background-position: -3px -118px;
}
์ด๋ฐ ์์ผ๋ก ์ด๋ฏธ์ง ์ข๋ฃ๋ฅผ ๊ฐ๋ณ์ ์ผ๋ก ์ง์ ํด์ค๋ค.
์์๋ฅผ ์ ์ฌ์ด์ฆ๋ก ํต์ผ์์ผฐ์ผ๋,
๋ ๋ฒ์งธ ์ฌ์ง ์ขํ๋ ํ๋์ ์ฒ๋ผ ๋์์ผ ํ๋ค.์ ์ด๋ฏธ์ง๋ค์ ๊ฐ์ ๋์ด์ ์์ผ๋ y์ขํ ํฌ๊ธฐ๋ ๊ณ ์ ์ด๊ฒ ๋ค.
.product li:nth-child(1) a:before { /*ํน์ ๋ฒ์งธ์ ์์ ์ ํ. ์ฌ๊ธฐ์๋ 1๋ฒ์งธ ์์์ด๋ค. ์ฆ ์ฒซ๋ฒ์งธ ์์์ a์ ์์์ ์ด์ ์์*/
/*a์์ ์ด์ ์์๋ฅผ ์ก๋ ์ด์ ๋ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ปจํธ๋กคํ๊ธฐ ์ํด์ ์ด๋ค.*/
background-position: -3px -118px;
}
.product li:nth-child(2) a:before { /*ํน์ ๋ฒ์งธ์ ์์ ์ ํ. ์ฌ๊ธฐ์๋ 1๋ฒ์งธ ์์์ด๋ค. ์ฆ ์ฒซ๋ฒ์งธ ์์์ a์ ์์์ ์ด์ ์์*/
/*a์์ ์ด์ ์์๋ฅผ ์ก๋ ์ด์ ๋ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ปจํธ๋กคํ๊ธฐ ์ํด์ ์ด๋ค.*/
background-position: -75px -118px;
}
๊ณ์ ์ด๋ฏธ์ง ์ถ๊ฐํ๊ฒ ๋ค.
/* ์ ํ ์ ๋ณด */
/* ์ ํ ์ ๋ณด ์์ญ ํฌ๊ธฐ 64*52*/
.product a {
color: #001829;
font-size: 15px;
}
.product a:hover { /*๊ธ์ ์์ด์ฝ์ ์ปค์ ๊ฐ๊น์ด ํ์ ๋*/
color: #2d5b79; /*์ ๋ฐ๋๊ฒ*/
font-weight: bold; /*๊ตต๊ธฐ ๋ฐ๋๊ฒ*/
}
.product a:before { /*a์์ ์ด์ */
content: ""; /*๊ฐ์์ ์ปจํ
์ธ ์์ฑ*/
background: url("../img/sp_com.png") no-repeat; /*๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง*/
/*๊ฐ์ ๋ก ์ด๋ฏธ์ง ํฌ๊ธฐ ๋ถ์ฌ*/
display: block;
width: 64px;
height: 52px; /*์ด ์ฌ์ด์ฆ๋ก display block ํ๊ธฐ ๋๋ฌธ์ ์ฌ์ด์ฆ ๋ถ์ฌ๊ฐ ๊ฐ๋ฅ ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ก ์ธ๋ก ์ฌ์ด์ฆ๊ฐ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๊ฐ ๋์จ๋ค.*/
}
.product li:nth-child(1) a:before { /*ํน์ ๋ฒ์งธ์ ์์ ์ ํ. ์ฌ๊ธฐ์๋ 1๋ฒ์งธ ์์์ด๋ค. ์ฆ ์ฒซ๋ฒ์งธ ์์์ a์ ์์์ ์ด์ ์์*/
/*a์์ ์ด์ ์์๋ฅผ ์ก๋ ์ด์ ๋ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ปจํธ๋กคํ๊ธฐ ์ํด์ ์ด๋ค.*/
background-position: -3px -118px;
}
.product li:nth-child(2) a:before {
background-position: -75px -118px;
}
.product li:nth-child(3) a:before {
background-position: -148px -118px;
}
.product li:nth-child(4) a:before {
background-position: -219px -118px;
}
.product li:nth-child(5) a:before {
background-position: -292px -118px;
}
.product li:nth-child(5) a:before {
background-position: -364px -118px;
}
๐ค ๋ง์ฐ์ค ์ฌ๋ฆด ๋ ์ด๋ฏธ์ง ์์ ๋ฐ๊พธ๊ธฐ
๋ง์ฐ์ค ์ฌ๋ ธ์ ๋ ์ด๋ฏธ์ง ์์์ ๋ฐ๊ฟ ๊ฒ์ด๋ค.
a์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋ a:before์ ์ขํ๊ฐ ๋ฐ๋๋ ๊ฒ์ด๋ค.
<!DOCTYPE html>
<html lang="ko"> <!--์ ๊ทผ์ฑ์ ์งํค๊ธฐ ์ํด์ lang์์์ ko (ํ๊ตญ์ด ์ฌ์ดํธ)-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ํ์ ํ๋ฐ์ฝ</title>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<a href="#contents" class="skip">๋ณธ๋ฌธ๋ฐ๋ก๊ฐ๊ธฐ</a>
<header>
<!--๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ด๋ ๊ทธ ์ด๋ฏธ์ง๋ฅผ ์ค๋ช
ํ ๋์ฒด ํ
์คํธ๊ฐ ํ์ํ๋ค.-->
<h1><a href="#a">ํ์ํ๋ฐํฌ</a></h1>
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<h2 class="hide">๋๋ฉ๋ด</h2>
<nav class="lnb"> <!--๋ค๋น๊ฒ์ด์
๋ฉ๋ด-->
<ul>
<li><a href="#a"><span>์๊ณต์ฌ๋ก</span></a></li>
<li><a href="#a"><span>์ ํ์ ๋ณด</span></a></li>
<li><a href="#a"><span>๊ณ ๊ฐ์ผํฐ</span></a></li>
<li><a href="#a"><span>๊ธฐ์
์๊ฐ</span></a></li>
<li><a href="#a"><span>์ง์๊ฐ๋ฅ๊ฒฝ์</span></a></li>
<li><a href="#a"><span>์ฌ์
๋ถ์ผ</span></a></li>
</ul>
</nav>
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<h2 class="hide">๊ด๋ จ์๋น์ค</h2>
<nav class="spot">
<ul>
<li><a href="#a">๋งค์ฅ์ฐพ๊ธฐ</a></li>
<li><a href="#a">์ ํ์ฐพ๊ธฐ</a></li>
<li><a href="#a">์นดํ๋ก๊ทธ</a></li>
<li><a href="#a">SITEMAP</a></li>
<li><a href="#a">ENGLISH</a></li>
</ul>
</nav>
<!-- ๋น์ฃผ์ผ ์์ญ ์์ -->
<section class="visual">
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<h2 class="hide">๊ด๊ณ ์์ญ</h2>
<a href="#a" class="prev">์ด์ </a>
<a href="#a" class="next">๋ค์</a>
<div class="control">
<div>
<div>
<a href="#a" class="play on">์์</a>
<a href="#a" class="pause">์ผ์์ ์ง</a>
</div>
<ul>
<li class="on"><a href="#a">ํ์ํ๋ฐ์ฝ ๋น์ </a></li>
<li><a href="#a">xxx ์ ์ํ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
</ul>
</div>
</div>
<div class="con">
<div class="slide">
<div class="txt">
๊ฐ๊ตฌ์์ฌ์์<br>
์ธํ
๋ฆฌ์ด ์์ฌ๊น์ง
<p>ํ์ํ๋ฐ์ฝ ํธ๋ฆฌํ๊ณ ํ๋ณตํ ๊ณต๊ฐ์ ๋ง๋ค์ด ๊ฐ๋๋ค.</p>
</div>
</div>
</div>
</section> <!-- ๋น์ฃผ์ผ ์์ญ ๋ -->
<section class="product"> <!-- ์ ํ ์ ๋ณด ์์ญ ์์ -->
<h2 class="hide">์ ํ์ ๋ณด</h2> <!-- ๊ฐ์์ ์ ๋ณด -->
<ul>
<li><a href="#a">๋ฐ๋ฅ์ฌ</a></li>
<li><a href="#a">๋ฒฝ๋ฉด์ฌ</a></li>
<li><a href="#a">๋์ด์ฌ</a></li>
<li><a href="#a">๋ชฐ๋ฉ์ฌ</a></li>
<li><a href="#a">์ํธ์ฌ</a></li>
<li><a href="#a">๊ฐ๊ตฌ์ฌ</a></li>
</ul>
</section> <!-- ์ ํ ์ ๋ณด ์์ญ ๋ -->
</header>
</body>
</html>/* ์ ํ ์ ๋ณด */
/* ์ ํ ์ ๋ณด ์์ญ ํฌ๊ธฐ 64*52*/
.product a {
color: #001829;
font-size: 15px;
}
.product a:hover { /*๊ธ์ ์์ด์ฝ์ ์ปค์ ๊ฐ๊น์ด ํ์ ๋*/
color: #2d5b79; /*์ ๋ฐ๋๊ฒ*/
font-weight: bold; /*๊ตต๊ธฐ ๋ฐ๋๊ฒ*/
}
.product a:before { /*a์์ ์ด์ */
content: ""; /*๊ฐ์์ ์ปจํ
์ธ ์์ฑ*/
background: url("../img/sp_com.png") no-repeat; /*๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง*/
/*๊ฐ์ ๋ก ์ด๋ฏธ์ง ํฌ๊ธฐ ๋ถ์ฌ*/
display: block;
width: 64px;
height: 52px; /*์ด ์ฌ์ด์ฆ๋ก display block ํ๊ธฐ ๋๋ฌธ์ ์ฌ์ด์ฆ ๋ถ์ฌ๊ฐ ๊ฐ๋ฅ ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ก ์ธ๋ก ์ฌ์ด์ฆ๊ฐ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๊ฐ ๋์จ๋ค.*/
}
.product li:nth-child(1) a:before { /*ํน์ ๋ฒ์งธ์ ์์ ์ ํ. ์ฌ๊ธฐ์๋ 1๋ฒ์งธ ์์์ด๋ค. ์ฆ ์ฒซ๋ฒ์งธ ์์์ a์ ์์์ ์ด์ ์์*/
/*a์์ ์ด์ ์์๋ฅผ ์ก๋ ์ด์ ๋ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ปจํธ๋กคํ๊ธฐ ์ํด์ ์ด๋ค.*/
background-position: -3px -118px;
}
.product li:nth-child(2) a:before {
background-position: -75px -118px;
}
.product li:nth-child(3) a:before {
background-position: -148px -118px;
}
.product li:nth-child(4) a:before {
background-position: -219px -118px;
}
.product li:nth-child(5) a:before {
background-position: -292px -118px;
}
.product li:nth-child(6) a:before {
background-position: -364px -118px;
}
/*a:before ์์์ ์ขํ ๋ฐ๊พธ๊ธฐ*/
/*a์ hoverํ์ ๋ ์ด์ ์ ์๋ ์ปจํ
์ธ ๋ฅผ ์ก๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ขํ ์ฌ์ค์ ํ๋ค. y์ถ์ด ๋ฐ๋์ด์ผ๊ฒ ๋ค.*/
.product li:nth-child(1) a:hover:before {
background-position: -3px -184px;
}
.product li:nth-child(2) a:hover:before {
background-position: -75px -184px;
}
.product li:nth-child(3) a:hover:before {
background-position: -148px -184px;
}
.product li:nth-child(4) a:hover:before {
background-position: -219px -184px;
}
.product li:nth-child(5) a:hover:before {
background-position: -292px -184px;
}
.product li:nth-child(6) a:hover:before {
background-position: -364px -184px;
}์ด๋ฌ๋ฉด ์ด๋ฏธ์ง์ ์ปค์๋ฅผ ๊ฐ๊น์ดํ ๋ ์์ด ๋ณํ๋ค.
๐ค ์์์ ์์ญ ์ง์ ํ๊ธฐ
์ด์ a์ ์์์ ์์ญ์ ์ง์ ํ๊ฒ ๋ค.
.product a {
color: #001829;
font-size: 15px;
display: block; /*block ์์์ ํน์ง ๊ฐ๋ก ์ฌ์ด์ฆ๋ 100%์ด๋ค.*/
}
์ด์ li๋ฅผ ์ ๋ ฌ์ํจ๋ค.
li์์๋ block ์์์ด๋ค.blcok์์๋ ์๋๋ก ๋จ์ด์ง๋ค.
li๋ฅผ ์ด๋ป๊ฒ ๊ฐ๋ก๋ฐฐ์น ์ํฌ๊น?
.product a {
color: #001829;
font-size: 15px;
display: block; /*block ์์์ ํน์ง ๊ฐ๋ก ์ฌ์ด์ฆ๋ 100%์ด๋ค.*/
}
...
.product li { /*li ๊ฐ๋ก ๋ฐฐ์น*/
float: left;
text-align: center;
}
๊ฐ์ด๋ฐ ์ ๋ ฌ์ ํ๊ธฐ ์ํด์๋ ํ ์ชฝ ์ฌ๋ฐฑ์ผ๋ก ๋ณด์ฌ์ง๋ ๊ฒ์ ๋ฐ์ ๋๋ ์ ์์ชฝ ์ฌ๋ฐฑ์ ์ค์ผ๋ง ๋งจ ์์ชฝ ๋์ ์ฌ๋ฐฑ์ด ์๊ธด๋ค.
์ด๊ฒ์ด ๊ฐ์ด๋ฐ ์ ๋ ฌ์ด๋ค.
.product a {
color: #001829;
font-size: 15px;
display: block; /*block ์์์ ํน์ง ๊ฐ๋ก ์ฌ์ด์ฆ๋ 100%์ด๋ค.*/
}
...
.product li { /*li ๊ฐ๋ก ๋ฐฐ์น*/
float: left;
text-align: center;
padding: 0 55px;
}
์ด์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ํ๋ค.
174 x 6 = 1,044 ์ด ์์ด์ฝ๋ค์ ๊ฐ๋ก ์ฌ์ด์ฆ์ด๋ค.
.product ul {
/*block ์์์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์กฐ๊ฑด์ ๊ฐ๋ก์ฌ์ด์ฆ๊ฐ ์์ด์ผ ํ๊ณ margin 0 auto๊ฐ ์์ด์ผ ํ๋ค.*/
width: 1044px;
margin: 0 auto;
}
์ ์๋ ์ฌ๋ฐฑ์ ์ฃผ๊ฒ ๋ค.
.product ul {
/*block ์์์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์กฐ๊ฑด์ ๊ฐ๋ก์ฌ์ด์ฆ๊ฐ ์์ด์ผ ํ๊ณ margin 0 auto๊ฐ ์์ด์ผ ํ๋ค.*/
width: 1044px;
margin: 0 auto;
/*//block*/
padding: 46px 0 41px; /*์ ์ข์ฐ ํ*/
}
์ด๋ ๊ฒ ์์ฑ์ด ๋ ๊ฒ์ฒ๋ผ ๋ณด์ด์ง๋ง ์์ด์ฝ์ ํ ๊ฐ ๋ ์ถ๊ฐํ๋ค๋ฉด?
์ด๋ ๊ฒ ๋ฐ์ผ๋ก ๋จ์ด์ง๊ฒ ๋๋ค.
์?
์ ์ฒด ๊ฐ๋ก์ฌ์ด์ฆ๊ฐ ์์์
width: 1044px;์ ๋์ ์ผ๋ก ๊ฐ์ด๋ฐ ์ ๋ ฌ์ด ๋์ด์ผ ํ๋ค.
์ฆ, float ๊ณผ width ๋ฅผ ์ฐ๋ฉด ์๋๋ค.
.product li { /*li ๊ฐ๋ก ๋ฐฐ์น*/
float: left;
text-align: center;
padding: 0 55px;
}
.product ul {
/*block ์์์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์กฐ๊ฑด์ ๊ฐ๋ก์ฌ์ด์ฆ๊ฐ ์์ด์ผ ํ๊ณ margin 0 auto๊ฐ ์์ด์ผ ํ๋ค.*/
/*width: 1044px;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
/*margin: 0 auto;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
/*//block*/
padding: 46px 0 41px; /*์ ์ข์ฐ ํ*/
text-align: center; /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํ ๊ฒ*/
}
๊ฐ์ด๋ฐ๋ก ์ค์ง๋ ์๋๋ค.
.product li { /*li ๊ฐ๋ก ๋ฐฐ์น*/
/*float: left;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
text-align: center;
padding: 0 55px;
display: inline-block; /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํ ๊ฒ*/
}
.product ul {
/*block ์์์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์กฐ๊ฑด์ ๊ฐ๋ก์ฌ์ด์ฆ๊ฐ ์์ด์ผ ํ๊ณ margin 0 auto๊ฐ ์์ด์ผ ํ๋ค.*/
/*width: 1044px;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
/*margin: 0 auto;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
/*//block*/
padding: 46px 0 41px; /*์ ์ข์ฐ ํ*/
text-align: center; /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํ ๊ฒ*/
}
๊ฐ์ด๋ฐ๋ก ์จ๋ค.
inline ์์๋ inline-block ์์๋ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ํ๊ธฐ ์ํด์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ํ๊ณ ์ ํ๋ ์์์ ๋ถ๋ชจ์ ( li์ ul ) text-align center ๋ง ์ฃผ๋ฉด ์๋์ผ๋ก li๋ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ด ๋๋ค.
li์ ์์์ ์ ์ ๊ทธ๋ฆฌ๋ฉด ๊ณต๊ฐ์ด ์๊ธด๋ค.
์ด๋ ๊ฒ ๊ณต๊ฐ์ด ์๊ฒจ๋๋ ์ด์ ๋ inline-block ๋๋ฌธ์ด๋ค.
.product ul {
/*block ์์์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์กฐ๊ฑด์ ๊ฐ๋ก์ฌ์ด์ฆ๊ฐ ์์ด์ผ ํ๊ณ margin 0 auto๊ฐ ์์ด์ผ ํ๋ค.*/
/*width: 1044px;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
/*margin: 0 auto;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
/*//block*/
padding: 46px 0 41px; /*์ ์ข์ฐ ํ*/
text-align: center; /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํ ๊ฒ*/
font-size: 0;
}li์ ๋ถ๋ชจ ul์ font-size 0์ ๋ง๋ ๋ค.
๊ทธ๋ฌ๋ฉด ๊ณต๊ฐ์ด ์์ด์ง๋ค.
์ด์ ์์ด์ฝ๊ณผ ํ ์คํธ ์ฌ์ด์ ๊ณต๊ฐ์ ์กฐ์ ํ๊ฒ ๋ค.
๋ชจ๋ before ์์์ margin์ ์ถ๊ฐํจ์ผ๋ก์จ ํ ์คํธ์์ ๊ฑฐ๋ฆฌ๊ฐ ๋จ์ด์ง๋ ๊ฒ์ด๋ค.
.product a:before { /*a์์ ์ด์ */
content: ""; /*๊ฐ์์ ์ปจํ
์ธ ์์ฑ*/
background: url("../img/sp_com.png") no-repeat; /*๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง*/
/*๊ฐ์ ๋ก ์ด๋ฏธ์ง ํฌ๊ธฐ ๋ถ์ฌ*/
display: block;
width: 64px;
height: 52px; /*์ด ์ฌ์ด์ฆ๋ก display block ํ๊ธฐ ๋๋ฌธ์ ์ฌ์ด์ฆ ๋ถ์ฌ๊ฐ ๊ฐ๋ฅ ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ก ์ธ๋ก ์ฌ์ด์ฆ๊ฐ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๊ฐ ๋์จ๋ค.*/
margin: 0 0 20px; /*์ ์ข์ฐ ํ*/
}
๋๋ณด๊ธฐ
- (๊ฐ์ข)_์ธํ๋ฐ_์นํผ๋ธ๋ฆฌ์ ๊ฐ ์๋ ค์ฃผ๋ ์ค๋ฌด ์น์ฌ์ดํธ ๋ฐ๋ผ๋ง๋ค๊ธฐ Season1
[๋ฌด๋ฃ] ์นํผ๋ธ๋ฆฌ์ ๊ฐ ์๋ ค์ฃผ๋ ์ค๋ฌด ์น์ฌ์ดํธ ๋ฐ๋ผ๋ง๋ค๊ธฐ Season1 - ์ธํ๋ฐ | ๊ฐ์
๊ธฐ์ด๋ ์ด์ ๊ทธ๋ง~! ์ค์ ์ฌ์ดํธ๋ฅผ ์ ์ํด๋ณด๊ณ ๊ทธ์์์ html๊ณผ css๊ฐ ์ด๋ป๊ฒ ์กฐํ๋กญ๊ฒ ์ ์๋๋์ง ์์๋ณด์ธ์~, - ๊ฐ์ ์๊ฐ | ์ธํ๋ฐ
www.inflearn.com
