실존 사이트 롯데민속박물관의 첫 페이지를 따라 연습해 보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- p#skipNav>a[href="#"]{본문바로가기}
div#wrap>header#header>div.inner^section#visual+main#container>section#content>div.con-box.con$*4>div.inner>h2{타이틀$}^^^^footer#footer>div.inner -->
<p id="skipNav"><a href="#">본문바로가기</a></p>
<div id="wrap">
<header id="header">
<div class="inner">
<!-- h1>a[href=index.html]>img
ul.top-menu>li*3>a[href="#"]
nav.nav>ul.gnb>li*4>a[href="#"] -->
<h1>
<a href="index.html">
<img src="images/m_logo.png" alt="lotte world folk museum">
</a>
</h1>
<ul class="top-menu">
<li><a href="#">롯데월드 어드벤처</a></li>
<li><a href="#">아이스링크</a></li>
<li><a href="#">Login</a></li>
</ul>
<nav class="nav">
<ul class="gnb">
<li><a href="#">이용안내</a></li>
<li><a href="#">전시</a></li>
<li><a href="#">교육프로그램</a></li>
<li><a href="#">소통·소식</a></li>
</ul>
</nav>
</div>
</header>
<!-- //header -->
<section id="visual"></section>
<main id="container" class="main">
<section id="content">
<div class="con-box con1">
<div class="inner">
</div>
</div>
<div class="con-box con2">
<div class="inner">
<h2>시대별 문화를 즐길 수 있는 전시</h2>
<p>현재 진행 중인 전시를 알아보세요.</p>
<ul>
<li><a href="https://adventure.lotteworld.com/museum/gallery/permanent_exhibition/contentsid/597/index.do"><img src="images/mainCon1_img1.jpg" alt="상설전시"><strong>상설전시</strong></a></li>
<li><a href="https://adventure.lotteworld.com/museum/gallery/special/list.do"><img src="images/mainCon1_img2.jpg" alt="특별전시"><strong>특별전시</strong></a></li>
</ul>
</div>
</div>
<div class="con-box con3">
<div class="inner">
<h2>민속박물관의 즐겁고 다양한 프로그램</h2>
<p>다양한 프로그램을 확인해보세요.</p>
<ul>
<li><a href=""><img src="images/mainCon2_img1.jpg" alt=""><strong>전통문화/역사교육</strong></a></li>
<li><a href=""><img src="images/mainCon2_img2.jpg" alt=""><strong>전통공예체험</strong></a></li>
<li><a href=""><img src="images/mainCon2_img3.jpg" alt=""><strong>문화행사</strong></a></li>
</ul>
</div>
</div>
<div class="con-box con4">
<!-- <div class="inner">
<h2>민속박물관 소식을 한눈에!</h2>
<p>오늘의 민속박물관 소식을 만나보세요.</p>
<div class="box">
<div class="left">
<h3>민속박물관 소식</h3>
</div>
<div class="right">
<ul>
<li>
<a href="">
<img src="./images/ mainCon3_util1_img1.png" alt="">
<h4>이용문의</h4>
</a>
</li>
<li>
<a href="">
<img src="./images/ mainCon3_util1_img2.png" alt="">
<h4>오시는길</h4>
</a>
</li>
<li><a href=""><img src="./images/ mainCon3_banner.jpg" alt=""></a></li>
</ul>
</div>
</div>
</div> -->
<div class="inner">
<h2>민속박물관 소식을 한눈에!</h2>
<p>오늘의 민속박물관 소식을 만나보세요.</p>
<div class="news">
<article class="box box1">
<h3>민속박물관 소식</h3>
<a href="">
<p>[봄시즌] 백투더 스쿨 '개화학당'</p>
<span>2023.03.16</span>
</a>
<ul>
<li>
<a href="">[롯데월드X제로월드] 두번째 방탈출 바람,우리는 그저 바람</a><span>2022.11.09</span></li>
<li><a href="">[롯데월드X플레이더월드] 모바일 방탈출 화연 : 조선 최고</a><span>2022.02.22</span></li>
<li><a href="">[할인] LG U+ 멥버십 우대 안내</a><span>2022.03.16</span></li>
</ul>
<p class="more"><a href="">더보기<img src="./images/newsMoreBt_icon.png" alt=""></a></p>
</article>
<article class="box box2">
<ul>
<li>
<a href="">
<strong>이용문의</strong>
</a>
</li>
<li>
<a href="">
<strong>오시는길</strong>
</a>
</li>
</ul>
<div>
<p>우리 고유의 옛멋과 <br>
품격을 선도합니다</p>
<p class="more"><a href="">전통혼례 바로가기<img src="./images/mainCon3_banner_icon.png" alt=""></a></p>
</div>
</article>
</div>
</div>
</div>
</section>
</main>
<footer id="footer">
<div class="inner">
<div class="top">
<a href="">
<img src="./images/top_btn.png" alt="">
</a>
</div>
<p>
<a href="">
롯데월드 소개
</a>
<a href="">
기업 제휴 및 입점 문의
</a>
<a href="">
이용약관
</a>
<a href="">
개인정보처리방침
</a>
<a href="">
사이트맵
</a>
</p>
<p>
<span>서울특별시 송파구 올림픽로 240 호텔롯데 롯데월드</span>
<span>대표자 : 최홍훈</span>
</p>
<p>
<span>사업자등록번호 : 219-85-00014</span>
<span>통신판매업신고번호 : 송파 제5513호</span>
<span>전화 : 1661-2000</span>
</p>
<p>
<span>COPYRIGHT 2018 LOTTEWORLD. ALL RIGHTS RESERVED.</span>
</p>
</div>
<div class="family">
<a href="" class="title"></a>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
#wrap {
width: 100%;
min-width: 1600px;
}
.inner {
width: 1180px;
margin: auto;
position: relative;
box-sizing: border-box;
}
/* 공통 inner */
#header {
width: 100%;
}
#header .inner {
height: 120px;
}
#header .inner h1 {
position: absolute;
top: 20px;
left: 0;
}
#header .inner h1 a {}
#header .inner ul {}
#header .inner ul.top-menu {
position: absolute;
right: 0;
top: 10px;
}
#header .inner ul.top-menu li {
position: relative;
display: inline-block;
margin-right: 20px;
}
#header .inner ul.top-menu li:last-child {
margin-right: 30px;
}
#header .inner ul.top-menu li:first-child:after {
content: "";
position: absolute;
display: block;
width: 1px;
height: 15px;
background: #000;
top: 50%;
transform: translateY(-50%);
right: -10px;
}
#header .inner ul.top-menu li a {
font-size: 20px;
}
#header .inner ul.top-menu li:last-child a {
font-weight: 700;
}
#header .inner nav {}
#header .inner nav.nav {
position: absolute;
left: 320px;
top: 55px;
}
#header .inner nav.nav ul {}
#header .inner nav.nav ul.gnb {
display: flex;
}
#header .inner nav.nav ul.gnb li {
margin-right: 75px;
}
#header .inner nav.nav ul.gnb li a {
font-size: 20px;
font-weight: 700;
}
/* //header */
#visual {
width: 100%;
height: 720px;
position: relative;
background: lightcyan;
}
#container {}
#content {}
.main {}
.main .con-box {
width: 100%;
}
.main .con-box .inner {
padding: 120px 0;
}
.main .con-box h2 {
font-size: 40px;
text-align: center;
font-weight: 300;
margin-bottom: 10px;
}
.main .con-box h2 + p {
font-size: 18px;
text-align: center;
margin-bottom: 50px;
}
.main .con1 {
background: lightgoldenrodyellow;
}
.main .con1 .inner {
padding: 25px 0;
height: 80px;
background: lightsalmon;
}
.main .con2 {
background-repeat: no-repeat;
background-position: 0 0;
background-image: url(../images/mainCon1_bg.jpg);
background-size: cover;
}
.main .con2 .inner h2 {
color: white;
}
.main .con2 .inner p {
color: white;
}
.main .con2 .inner ul {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.main .con2 .inner ul li {
width: 574px;
}
.main .con2 .inner ul li a {
position: relative;
display: block;
}
.main .con2 .inner ul li a::after {
content: "";
display: block;
width: 574px;
height: 510px;
border: 3px solid white;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
transition: 0.6s; opacity: 0;
}
.main .con2 .inner ul li a:hover::after {
opacity: 1;
}
.main .con2 .inner li img {
}
.main .con2 .inner li strong {
display: block;
font-size: 25px;
text-align: center;
color: white;
font-weight: 500;
padding: 25px 0;
}
.main .con3 {
background-repeat: no-repeat;
background-position: 0 0;
background-image: url(../images/mainCon2_bg.jpg);
background-size: cover;
}
.main .con3 .inner h2 {}
.main .con3 .inner p {}
.main .con3 .inner ul {
display: flex;
justify-content: space-around;
}
.main .con3 .inner ul li {
}
.main .con3 .inner ul li a {
}
.main .con3 .inner ul li:hover {
box-shadow: 15px 15px 30px grey;
}
.main .con3 .inner ul li:hover strong {
transition: 0.1s;
background: #14875e;
color: white;
}
.main .con3 .inner li img {
}
.main .con3 .inner li strong {
display: block;
font-size: 25px;
text-align: center;
font-weight: 500;
padding: 25px 0;
background: white;
}
.main .con4 {
}
/* .main .con4 .inner {
}
.main .con4 .inner .box {
display: flex;
}
.main .con4 h2 {}
.main .con4 p {}
.main .con4 .inner .box .left {
background: lightblue;
}
.main .con4 .inner .box .left h3 {}
.main .con4 .inner .box .right {
background: lightgray;
}
.main .con4 .inner .box .right ul {}
.main .con4 .inner .box .right ul li {}
.main .con4 .inner .box .right ul li a {}
.main .con4 .inner .box .right ul li a img {}
.main .con4 .inner .box .right ul li a h4 {} */
.main .con4 .inner {}
.main .con4 .inner h2 {}
.main .con4 .inner p {}
.main .con4 .inner .news {
display: flex;
}
.main .con4 .inner .news .box1 {
margin-right: 10px;
border: 1px solid black;
position: relative;
width: 575px;
height: 350px;
padding: 20px;
}
.main .con4 .inner .news .box1 h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 30px;
}
.main .con4 .inner .news .box1 h3 a {}
.main .con4 .inner .news .box1 a p {
margin-bottom: 50px;
}
.main .con4 .inner .news .box1 a span {
margin-bottom: 20px;
padding-bottom: 50px;
display: block;
border-bottom: 1px solid #000;
}
.main .con4 .inner .news .box1 ul {}
.main .con4 .inner .news .box1 ul li {
position: relative;
}
.main .con4 .inner .news .box1 ul li a {
display: inline-block;
width: 400px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
font-size: 15px;
line-height: 2;
}
.main .con4 .inner .news .box1 ul li span {
font-size: 20px;
position: absolute;
top: 0;
right: 0;
}
.main .con4 .inner .news .box1 p {
}
.main .con4 .inner .news .box1 p.more {
position: absolute;
top: 20px;
right: 20px;
}
.main .con4 .inner .news .box1 .more a {}
.main .con4 .inner .news .box1 .more a img {
margin-top: 1px;
margin-left: 10px;
}
/* //box1 */
.main .con4 .inner .news .box2 {
}
.main .con4 .inner .news .box2 ul {
display: flex;
}
.main .con4 .inner .news .box2 li {
border: 1px solid black;
margin-bottom: 10px;
margin-right: 18px;
width: 275px;
height: 190px;
position: relative;
}
.main .con4 .inner .news .box2 ul li:nth-child(1) {
background-image: url(../images/mainCon3_util1_img1.png);
background-position: 50% 30%;
background-repeat: no-repeat;
}
.main .con4 .inner .news .box2 ul li:nth-child(2) {
background-image: url(../images/mainCon3_util1_img2.png);
background-position: 50% 30%;
background-repeat: no-repeat;
}
.main .con4 .inner .news .box2 ul li a {
position: absolute;
font-size: 20px;
left: 50%;
top: 75%;
transform: translate(-50%, -50%);
}
.main .con4 .inner .news .box2 ul li a strong {
font-weight: 700;
}
.main .con4 .inner .news .box2 div {
width: 600px;
height: 190px;
background-image: url(../images/mainCon3_banner.jpg);
background-position: 0 0;
background-repeat: no-repeat;
}
.main .con4 .inner .news .box2 div p {
padding-top: 30px;
padding-left: 30px;
color: white;
font-size: 30px;
}
.main .con4 .inner .news .box2 div .more {
display: flex;
padding-top: 5px;
align-items: center;
}
.main .con4 .inner .news .box2 div .more a {
color: white;
font-size: 18px;
font-weight: 700;
}
.main .con4 .inner .news .box2 div .more a img {
padding-top: 6px;
padding-left: 5px;
}
#footer {
height: 300px;
background: limegreen;
}
#footer .inner {
height: 300px;
background: skyblue;
}
#footer .inner .top {}
#footer .inner .top a {}
#footer .inner .top a img {}
#footer .inner p {
}
#footer .inner p a {
font-size: 20px;
margin-right: 20px;
}
.main .con2 .inner ul li a::after {
content: "";
display: block;
width: 574px;
height: 510px;
border: 3px solid white;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
transition: 0.6s; opacity: 0;
}
.main .con2 .inner ul li a:hover::after {
opacity: 1;
}
after와 hover를 사용해 마우스를 올렸을 때 3px 두께의 흰색 boder가 0.6초 만에 opacity 0에서 1로 transition 하게 되어 눈에 보이게 된다.
.main .con3 .inner ul li:hover {
box-shadow: 15px 15px 30px grey;
}
.main .con3 .inner ul li:hover strong {
transition: 0.1s;
background: #14875e;
color: white;
}
마찬가지로 li 안에 마우스를 올리게 되면 strong 부분의 background는 초록색, color는 흰색으로 바뀌게 되고 li 자체에는 회색 그림자가 생기게 만들었다.