๐ ๋งค๊ฑฐ์ง ์์ญ ๋ง๋ฌด๋ฆฌํ๊ธฐ
.magazine .slide_box > div { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
width: 1180px;
height: 430px;
position: absolute; left: 50%;
}
์ฌ๊ธฐ์ ์ผ์ชฝ์ผ๋ก ๋ฐ๋งํผ ๋ ์ค๋ ค๋ฉด transform ์ ์ฌ์ฉํ๋ค.
.magazine .slide_box > div { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
width: 1180px;
height: 430px;
position: absolute; left: 50%;
transform:translate(-50%,0);
}
.magazine .slide_box > div { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
width: 1180px;
height: 430px;
position: absolute; left: 50%;
transform:translate(-50%,0);
top: 150px;
}
.magazine.slide .control { /*์ฌ๋ผ์ด๋ ๋ฐ์ค ์ ์ปจํธ๋กค ์์น ์์ */
bottom: 35px;
}
.magazine.slide .prev {
left: 50%;
}
.magazine.slide .next {
right: 50%;
}.slide .prev, /*๊ณตํต ์์ ๋ฌถ๊ธฐ*/
.slide .next {
display: block;
position: absolute;
top:50%; width: 25px;
height: 47px;
transform: translateY(-50%);
background: url("../img/sp_com.png") no-repeat;
color: transparent; /*์ด์ ,๋ค์ ๊ธ์จ ์์ ๊ธฐ*/
z-index: 10; /*์์ด์ฝ ์ด๋ฏธ์ง ์๋ก ์ฌ๋ฆฌ๊ธฐ*/
}
.magazine.slide .prev {
left: 50%;
margin: 30px 0 0 -640px;
}
.magazine.slide .next {
right: 50%;
margin: 30px -640px 0 0;
}
/*1๋ฒ์งธ slide div*/
.magazine .slide_box > div:nth-child(1) { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
margin-left: -1280px;
}
/*3๋ฒ์งธ slide div*/
.magazine .slide_box > div:nth-child(3) { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
margin-left: 1280px;
}
๐ ๊ฐ๋ก ์คํฌ๋กค์ ๋ง๊ธฐ
.magazine {
background: #dfd9d1;
position: relative;
height: 670px;
overflow: hidden; /*๊ฐ๋ก์คํฌ๋กค ๋ง๊ธฐ*/
}
HTML
<!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 slide">
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<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> <!-- ์ ํ ์ ๋ณด ์์ญ ๋ -->
<!-- ๋งค๊ฑฐ์ง ์์ญ ์์ -->
<section class="slide magazine">
<h2>MAGAZINE</h2>
<p>ํ์ํ๋ฐ์ฝ์ ๋ค์ํ ์์์ ๋ง๋๋ณด์ธ์.</p>
<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="slide_box"> <!-- ์ฌ๋ผ์ด๋ ์ด๋ฏธ์ง div ์์ญ ์ก๊ธฐ / ๊ฐ๊ฐ์ slide๊ฐ ๋ค์ด๊ฐ ๊ฒ์ด๋ค. -->
<div>
<!-- ์บก์ณ๋ณธ ์ ๋นจ๊ฐ ๋ฐ์ค / ์ด๋ก ๋ฐ์ค ์์ญ ๋๋๊ธฐ -->
<div class="left">
<div> <!--ํ
์คํธ ์์ญ-->
<h3>๋ผ์๋ผ APP<span>[ํฐ์นํฐ์น]</span></h3>
<p>ํฐ์น ํ๋ฒ์ผ๋ก ์ธํ
๋ฆฌ์ด ์๋ฎฌ๋ ์ด์
</p>
<a href="#a">์์ธํ๋ณด๊ธฐ</a>
</div>
<img src="/img/sample.jpg" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
</div>
<!-- ๋ฆฌ์คํธ ์์ญ์ด๋๊น div๋ก ํด๋ ๋๋ก ul๋ก ํด๋ ๋๋ค. -->
<ul class="right">
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(21).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๊ฐ๊ตฌ์ฌ>์คํ ๋ฆฌ๋ณด๋ ๋ฐ๋>๋ฐ๋PET</strong>
ํ
๋ผ์ฝํ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(23).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฒฝ๋ฉด์ฌ>์ฝ๋ ํธ์>์ฝ๋ ํธ์</strong>
์ฐ์ ๋ํ์ดํธ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(24).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฐ๋ฅ์ฌ>sb๋ง๋ฃจ>๋ฆฌ์ผํ
์ค์ฒ</strong>
๋๋ด์ธ๋ด์คํฌ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(18).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋์ด์ฌ>๋ฐฉ๋ฌธ๋์ด>ํ๋ฆฌ๋ฏธ์๋์ด</strong>
HMA-P01(๋์์ธํ์ดํผ)
</div>
</a>
</li>
</ul>
</div>
<div>
<!-- ์บก์ณ๋ณธ ์ ๋นจ๊ฐ ๋ฐ์ค / ์ด๋ก ๋ฐ์ค ์์ญ ๋๋๊ธฐ -->
<div class="left">
<div> <!--ํ
์คํธ ์์ญ-->
<h3>๋ผ์๋ผ APP<span>[ํฐ์นํฐ์น]</span></h3>
<p>ํฐ์น ํ๋ฒ์ผ๋ก ์ธํ
๋ฆฌ์ด ์๋ฎฌ๋ ์ด์
</p>
<a href="#a">์์ธํ๋ณด๊ธฐ</a>
</div>
<img src="/img/sample.jpg" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
</div>
<!-- ๋ฆฌ์คํธ ์์ญ์ด๋๊น div๋ก ํด๋ ๋๋ก ul๋ก ํด๋ ๋๋ค. -->
<ul class="right">
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(21).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๊ฐ๊ตฌ์ฌ>์คํ ๋ฆฌ๋ณด๋ ๋ฐ๋>๋ฐ๋PET</strong>
ํ
๋ผ์ฝํ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(23).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฒฝ๋ฉด์ฌ>์ฝ๋ ํธ์>์ฝ๋ ํธ์</strong>
์ฐ์ ๋ํ์ดํธ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(24).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฐ๋ฅ์ฌ>sb๋ง๋ฃจ>๋ฆฌ์ผํ
์ค์ฒ</strong>
๋๋ด์ธ๋ด์คํฌ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(18).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋์ด์ฌ>๋ฐฉ๋ฌธ๋์ด>ํ๋ฆฌ๋ฏธ์๋์ด</strong>
HMA-P01(๋์์ธํ์ดํผ)
</div>
</a>
</li>
</ul>
</div>
<div>
<!-- ์บก์ณ๋ณธ ์ ๋นจ๊ฐ ๋ฐ์ค / ์ด๋ก ๋ฐ์ค ์์ญ ๋๋๊ธฐ -->
<div class="left">
<div> <!--ํ
์คํธ ์์ญ-->
<h3>๋ผ์๋ผ APP<span>[ํฐ์นํฐ์น]</span></h3>
<p>ํฐ์น ํ๋ฒ์ผ๋ก ์ธํ
๋ฆฌ์ด ์๋ฎฌ๋ ์ด์
</p>
<a href="#a">์์ธํ๋ณด๊ธฐ</a>
</div>
<img src="/img/sample.jpg" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
</div>
<!-- ๋ฆฌ์คํธ ์์ญ์ด๋๊น div๋ก ํด๋ ๋๋ก ul๋ก ํด๋ ๋๋ค. -->
<ul class="right">
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(21).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๊ฐ๊ตฌ์ฌ>์คํ ๋ฆฌ๋ณด๋ ๋ฐ๋>๋ฐ๋PET</strong>
ํ
๋ผ์ฝํ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(23).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฒฝ๋ฉด์ฌ>์ฝ๋ ํธ์>์ฝ๋ ํธ์</strong>
์ฐ์ ๋ํ์ดํธ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(24).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฐ๋ฅ์ฌ>sb๋ง๋ฃจ>๋ฆฌ์ผํ
์ค์ฒ</strong>
๋๋ด์ธ๋ด์คํฌ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(18).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋์ด์ฌ>๋ฐฉ๋ฌธ๋์ด>ํ๋ฆฌ๋ฏธ์๋์ด</strong>
HMA-P01(๋์์ธํ์ดํผ)
</div>
</a>
</li>
</ul>
</div>
</div>
</section> <!-- ๋งค๊ฑฐ์ง ์์ญ ๋ -->
</header>
</body>
</html>header.css
/*์ ํ ์ฌ์ด์ฆ๋ณด๋ค ์ค๋ฉด ๊ฐ๋ก ์คํฌ๋กค์ด ์๊ธฐ๋๋ก*/
body {
min-width: 1680px;
}
/*ํค๋ ์์ญ*/
header {
text-align: center; /*๋๋ฉ๋ด ๊ฐ์ด๋ฐ ์ ๋ ฌ*/
height: 81px; /*ํค๋ ๋์ด*/
/*overflow: ; ํ๋จ ๋ฉ๋ด ํ์*/
position: relative; /*์ ์ฒด ๊ฐ๋ก์ฌ์ด์ฆ๋ฅผ ์ ํด์ ธ ์๊ฒ ํ๋ค.=> ๊ฒน์ณ์ง๋ ํ์์ด ์์ด์ง๋ค.*/
}
header h1 {
position: absolute;
left: 50px; /*์ผ์ชฝ ์ฌ๋ฐฑ*/
top: 0; /*์ค๋ฅธ์ชฝ*/
padding: 14px 0 0; /*์์ชฝ ์ฌ๋ฐฑ*/
}
header h1 a {
/*a์ ํฌ๊ธฐ๋ฅผ ์ฃผ๋ ์ด์ : ๋ก๊ณ ๋ฅผ ํด๋ฆญํ๊ธฐ ๋๋ฌธ์*/
display: block; /*a์์๋ lnline์ด๋ผ ๊ฐ๋ก,์ธ๋ก๊ฐ ์์กํ ์๋ค.
ํด๋ฆญ ์์ญ ์ค์ */
color: transparent; /*ํ
์คํธ ํฌ๋ช
์ ์ค์ */
width: 117px; /*์ด๋ฏธ์ง ๊ฐ๋ก ํฌ๊ธฐ*/
height: 50px; /*์ด๋ฏธ์ง ์ธ๋ก ํฌ๊ธฐ*/
background: url(../img/sp_com.png) no-repeat -426px 0; /*์ด๋ฏธ์ง ์ขํ ์ฐ๊ธฐ*/
}
header .spot {
position: absolute;
right: 50px; /*์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ*/
top: 0;
}
header .lnb li {
/* float: left; float์ text-align:center๊ฐ ์๋จนํ๋ค. */
display: inline-block; /*์ธ๋ผ์ธ์ ์์ฑ์ด ์๋ ๋ธ๋ญ, text-align:center๊ฐ ๋จนํ๋ค.
๋จ์ : ์ ์ฉ๋๋ ์ฝ๋ ์ฌ์ด์ ์ฌ๋ฐฑ์ด ์๊ธด๋ค. CSS๋ก ๋ณด์ํ ์ ์๋ค. */
position: relative;
}
header .lnb li a {
display: block;
height: 81px; /*ํค๋ ๋์ด*/
padding: 0 30px; /*์ข์ฐ ์ฌ๋ฐฑ*/
font-size: 18px;
color: #333;
line-height: 81px; /*๊ธ์ ๋์ด*/
}
/* ๊ธฐํ ๋ฉ๋ชจ ํ์ */
header .spot {
position: absolute;
right: 50px; /*์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ*/
top: 0;
}
header .spot li {
position: relative; /* ? */
float: left;
}
header .spot li:nth-child(n+2):before { /*li 2๋ฒ๋ถํฐ ์ดํ ๋ชจ๋ li*/
content: "";
position: absolute;
left: 10px;
top: 38px;
width: 1px;
height: 7px;
background: #cccccc;
}
header .spot li a {
/*a์ ํฌ๊ธฐ๋ฅผ ์ฃผ๋ ์ด์ : ๊ธ์๋ฅผ ํด๋ฆญํ๊ธฐ ๋๋ฌธ์*/
display: block;
height: 81px;
padding: 0 0 0 20px; /*์ฒซ ๋ฒ์งธ:์,์๋ / ๋ ๋ฒ์งธ:์ผ์ชฝ,์ค๋ฅธ์ชฝ*/
line-height: 81px;
font-size: 14px;
}
header .lnb li a:hover { /*๋ง์ฐ์ค ํธ๋ฒ ์ ์ ๋ณ๊ฒฝ*/
color: #2d5b79;
font-weight: bold;
/*text-decoration: underline;*/
}
header .lnb li a span {
position: relative;
}
header .lnb li a:hover span:after {
position: absolute;
left: 0;
bottom: -9px; /*๋ฐ์ค ๊ฐ๊ฒฉ ์ฃผ๊ธฐ*/
content: "";
display: block;
height: 1px;
background: #2d5b79;
width: 100%;
}
/*๋น์ฃผ์ผ ์์ญ*/
.visual {
position: relative; /*๊ธฐ์ค์ขํ*/
padding: 0 50px;
}
/*์ฌ๋ผ์ด๋ ๋ฐ ์์ด์ฝ*/
.slide .prev, /*๊ณตํต ์์ ๋ฌถ๊ธฐ*/
.slide .next {
display: block;
position: absolute;
top:50%; width: 25px;
height: 47px;
transform: translateY(-50%);
background: url("../img/sp_com.png") no-repeat;
color: transparent; /*์ด์ ,๋ค์ ๊ธ์จ ์์ ๊ธฐ*/
z-index: 10; /*์์ด์ฝ ์ด๋ฏธ์ง ์๋ก ์ฌ๋ฆฌ๊ธฐ*/
}
.slide .prev {
left: 82px; /*50+32 ์ฌ๋ฐฑ*/
background-position: -128px -60px;
}
.slide .next {
right: 82px; /*50+32 ์ฌ๋ฐฑ*/
background-position: -158px -60px;
}
.slide .control {
position: absolute;
left: 0;
bottom: 55px;
text-align: center; /*ํ
์คํธ๊ฐ ์ค๊ฐ์ด ์๋๋ค. ์๋? position์ด absolute์ด๋ฉด ๋ธ๋ก์ ๊ฐ๋ก ์ฌ์ด์ฆ๊ฐ ์ด๊ธฐํ๋์*/
width: 100%; /*๊ทธ๋์ ๊ฐ๋ก์ฌ์ด์ฆ๋ฅผ 100% ์ค์ ํ์.*/
}
.slide .control a {
color: transparent; /*๊ธ์ ํฌ๋ช
ํ๊ฒ*/
/*border: 1px solid red; !*์์ ์ *!*/
}
.slide .control > div {
display: inline-block; /*๊ฐ์ด๋ฐ ์ ๋ ฌ ์ํด*/
position: relative;
padding: 0 45px 0 0;
}
.slide .control ul {
display: inline-block; /*๋ง๋๊ธฐ๊ฐ ํ ์ค๋ก ๋ณด์ด๊ฒ ํจ, ๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ ๋ง๋๊ธฐ ์ฌ์ด ์ฌ๋ฐฑ์ด ์๊ฒ ๋ง๋๋ ๊ฒ์ด๋ค.*/
font-size: 0; /*์ด๋ ๊ฒ ํ๋ฉด ๋ง๋๊ธฐ ์ฌ๋ฐฑ์ด ์์ด์ง๋ค. ์ด ์ํ์์ ์ข์ฐ ์ฌ๋ฐฑ์ ์ค๋ค.*/
position: relative; /*relative๋ฅผ ์ด์ฉํด ๋ง๋๊ธฐ ์๋ก ์ฌ๋ฆฌ๊ธฐ*/
top: -7px;
}
.slide .control li {
display: inline-block; /*๋ง๋๊ธฐ๊ฐ ํ ์ค๋ก ๋ณด์ด๊ฒ ํจ, ๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ ๋ง๋๊ธฐ ์ฌ์ด ์ฌ๋ฐฑ์ด ์๊ฒ ๋ง๋๋ ๊ฒ์ด๋ค.*/
padding: 0 3px; /*๋ง๋๊ธฐ ์ข์ฐ 3px*/
}
.slide .control li a { /*์ ๋ง๋ค๊ธฐ*/
display: block;
width: 50px;
height: 3px;
background: rgba(255, 255, 255, 0.5); /*๋ง๋๊ธฐ ํฌ๋ช
(๋นํ์ฑํ)*/
border: none; /*์ ํ
๋๋ฆฌ ์์ ๊ธฐ*/
}
.slide .control li.on a { /*๋ง๋๊ธฐ ํฐ์ (ํ์ฑํ)*/
background: #fff;
}
.slide .control > div > div {
position: absolute;
right: 0;
}
.slide .control > div > div a {
overflow: hidden; /*ํ
์คํธ๊ฐ ๋ฒ์๋ฅผ ๋๊ฐ์ง ์๋๋ก ๋ง๋ฌ*/
display: inline-block;
width: 8px;
height: 9px;
/*์ ์ฝ๋๋ง ํ๋ฉด ์ฌ๊ฐํ ๋ฐ์ค์ ๋ง๋๊ธฐ๊ฐ ์ ์๋๋ก ์ด๊ธ๋๋ค.๊ทธ๊ฑด div์ ul์ด ์ด๊ธ๋๊ฑฐ๋ค.*/
background:url("../img/sp_com.png") no-repeat center;
margin: 0 0 0 7px; /*์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ ์ฃผ๊ธฐ*/
opacity: 0.5; /*๋ถํฌ๋ช
๋*/
}
.slide .control > div > div a.on { /*์์ด์ฝ ํ์ฑํ๋๋ฉด*/
opacity: 1; /*๋ถํฌ๋ช
๋*/
}
.slide .control > div > div a.pause {
background-position: -108px -60px;
}
.slide .control > div > div a.play {
background-position: -108px -72px;
}
/*์ฌ๋ผ์ด๋ ๋ฐ ์์ด์ฝ ๋*/
.visual .con > div { /*์ปจํ
์ธ ์์ ์๋ ๋ชจ๋ ์์๋ค์ ๋์ด๋ฅผ 690px*/
height: 690px;
}
.visual .con .slide {
background:url("../img/bg_main09.jpg") no-repeat center;
color: #fff;
font-size: 32px;
line-height: 46px; /*์ค ๊ฐ๊ฒฉ*/
vertical-align: middle;
}
.visual .con .slide p {
font-size: 20px;
padding: 19px 0;
line-height: 100%; /*์ค ๊ฐ๊ฒฉ ์ด๊ธฐํ*/
}
.visual .con .slide .txt {
position: absolute;
left: 50%; /*ํ๋ฉด ์ค์ผ ๋ ์ ๋์ ์ผ๋ก ์์ง์ด๊ฒ๋*/
top: 148px;
text-align: left;
}index.css
/* ์ ํ ์ ๋ณด */
/* ์ ํ ์ ๋ณด ์์ญ ํฌ๊ธฐ 64*52*/
.product a {
color: #001829;
font-size: 15px;
display: block; /*block ์์์ ํน์ง ๊ฐ๋ก ์ฌ์ด์ฆ๋ 100%์ด๋ค.*/
}
.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 ํ๊ธฐ ๋๋ฌธ์ ์ฌ์ด์ฆ ๋ถ์ฌ๊ฐ ๊ฐ๋ฅ ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ก ์ธ๋ก ์ฌ์ด์ฆ๊ฐ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๊ฐ ๋์จ๋ค.*/
margin: 0 0 20px; /*์ ์ข์ฐ ํ*/
}
.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; /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํ ๊ฒ*/
font-size: 0;
}
.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;
}
/*๋งค๊ฑฐ์ง ์์ญ*/
.magazine {
background: #dfd9d1;
position: relative;
height: 670px;
overflow: hidden; /*๊ฐ๋ก์คํฌ๋กค ๋ง๊ธฐ*/
}
.magazine h2 { /*h2 ์ก์์ ์คํ์ผ์ฃผ๊ณ ๊ฐ์ด๋ฐ ์ ๋ ฌํ๊ธฐ*/
font-size: 30px;
color: #000;
text-align: center;
padding: 44px 0 15px; /*์ ์ข์ฐ ํ*/
line-height: 100%; /*์ค ๊ฐ๊ฒฉ ์ด๊ธฐํ*/
}
.magazine p {
font-size: 14px;
color: #3a3b36;
line-height: 100%; /*์ค ๊ฐ๊ฒฉ ์ด๊ธฐํ*/
padding: 0 0 35px 0;
}
.magazine.slide .control { /*์ฌ๋ผ์ด๋ ๋ฐ์ค ์ ์ปจํธ๋กค ์์น ์์ */
bottom: 35px;
}
.magazine .slide_box > div { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
width: 1180px;
height: 430px;
position: absolute; left: 50%;
transform:translate(-50%,0);
top: 150px;
}
/*1๋ฒ์งธ slide div*/
.magazine .slide_box > div:nth-child(1) { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
margin-left: -1280px;
}
/*3๋ฒ์งธ slide div*/
.magazine .slide_box > div:nth-child(3) { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
margin-left: 1280px;
}
.magazine .slide_box .left {
float: left;
width: 800px; /*์ผ์ชฝ ์์ญ ํฌ๊ธฐ ์ก๊ธฐ*/
height: 430px;
overflow: hidden; /*์์์ ์ง์ ํฌ๊ธฐ ์์์ ๋์น์ง ์๊ฒ ์ก์*/
position: relative; /*ํ
์คํธ ์์ญ์ ๋ถ์ด๊ธฐ ์์*/
}
.magazine .slide_box .left img {
/*๋ถ๋ชจ left ํฌ๊ธฐ 800px์ ๋ง์ถฐ์ง,
์ธ๋ก ์ฌ์ด์ฆ๋ ์ด๋ฏธ์ง์ ๋ณธ๋ ์ฌ์ด์ฆ์ ๋น๋กํด์ ๋ง์ถฐ์ง๋ค. */
width: 100%;
}
.magazine .slide_box .left div {
background: rgba(0,0,0,0.5); /*ํฌ๋ช
๋*/
position: absolute;
right: 0;
top: 0;
width: 200px; /*ํฌ๊ธฐ ์ง์ */
height: 100%;
padding: 47px 20px 0; /*์ ์ข์ฐ ํ*/
box-sizing: border-box; /*padding๊ณผ ๊ฐ๋ก ์ฌ์ด์ฆ ์๋ ๊ณ์ฐ*/
}
.magazine .slide_box .left div h3 {
color: #fff;
font-size: 20px;
text-align: left;
line-height: 32px;
}
.magazine .slide_box .left div span {
font-weight: normal;
display: block;
text-align: left;
}
.magazine .slide_box .left div p {
font-size: 16px;
color: #fff;
text-align: left;
line-height: 24px;
padding: 9px 0 0; /*์ ์ข์ฐ ํ*/
}
.magazine .slide_box .left div a {
width: 160px; height: 45px;
border: 1px solid #fff;
display: block;
font-size: 16px; color: #fff; text-align: center; line-height: 45px;
position: absolute; right: 20px; bottom: 40px;
}
.magazine .slide_box .right {
float: right;
width: 380px; height: 430px; background: #fff;
padding: 20px 20px 0; /*์ ์ข์ฐ ํ*/
box-sizing: border-box; /*์๋ ๊ณ์ฐ*/
}
.magazine .slide_box .right li {
padding: 0 0 20px;
}
.magazine .slide_box .right li img {
width: 82px;
height: 82px;
}
.magazine .slide_box .right li a {
display: table; /*block์ table๋ก ๋ฐ๊ฟ*/
width: 100%;
}
.magazine .slide_box .right li a div {
display: table-cell; height: 82px; vertical-align: middle;
padding: 0 0 0 100px;
position: relative;
font-size: 16px; color: #333;
text-align: left;
}
.magazine .slide_box .right li a strong {
font-size: 13px; color: #000;
display: block;
}
.magazine .slide_box .right li a img {
position: absolute; left: 0; top: 0;
}
.magazine.slide .prev {
left: 50%;
margin: 30px 0 0 -640px;
}
.magazine.slide .next {
right: 50%;
margin: 30px -640px 0 0;
}
/*๋งค๊ฑฐ์ง ์์ญ ๋*/์ฌ๋ผ์ด๋ ์ ๋ถ ๋ค ํฌ์ง์
์ผ๋ก ์ด๋ํด์ผ์ง ์ด๋ํ๋ ์ฌ๋ผ์ด๋๋ฅผ ๋ง๋ค ์ ์๋ค.
์ข,์ฐ ํ์ดํ๋ left , right ๊ธฐ์ค์ผ๋ก ์ค๋ ๊ฒ์ด ์๋๋ผ ๊ฐ์ด๋ฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ์์ง์ฌ์ผ๋ง ๊ณ์ ํ๋ฉด์ ๋จธ๋ฌผ ์ ์๋ control์ด ๋ง๋ค์ด์ง๋ค.
๋๋ณด๊ธฐ
- (๊ฐ์ข)_์ธํ๋ฐ_์นํผ๋ธ๋ฆฌ์ ๊ฐ ์๋ ค์ฃผ๋ ์ค๋ฌด ์น์ฌ์ดํธ ๋ฐ๋ผ๋ง๋ค๊ธฐ Season1
[๋ฌด๋ฃ] ์นํผ๋ธ๋ฆฌ์ ๊ฐ ์๋ ค์ฃผ๋ ์ค๋ฌด ์น์ฌ์ดํธ ๋ฐ๋ผ๋ง๋ค๊ธฐ Season1 - ์ธํ๋ฐ | ๊ฐ์
๊ธฐ์ด๋ ์ด์ ๊ทธ๋ง~! ์ค์ ์ฌ์ดํธ๋ฅผ ์ ์ํด๋ณด๊ณ ๊ทธ์์์ html๊ณผ css๊ฐ ์ด๋ป๊ฒ ์กฐํ๋กญ๊ฒ ์ ์๋๋์ง ์์๋ณด์ธ์~, - ๊ฐ์ ์๊ฐ | ์ธํ๋ฐ
www.inflearn.com
