코딩 복습
2020/06/24 반응형 웹 메인사이트 연습
개발경범
2020. 6. 24. 17:59
<HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/style.js"></script>
<title>Document</title>
</head>
<body>
<div id="wrap">
<header>
<div class="top">
<h1 class="logo">
<a href="#"><img src="img/logo.png" alt=""></a>
</h1>
<a href="#" class="menu_btn"></a>
<nav>
<ul class="gnb">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</nav>
</div>
<div class="container"></div>
<div class="main_img">
<img src="img/main_box.png" alt="메인" class="visual">
</div>
</div>
</header>
<section class="sec01">
<div class="container">
<h2>Section1</h2>
<div class="cont">
<div class="sec01_left">
<img src="img/sec01.jpg" alt="">
</div>
<div class="sec01_right">
<h3>Article</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</section>
<section class="sec02">
<div class="container">
<h2>Section2</h2>
<ul>
<li><a href="#"><img src="img/sec02_01.jpg" alt=""></a></li>
<li><a href="#"><img src="img/sec02_02.jpg" alt=""></a></li>
<li><a href="#"><img src="img/sec02_03.jpg" alt=""></a></li>
</ul>
</div>
</section>
<footer>
<div class="container">
<div class="f_logo">
<img src="img/footer_logo.png" alt="">
</div>
<div class="f_right">
<ul class="ft_top">
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">회원가입</a></li>
<li><a href="#">라이센스</a></li>
</ul>
</div>
<p>
<span>
대전광역시 서구 둔산동 1160번지 오라클빌딩 10층</span>
<span> 042-719-8383</span>
</p>
<p>스마트 컴퍼니 reserved.</p>
</div>
</footer>
</div>
</body>
</html><CSS>
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
a {
color: inherit;
text-decoration: none;
}
ul,
li {
list-style: none;
}
img {
/* border: 0; */
/* display: block; */
}
/* 반응형 초기화 */
body {
overflow-x: hidden;
}
img {
width: 100%;
}
.container {
max-width: 1330px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
/* 컨텐츠 */
header {
width: 100%;
min-height: 50vw;
/*가로크기의 반만큼*/
background: url(../img/main_bg.jpg) no-repeat 50% center;
background-size: cover;
position: relative;
}
.top {
background: rgba(255, 255, 255, 0.3);
height: 95px;
padding: 0 20%;
/* display: flex;
justify-content: space-around; */
}
.top h1 {
float: left;
max-width: 150px;
width: 20%;
margin-top: 20px;
margin-right: 10%;
}
header nav {
float: right;
min-width: 60%;
margin-top: 30px;
}
header nav ul li {
float: left;
width: 25%;
}
.menu_btn {
display: none;
}
header nav ul li a {
color: white;
font-weight: bold;
}
header .main_img {
width: 50%;
margin: 0 auto;
/* margin-top: 8vw; */
padding: 100px 0 150px;
}
.sec01{
padding: 100px 0;
}
section h2 {
color: #3090dd;
text-align: center;
font-size: 3.5em;
font-size: 3.5rem;
margin-bottom: 70px;
}
section .sec01_left {
float: left;
width: 49%;
margin-right: 1%;
}
section .sec01_right {
float: right;
width: 49%;
margin-left: 1%;
}
section .cont::after {
content: "";
clear: both;
display: block;
}
section .sec01_right h3{
font-size: 30px;
margin-top: 30px;
margin-bottom: 20px;
}
section .sec01_right p {
font-size: 20px;
line-height: 150%;
}
.sec02 {
width: 100%;
background-color: #cfedff;
padding: 100px 0;
}
.sec02 ul li{
width: 30%;
float: left;
margin: 0 1.5%;
}
.sec02 ul::after{
content: "";
clear: both;
display: block;
}
footer{
width: 100%;
background-color: #3099db;
padding: 30px;
}
footer .f_logo{
width: 10%;
float: left;
margin-top: 30px;
margin-right: 10%;
}
footer .f_right{
width: 80%;
float: right;
}
footer .container::after{
content: "";
display: block;
clear: both;
}
footer ul li{
float: left;
margin-right: 40px;
margin-bottom: 10px;
}
footer .ft_top::after{
content: "";
display: block;
clear: both;
}
footer ul li a{
color: white;
font-weight: bold;
}
footer p{
color: #b2e1ff;
}
footer span{
color: #b2e1ff;
}
footer span:first-child{
margin-right: 30px;
}
@media all and (max-width:1200px){
.cont > div{
float: none;
width: 100%;
margin: 0;
}
}
@media all and (max-width:768px){
header .top {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.2);
z-index: 999999999999999999;
}
.menu_btn{
display: block;
width: 40px;
height: 40px;
background: url(../img/menu_btn.png) no-repeat center center;
position: absolute;
right: 40px;
top: 30px;
text-indent: -9999999999;
}
header nav {
position: fixed;
min-width: 100%;
float: none;
top: 95px;
left: 0;
background: white;
padding: 30px 0;
margin-top: 0;
display: none;
}
header nav ul li{
width: 100%;
float: none;
display: block;
text-align: center;
line-height: 3;
cursor: pointer;
}
header nav ul li:hover{
background-color: cornflowerblue;
}
header nav ul li a{
color: black;
}
header .main_img {
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50% ,-50%);
}
.sec02 ul li{
float: none;
width: 100%;
padding: 10px 0;
margin-left: 0;
margin-right: 0;
}
footer .f_logo {
float: none;
width: 100%;
}
footer .f_logo img{
width: 150px;
margin: 0 auto;
display: block;
}
footer .f_right {
float: none;
width: 100%;
margin-top: 30px;
text-align: center;
}
footer .ft_top {
display: none;
}
footer span {
width: 100%;
display: block;
margin-bottom: 10px;
}
footer p span:first-child{
margin-right: 0;
}
}
<JS>
$(document).ready(function(){
$(".menu_btn").click(function(){
$("nav").stop().slideToggle();
});
});