7월 16일 (helbak.com)

rona-kim·2021년 7월 16일

학습내용

오늘은 덴마크 쇼핑몰 helbak.com을 카피캣 연습을 하였다.
지금까지는 일부만 (header, footer 등) 실습해보았지만 오늘은 첫 페이지를 다 만드는 실습을 했다.
여느 때와 마찬가지로 초기작업을 해주었다.

철저히 주관적인 오늘의 keypoint 📌

css에
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
을 작성해주면 모든 html의 태그의 padding, margin값들을 초기화 시켜준다. (0으로)
padding으로 인해 공간에 대한 크기가 달라지는 것을 방지하기 위해
box-sizing: border-box;도 적용해준다.

font-weight 는 폰트의 굵기, 100~900까지 있다. (100단위)

a태그는 inline요소

a태그를 공간에 꽉 채우고 싶을 때는 display를 block으로 변경

img는 inline-block요소, text-align은 inline, inline-block에만 사용 가능

y축 중앙정렬 -top: 50%; , transform: translateY(-50%);

1em = 16px

article을 사용하려면 타이틀이 필요함, 여기에서는 제품명이 타이틀이 됨

초기 작업 중

img {
	vertical-align: middle;
}
span {
	display: block;
}

img는 태생적으로 하단에 공백이 있기 때문에 vertical-align: middle;을 적용시켜주고
span은 원래 inline요소 이지만 이 사이트에서는 block으로 활용하겠다고 지정을 해줬다.

이 사이트는 미디어쿼리 밖을 모바일 버전으로 만들고 미디어쿼리 안을 pc버전으로 만들었다.

🔵 header

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

#header .buttons ul {
	✔overflow: hidden;
}
#header .buttons ul li {
	position: relative;

	✔float: left;

	width: 33.3333%;
	✔height: 65px;

}

--> 자식이 float를 사용해서 3차원의 성격을 가지고 있기 때문에 자식의 높이값이 부모에게 영향을 미치지 않지만, 부모에게 overflow: hidden;값을 주면 높이값을 받을 수 있다.
h1에는 65px를 주었었고, ul이 li의 높이값을 받아서 65px가 되었기 때문에 header의 높이값은 130px이 된다.

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

--> li의 1번째 항목에 있는 .menu_button / li의 2번째 항목에 있는 .menu_button / li의 3번째 항목에 있는 .menu_button

#header .buttons li .menu_button img {
	position: relative;
	height: 20px;

	✔top: 50%;
	✔transform: translateY(-50%);
	margin-top: -10px;
	
}

--> 실무 팁 : y축 중앙 정렬을 하기 위해서는
top: 50%; , transform: translateY(-50%); 값을 준다.

🔵 main

.main_content .product_group_link {
		position: relative;

		display: block;
		
		✔width: 100%;
		✔height: 56.25%;
		border: solid 10px red;

		overflow: hidden;
	}

--> 원래 이미지의 크기와 근사치로 설정해준다. (1000x563)

.main_content .product_group .link_text {
		✔position: absolute;

		left: 25px;
		bottom: 25px;

		color: black;
		font-size: 25px;
	}

--> 앞에 있는 형제 (.link_text)가 3차원이기 때문에 뒤에 있는 형제 (img) 뒤쪽으로 레이어가 겹친다. img 안으로 .link_text를 넣고 위치를 지정해줌

🟡 미디어 쿼리

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

--> header는 3차원이기 때문에(fixed) header와 main_content가 겹친다.
겹쳐진 영역만큼 공백을 만들어준다.

@media (min-width: 60em) {
	.main_content {
		overflow: hidden;
		
	}
	.main_content .product_group_link {
		float: left;	

		width: 50%;
		height: 28.125%;
	}
}

--> 부모값에 hidden을 주면 자식의 높이값을 받을 수 있다.

🔵 footer

#footer .right_methods ✔.payment_icon.one✔ {
		background-color: black;
	}
#footer .right_methods .payment_icon.two {
		background-color: red;

--> class를 연달아 기입하면 (띄어쓰기 없이) 여러개의 .payment_icon중에서 .one을 가지고 있는 .payment_icon을 선택한다는 뜻

#footer {
		position: relative;
		background-color: yellowgreen;
		✔padding-bottom: 66px;
	}
#footer .to_top_button {
		position: absolute;
		display: block;

		width: 66px;
		✔height: 66px;
		background-color: yellow;

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

	}

-->footer에 padding-bottom: 66px;을 준 이유는 .to_top_button을 주기 위함이다

🟡 미디어쿼리

@media (min-width: 60em) {
	#footer ul, #footer li, #footer h3 {
		display: inline-block;
		vertical-align: middle;
	}

--> ul, li, h3를 inline-block로 변경 후 , vertical-align: middle; 적용

🔵 실무 팁

a태그의 href에

url주소
다른 html파일
👉🏻id
를 넣을 수 있다. class는 불가능하다. id값을 넣으면 해당 id가 있는 곳의 최상단으로 바로 이동한다. id은 한 파일 내에서 단 하나만 존재해야한다.

어떤 역할을 하는 class를 css에 만들어 놓고 그 class를 html 태그에 추가하는 방법으로 코드의 분량을 줄일 수 있다.

2️⃣html
<h2 class="ellipsis"></h2>
1️⃣css
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

white-space: nowrap; 👉🏻 텍스트가 텍스트를 감싸고 있는 영역보다 크다면 자동으로 줄바꿈이 되는데 그것을 해제시켜주는 속성, 가로 스크롤이 생길 수 있음
text-overflow: ellipsis; 👉 말 줄임표

2️⃣html
<h1 class="ellipsis m-b-100"></h1>
1️⃣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에 적용할 수도 있다.

helbak코딩

어려웠던 점

오늘은 초반부터 막혀서 시간이 엄청 오래 걸렸다.

1. 이 부분의 list들의 공백이 있으면 안되는데 (img의 공백을 없애기 위해 vertical-align: middle;값을 주고, 모든 html태그의 margin, padding값을 0으로 초기설정해놨음) 자꾸 여백이 떴다.
2. #header .buttons li .menu_button img (메뉴버튼 안의 이미지)가 실습 화면에서는 중앙정렬이 잘 되어 있는데 내 화면에서는 삐뚤게 되어있어서 해결하는데 오래 걸렸다.
3. article의 h2가 화면에 나타나지 않음

해결방법

멘토님께 요청드렸더니 ul이나 li의 font-size를 0으로 해보라고 하셔서 했더니 다행히 첫번째는 해결이 됐다.
이것도 도움을 요청했지만 스스로 해결해보는게 좋을 것 같다고 하셔서
머리를 써봤더니

#header .buttons li .menu_button img {
	position: relative;
	height: 20px;

	top: 50%;
	transform: translateY(-50%);
	👉🏻margin-top: -10px;
	
}

img안에 margin-top값을 주었더니 중앙정렬이 됐다. 화면에서도 정상적으로 작동이 되어 해결했다.
3. 이것도 요청을 드렸더니 font-size를 아까 0으로 한 것 때문에 안 나타날 수도 있다고 하셔서 font-size를 제거했더니 나타났다. 그렇지만 첫번째 문제가 또 뒤틀려버렸고. 그 때 생각해낸게 바로 두번 째, 👉🏻margin-top: -10px; 이였다. 너무나 험난한 해결의 길이였다....

학습소감

초반부터 막혀버려서 그런지 오늘은 마무리하는데 오래걸렸다.
그래도 혼자 막히는 부분을 해결한 점에서 매우 뿌듯하다. 그렇지만 변함없이 강의를 한번 더 들어야겠다. 오늘 계획은 어제 키즈가오를 혼자 header까지 해내고 이제 본문 할 차례였는데.. ㅎ그건 주말에 하고 오늘은 helbak 어려웠던 부분 한번씩 더 봐야겠다.

rona-kim

Hello!

이전 포스트

7월 15일 (키즈가오)

다음 포스트