Dev log - 15, 덴마크 쇼핑몰 카피캣 실습 #1

박강산·2021년 7월 16일

대구AI스쿨 - 개발일지

목록 보기

15/44

학습한 내용

덴마크 쇼핑몰 실습 - 기본 세팅

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">
	<link rel="stylesheet" type="text/css" href="css/animation.css">
	<link rel="stylesheet" type="text/css" href="css/mobile.css">
</head>

CSS 문서

/* Default 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;
}

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;
}

덴마크 쇼핑몰 실습 - 상단 영역 작업

이미지를 넣을 때는 img 태그로 넣는 png나 jpg 등의 확장자 말고도 svg 라는 태그로 사용하는 이미지가 있음
* 을 사용하면, 모든 태그에 CSS 속성을 적용시킬 수 있음
폰트 굵기(font-weight) 는 100 단위로 올라감
header 태그에 높이 영향을 주기 위해 overflow: hidden 속성 사용
y축 중앙 정렬은 top: 50%, transform: translateY(-50%) 적용 (실무에서 자주 쓰임)
1em = 16px
position: absolute 속성을 사용할 때는, width 값을 정확히 지정해줘야함
좌우 배치 방법은 다양한 방법으로 활용이 가능함

HTML 문서

<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>

CSS 문서

/* 상단 영역 작업 */
#header h1 {
	background-color: yellow;
}

#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;
	/*border: solid 5px red;*/
}

#header .buttons .menu-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: 80%;

		top: 0;
		left: 0;

		z-index: 99999;
	}

	#header h1 {
		width: 50%;
	}

	#header h1 .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;
	}
}

덴마크 쇼핑몰 실습 - 메인 영역 작업

미디어쿼리 두 개를 쓴 이유는, header 태그와 main 태그의 레이아웃이 변경되는 브라우저 최소 크기가 다르기 때문

HTML 문서

<body>
	<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>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product 2</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product 3</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product 4</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product 5</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
			<li>
				<a href="#" class="product-group-link">
					<article>
						<h2 class="link-text">Product 6</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
		</ul>
	</main>
</body>

CSS 문서

/*메인 영역 작업*/
.main-content .product-group-link {
	position: relative;
	display: block;
	/*float: left;*/

	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: 25pxs;
}

@media (min-width:  47em) {
	.main-content {
		padding-top: 80px;
	}
}

@media (min-width: 60em) {
	.main-content {
		overflow: hidden;
	}

	.main-content .product-group-link {
		float: left;
		width: 50%;
		height: 28.125%;
	}
}

덴마크 쇼핑몰 실습 - 하단 영역 작업

class 를 지을 때, 역할 구분을 명확하게 하여 활용할 수 있게 만들어야 함 (예시로 payment-icon one, two, three 등)
class 작업 중 띄어쓰기를 하지 않고 붙여서 작업하면, 앞 클래스를 같이 가지고 있는 뒷 클래스를 말함 (예시로 .payment-icon.one 은 payment-icon class 를 가지고 있는 것 중에 one class 를 같이 가지고 있는 것을 말함)
y축으로 레이아웃이 겹치지 않게 배치하려면, padding 등 으로 공간을 확보해줘야함

HTML 문서

<body>
	<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>
</body>

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;
}

#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: 42px;
	}

	#footer .right-methods {
		float: right;

		width: 50%;
		background-color: yellowgreen;

		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, CSS 실무팁

a 태그의 href 에 url 주소, 다른 html파일, id 를 넣을 수 있음 (class 는 불가능)

id 값을 넣으면, 해당 id가 있는 곳의 최상단으로 바로 이동됨 (id 는 한 파일 내에서 단 하나만 존재해야함)
어떤 역할을 하는 class 를 CSS에 만들어 놓고, 그 class를 HTML 태그에 추가하는 방식으로 코드의 분량을 줄일 수 있음

HTML 문서

<h2 class="ellipsis"></h2>

CSS 문서

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

white-space: nowrap - 자동으로 줄바꿈 현상을 해제시켜주는 속성, 가로 스크롤이 생길 수 있음
text-overflow: ellipsis - 말 줄임표

HTML 문서

<h1 class="ellipsis m-b-100"></h1>

CSS 문서

.m-b-10 {
	margin-bottom: 10px;
}
.p-b-100 {
	padding-top: 100px;
}
.m-b-10 {
margin-bottom: 10px;
}
.p-b-100 {
padding-top: 100px;
}

margin-bottom, padding-top 등을 미리 지정해주고, HTML에 적용 가능

학습한 내용 중 어려웠던 점 또는 해결못한 것들

li 태그 font-size: 0 속성 질의응답 필요
overflow: hidden 속성 복습 필요

해결방법

overflow: hidden 강의 복습을 통해, 자식이 부모 태그에 길이 영향을 주는 태그 임을 다시 한번 복습함.
다른 사람과 멘토님의 질의응답을 보고, 인터넷 폰트 설정이나, 따로 font-size 등 을 조절하여 해결하면 됨을 배웠음.

학습 소감

오늘은 저번에 연습했던 실습 사이트 보다는 더욱더 간단한 문법들과 태그들로 이루어졌던 것 같음. 확실히 모바일 버전을 먼저 완성시킨 후, 데스크탑 버전으로 확장시키는 방법을 사용하니, 웹사이트 구조를 간단하게 완성시킬 수 있는 것 같았음.

오늘 배운 방법들을 이용하여, 모바일 버전을 완성 시킨 후에, 데스크탑 버전을 확장시키는 연습을 계속 해봐야겠음

박강산

안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.

Dev log - 15, 덴마크 쇼핑몰 카피캣 실습 #1

대구AI스쿨 - 개발일지

학습한 내용

덴마크 쇼핑몰 실습 - 기본 세팅

덴마크 쇼핑몰 실습 - 상단 영역 작업

덴마크 쇼핑몰 실습 - 메인 영역 작업

덴마크 쇼핑몰 실습 - 하단 영역 작업

기타 HTML, CSS 실무팁

학습한 내용 중 어려웠던 점 또는 해결못한 것들

해결방법

학습 소감

Dev log - 14, 키즈가오 카피캣 실습 #3

Dev log - 16, 네이버 메인 카피캣 실습 #1

0개의 댓글