Dev Log #15 - 7월 16일

Juhui_0304·2021년 7월 16일

Dev Log

목록 보기

15/49

오늘 학습한 내용

✅ 1. 덴마크 쇼핑몰 카피캣 개론
✅ 2-1. 덴마크 쇼핑몰 카피캣 - 상단 설계 도면
✅ 2-2. 덴마크 쇼핑몰 카피캣 - 상단 인테리어
✅ 2-3. 덴마크 쇼핑몰 카피캣 - 상단 pc버전
✅ 3-1. 덴마크 쇼핑몰 카피캣 - 제품영역 설계 도면
✅ 3-2. 덴마크 쇼핑몰 카피캣 - 제품영역 인테리어
✅ 3-3. 덴마크 쇼핑몰 카피캣 - 제품영역 pc 버전
✅ 4-1. 덴마크 쇼핑몰 카피캣 - 하단 설계 도면
✅ 4-2. 덴마크 쇼핑몰 카피캣 - 하단 인테리어
✅ 4-3. 덴마크 쇼핑몰 카피캣 - 하단 pc 버전
✅ 5. 실무팁 01
✅ 6. 실무팁 02
✅ 오늘의 학습 후기(어려웠던 점, 개선할 점)

1. 덴마크 쇼핑몰 카피캣 개론

덴마크 쇼핑몰
저작권 문제가 있을 수 있으므로 일부 이미지 부분 변경
레이아웃 연습 위주로 실습

2-1. 덴마크 쇼핑몰 카피캣 - 상단 설계 도면

반응형 웹사이트이므로 viwport를 디폴트 값으로 넣어주어야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

svg 확장명을 가지고 이미지를 만들 수 있다. svg 확장명의 경우 svg태그를 이용해서 이미지를 구성하고 있는 경우가 대부분이다.
* {margin: 0; padding: 0;}모든 html태그에 margin과 pdding 0을 적용하겠다는 의미이다.
padding으로 인해서 공간의 크기가 달라지는 것을 방지하기 위해 box-sizing: border-box;를 적용한다.
- 생활코딩 box-sizing
html, body {width: 100%; height: 100%;}는 디폴트 값으로 넣어주는 것이 좋다. body태그의 전체 영역을 개발자가 확인 할 수 있다.
font-weight은 100 ~ 900까지 있으며 숫자가 커질수록 폰트 굵기가 굵어진다.
a, span태그는 inline요소를 가지고 있다.

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

👉 style.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;
}

2-2. 덴마크 쇼핑몰 카피캣 - 상단 인테리어

미디어쿼리 바깥쪽에는 모바일 버전 작업, 미디어쿼리 안쪽에는 pc버전 작업을 했다.
그래서 먼저 모바일 버전 레이아웃 작업을 진행한다.

buttons의 li태그는 float를 속성을 가지고 있기 때문에 position 속성값이 3차원이다. 그래서 li태그의 부모인 ul태그에게 높이값을 영향을 줄 수 없기 때문에 ul태그는 높이값을 가지고 있지 않다. 따라서, nav태그 또한 높이값이 없다. 공간의 높이값이 없다. 최종적으로는 header의 크기가 h1공간의 크기 만큼만 인식이 된다. header의 높이가 세개의 메뉴버튼의 높이까지 포함된 수치로 전환이 되면 좋겠다. 그러면 어떻게 해야할까?
#header .buttons ul {
  overflow: hidden;
}
위를 적용할 경우, 자식의 높이값을 부모가 인식할 수 있다. 결과적으로 nav태그는 높이값 65px를 가지게 되고 header 태그는 130px(65px + 65px)를 가지게 된다.

img태그는 inline-block요소를 가지고 있다. text-align태그는 inline, inline-block 요소에만 적용이된다.

메뉴버튼 안 이미지 y축 중앙정렬 공식
#header .buttons li .menu-button img {
	position: relative;
	height: 20px;
	top: 50%;
	transform: translateY(-50%);
}
실무에서 자주 쓰이는 방식으로 꼭 기억해둘 것!

👉 style.css

/* 인테리어 */

#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.3333%;
	height: 65px;

}

#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%);
}

2-3. 덴마크 쇼핑몰 카피캣 - 상단 pc버전

덴마크 쇼핑몰이 em으로 작성했다. 1em = 16px;임을 기억할 것.
position이 absolute인 경우는 width값을 명확하게 규정해주어야한다. 그렇지 않으면 예상치 못한 공간의 크기가 잡힌다.

👉 style.css

/* pc - 상단 영역 */

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

	#header .buttons {
		position: absolute;
		width: 50%;

		left: 50%;
		top: 0;
	}

	#header .buttons li {
		height: 80px;
	}
}

3-1. 덴마크 쇼핑몰 카피캣 - 제품영역 설계 도면

main태그는 익스플로러에는 인식이 안되기 때문에 role태그를 함께 추가해야한다.

<main role="main" class="main-content"></main>

article 태그는 태그 안에 들어가는 대표 타이틀 영역이 필요하다.

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

3-2. 덴마크 쇼핑몰 카피캣 - 제품영역 인테리어

먼저 나오는 형제 태그 position이 3차원인 경우 레이어가 겹치게 된다.

.main-content .product-group-link .link-text {
	position: absolute;
}

👉 style.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 .link-text {
	position: absolute;

	left: 25px;
	bottom: 25px;

	color: black;
	font-size: 25px;

}

3-3. 덴마크 쇼핑몰 카피캣 - 제품영역 pc 버전

pc버전 header와 main영역의 레이어 겹침 현상 해결법
모바일에서 pc버전으로 화면 폭을 늘릴 때, header는 3차원 main은 2차원으로 main영역이 header영역 뒤로 들어가있다. 이를 해결하기 위해서는 사용한 코드는 다음과 같다.
@media (min-width: 47em) {
	.main-content {
		padding-top: 80px;
	}
}

👉 style.css

/* pc - 제품 영역 */

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

4-1. 덴마크 쇼핑몰 카피캣 - 하단 설계 도면

class를 여러 개를 기입을 했을 때 각 class별로 역할을 구분해준다면 더 명확하게 html 설계도면을 진행할 수 있다. 아래 코드를 예시로 들면, payment-icon은 이미지 사이즈를 one은 색상 지정 같은 경우이다.

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

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

4-2. 덴마크 쇼핑몰 카피캣 - 하단 인테리어

class를 연달아 기입하는 경우 여러개의 payment 아이콘들 중에서 one이라고 하는 class를 갖고있는 payment 아이콘을 선택해라는 말이다.
기존 인테리어 작업 시 #footer {padding-bottom: 60px;}를 기입한 이유는 #footer .to-top-button 아이콘 높이를 지정해 주는 것과 같다.

👉 style.css

/* footer */

#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: green;

	bottom: 0;
	left: 50%;
	margin-left: -33px;
}

4-3. 덴마크 쇼핑몰 카피캣 - 하단 pc 버전

x축으로 한줄 나열하는 방법

#footer ul, #footer li, #footer h3 {
		display: inline-block;
		vertical-align: middle;
}

👉 style.css

/* pc - 하단 영역 */

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


}

👉 지금까지 결과물(pc)

👉 지금까지 결과물(mobile 미디어쿼리 적용)

5. 실무팁 01

id

하나의 속성값만 들어가야한다.

여러개의 별명을 넣을 수 없다.(id 하나만)

하나의 문서 안에서 동일한 id가 있어서는 안된다. (혼란 방지, href 속성값으로 id가 들어갈 수 있기 때문에 아직 미정인 상태에서는 디폴트 값으로 #을 넣어주어야한다.)

href 속성값으로는 다음과 같이 들어 갈 수 있다.

url 주소

파일명(파일문서)

id 속성값 (class는 a태그로 결합이 안되므로 넣을 수 없다.)

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<ul>
		<li><a href="#one">one</a></li>
		<li><a href="#two">two</a></li>
		<li><a href="#three">three</a></li>
	</ul>

	<div id="one">One</div>
	<div id="two">Two</div>
	<div id="three">Three</div>


</body>
</html>

👉 css

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

#one, #two, #three {
	width: 100%;
	height: 800px;
} 

#one {
	background-color: yellow;
}

#two {
	background-color: pink;
}

#three {
	background-color: gray;
}

6. 실무팁 02

말줄임 표시

.text-box {
	width: 200px;
	height: 200px;
	background-color: yellow;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

말줄임 표시를 담당하는 css class를 미리 만들어 놓으면 나중에 html태그에서 그 class를 추가하게되면 말줄임기능이 자동으로 적용

👉 html

<p class="text-box ellipsis">
		Hello World Hello World Hello World Hello World Hello World Hello World Hello World
		Hello World Hello World Hello World Hello World Hello World Hello World Hello World
		Hello World Hello World Hello World Hello World Hello World Hello World Hello World
		Hello World Hello World Hello World Hello World Hello World Hello World Hello World
		Hello World Hello World Hello World Hello World Hello World Hello World Hello World
		Hello World Hello World Hello World Hello World Hello World Hello World Hello World
		Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>

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

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

👉 css

.text-box {
	width: 200px;
	height: 200px;
	background-color: yellow;

}

h1 {
	background-color: pink;
}

h2 {
	background-color: gray;
}

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

배치 작업을 할 때 사용되는 class명 사용 가능
.m-b-10 {
	margin-bottom: 10px;
}
.m-b-15 {
	margin-bottom: 15px;
}
.m-b-20 {
	margin-bottom: 20px;
}
.m-b-100 {
	margin-bottom: 100px;
}

👉 결과물

오늘의 학습 후기(어려웠던 점, 개선할 점)

오늘은 덴마크 쇼핑몰을 카피캣 해보는 실습시간을 가졌다. 분량이 어마무시하고 배웠던 개념이지만 적용 시 헷갈린 부분이 많았다...🔥 정리하자면,

오늘 수업 중 헷갈렸던 점은
첫번째로, box-sizing속성인데 이 부분을 디폴트 값으로 넣는 이유가 궁금해서 생활코딩을 통해 이해했다. css자체 width값은 content를 기준으로 잡아서 border값이 다르면 사이즈가 각기 다르게 나오는 점을 파악했다.
두번째로는, em단위이다. 1em = 16px;로 환산해서 미디어쿼리에 적용했는데 사실 눈에 익는 수치가 아니라서 사이즈 조정 시에 매우매우 헷갈렸다...😅

오늘 수업 중 어려웠던 점은
첫번째로, header높이를 로고와 메뉴버튼 모두 잡히게 끔 하는 점이었다. 자식이 float속성을 사용해서 부모인 ul태그의 높이값을 주지 않기 때문에 ul태그를 css에 지정해서 overflow: hidden;을 처리했더니 높이값이 잡히게 되었다. 그래서 결과적으로 header가 h1태그 (65px), nav태그(65px)를 합한 총 130px의 높이값을 가지는 것을 확인 할 수 있었다.
두번째로는, #footer {padding-bottom: 60px;}을 기입해서 나중에 작업하는 아이콘 높이 배치를 위해 적용한 점인데, 아직 기본 단계이기 때문에 강사님의 말씀대로 height를 따로 지정해서 확인하는 점이 편한 것 같다. 이부분은 부단한 연습을 통해서 익숙해지도록 해야하는 부분인 것 같다.

기억해야하는 점은
첫번째, transform: translateY();을 이용한 y축 중앙정렬 공식
두번째, position이 absolute인 경우는 width값을 명확하게 규정해주어야하는 점
세번째, main태그는 익스플로러에는 인식이 안되기 때문에 role태그를 함께 추가하는 점
네번째, x축으로 한줄 나열하는 방법으로 display: inline-block; vertical-align: middle;을 적용하는 점
다섯번째, 실무팁 01에서 href 속성값으로 id 속성값이 들어가는 점
여섯번째, 실무팁 02에서 말줄임 표시 법으로 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;을 적용하는 점과 따로 class 명을 만들어서 html태그에 추가하는 방법이다.

오늘 수업은 이때까지 들었던 수업 중 헷갈린 부분과 어려웠던 점이 가장 많았던 수업이다. 그래서 이번주 주말은 오늘 수업의 복습을 통해 더 정확하게 이해하고 짚어넘어가야할 것 같다. 요즘 수업을 들으면서 느낀 점은 html,css를 쉬운 문법이라고 생각하고 안일하게 생각했던 것 같다. 배우면 배울 수록, 알아야 할 점, 주의해야 할 점이 넘쳐나는 것 같다! 열심히 임해야겠다✍🏻