์ฌํด๋ถํฐ ์๋ก ์ถ๊ฐ๋๋ค๋ D,E์ ํ
D-1
๊ธฐ์ด ๋ผ๋ ์์
index.html
<html 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>D-1 ์ฐ์ต</title>
<link rel="stylesheet" href="./css/style.css" />
<script src="./script/script.js"></script>
<script src="./script/jquery-3.6.4.js"></script>
</head>
<body>
<div class="wrap">
<header>ํค๋</header>
<main>๋ฉ์ธ</main>
</div>
<footer>ํธํฐ</footer>
</body>
</html>ํค๋์ ๋ฉ์ธ ๋ถ๋ถ์ ๊ฐ๋ก๋ก ๋ฐฐ์ด(display:flex) ํด์ฃผ๊ธฐ ์ํด ๋๋ง wrap์ผ๋ก ๋ฌถ๊ณ ํธํฐ๋ ๋ฐ๋ก ๋นผ์ฃผ์์.
style.css
@charset "uft-8";
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
a {
text-decoration: none;
display: block;
}
body {
background-color: #fff;
color: #333;
}
.wrap {
width: 100%;
margin: 0 auto;
display: flex;
}
/* header */
header {
width: 200px;
height: 850px;
background-color: rgb(255, 238, 215);
}
/* footer */
footer {
width: 100%;
height: 100px;
background-color: rgb(206, 255, 255);
}
๋ก๊ณ
index.html
<h1>
<a href="#"><img src="./images/logo.png" alt="๋ก๊ณ " /></a>
</h1>style.css
header h1 {
height: 150px;
display: flex;
align-items: center;
}์ด ๋ถ๋ถ์ ์ ๊ณต๋ ๋ก๊ณ ์ฌ์ด์ฆ์ ๋ฐ๋ผ ์์์ ์ ์กฐ์ ํ ๊ฒ.
๋ฐ๋ก ์ ์ฝ๋ ์ฌ์ด์ฆ๊ฐ ์๋ค.
๋ฉ๋ด
index.html
<nav>
<ul>
<!-- ๋ฉ์ธ ๋ฉ๋ด ๋ฆฌ์คํธ lv1 -->
<li class="lv1">
<a href="#">CLUB</a>
<!-- ์๋ธ ๋ฉ๋ด ๋ฆฌ์คํธ lv2 -->
<ul class="lv2">
<li><a href="#">ํด๋ฝ์๊ฐ</a></li>
<li><a href="#">์์ค์๋ด</a></li>
</ul>
</li>
<li class="lv1">
<a href="#">BOOKING</a>
<!-- ์๋ธ ๋ฉ๋ด ๋ฆฌ์คํธ lv2 -->
<ul class="lv2">
<li><a href="#">์๊ธ์๋ด</a></li>
<li><a href="#">์์ฝ์๋ด</a></li>
<li><a href="#">์์ฝ์๋ด</a></li>
</ul>
</li>
<li class="lv1">
<a href="#">INFORMATION</a>
<!-- ์๋ธ ๋ฉ๋ด ๋ฆฌ์คํธ lv2 -->
<ul class="lv2">
<li><a href="#">๋ช
์์ ์ ๋น</a></li>
<li><a href="#">์ด๋ฒคํธ</a></li>
<li><a href="#">์๋ฃ์ค</a></li>
<li><a href="#">ํฌํ ๊ฐค๋ฌ๋ฆฌ</a></li>
</ul>
</li>
<li class="lv1">
<a href="#">COMMUNITY</a>
<!-- ์๋ธ ๋ฉ๋ด ๋ฆฌ์คํธ lv2 -->
<ul class="lv2">
<li><a href="#">๊ณต์ง์ฌํญ</a></li>
<li><a href="#">Q&A</a></li>
</ul>
</li>
</ul>
</nav>style.css
header h1 {
height: 150px;
display: flex;
align-items: center;
}
header nav {
margin-top: 50px;
}
header nav > ul {
width: 180px;
margin-left: 10px;
}
header nav a {
display: block;
width: 100%;
text-align: center;
background-color: #fff;
color: #333;
padding: 10px;
}
li.lv1 {
border-bottom: 1px solid #9ee0ad;
}
li.lv1:nth-child(1) {
border-top: 1px solid #9ee0ad;
}
ul.lv2 {
display: none;
}
li.lv1:hover > a {
background-color: #9ee0ad;
color: #366140;
}
ul.lv2 li:hover > a {
background-color: #b5e9c1;
color: #3f9352;
}์๋ธ๋ฉ๋ด์ hover ํจ๊ณผ๋ฅผ ์ค ๋, lv2 ์ li ๊น์ง ์ฃผ๋ ๊ฑธ ์์ง๋ง์ ใ
.ใ
์๊พธ ๊น๋จน๋๋ค..
ul.lv2 li:hover
script.js
$("li.lv1").mouseenter(function () {
$(this).find("ul.lv2").stop().slideDown();
});
$("li.lv1").mouseleave(function () {
$("ul.lv2").stop().slideUp();
});์ง๊ธ ๊ฒฝ์ฐ์ฒ๋ผ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฌ ๋ฒ ์์ง์ผ ๋, ์ด์ ์ ๋๋ฉ์ด์ ์ด ๋ฉ์ถ๊ธฐ ์ ๊น์ง ์ ๋๋ฉ์ด์ ์ด ๋์ํ์ง ์๋ ํ์์ด ๋ฐ๋ก ํ๋ก ์ธํด ๋ฐ์ํ๋ ๋ฌธ์ ์ธ๋ฐ, ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์ stop()์ ์ด๋ค.
- .stop() : ํ์ฌ ๋์ํ๊ณ ์๋ ์ ๋๋ฉ์ด์ ์ ์ฆ์ ๋์์ด ์ค๋จ ๋๋ค.
์ฐธ๊ณ ) https://electronic-moongchi.tistory.com/75
์ค๋ฅ
์ด๋ ๊ฒ ํ๋๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ๋์์ด ์๋์๋ค.
์ด์ ๊ฐ ๋ญ๊ณ ํ๋, js ํ์ผ์ head ๋ค๊ฐ ๋ถ๋ฌ์์ฃผ์๋๋ฐ,
๊ทธ๋ด ๊ฒฝ์ฐ html์ ์์์๋ถํฐ ์๋๋ก~ ์งํํ๊ธฐ ๋๋ฌธ์
ํ๋ฉด์ด ๋์ค๊ธฐ๋ ์ ์ script๊ฐ ํผ์ ๋ฐ๋๋ ๊ฒ... ๊ทธ๋์ ํ๋ฉด์ ๋์ค์ง ์๋๋ค.
๋ฐ๋ผ์ html ํ์ผ์์ script ์์ฑ์ ๋ฐ๊ฟ์ฃผ๋ฉด ๋๋ค.
<script src="./script/script.js" defer></script>- <script> ํ๊ทธ์ defer ์์ฑ์ ํ์ด์ง๊ฐ ๋ชจ๋ ๋ก๋๋ ํ์ ํด๋น ์ธ๋ถ ์คํฌ๋ฆฝํธ๊ฐ ์คํ๋จ์ ๋ช ์ํ๋ค
์ด์ ์ ์์ ์ผ๋ก ์๋ํ๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
์์ ์ ์ฐ์ตํ ๋๋ ๋นผ๋จน์ง ์์๋๋ฐ ... ์ํผ ์ํ์ฅ์์ ๊น๋จน์ง ๋ง์ฅ
main
style.css
main {
width: calc(100% - 200px);
}์ด๋ฏธ์ง ์ฌ๋ผ์ด๋
์ผ๋จ ์ฌ๋ผ์ด๋ ์ด๋ฏธ์ง ์ฌ์ด์ฆ
๋ ์ฌ์ ์๊ฒ ์ค๋นํ๋ค.
index.html
<div class="slide">
<ul>
<li class="slide01"><span>์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ 1</span></li>
<li class="slide02"><span>์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ 2</span></li>
<li class="slide03"><span>์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ 3</span></li>
</ul>
</div>style.css
.slide {
height: 400px;
overflow: hidden;
}
.slide li {
position: relative;
height: 400px;
}
.slide span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: green;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
}
.slide01 {
background: url("../images/slide1.png") no-repeat;
background-size: cover;
}
.slide02 {
background: url("../images/slide2.png") no-repeat;
background-size: cover;
}
.slide03 {
background: url("../images/slide3.png") no-repeat;
background-size: cover;
}D์ ํ์ html๊ณผ css๋ ์ข ๋ค๋ฅด๋ค.
์ด๋ฏธ์ง ์ฌ์ด์ฆ๊ฐ ์ ํด์ ธ ์๋ ๊ฒ ์๋๋ผ ์น ๋ธ๋ผ์ฐ์ ์ ์ฒด์ -200px ์ด ๊ฐ๋ก ์ฌ์ด์ฆ์ด๊ธฐ ๋๋ฌธ์ ์ด๋ฏธ์ง๋ css ์ ๋ฐฐ๊ฒฝ์ผ๋ก ์ฝ์
ํด์ค๋ค.
script.js
setInterval(function () {
$(".slide ul").animate({ "margin-top": "-400px" }, function () {
$(".slide ul li:first").appendTo(".slide ul");
$(".slide ul").css({ "margin-top": "0" });
});
}, 3000);setInterval(function () {}, 3000); ์์ฑ ํ,
animate() ๋ฉ์๋๋ฅผ ์ด์ฉํ์ฌ ์ง์ ๋์, ๊ทธ๋ฆฌ๊ณ ๋ค์ ํจ์๋ฅผ ํธ์ถํ๋ค.
์ ๊ตฌํ ๋๋ ๊ฒ ํ์ธ!!!
๋ฐฐ๋
D์ ํ์์๋ ํน์ดํ๊ฒ ์ฌ๋ผ์ด๋ ์์ ๋ฐฐ๋๊ฐ ์์นํ๋ค.
index.html
<div class="banner">
<ul>
<li>
<a href="#"><img src="./images/icon1.jpg" alt="๋ฐฐ๋1" /></a
><span>๋ฐฐ๋1</span>
</li>
<li>
<a href="#"><img src="./images/icon2.jpg" alt="๋ฐฐ๋2" /></a
><span>๋ฐฐ๋2</span>
</li>
<li>
<a href="#"><img src="./images/icon3.jpg" alt="๋ฐฐ๋3" /></a
><span>๋ฐฐ๋3</span>
</li>
</ul>
</div>style.css
.banner {
position: absolute;
top: 20px;
right: 20px;
width: 150px;
height: 325px;
background: #fff;
border-radius: 5px;
text-align: center;
padding: 10px;
}
.banner li {
padding: 6px;
}
.banner span {
display: block;
font-weight: bold;
background: green;
border-radius: 5px;
padding: 2px;
}
.banner img {
width: 80px;
height: 60px;
}
๋ฐ๋ก๊ฐ๊ธฐ
index.html
<div class="direct">
<a href="#">
<img src="./images/banner.png" alt="๋ฐฐ๋" />
<p><span>์คํ ์ด๋ฒคํธ - ๋ช
์์ ์ ๋น ๋ฑ๊ทน ์ 80% ํ ์ธ</span></p>
</a>
</div>style.css
.direct {
height: 200px;
padding: 5px;
justify-content: space-between;
align-items: center;
text-align: center;
}
.direct span {
font-size: 15px;
font-weight: bold;
background: yellow;
padding: 5px;
}
.direct p {
font-size: 13px;
line-height: 200%;
position: relative;
top: -165px;
}css ์์น๋ ๋ชจ์์ ์ํ์ ํ์ผ๋ก ๋ฐ์์จ ์ฌ์ง ๋ณด๊ณ
์ด๋ ๊ฒ ํ๋๋ก ๋ง๋ค๊ฑฐ๋,, ์๋๋ฉด ๋ฐ๋ก ์นธ์ ๋ง๋ค๊ฑฐ๋
๊ทธ๋๊ทธ๋ ์ํฉ๋ด์ ์ ์กฐ์ ํ ๊ฒ
ํญ ๋ฉ๋ด
<div class="tab">
<ul class="tabMenu">
<li class="on"><a>๊ณต์ง์ฌํญ</a></li>
<li><a>๊ฐค๋ฌ๋ฆฌ</a></li>
</ul>
<div class="tabItem">
<ul class="notice on">
<li>
<a href="#">์กฐ์ด์ปจํธ๋ฆฌํด๋ฝ ๊ณต์ง์ฌํญ<span>2023.01.31</span></a>
</li>
<li>
<a href="#"
>3์๋ถํฐ ์นด์นด์คํ์ด๋ก ์์ฝ ๊ฐ๋ฅํฉ๋๋ค.<span
>2023.02.18</span
></a
>
</li>
<li>
<a href="#"
>KT ๋กค์คํฐ ๊ฒฐ์น์ง์ถ ์ 80% ํ ์ธํฉ๋๋ค.<span
>2023.03.23</span
></a
>
</li>
<li>
<a href="#"
>๋ฒ๊ฝํผ๋ฉด ์ปคํ ๋ฐฉ๋ฌธ์ 50% ํ ์ธํฉ๋๋ค.<span
>2023.03.25</span
></a
>
</li>
</ul>
<ul class="gallery">
<li>
<a href="#"
><img src="./images/gallery01.jpg" alt="๊ฐค๋ฌ๋ฆฌ ์ฌ์ง1" /><span
>๊ฐค๋ฌ๋ฆฌ ์ฌ์ง 1</span
></a
>
</li>
<li>
<a href="#"
><img src="./images/gallery02.jpg" alt="๊ฐค๋ฌ๋ฆฌ ์ฌ์ง2" /><span
>๊ฐค๋ฌ๋ฆฌ ์ฌ์ง 2</span
></a
>
</li>
<li>
<a href="#"
><img src="./images/gallery03.jpg" alt="๊ฐค๋ฌ๋ฆฌ ์ฌ์ง3" /><span
>๊ฐค๋ฌ๋ฆฌ ์ฌ์ง 3</span
></a
>
</li>
</ul>
</div>
</div>style.css
.tab {
width: 1550px;
margin-left: 20px;
margin-top: 20px;
height: 250px;
}
.tabMenu li {
display: inline-block;
font-size: 18px;
font-weight: 600;
}
.tabMenu li a {
display: block;
padding: 10px;
}
.tabMenu li.on a {
background: #3f9352;
}
.tabItem > * {
height: 156px;
padding: 10px;
}
.tabItem > *.on {
background: #3f9352;
}
.notice li {
display: flex;
line-height: 2.2;
}
.notice li a {
display: inline-block;
margin-left: 100px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notice li span {
margin-left: auto;
position: absolute;
right: 100px;
color: #fff;
}
.notice li:hover {
text-decoration: underline;
}
.gallery {
display: none;
}
.gallery li {
display: inline-block;
width: 10%;
margin-top: 8px;
}
.gallery a img {
width: 100%;
}script.js
$(".tabMenu li").click(function () {
var idx = $(this).index();
$(".tabItem >*").hide().removeClass("on");
$(".tabItem >*").eq(idx).show().addClass("on");
$(".tabMenu li").removeClass("on");
$(this).addClass("on");
});
ํ์ ์ฐฝ
๊ณต์ง์ฌํญ์ ์ฒซ ๋ฒ์งธ ์ฝํ ์ธ ๋ฅผ ํด๋ฆญ(Click)ํ ๊ฒฝ์ฐ ๋ ์ด์ด ํ์ ์ฐฝ(Layer Pop_up)์ด ๋ํ๋๋ฉฐ, ๋ ์ด์ด ํ์ ์ฐฝ ๋ด์ ๋ซ๊ธฐ ๋ฒํผ์ ๋์ด์ ํด๋ฆญํ๋ฉด ํด๋น ํ์ ์ฐฝ์ด ๋ซํ์ผ ํ๋ค.
index.html
<div class="popupBox">
<div class="popup">
<h2>์กฐ์ด์ปจํธ๋ฆฌํด๋ฝ ์คํ ์ด๋ฒคํธ</h2>
<p>
์ธ์์ ๋ชจ์๋ฆฌ ๊ตฌ๋ถ์ ํ๊ฒ ์ปค๋ฒ๋ฆฐ ๊ณจ์นซ๊ฑฐ๋ฆฌ Outsider ๊ฑธ์๊ฑธ์ด ์ท์ฐจ๋ฆผ
์ด์ดํฐ ๋๋จธ Play list ์์
๊น์ง ๋ค Minor ๋ ๋ชจ๋ฅด์ง ๋จ๊ตฐ ๊ณ ๊ฐ ์ ํํ ๋น
์กฐ๋ช
์ด ์ด๋ ๋น์ถ๋์ง ๋๋ ค๋ ์ข์ผ๋ ๊ฒฐ๊ตญ ์๊ฒ ๋๊ธธ
</p>
<button>X ๋ซ๊ธฐ</button>
</div>
</div>header๋ณด๋ค ์์ ๋ฃ์ด์ค๋ค. (wrap์ ์)
style.css
.popupBox {
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
/* display: none; */
}
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
line-height: 2;
background: #fff;
border: 1px solid #333;
padding: 20px;
}
.popup h2 {
background: green;
color: #fff;
text-align: center;
padding: 5px 10px;
}
.popup p {
line-height: 160%;
padding: 5px;
}
.popup button {
position: absolute;
left: 80%;
width: 15%;
background: yellowgreen;
color: #333;
border: 0;
padding: 3px 5px;
cursor: pointer;
}script.js
$(".popupBox").hide();
$(".notice li:nth-child(1)").click(function () {
$(".popupBox").show();
});
$(".popup button").click(function () {
$(".popupBox").hide();
});".notice li:nth-child(1)" ์์ .์ ๊น๋นกํ๋๋ฐ
์๋ฌด๋ฆฌ ์ฐพ์๋ ๋ฌธ์ ๊ฐ ์ ๋ณด์ด๋๊ฑฐ๋ค ใ
ใ
๊ทผ๋ฐ ํ์
์ฐฝ์ ์๋์ค๊ณ ...
์ฌ์ํ ์ ํ๋๊ฐ ์๊ฐ์ ๋ง์ด ์ด๋ค..
footer
index.html
<footer>
<div>
<a href="#"><img src="./images/logo.png" alt="logo" /></a>
</div>
<p>
๊ฒฝ๊ธฐ๋ ์ํ์ ๊ฐ๋๊ตฌ 1-24๋๋ก 3 ๋ํ๋ฒํธ : 3333-4444 | FAX : (031)
5555-4444<br />
COPYRIGHT 2023 ์กฐ์ด์ปจํธ๋ฆฌํด๋ฝ. ALLRIGHT RESERVED.
</p>
<ul>
<li>
<a href="#"><img src="./images/sns1.png" alt="SNS1" /></a>
</li>
<li>
<a href="#"><img src="./images/sns2.png" alt="SNS2" /></a>
</li>
<li>
<a href="#"><img src="./images/sns3.png" alt="SNS3" /></a>
</li>
</ul>
</footer>style.css
footer {
width: 100%;
height: 100px;
background-color: rgb(206, 255, 214);
display: flex;
justify-content: space-between;
align-items: center;
}
footer div img {
width: 200px;
filter: grayscale(1);
}
footer p {
width: 70%;
line-height: 160%;
text-align: center;
}
footer ul {
display: flex;
justify-content: space-around;
width: 20%;
}
D-2
์ด๋ฒ์ ๋ ์ด์์์ ๋๋๋,
ํค๋๋ฅผ ์ ์ธํ๊ณ ์ปจํ
์ธ 1/2 ์์ญ์ผ๋ก ๋๋์ด ์์๋๋ฅผ ๋จผ์ ๊ตฌ๋ถ์ง์๋ค.
header
D-1 ์ ํ๊ณผ ๊ฐ์
content1 ์์ญ
index.html
<div class="content1">
...
</div>style.css
.content1 {
height: 400px;
display: flex;
}์ด๋ฏธ์ง ์ฌ๋ผ์ด๋
index.html
<div class="slide">
<ul>
<li class="slide01"><span>์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ 1</span></li>
<li class="slide02"><span>์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ 2</span></li>
<li class="slide03"><span>์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ 3</span></li>
</ul>
</div>style.css
.slide {
width: calc(100% - 230px);
overflow: hidden;
/* position: relative; */
}
/* ์ข์ฐ ์ฌ๋ผ์ด๋๋ผ์ ์ด ๋ถ๋ถ ์ถ๊ฐ */
.slide ul {
display: flex;
width: 300%;
}
.slide li {
position: relative;
height: 400px;
width: 100%;
}
.slide span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgb(15, 0, 128);
color: #fff;
padding: 5px 10px;
border-radius: 5px;
}
.slide01 {
background: url("../images/slide1.png") no-repeat;
background-size: cover;
}
.slide02 {
background: url("../images/slide2.png") no-repeat;
background-size: cover;
}
.slide03 {
background: url("../images/slide3.png") no-repeat;
background-size: cover;
}script.js
setInterval(function () {
$(".slide ul").animate({ "margin-left": "-100%" }, function () {
$(".slide ul li:first").appendTo(".slide ul");
$(".slide ul").css({ "margin-left": "0" });
});
}, 3000);๋ฐ๋ก๊ฐ๊ธฐ
index.html
<div class="direct">
<a href="#">
<img src="./images/direct.png" alt="๋ฐ๋ก๊ฐ๊ธฐ ์ด๋ฏธ์ง"/>
<p><span>๋ฐ๋ก ์๋งคํ๊ธฐ</span></p>
</a>
</div>style.css
.direct {
height: 400px;
padding: 5px;
justify-content: space-between;
align-items: center;
text-align: center;
}
.direct span {
font-size: 15px;
font-weight: bold;
background: yellow;
padding: 5px;
}
.direct a {
height: 400px;
}
.direct img {
width: 98%;
}
.direct p {
font-size: 13px;
line-height: 200%;
position: relative;
bottom: 100px;
}content2
๊ณต์ง์ฌํญ, ๊ฐค๋ฌ๋ฆฌ
index.html
<div class="content2">
<div class="notice">
<h3>๊ณต์ง์ฌํญ</h3>
<ul>
<li>
<a href="#">์์ธ ๊ตฌ์๊ตฌ์ ๊ณต์ง์ฌํญ<span>2023.01.31</span></a>
</li>
<li>
<a href="#">3์๋ถํฐ ์นด์นด์คํ์ด๋ก ์๋งค ๊ฐ๋ฅํฉ๋๋ค.<span>2023.02.18</span></a>
</li>
<li>
<a href="#">KT ๋กค์คํฐ ๊ฒฐ์น์ง์ถ ์ 80% ํ ์ธํฉ๋๋ค.<span>2023.03.23</span></a>
</li>
<li>
<a href="#">๋ฒ๊ฝํผ๋ฉด ์ปคํ ๋ฐฉ๋ฌธ์ ๋จ์ฐํฌ์ด 50% ํ ์ธํฉ๋๋ค.<span>2023.03.25</span></a>
</li>
</ul>
</div>
<div class="gallery">
<ul>
<li>
<a href="#"><img src="./images/gallery01.jpg" alt="๊ฐค๋ฌ๋ฆฌ ์ฌ์ง1" /><span>๊ฐค๋ฌ๋ฆฌ ์ฌ์ง 1</span></a>
</li>
<li>
<a href="#"><img src="./images/gallery02.jpg" alt="๊ฐค๋ฌ๋ฆฌ ์ฌ์ง2" /><span>๊ฐค๋ฌ๋ฆฌ ์ฌ์ง 2</span></a>
</li>
<li>
<a href="#"><img src="./images/gallery03.jpg" alt="๊ฐค๋ฌ๋ฆฌ ์ฌ์ง3" /><span>๊ฐค๋ฌ๋ฆฌ ์ฌ์ง 3</span></a>
</li>
</ul>
</div>
</div>style.css
.content2 {
height: 250px;
display: flex;
}
.content2 div {
width: 50%;
}
.content2 ul {
margin-left: 20px;
}
.content2 h3 {
background: rgb(70, 70, 237);
color: #fff;
display: inline-block;
padding: 5px 10px;
cursor: pointer;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 30px;
}
.notice li {
line-height: 2.2;
}
.notice a {
color: #333;
}
.notice span {
float: right;
}
.notice li:hover {
text-decoration: underline;
}
.gallery {
justify-content: space-between;
align-items: center;
height: 233px;
}
.gallery li {
display: inline-block;
width: 25%;
margin-right: 45px;
}
.gallery a img {
width: 100%;
}
.gallery span {
position: relative;
left: 50px;
bottom: 30px;
background: aliceblue;
}
ํ์ ์ฐฝ
๋ชจ๋ฌ์ฐฝ๊ณผ ํ์ ์ฐฝ์ ์ฐจ์ด : https://bomango.tistory.com/57
ํ์ ์ฐฝ๊ณผ ๋๊ฐ์๋ฐ, ๋ฌธ์ ์ง์ฒ๋ผ ๋ฐฐ๊ฒฝ์ ์ด๋ก๊ฒ ๋ง๋ค์ด๋ณด์๋ค.
.modal {
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
background-color: rgba(0, 0, 0, 0.4);
}(popupBox ๋์ modal class ์ฌ์ฉ)
D-3
๊ฐ๋ก ๊ธธ์ด๊ฐ ๋ธ๋ผ์ฐ์ ์ ์ฒด ๋์ด์ธ๊ฑด D์ ํ ๊ณตํต์ธ ๊ฒ ๊ฐ๊ณ ,
๋ฐฐ๋๋ ๊ณต์ง์ฌํญ/๊ฐค๋ฌ๋ฆฌ ๋ถ๋ถ๋ D-1๊ณผ ๊ฐ๋ค.
์ฌ๋ผ์ด๋๋ fade in/out ์ด๊ณ , ํธํฐ์ sns ๋์ footermenu ๊ฐ ์๋ค.
๊ทธ๋ฆฌ๊ณ ๊ฐ์ฅ ํฐ ์ฐจ์ด์ ์ ์๋ก ์๊ธด ์ ๋ฉ๋ด์ธ๊ฑฐ ๊ฐ์๋ฐ...
ํ ๋ฉ์ธ ๋ฉ๋ด ์์ ์๋ธ๋ฉ๋ด๊ฐ ์์ผ๋ก ๊ธธ๊ฒ ๋์ด๋์ด์๊ณ
๋ฉ์ธ๋ฉ๋ด ํ๋์ ์ปค์๋ฅผ ์ฌ๋ฆฌ๋ฉด ๋๋จธ์ง ์๋ธ๋ฉ๋ด๊ฐ ๋ค ๋์ค๋ ํ์์ธ ๋ฏํ๋ค.
์ผ๋จ ๊ธฐ์ด ๊ณต์ฌ๋ D-1๊ณผ ๋๊ฐ์ด ํ๋ค.
header
์คํ๋ฉ๋ด๋ผ๋ ๊ฒ ์์ผ๋, html์ ์ถ๊ฐํด์ค๋ค.
๊ทธ๋ฆฌ๊ณ ๋ฉ๋ด ๋๋ฅด๋ฉด ๊ฐ์ด ๋์ค๋ ๋ฐฐ๊ฒฝ๋ ๋น div๋ก ๋ง๋ค์ด์ค.
<div class="subBg"></div>
<nav>
<ul>
<!-- ๋ฉ์ธ ๋ฉ๋ด ๋ฆฌ์คํธ lv1 -->
<li class="lv1">
<a href="#">OnSale</a>
<!-- ์๋ธ ๋ฉ๋ด ๋ฆฌ์คํธ lv2 -->
<ul class="lv2">
<li><a href="#">ํ ์ธํ์ฌ</a></li>
<li><a href="#">๋ค์ฆ์ </a></li>
</ul>
</li>
<!-- ... (๋ฆฌ์คํธ ๊ฐ์๋งํผ) -->
</nav>
</div>
<div>
<ul class="spotMenu">
<li><a href="#">๋ก๊ทธ์ธ</a></li>
<li><a href="#">ํ์๊ฐ์
</a></li>
</ul>
</div>style.css
header nav {
margin-top: 50px;
}
header nav > ul {
width: 180px;
margin-left: 10px;
}
header nav a {
display: block;
width: 100%;
text-align: center;
color: #333;
padding: 10px;
}
.subBg {
position: absolute;
right: 0;
width: calc(100% - 190px);
height: 160px;
background: rgba(190, 205, 248, 0.7);
z-index: 1;
margin-top: 50px;
}
li.lv1 {
background-color: transparent;
display: flex;
position: relative;
border-bottom: 1px solid #9ea0e0;
z-index: 1;
}
li.lv1:nth-child(1) {
border-top: 1px solid #9ea0e0;
}
ul.lv2 {
position: absolute;
top: 0;
left: 250px;
width: 350%;
display: flex;
z-index: 1;
}
ul.lv2 li {
width: calc(100% / 4);
}
li.lv1:hover > a {
background-color: #9ea0e0;
color: #ededed;
}
ul.lv2 li:hover > a {
background-color: #c0c1f3;
color: #ededed;
}
.spotMenu {
display: flex;
margin: 20px auto;
width: 90%;
}
.spotMenu > li {
width: 50%;
text-align: center;
}script.js
$("ul.lv2, .subBg").hide();
$("li.lv1").mouseover(function () {
$("ul.lv2, .subBg").stop().fadeIn(300);
});
$("li.lv1").mouseleave(function () {
$("ul.lv2, .subBg").stop().fadeOut(300);
});ul.lv2 (์๋ธ๋ฉ๋ด)์ ๋ฐฐ๊ฒฝ์ ์ผ๋จ ์จ๊ธฐ๊ณ
li.lv1 (๋ฉ์ธ๋ฉ๋ด 1๊ฐ 1๊ฐ)์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ์จ๊ฒผ๋ ๊ฒ๋ค์ ๋ฑ์ฅ์์ผ์ฃผ๊ณ ,
๊ทธ ๋ฉ์ธ๋ฉ๋ด์์ ๋ง์ฐ์ค๋ฅผ ๋ผ๋ฉด ๋ค์ ์จ๊ฒจ์ฃผ๋ ์์
.
์ด๋ฏธ์ง ์ฌ๋ผ์ด๋
ํ์ด๋ ์ธ/ ์์์ผ๋ก ํด์ค๋ค.
html์ ๋ค ๋์ผํ๋ฐ, css๋ js๊ฐ ์ข ๋ค๋ฆ
style.css
.slide {
height: 400px;
overflow: hidden;
/* position: relative; */
}
.slide li {
position: relative;
height: 400px;
}
.slide span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: green;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
}
.slide01 {
background: url("../images/slide1.png") no-repeat;
background-size: cover;
}
.slide02 {
background: url("../images/slide2.png") no-repeat;
background-size: cover;
}
.slide03 {
background: url("../images/slide3.png") no-repeat;
background-size: cover;
}script.js
$(".slide li:gt(0)").hide();
setInterval(function () {
$(".slide ul li:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(".slide ul");
}, 2000);์ค๋ฅ
์ด๋ฏธ์ง ใ
ก ์ด๋ฏธ์ง๋ผ๋ฆฌ ํ์ด๋์ธ์์์ด ์๋๊ณ ,
์ค๊ฐ์ ํฐ ํ๋ฉด์ด ๋ก๋๋๋ ํ์์ด ์์๋ค.
์ด๋ ๊ฒ๋ ํด๋ณด๊ณ ์ ๋ ๊ฒ๋ ํด๋ดค๋๋ฐ, ํด๊ฒฐ์ฑ
์ css ์์ ์ด์๋ค.
relative ์๋ ์์น๋ฅผ absolute๋ก ๋ฐ๊ฟ์ฃผ์๋๋ ๋์์..
์์ style.css
.slide li {
position: absolute;
height: 400px;
width: calc(100% - 200px);
right: 0;
}position: absolute ๋ก ๋ฐ๊พธ์ด ์ฃผ๊ณ ํ๋ฉด์ ๋ง๊ฒ
์ฌ์ด์ฆ๋ ์์น๋ฅผ ๋ณ๊ฒฝํด์ฃผ์๋ค.
banner, ๋ฐ๋ก๊ฐ๊ธฐ, ํญ ๋ฉ๋ด
D-1 ๊ณผ ๊ฐ์ผ๋ฏ๋ก ์๋ต
footer
index.html
<footer>
<div>
<a href="#"><img src="./images/logo.png" alt="logo" /></a>
</div>
<div class="footer_menu">
<ul>
<li><a href="#">๊ฐ์ธ์ ๋ณด์ฒ๋ฆฌ๋ฐฉ์นจ</a></li>
<li><a href="#">์ด์ฉ์ฝ๊ด</a></li>
<li><a href="#">ํํ์ด์ง ์ด์ฉ์๋ด</a></li>
<li><a href="#">ํํ์ด์ง ๊ฐ์ ์๊ฒฌ</a></li>
<li><a href="#">์ฌ์ดํธ๋งต</a></li>
<li><a href="#">์ฐพ์์ค์๋๊ธธ</a></li>
</ul>
<p>
๊ฒฝ๊ธฐ๋ ์ํ์ ๊ฐ๋๊ตฌ 1-24๋๋ก 3 ๋ํ๋ฒํธ : 3333-4444 | FAX : (031)
5555-4444<br />
COPYRIGHT 2023 ์กฐ์ด์ปจํธ๋ฆฌํด๋ฝ. ALLRIGHT RESERVED.
</p>
</div>
</footer>style.css
footer {
width: 100%;
height: 100px;
background-color: rgb(206, 255, 214);
display: flex;
align-items: center;
}
.footer_menu {
width: calc(100% - 200px);
}
footer div img {
width: 200px;
filter: grayscale(1);
}
footer p {
width: 100%;
line-height: 160%;
margin-top: 10px;
text-align: center;
}
footer ul {
display: flex;
justify-content: space-evenly;
margin-left: 380px;
width: 50%;
}๋ก๊ณ ํ๋ฐฑ -> filter: grayscale(1)
ํ๋ฉด์ด๋ ์์๋ ์ ์ ์์ง๋ง footer a ํ๊ทธ์ ๊ธ์จ์ #333 ๊น์ง ํด์ฃผ๋ฉด ๋
D-4
์ผ๋จ ํค๋์ ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋๋ D-3 ์ ํ๊ณผ ๊ฐ์ผ๋ฏ๋ก ์๋ตํ๋ค.
๋ฐ๋ก๊ฐ๊ธฐ
๊ฐ์ด๋ฐ์ ์ด๋ฏธ์ง 7๊ฐ์ ๋งํฌ 7๊ฐ๋ฅผ ์ฐ๊ฒฐํ๋ ๋ถ๋ถ
index.html
<div class="direct">
<ul>
<li>
<a href="#"><img src="./images/icon1.jpg" alt="๋ฐ๋ก๊ฐ๊ธฐ1" /></a
><span>LINK1</span>
</li>
<li>
<a href="#"><img src="./images/icon2.jpg" alt="๋ฐ๋ก๊ฐ๊ธฐ2" /></a
><span>LINK2</span>
</li>
<li>
<a href="#"><img src="./images/icon3.jpg" alt="๋ฐ๋ก๊ฐ๊ธฐ3" /></a
><span>LINK3</span>
</li>
<li>
<a href="#"><img src="./images/icon4.jpg" alt="๋ฐ๋ก๊ฐ๊ธฐ4" /></a
><span>LINK4</span>
</li>
<li>
<a href="#"><img src="./images/icon5.jpg" alt="๋ฐ๋ก๊ฐ๊ธฐ5" /></a
><span>LINK5</span>
</li>
<li>
<a href="#"><img src="./images/icon6.jpg" alt="๋ฐ๋ก๊ฐ๊ธฐ6" /></a
><span>LINK6</span>
</li>
<li>
<a href="#"><img src="./images/icon7.jpg" alt="๋ฐ๋ก๊ฐ๊ธฐ7" /></a
><span>LINK7</span>
</li>
</ul>
</div>style.css
.direct {
height: 150px;
padding: 18px;
justify-content: space-between;
align-items: center;
text-align: center;
border-bottom: 1px solid #ededed;
}
.direct ul {
display: flex;
}
.direct img {
width: 50%;
}
.direct span {
font-size: 15px;
font-weight: bold;
background: rgba(114, 192, 245, 0.549);
padding: 5px;
}
.direct p {
font-size: 13px;
line-height: 200%;
position: relative;
top: -165px;
}
๊ณต์ง์ฌํญ/ ๊ฐค๋ฌ๋ฆฌ
์ด๋ D-2 ์ ํ๊ณผ ๊ฐ์ผ๋ ์๋ตํ๋ค.
footer
index.html
<footer>
<div class="logo"></div>
<div class="footer_menu">
<ul>
<li><a href="#">๊ฐ์ธ์ ๋ณด์ฒ๋ฆฌ๋ฐฉ์นจ</a></li>
<li><a href="#">์ด์ฉ์ฝ๊ด</a></li>
<li><a href="#">ํํ์ด์ง ์ด์ฉ์๋ด</a></li>
<li><a href="#">ํํ์ด์ง ๊ฐ์ ์๊ฒฌ</a></li>
<li><a href="#">์ฌ์ดํธ๋งต</a></li>
<li><a href="#">์ฐพ์์ค์๋๊ธธ</a></li>
</ul>
<p>
๊ฒฝ๊ธฐ๋ ์ํ์ ๊ฐ๋๊ตฌ 1-24๋๋ก 3 ๋ํ๋ฒํธ : 3333-4444 | FAX : (031)
5555-4444<br />
COPYRIGHT 2023 ์กฐ์ด์ปจํธ๋ฆฌํด๋ฝ. ALLRIGHT RESERVED.
</p>
</div>
<div>
<a href="#"><img src="./images/logo.png" alt="logo" /></a>
</div>
</footer>style.css
footer {
width: 100%;
height: 120px;
background-color: rgb(206, 255, 214);
display: flex;
align-items: center;
}
.logo {
width: 200px;
border-right: 1px solid #333;
}
.footer_menu {
width: calc(100% - 200px);
display: flex;
flex-direction: column;
justify-content: left;
align-items: center;
position: absolute;
right: 0;
}
footer div img {
width: 200px;
filter: grayscale(1);
position: absolute;
right: 0;
bottom: -460px;
}
footer p {
width: 100%;
line-height: 160%;
margin-top: 10px;
text-align: left;
}
footer ul {
display: flex;
justify-content: flex-start;
width: 100%;
}
footer ul li {
margin-right: 30px;
}
footer ul a {
color: #333;
}
'์๊ฒฉ์ฆ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์น๋์์ธ ๊ธฐ๋ฅ์ฌ 3 (A~C์ ํ) ๋ฉ๋ด (0) | 2023.05.19 |
|---|---|
| ์น๋์์ธ ๊ธฐ๋ฅ์ฌ 2 - ๊ธฐ๋ณธ ์ธํ & ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ (0) | 2023.05.19 |
| ์น๋์์ธ ๊ธฐ๋ฅ์ฌ ์ค๊ธฐ 1 - ๊ฐ์ก๊ธฐ (A-1) (0) | 2023.05.19 |
