21.07.22

학습 내용

210722 네이버 쇼핑 페이지 실습 코드

gif 프로그램상 한계가 있어서 결과물 오른쪽 부분이 잘렸다. 실제 결과물은 오른쪽이 다 나온다

main 영역

오늘은 사진에서 보이는 광고 영역 중에서 세번째 영역부터 시작했다.

이 부분부터!

밑의 다른 광고 영역들은 이 세번째 영역을 응용한 것이라서 이 영역을 잘 만드는 것이 관건이었다. 큰 영역 안에 작은 영역 2개를 만들어내야 한다.

만드는 과정이 까다로웠다. 이전에 만들어둔 클래스들이 많아서 클래스 이름도 조금 헷갈렸고 자잘하게 설정할 속성들이 많아서 그랬다.

<div class="list-item"> 전체 영역
	<div class="list-half list-half-top shop-border">
		<div class="list-half-header list-half-bg">
			<div class="half-over-lay"></div>
			<h3 class="shop-title-border">백화점 상품 그대로</h3>
		</div>

		<ul class="content-lists content-lists-3">
			<li>
				<img src="img/apple.jpg">
				<h3>생활공작소 과탄산소다</h3>
				<span>1.5kg x 4입</span>
			</li>
		</ul>
	</div>

	<div class="list-half list-half-bottom shop-border">
		<div class="list-half-header">
			<span class="headline">hot deal</span>
			<h3>백화점 상품 그대로</h3>
		</div>

		<ul class="content-lists content-lists-2">
			<li>
				<div class="content-image-wrap shop-border">
					<img src="img/blanket.jpg">
					<span class="discount">50%</span>
				</div>
				<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
				<span class="price">
					<em>21,900</em>원
				</span>
		</ul>
	</div>
</div>

각각 li태그는 컨텐츠 개수만큼 복붙해줬다.

• 다 비슷한데 조금씩 차이나는 영역들 중 하나에 공통되는 클래스 하나, 다른 이름의 클래스 하나를 넣어 이름을 2개 이상 지어줬다. 우선순위를 이용해서 한쪽엔 없는 클래스를 사용하면 편하다. 차이날 것 같은 게 있으면 일단 보험처럼 다른 클래스 이름을 지어두면 된다.

전체 영역 list-item에서 list-half-top과 list-half-bottom으로 2군데로 나눠줬다.
list-half에서 또 상단과 내용물이 있는 부분으로 나눴다.

#shop-main .list-item .list-half {
	width: 100%;
	height: 240px;
	background-color: #ffffff;
}

#shop-main .list-item .list-half.list-half-top {
	position: absolute;
	left: 0;
	top: 0;
}

#shop-main .list-item .list-half.list-half-bottom {
	position: absolute;
	left: 0;
	bottom: 0;
}

이렇게 위치와 크기를 지정했다.

그 중에서 거의 공통된 영역인 list-half-header의 css를 한번에 작성했고 아래의 컨텐츠 영역인 ul 부분은 li를 정렬하고 폰트나 마진, 패딩을 조절하였다.

#shop-main .list-item .list-half .list-half-header {
	position: relative;

	width: 100%;
	height: 62px;
	background-color: #ffffff;
	border-bottom: solid 1px #e7e7e7;

	text-align: center;

	padding-top: 10px;
}

#shop-main .list-item .list-half .list-half-header .headline {
	display: inline-block;
	border: solid 1px #000000;
	padding: 2px 4px;
	margin-bottom: 5px;

	font-size: 13px;
}

#shop-main .list-item .list-half .list-half-header h3 {
	font-size: 14px;
}


#shop-main .list-item .list-half .list-half-header .half-over-lay {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

#shop-main .list-item .list-half .list-half-header.list-half-bg {
	background-color: green;
	border-bottom: solid 1px #ffffff;
	padding-top: 0;
}

#shop-main .list-item .list-half .list-half-header.list-half-bg .shop-title-border {
	position: relative;
	display: inline-block;
	
	border: solid 1px #ffffff;
	padding: 2px 4px;

	color: #ffffff;

	top: 50%;
	transform: translateY(-50%);
}

#shop-main .list-item .list-half .content-lists {
	overflow: hidden;
	height: 177px;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li {
	float: left;
	width: 33.33%;
	height: 100%;
	border-right: solid 1px #f0f0f0;

	text-align: center;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li:last-child {
	border-right: none;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li img {
	width: 100%;
	height: 100px;
	margin-bottom: 5px;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li h3 {
	font-size: 13px;
	margin-bottom: 5px;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li span {
	font-size: 12px;
}

이어서 아래의 list-half-bottom 영역 content-lists-2를 작성해주었다.

#shop-main .list-item .list-half .content-lists.content-lists-2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	padding-top: 11px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li {
	width: 130px;
	height: 150px;
	margin-right: 8px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li:last-child {
	margin-right: 0;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap {
	position: relative;
	width: 130px;
	height: 90px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap .discount {
	position: absolute;
	display: block;
	width: 42px;
	height: 42px;
	background-color: red;
	border-radius: 50%;

	font-size: 14px;
	color: #ffffff;
	line-height: 42px;
	text-align: center;

	top: 6px;
	right: 5px;

}

#shop-main .list-item .list-half .content-lists.content-lists-2 li h3 {
	font-size: 13px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .price {
	color: #62a7ee;
	font-size: 12px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .price em {
	font-size: 14px;
	font-weight: 700;
	font-style: normal;
}

여기서 포인트는 할인율을 표시한 공간을 이미지 위로 올려주는 것이다. 3차원 형제들 간의 겹침을 이용하였다.

• 먼저 나오는 형제가 3차원이고 다음 형제가 2차원이면 겹쳐진다.

• 먼저 나오는 형제 3차원 둘째도 3차원이면 나중에 나오는 형제의 z축이 더 높기 때문에 둘째가 위로 올라온다. 만약 이 상태에서 첫째의 z-index를 높이면 첫째가 위로 온다.

• 부모가 공간에 대한 구체적 크기를 가져야 자식 높이에서 % 쓸 때 제대로 동작한다.

• font-weight: bold; 속성값으로 100~900 외에 bold나 bolder를 적을 수 있다.

• em태그는 태생적으로 기울어져서 나타난다. font-style: italic;가 디폴트. 안 기울어지게 하려면 속성값을 font-style: normal;로 하면 된다.

- tip!

1. 어떤 레이아웃 구조를 짤 때는 재사용할 수 있는 공통 영역이 있는지 봐놓고 디자인하면 html 코드를 복붙하는 형식으로 기존 레이아웃, 디자인을 그대로 유지할 수 있다.

2. 네이버 쇼핑 페이지는 다양한 웹사이트 레이아웃 구조를 갖고 있기 때문에 레이아웃 연습에 좋다.

3. 특정 역할을 하는 클래스를 잘 이용하자. 코드를 많이 줄일 수 있다.

마지막으로 만들어준 영역은 큰 광고 컨텐츠 영역들 중에서 4번째 영역이다.

4번째 영역의 상단부는 아까 만든 부분을 복붙했고 하단부를 만들어넣었다. 일전에 네이버 메인의 오늘 읽을만한 글 영역과 만드는 방식이 같았다.

<ul class="list-row-3 shop-border">
	<li>
		<div class="list-image-wrap shop-border">
			<img src="https://via.placeholder.com/90x60">
		</div>
		<div class="list-row-info">
			<span>멜론티켓</span>
			<h3>흥행 돌풍 마마, 돈크라이</h3>
		</div>
	</li>
</ul>

#shop-main .list-item .list-row-3 {
	background-color: #ffffff;
	border-top: none;
}

#shop-main .list-item .list-row-3 li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	border-bottom: solid 1px #f0f0f0;
	padding: 14px 19px 11px 19px;
}

#shop-main .list-item .list-row-3 li:last-child {
	border-bottom: none;
}

#shop-main .list-item .list-row-3 li .list-image-wrap {
	width: 90px;
	height: 60px;
	margin-right: 10px;
}

#shop-main .list-item .list-row-3 li .list-image-wrap img {
	width: 100%;
	height: 100%;
}

#shop-main .list-item .list-row-3 li .list-row-info span {
	font-size: 12px;
}

#shop-main .list-item .list-row-3 li .list-row-info h3 {
	font-size: 13px;
}

• 이미지 옆으로 글씨가 올라오게 배치했는데 적용되지 않는 것 같다면 글씨 크기를 조절해보자.

• 서브라임 텍스트 프로그램 역시 ctrl+F로 찾기 기능을 쓸 수 있다.

이후의 main 영역은 완성한 영역을 복붙하여 밑의 영역을 만들어주었다. main의 가장 하단인 로고 부분은 ul li안에서 img를 나열했다.

#shop-main .brand-wrap {
	background-color: #ffffff;
}

#shop-main .brand-wrap .brand-lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 18px 18px;
}

#shop-main .brand-wrap .brand-lists li {
	width: 64px;
	height: 64px;
}

#shop-main .brand-wrap .brand-lists li img {
	width: 100%;
	height: 100%;
}

footer 영역

로고 밑이 footer 영역. 상단의 border와 약관만 연습했다.

하단도 공간이 중앙정렬이라서 기존에 만들었던 중앙정렬 클래스를 쓸 div로 감싼 후에 그 안쪽에서 진행했다.

#shop-footer {
	padding-bottom: 180px;
	text-align: center;
}

#shop-footer .policy-wrap {
	border-top: solid 2px #5d5d5d;
	padding-top: 27px;
	margin-bottom: 11px;
}

#shop-footer .policy-wrap span {
	font-size: 12px;
}

#shop-footer .policy-wrap span:first-child:before {
	content: initial;
}

#shop-footer .policy-wrap span:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	margin: 0 8px;
	background-color: #d7d7d7;
	vertical-align: -1px;
}

#shop-footer p {
	font-size: 12px;
	color: #888;
	margin-bottom: 11px;
}

• 가상 선택자 사용법을 잘 기억하자.

무료 이미지 사이트

1. 픽사베이
   https://pixabay.com/ko/
   상업용으로 사용 가능하다.

2. 언스플래시
   https://unsplash.com/

레이아웃을 다 마친 후에 이미지를 갈아끼워보면 좀 더 생동감 넘치는 결과물을 볼 수 있다.

브랜드 로고는 가끔 브랜드 회사에서 제공하는 경우가 있다.
회사명 + logo로 구글링하면 된다. 대표적으로 naver와 kakao가 있다.

어려운 내용

1. 클래스명이 많아지니까 조금씩 헷갈려서 생기는 실수들이 있다. 오늘 오전엔 div class="예시1 예시2" 형식으로 된 코드를 예시1.예시2라고 써야하는데 사이에 띄워쓰기를 하는 바람에 적용이 안돼서 헤맸다. 다시 도면을 보니까 연달아 적은 클래스라서 고쳐주었다.

2. 마지막에 무료 이미지 사이트에서 이미지를 받아 넣어보려고 했다. html파일에서 img태그를 이용해 넣으려 했는데 경로를 html 파일을 기준으로 생각하지 않고 css파일이라고 착각하고 경로를 작성해서 계속 이미지가 나타나지 않았다. 수업에서 지적해주셔서 다행히 경로를 바꿔적었고 잘 적용되었다.

해결 방법

1. 크롬 개발자 도구로 원인을 찾았다.
2. 수업을 듣다가 깨달았다. 이전에도 계속 얘기했던 부분인데 실수를 해버렸다. 파일 경로를 적을 땐 항상 내가 지금 작성하고 있는 파일을 기준으로 적어야 한다. 내가 작성하고 있는 파일이 무엇인지 잘 체크하고 경로를 적자.

소감

일단 작성할 부분들을 다 완성하고 해당 영역들을 복붙하는 과정이 제일 재밌었다ㅋㅋ 작성 과정에는 클래스명도 많아지고 반복되어서 구조가 살짝 헷갈렸는데 다시 한 번 강의를 들으며 확인하니까 눈에 제대로 들어왔다. 완성본이 진짜 네이버 쇼핑 페이지와 닮아서 뿌듯하다.

그렇지만 당장 수업을 들으면서 진행할 땐 잘 되었고 안다고 생각했던 부분들이 혼자서 하려니 막히는 것이 많았다. 그래도 혼자 해보고 강의에서 응용할 수 있는 힌트들을 얻어서 좋다. 어제 네이버 날씨 페이지에서 a태그 안에 img가 들어가지 않아 고생했는데 이건 3차원을 이용하면 잘 작동될 것 같아서 이따 해보려고 한다.