개발일지 210716

이동섭·2021년 7월 16일

대구AI스쿨 카피캣2

대구AI스쿨 개발일지

목록 보기

15/48

15일차 요약

덴마크 쇼핑몰 카피

https://www.helbak.com/
html을 작성하는 방법(?)은 다양하다. 전혀 다른 웹사이트를 카피하는 것이니 강의에 충실하게 따라가 보았다.
기타 실전스킬들(?)에 대한 학습

1. 기본준비

디렉터리 설정과 html 헤드 태그 작성, css로 주요 태그들을 초기화 하는 작업을 진행.

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="Concerta">
	<meta name="keywords" content="html, css, tutorial">

	<link rel="stylesheet" type="text/css" href="css/style.css">

	<title>Halbek</title>
</head>

계속 실습 중이지만 메타 태그를 작성할 기회는 드물다. 익숙해지자.

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 {
	font-weight: 400;
}
button {
	border: 0;
	outline: 0;
}
li {
	list-style: none;
}
a {
	text-decoration: 0;
}
img {
	vertical-align: middle;
}
span {
	display: block;
}
.clearfix {
	clear: both;
}

별표는 모든 html 태그를 의미한다고 한다. 모든 태그의 마진과 패딩 값을 없애주고, 그로 인해 생길 문제에 대비해 박스사이징을 border-box로 바꿔준다. 이는 테두리를 포함하여 사이즈를 측정하게 하는 옵션이다.
이미지의 버티컬 얼라인은 이미지태그가 가진 하단의 미새한 공백을 없애준다 (복습)
span 태그의 블럭 속성 설정은, 실습할 사이트의 특성에 의해 설정 된 것으로 일반적인 선택은 아니다.
어제 큰 고통을 줬던 버튼 태그에 대해 보더 뿐 아니라 아웃라인까지 0으로 설정.

2. header

https://www.helbak.com/

이 사이트는 적응형(또는 하이브리드) 웹사이트이고, 나는 그 기술을 적용하는 것을 배우지 않았지만 헤더 영역은 파악이 가능했다.

로고(사이트 이름)영역과 nav영역이, header의 width를 절반씩을 차지하고 있고, 각 컨텐츠의 크기는 변화하지 않는다.
특정 시점에서 두 영역이 두 행으로 배치된다. 이는 반응형?이다.

2.1. html

<header id="header">
		<h1>
			<a href="#" class="logo">
				<img src="https://via.placeholder.com/186x18">
			</a>
		</h1>
		<nav>
			<ul>
				<li>
					<a href="#" class="menu-btn">
						<img src="https://via.placeholder.com/22x20">
					</a>
				</li>
				<li>
					<a href="#" class="menu-btn">
						<img src="https://via.placeholder.com/22x20">
					</a>
				</li>
				<li>
					<a href="#" class="menu-btn">
						<img src="https://via.placeholder.com/22x20">
					</a>
				</li>
			</ul>
		</nav>
	</header>

2.2. header 기본 레이아웃

/*header*/
#header h1 {
	background-color: #ffffff;
}
#header h1 .logo {
	position: relative;
	display: block;
	width: 100%;
	height: 65px;
	background-color: yellow;
}
.logo img {
	position: absolute;
	top: 0;
	margin-top: 23px;
	left: 0;
	margin-left: -93px;
}
#header .btns ul {
	overflow: hidden;
}
#header .btns li {
	position: relative;
	float: left;
	width: 33.3333%;
	height: 65px;
}
#header .menu-btn {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
}
#header .btns li:nth-child(1) .menu-btn {
	background-color: pink;
}
#header .btns li:nth-child(2) .menu-btn {
	background-color: orange;
}
#header .btns li:nth-child(3) .menu-btn {
	background-color: red;
}
#header .btns li .menu-btn img {
	position: relative;
	height: 20px;
	top: 50%;
	transform: translateY(-50%);
}

이 사이트의 경우 모바일버전(?)을 기준으로 제작되고 미디어쿼리를 통해 큰 영역에서 변화를 주었다고 한다. 따라서 이에 맞게 기본 레이아웃을 작성한다.

li태그들을 float를 통해 정렬했다. 따라서 이 요소들의 높이값을 부모태그가 인식하지 않기 때문에 header 영역이 이들을 포함하지 못하게 된다. 이를 해결하기 위해 상위 태그인 ul에
overflow: hidden 를 적용해 해결한다
마지막 줄의 transform을 통한 y축 정렬 방식은 일반적으로 많이 사용하는 방식이니 기억해두자.

결과출력

2.3. header 미디어쿼리

/*header-pc ver. 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: 100%;
		height: 80px;
	}
	#header .logo img{
		margin-top: 30px;
	}
	#header .btns {
		position: absolute;
		width: 50%;
		left: 50%;
		top: 0;
	}
	#header .btns li {
		height: 80px;
	}
}

pc 버전으로의 미디어쿼리 작업

header영역의 포지션을 fixed로 변경해 계속 상단에 노출되게 한다. z-index를 최댓값(99999)으로 지정함.
nav태그 영역을 배치하는 방식이 특이하다.
(1) 모바일 버전에서 header의 영역은 자식 요소들에 의해 결정되었던 반면, pc버전에서는 영역을 지정해 주었다.
(2) h1태그의 width 값은 50%이고 좌표의 시작점은 따로 설정하지 않았다. 결과적으로 header의 우측 절반 만큼 시각 정보가 빈 공간이 생겼다.
(3) nav태그의 포지션을 absolute로 설정하고 width는 50%로 주었다. 이렇게 다듬은 요소를 top:0과 left:50%로 옮긴다.
(4) 결과적으로, nav를 헤드태그의 영역 안에 집어넣어버리는 방식으로 레이아웃을 완성.
(방식이 특이한 것은 그렇다 치고, 어차피 좌표로 끼워맞추는 방식이라면 대체 왜 top:0, right:0를 쓰지 않은 것이지?.. 불편하다..)

결과출력

3. main(제품영역)

헤더 태그와 마찬가지로 좁은 가로폭을 기준으로 작성하고 미디어쿼리를 통해 반응시킨다. 단, 미디어쿼리가 적용되는 폭의 크기가 다르다.

3.1. 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 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 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 1</h2>
						<img src="https://via.placeholder.com/1000x563">
					</article>
				</a>
			</li>
		</ul>
	</main>

특별할 것은 없다. role="main"과 article태그에 관해 추가학습 섹션 참조

3.2. main 기본 레이아웃

/*main*/
.main-content .product-group-link {
	position: relative;
	/*float: left;*/
	display: block;
	width: 100%;
	height: 56.25%;
	overflow: hidden;
}
.main-content .product-group-link img {
	width: 100%;
	height: 100%;
}
.main-content .product-group h2 {
	position: absolute;
	left: 25px;
	bottom: 25px;
	color: red;
	font-size: 25px;
}

특별히 살펴볼 점은 img태그의 부모요소(여기서는 a태그)의 영역 지정이다.

원본 이미지 파일의 크기가 1000x563
a태그의 영역을 width100% height56.25%로 지정
img태그의 width,height값을 100%로 지정

원본 이미지의 가로세로 비율과 이미지와 유사하게 부모태그의 가로세로 영역을 지정하고, img는 영역의 100%로 삽입했다. 이미지는 거의 왜곡 없이 부모태그의 영역에 맞게 조절될 것.

결과

3.3. main 미디어쿼리

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

47em이상 60em미만
- main 태그는 z축이 없는 2차원 요소이다.
- 이 영역에서 header태그는 fixed로 3차원 요소이다.
- 선행 요소가 3차원 후행 요소가 2차원일 경우 겹치는 현상이 발생한다.
- 따라서 메인 태그에 header 값 만큼 padding top을 준다.

60em 이상
main태그는 float속성을 가진 자식태그의 높이값을 인지하지 못하므로 overflow: hidden을 적용시켜준다.

결론적으로 fixed포지션을 가진 형제 영역과의 겹침 현상을 해결하는 것과, overflow를 사용하는 것은 아무런 상관관계가 없다. 단지 float을 사용했기 때문에 부모 요소에 적용시켰을 뿐이다.

결과

4.1. 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 Methdos</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>

3개의 영역이 속해있는데, 각 영역의 기능이 다름을 잘 인지하고 요소를 구성해야 한다.
실습에서 처음으로 한 태그에 두 개의 클래스를 사용했다. 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-top: 30px;
	margin-bottom: 20px;
}
#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;
}

span 태그를 text-align으로 정렬할 수 있다.
li 태그의 display를 inline-block으로 가로정렬 했다.
2개의 클래스를 가진 태그에 대하여 선택자를 적용할 때
.선택자A.선택자1
.선택자A.선택자2
.선택자A.선택자3
다음과 같이 붙여서 사용하면, 클래스A를 가진 요소들 중에서 각각 클래스 1,2,3을 가진 요소들을 선택하는 것이다.
위의 경우 .one .two가 반복적으로 사용되지 않은 선택자이기 때문에 .payment-icon.one와 같이 사용하지 않아도 기능상 차이가 없으나 반복적으로 지정해주는 클래스를 사용하게 된다면 유의미한 차이를 가질 것이다.
footer영역에 padding 값을 지정해 둔 이유는 bottom:0을 이용해 to-top-button의 영역을 쉽게 배치하기 위해서이다.
(엄밀하게 따지면 footer에 고정된 높이값을 지정할 필요가 없다는 것이 장점이라 하겠다. 위의 두 영역들은 html의 가장 기본적인 규칙에 따라 세로로 배열되어 있고 부모 영역은 자식 영역의 높이 값 합이 되기 때문이다. padding-bottom은 유일한 3차원 요소를 집어넣기 위한 공간인 셈.)

결과

@media (min-width: 60em) {
	#footer .left-nav {
		float: left;
		width: 50%;
		text-align: left;
		padding-top: 32px;
		padding-left: 40px;
	}
	#footer .right-methods {
		float: right;
		width: 50%;
		margin: 0;
		padding-top: 32px;
		padding-right: 40px;
		text-align: right;
	}
	#fo![](https://velog.velcdn.com/images%2Fxddf%2Fpost%2F06fee9a3-8bfb-47ae-8b2f-ad65b2ca1fff%2Ffp.PNG)oter ul, footer li, #footer h3 {
		display: inline-block;
		vertical-align: middle;
	}
	#footer h3 {
		padding-right: 10px;
	}
	#footer .left-nav a {
		font-size: 14px;
		padding: 0 5px;
	}
	#footer .right-methods li{
		padding: 0 4px;
	}
}

앞서도 사용되었는데, 상하좌우를 감싸는 박스모델과 관련된 속성을 쓸 때

margin: 5px; - 4방향 모두 5
margin: 1px; 2px; 3px; 4px; - 위1 우2 아래3 좌4(시계방향) 임은 이미 알고있었는데
margin: 0; 3px; - 상하0 좌우3pc 인 것은 새롭게 알았다.

결과

5. 웹 tip

5.1. id에 관하여

id는 하나의 선택자명칭만 가져야하며,
한 html문서 한에 동일한 명칭을 가진 id가 있으면 안 된다는 것을 배웠었다.

이에 관한 실전적인 이유는 바로 하이퍼링크 기능 때문인데, a태그를 통한 하이퍼링크의 대상이 될 수 있기 때문이다.

a태그로 하이퍼링크 할 수 있는 대상

다른 웹사이트 주소
다른 디렉터리의 html문서
#id선택자명칭

따라서 id를 중복 사용하게 되면 하이퍼링크로 이동 할 좌표로서의 기능을 상실하게 된다.

5.2. 말줄임표

이전 시간 실습에서 이미 학습하게 되었던 내용

복습 겸 아래 링크를 다시 참조해보자

https://blog.naver.com/classe82/221105590552

5.3. 고빈도 css속성을 위한 class 생성

위의 말줄임표와 같은 경우 때에 따라 텍스트를 담고있는 수많은 선택자에 사용될 수 있다. 이런 경우 작업효율과 코드 축약을 위해 미리 묶어서 class로 생성해 두는 것이 유용하다.

.clearfix {clear: both;}를 미리 만들어두고 필요한 경우 해당하는 태그에 사용하는 것과 같다.

추가 학습

overflow: hidden로 float의 문제를 해결하는 원리

https://velog.io/@ursr0706/%EC%98%A4%EB%B2%84%ED%94%8C%EB%A1%9C%EC%9A%B0overflow-%EC%86%8D%EC%84%B1
role="main"에 관한 질문을 했었는데 또 기억이 안났다. 아래를 참조해 학습.

https://aboooks.tistory.com/tag/main%20role%3D%22main%22
article 요소에 관한 추가 학습

https://developer.mozilla.org/ko/docs/Web/HTML/Element/article

미해결 - 솔루션

질문거리

header pc ver 작업에서 nav영역을 배치할 때 왜 left 50%를 사용한 것인가. 불편하다.
먼저 작성된 영역의 속성값이 fixed여서 겹치는 문제를 해결하기 위해 padding top을 사용했는데, 기능상의 차이는 없지만 margin top이 더 적합한 것이 아닌가 하는 생각이 들었다.

학습 소감

fixed포지션을 가진 형제 영역과의 겹침 현상을 해결하는 것과, overflow를 사용하는 것은 아무런 상관관계가 없다. 단지 float을 사용했기 때문에 부모 요소에 적용시켰을 뿐이다.

이 부분에서의 인지부조화로 몇 시간을 헤맸는지 기억도 나지 않는다. 도저히 답이 나오지 않는 상황 때문에, 처음으로 실험용 html을 만들고 style속성까지 사용해봤다.

조금 원망을 하자면 fixed 속성을 사용한 시점이나 main태그를 처음 사용한 시점에 이 문제를 먼저 해결하는게 올바른 순서가 아니었을까 싶다.

하지만 실전.. 이라고 생각하면 고통스럽고 보람찬(?) 경험이다. 덕분에 오늘도 제 시간에 완성된 일지를 올리지 못하게 되었지만...

이동섭

responsibility

이전 포스트

개발일지 210715

다음 포스트