ODaram
2022. 10. 12. 17:48
<!DOCTYPE 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>레이아웃1</title>
<link rel="shortcut icon" href="imgs/favicon.ico">
<link rel="stylesheet" href="css/layout1.css">
</head>
<body>
<div class="container">
<header>
<h1>lo<span class="deepskyblue">go</span></h1>
<nav>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</nav>
<ul class="topmenu">
<li><a href="#">login</a></li>
<li><a href="#">join</a></li>
<li><a href="#">sitemap</a></li>
</ul>
</header>
<section>
<div class="slide">
<div>
<h2>slide title</h2>
<p>불러 가슴속에 아침이 풀이 까닭이요, 봅니다. 소학교 프랑시스 하나에 남은 못 가을 별 이런 봅니다. 자랑처럼 걱정도 동경과 언덕 무엇인지 까닭입니다. 어머님, 부끄러운 없이 봅니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</div>
<div class="contents">
<article>
<h3>아티클의 타이틀</h3>
<div class="art-bg bg1"></div>
<p>묻힌 잠, 없이 새워 파란 까닭이요, 책상을 벌써 써 거외다. 나의 걱정도 책상을 이 이름을 남은 당신은 사랑과 봅니다.</p>
</article>
<article>
<h3>아티클의 타이틀</h3>
<div class="art-bg bg2"></div>
<p>이네들은 그리워 내일 말 별빛이 밤을 계십니다. 나는 한 이런 멀리 흙으로 별이 쓸쓸함과 까닭입니다. </p>
</article>
<article>
<h3>아티클의 타이틀</h3>
<div class="art-bg bg3"></div>
<p>별에도 사람들의 이웃 이름과, 언덕 가을 시인의 버리었습니다.</p>
</article>
<aside>
<ul>
<li><a href="#"><img src="imgs/aside-banner1.jpg" alt="배너"></a></li>
<li><a href="#"><img src="imgs/aside-banner2.jpg" alt="배너"></a></li>
<li><a href="#">aside menu1</a></li>
<li><a href="#">aside menu2</a></li>
</ul>
</aside>
</div>
</section>
<footer>
<h5>logo</h5>
<p>저작권, 주소</p>
<p>SNS 버튼</p>
</div>
</body>
</html>@charset "utf-8";
/* === reset === */
*{margin:0; padding:0; box-sizing: border-box;}
body {font-size:15px; color:#333; background:#E8E8E8}
ul li {list-style:none; float:left; }
a{
display:block; /*a:인라인박스라 block 형으로 무조건 바꿔주기*/
color:#333; text-decoration:none;
}
.container {width:1000px; margin:0 auto; background:#FFF;}
/* === header === */
header {
display:flex; justify-content:space-between; align-items:center;
height:80px; padding:0 30px; border-bottom:1px solid #D8D8D8;
/*background:orange;*/
}
header h1 {text-transform:uppercase; color:orange;} /*orange:메인 컬러*/
header h1 .deepskyblue {color:deepskyblue;} /*deepskyblue:메인 컬러*/
header nav li a {padding:5px 15px; text-transform:cpaitalize;}
header .topmenu li a {
padding:0px 10px; /*메인 메뉴 보다 좌우를 덜 띄운다.*/ text-transform:capitalize;
/* line-height:15px; */
border-right:1px solid #333; /*bar 만들기 */
}
header .topmenu li:last-child a { /*last child 사용 시 구조가 변경돼도, 코드변경 필요 X*/
padding-right:0;
border:0;
}
a:hover {color:deepskyblue;} /*로고와 색을 맞춰 일관성을 준다.*/
/* === section === */
/* === slider === */
.slide {
display:flex; justify-content:center; align-items:center;
height:450px;
background:skyblue;
}
.slide > div {width:500px;}
.slide h2 {font-size:58px; color:deepskyblue; text-align:center; text-transform:uppercase;}
.slide p {padding-top:20px; text-align:center;}
.slide a {
width:200px; height:50px; margin:50px auto;
text-align:center; line-height:50px;
border:1px solid deepskyblue; border-radius:25px;
}
.slide a:hover {color:#F2F2F2; background:deepskyblue;}
/* === contents === */
.contents {
display:flex; justify-content:space-between; align-items:center;
margin-top:50px; padding:0 30px;
}
.contents article, .contents aside {width:23%;}
.contents article {
height:320px; /*padding: 로고 왼쪽 띄운 만큼 띄우기*/
background:#F8F8F8; border-radius:10px;
box-shadow:0 5px 10px rgba(0,0,0,0.4), 2px 2px 5px rgba(0,0,0,0.1) inset;
}
.contents h3 {padding-top:30px; color:deepskyblue; text-align:center;}
.contents p {padding:15px; }
.contents .art-bg {height:100px; margin:20px 0 10px 0; }
.contents .bg1 {background:url(../imgs/bg1.jpg) no-repeat center center;}
.contents .bg2 {background:url(../imgs/bg2.png) no-repeat center center;}
.contents .bg3 {background:url(../imgs/bg3.jpg) no-repeat center center;}
aside li {float:none; padding:10px 0;}
aside li:nth-child(1), aside li:nth-child(2) {padding:0 10px;}
.contents aside img {width:100%; height:100px; border-radius:10px;}
/* === Footer === */
footer {
display:flex; justify-content:space-between; align-items:center;
height:100px; margin-top:50px; padding: 0 30px; background:darkblue;
}
footer h5, footer p {font-size:13px; color:#FFF;}
footer h5 {font-size:24px; text-transform:uppercase;}