8강 덴마크쇼핑몰(전체)
학습 내용
덴마크 쇼핑몰 카피캣 연습
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/186x18">
</a>
</h1>
<nav class="buttons">
<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>
</body>
</html>
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
overflow-x: hidden;
font-family: sans-serif;
color: #585858;
}
li {
list-style: none;
}
h1, h2, h3, h4, h5, h6, p {
font-weight: 400;
}
a {
text-decoration: none;
}
img {
vertical-align: middle;
}
span {
display: block;
}
별 (*) : 모든 html 태그에 적용
font의 단위는 100단위로 올라감. 높을수록 굵어진다.
mobile
#header h1 {
background-color: #ffffff;
}
#header h1 .logo {
position: relative;
display: block;
width: 100%;
height: 65px;
background-color: blue;
}
logo 영역 공간 크기 적용
#header .logo img {
position: absolute;
top: 0;
margin-top: 23px;
left: 50%;
margin-left: -93px;
}
#header .buttons li {
position: relative;
float: left;
width: 33.33%;
height: 65px;
border: solid 5px red;
}이렇게만 해주면 li 태그의 공간의 크기를 nav 태그가 인식을 못해서 header의 크기가 h1 공간의 크기만큼만 인식이 되기 때문에,
#header .buttons ul {
overflow: hidden;
}overflow hidden 넣어주면 높잇값 인식 가능하다
#header .buttons li:nth-child(1) .menu-button {
background-color: yellow;
}
#header .buttons li:nth-child(2) .menu-button {
background-color: pink;
}
#header .buttons li:nth-child(3) .menu-button {
background-color: green;
}y축 중앙정렬
#header .buttons li .menu-button img {
position: relative;
height: 20px;
top: 50%;
transform: translateY(-50%);
}
pc버전
/* 1em = 16px; */
@media (min-width: 47em) {
#header {
position: fixed;
width: 100%;
height: 80px;
top: 0;
left: 0;
z-index: 99999;
}
#header h1 {
width: 50%;
}
#header h1 .logo {
width: 280px;
height: 80px;
}
#header .logo img {
margin-top: 30px;
}
}
h1 logo 부분말고 h1 을 blue로 설정
#header .buttons {
position: absolute;
width: 50%;
left: 50%;
top: 0;
}
#header .buttons li {
height: 80px;
}html
<main role="main" class="main-content">
<ul class="product-group">
<li>
<a href="#" class="product-group-link">
<article>
<h2 class="link-text">Product 1</h2>
<img src="https://via.placeholder.com/1000x563">
</article>
</a>
</li>css
.main-content .product-group-link {
position: relative;
display: block;
/*float: left;*/
width: 100%;
height: 56.25%;
overflow: hidden;
}
.main-content .product-group-link img {
width: 100%;
height: 100%;
}
추가
.main-content .product-group-link {
border: solid 10px red;
}.main-content .product-group .link-text {
position: absolute;
left: 25px;
bottom: 25px;
color: balck;
font-size: 25px;
}
@media (min-width: 60em) {
.main-content .product-group-link {
float: left;
width: 50%;
height: 28.125%;
}
}
pc버전은 좌우배치 모바일은 일렬
@media (min-width: 47em) {
.main-content {
padding-top: 80px;
}
}
공백을 넣어서 레이어 겹침 해결
html
<footer id="footer">
<nav class="left-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>
css
#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;
}
css
#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;
}
css
#footer .to-top-button {
position: absolute;
display: block;
width: 66px;
height: 66px;
background-color: green;
bottom: 0;
left: 50%;
margin-left: -33px;
}
아까 padding-bottom: 66px; 넣어준 것을 이제 쓰임새를 알게 됨
초록박스가 배치될 때 붙지 않고 적당한 거리를 두게 된다.
@media (min-width: 60ex) {
#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: greenyellow;
margin: 0;
padding-top: 32px;
padding-right: 40px;
text-align: right;
}
#footer ul, #footer li, #footer h3 {
display: inline-block;
vertical-align: middle;
}
#footer .left-nav a {
font-size: 14px;
padding: 0 5px;
}
#footer .right-methods li {
padding: 0 4px;
}
#footer h3 {
padding-right: 10px;
}
#
}
끝
html
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Trhee</div>css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#one, #two, #three {
widows: 100%;
height: 800px;
}
#one {
background-color: yellow;
}
#two {
background-color: pink;
}
#three {
background-color: gray;
}여기서 html 부분
<ul>
<li><a href="https://www.naver.com">one</a></li>
<li><a href="contact.html">two</a></li>
<li><a href="#three">three</a></li>
</ul>이렇게 변경했을 때
three 부분을 클릭하면 현재 화면의 three 부분으로 이동하게 되는데 보통 웹사이트에서 스크롤을 내렸을 때 top 부분 눌렀을 때 이동하는 원리인 것 같다.
html
<p class="text-box">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
</p>css
.text-box {
width: 200px;
height: 200px;
background-color: yellow;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}-
white-space: nowrap;
노란 박스를 벗어난 영역을 포함하여 글자가 한 줄로 쭉 나타난다. -
overflow: hidden;
노란 박스를 벗어난 영역은 글자가 표시되지 않는다. -
text-overflow: ellipsis;
노란박스에 이어진 글자부분에 말줄임표(...)가 나타나게 된다.
html
<h1 class="ellipsis">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
</h1>
<h2 class="ellipsis">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라만세
</h2>css
h1 {
background-color: pink;
}
h2 {
background-color: gray;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}각각의 태그에 대한 설정을 하지 않고 class를 만들어주는 방법도 있다.
html
<h1 class="ellipsis m-b-100">css
.m-b-10 {
margin-bottom: 10px;
}
.m-b-15 {
margin-bottom: 15px;
}
.m-b-20 {
margin-bottom: 20px;
}
.m-b-100 {
margin-bottom: 100px;
}css 코드 보지 않아도 margin bottom이 100 설정된 것 알 수 있다.
css
.p-b-100 {
}
.p-t-50 {
}
.p-l-10 {
}
.p-r-10 {
}축약어는 다양하다.
어려웠던 점 및 해결 방법
오늘은 어려운 부분이 없었다. 어려웠던 부분 보다는 평소 웹사이트를 사용하면서 이 기능은 어떻게 적용되는건가 궁금했던 점이 해소되었고, 축약어를 통해서 간단하게 표시를 하고 css를 따로보지 않아도 알게 되는 부분들이 있다는 것을 새로 배웠다.
학습 소감
덴마크 사이트는 생각보다 만드는 과정이 어렵지 않았다. 그래도 혼자 만들려고 하면 막히는 부분이 많을 것이라는 생각이 들었다. 주말에는 키즈가오 복습해야하니까 저녁에 혼자 다시 만들어보면서 내가 잘 모르는 부분을 찾아보도록 해야겠다.
0개의 댓글
관련 채용 정보
