학습한 내용
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="덴마크 쇼핑몰 카피캣 연습">
<meta name="author" content="서범규">
<meta name="keywords" content="html, css, tutorial">
<title>Helbak</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header id="header">
<h1>
<a href="#" class="logo">
<img src="https://via.placeholder.com/180x18">
</a>
</h1>
<nav>
<ul>
<li>
<a href="#" class="menu-button">
<img src="https://via.placeholder.com/22x20">
</a>
</li>
<li>
<a href="#" class="menu-button">
<img src="https://via.placeholder.com/22x20">
</a>
</li>
<li>
<a href="#" class="menu-button">
<img src="https://via.placeholder.com/22x20">
</a>
</li>
</ul>
</nav>
</header>
<main role="main" class="main-content">
<ul class="product-group">
<li>
<a href="#" class="product-group-list">
<article>
<h2 class="link-text">Product 1</h2>
<img src="https://via.placeholder.com/1000x563">
</article>
</a>
</li>
</ul>
<li>
<a href="#" class="product-group-list">
<article>
<h2 class="link-text">Product 2</h2>
<img src="https://via.placeholder.com/1000x563">
</article>
</a>
</li>
</ul>
<li>
<a href="#" class="product-group-list">
<article>
<h2 class="link-text">Product 3</h2>
<img src="https://via.placeholder.com/1000x563">
</article>
</a>
</li>
</ul>
<li>
<a href="#" class="product-group-list">
<article>
<h2 class="link-text">Product 4</h2>
<img src="https://via.placeholder.com/1000x563">
</article>
</a>
</li>
<li>
<a href="#" class="product-group-list">
<article>
<h2 class="link-text">Product 5</h2>
<img src="https://via.placeholder.com/1000x563">
</article>
</a>
</li>
<li>
<a href="#" class="product-group-list">
<article>
<h2 class="link-text">Product 6</h2>
<img src="https://via.placeholder.com/1000x563">
</article>
</a>
</li>
</ul>
</main>
<footer id="footer">
<nav>
<ul>
<li><a href="#">Terms and conditions</a></li>
<li><a href="#">Cookies</a></li>
</ul>
</nav>
<nav class="right-methods">
<h3>Payment Methods</h3>
<ul>
<li><span class="payment-icon one"></span></li>
<li><span class="payment-icon two"></span></li>
<li><span class="payment-icon three"></span></li>
<li><span class="payment-icon four"></span></li>
<li><span class="payment-icon five"></span></li>
</ul>
</nav>
<a href="#" class="to-top-button"></a>
</footer>
</body>
</html>style
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
overflow-x: hidden;
font-family: sans-serif;
color: #585858;
}
h1, h2, h3, h4, h5, h6, p {
font-weight: 400;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: middle;
}
span {
display: block;
}
#header h1 {
background-color: #ffffff;
}
#header h1 .logo {
position: relative;
display: block;
width: 100%;
height: 65px;
background-color: yellow;
}
#header .logo img {
position: absolute;
top: 0;
margin-top: 23px;
left: 50%;
margin-left: -93px;
}
#header .buttons ul {
overflow: hidden;
}
#header .buttons li {
position: relative;
float: left;
width: 33.33%;
height: 65px;
}
#header .buttons .munu-button {
display: block;
width: 100%;
height: 100%;
text-align: center;
}
#header .buttons li:nth-child(1) .menu-button {
background-color: blue;
}
#header .buttons li:nth-child(2) .menu-button {
background-color: pink;
}
#header .buttons li:nth-child(3) .menu-button {
background-color: green;
}
#header .buttons li .menu-button img {
position: relative;
height: 20px;
top: 50%;
transform: translateY(=50%);
}
@media (min-width: 47em) {
#header {
position: fixed;
width: 100%;
height: 80px;
top: 0;
left: 0;
z-index: 99999;
}
#header h1 {
width: 50%;
}
#header .logo {
width: 280px;
height: 80px;
}
#header .logo img {
margin-top: 30px;
}
#header .buttons {
position: absolute;
width: 50%;
left: 50%;
top: 0;
}
#header .buttons li {
height: 80px;
}
}
.main-content .product-group-link {
position: relative;
display: block;
width: 100%;
height: 56.25%;
border: solid 10px red;
overflow: hidden;
}
.main-content .product-group-link img {
width: 100%;
height: 100%;
}
.main-content .product-group-link-text {
position: absolute;
left: 25px;
bottom: 25px;
color: black;
font-size: 25px;
}
@media (min-width: 47em) {
.main-content {
overflow: hidden;
}
.main-content .product-group-link {
float: left;
width: 50%;
height: 28.125%;
}
}
#footer {
position: relative;
background-color: yellow;
padding-bottom: 66px;
}
#footer .left-nav {
padding-top: 20px;
text-align: center;
}
#footer .left-nav li {
padding: 5px 0;
}
#footer .right-methods {
text-align: center;
margin-bottom: 20px;
margin-top: 30px;
}
#footer .right-methods li {
display: inline-block;
padding: 7px 4px;
}
#footer .right-methods .payment-icon {
display: inline-block;
width: 30px;
height: 20px;
}
#footer .right-methods .payment-icon.one {
background-color: black;
}
#footer .right-methods .payment-icon.two {
background-color: red;
}
#footer .right-methods .payment-icon.three {
background-color: pink;
}
#footer .right-methods .payment-icon.four {
background-color: blue;
}
#footer .right-methods .payment-icon.five {
background-color: gray;
}
#footer .to-top-button {
position: absolute;
display: block;
width: 66px;
height: 66px;
background-color: greenyellow;
bottom: 0;
left: 50%;
margin-left: -33px;
}
@media(min-width: 60em) {
#footer {
height: 66px;
}
#footer .left-nav {
float: left;
width: 50%;
background-color: yellow;
text-align: left;
padding-top: 32px;
padding-left: 40px;
}
#footer .right-methods {
float: right;
width: 50%;
background-color: yellowgreen;
margin: 0;
padding-top: 32px;
padding-right: 40px;
text-align: right;
}
}
#footer ul, #footer ul, #footer h3 {
display: inline-block;
vertical-align: middle;
}
#footer .left-nav a {
font-size: 14px;
padding: 0 5px;
}
#footer .right-methods li {
padding: 0;
}
#footer h3 {
padding-right: 10px;
}학습한 내용 중 어려웠던 점 또는 해결못한 것들
작업을 저장하면서 계속 확인을 하고 있지만 어떤 부분에서 틀렸는지 찾기가 어려웠습니다. 그리고 사소한 거지만 작업을 하다가 스페이스바를 누르면 뒤에 있는 내용들이 밀리는 것이 아니라 지워지게 되는데 이런 현상에 대한 해결법을 아직 모르겠습니다.
해결방법 작성
직접적인 해결방법은 아직까지 모르겠습니다. 다만 강사님께서 작업을 끝마치고 나서 알려주시는 실무에 대한 팁들이 교육이 끝나고 작업을 할 때 하나씩 유용하게 적용할 수 있을것 같습니다.
학습 소감
다른 사이트들을 모델로 해서 따라 만드는 작업이 재미있으면서도 생각보다 많이 힘이 들었습니다. 아직까지 오타를 찾아 수정하는 것에서 시간이 많이 걸려서 그런거 같습니다.
