21.07.21

학습 내용

네이버 쇼핑 페이지

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

오늘은 네이버 쇼핑 페이지를 따라해보았다. 상단 부분과 아래의 큰 영역들 중 2개 부분만 진행하였다. 반응형은 작업하지 않고 pc버전만 했다.

마침 어제 혼자 실습해보다 막혔던 네이버 날씨 페이지 상단에 대한 힌트를 얻을 수 있을 것 같았지만 로고 부분은 생략하셔서 혼자 연구해봐야할 것 같다.

• span태그와 같이 inline 요소 성격을 지닌 태그들은 margin-bottom을 쓸 수 없다. 성격을 바꿔줘야 한다.

span {
	display: inline-block;
	margin-bottom: 7px;
}

• 부모 영역에 디자인 정렬 코드를 넣어주면 자식 영역에도 일괄 적용된다. 코드를 줄여가며 한 번에 배치 가능하다.

네이버 쇼핑 페이지에선 사진의 태그 부분을 ul li로 만들었다.
해당 코드를 보면 li태그(.tag)에 inline-block 성격을 준 것을 알 수 있다.

#shop-main .list-item .category-wrap .category-right-bottom .tag-wrap .tag {
	display: inline-block;
	width: auto;
	max-width: 75px;
	height: 24px;
	background-color: #e8eef4;
	
	margin: 6px 1px 0 1px;
	padding: 0 5px;

	line-height: 24px;
	font-size: 11px;
	color: #666;
	vertical-align: top;
}

• width: auto;는 컨텐츠 길이 = width이란 의미다. 글이 길어질수록 width도 늘어난다. 그래서 max-width를 설정한다.

• line-height : 글자 간 위아래 간격
  line-weight : 폰트 굵기

• inline-block도 float처럼 안의 컨텐츠들의 width 합이 부모 width보다 클 경우 자동 줄바꿈을 한다. 그렇게 자동으로 레이어가 y축 정렬되는 효과를 볼 수 있다.

• #shop-main .list-item.banner : list-item 클래스 중에서 banner라는 클래스 가진 클래스를 선택하겠다.

네이버 날씨 혼자 실습

헤더부터 메인 영역의 상단 부분

fixed로 고정한 헤더와 메인 끝 부분과 footer영역

어제 header 작업 중에 잘못된 것을 고치고 중간에 날씨~뉴스까지 li 태그로 한 것의 위치를 다시 맞췄다. li태그에 가상 선택자 before를 이용하여 사이사이에 '|'를 넣어줬더니 자꾸 a 태그 영역이 li 영역을 벗어나는 게 문제였다. 아직도 고치지 못하여 일단 가상 선택자는 주석처리한 채 다른 도면을 만들었다.

오늘 수업 때 쇼핑 페이지 실습을 나가면서 도면 작업에 대한 힌트를 약간 얻었다. 애매하다 싶으면 일단 div로 무조건 감싸고 안에서 또 div로 감싸는 방식으로 도면을 짰더니 얼추 비슷한 느낌으로 되었다. 사진상으로는 아직 css를 적용하지 않아 보이진 않지만 대충 구역에 대한 도면은 짜둔 상태다. 이번 주 안에 전체를 완성할 수 있을지 약간 걱정이다. 세세하게 뒤틀리는 경우가 많아서 하나를 고치니까 하나가 틀어지는 느낌이다. 누더기를 기워도 이거보단 결과가 잘 나오겠다.

어려운 내용

네이버 쇼핑 페이지

1. 처음에 쇼핑 페이지 상단의 header부분을 만들 때, header를 세 부분으로 나누고 맨 마지막 영역에 메뉴버튼을 만들기 위해 nav태그로 하여 안에 div를 넣어주었다.

<header id="shop-header">
	<div id="shop-header-top"></div>
	<div id="shop-header-middle"></div>
	<nav>
		<div class="shop-container">
			<ul>
				<li><a href="#">홈</a></li>
				<li><a href="#">백화점</a></li>
				<li><a href="#">아울렛</a></li>
				<li><a href="#">스타일</a></li>
			</ul>
		</div>
	</nav>
</header>

네이버의 쇼핑 페이지의 큰 구역들이 전부 가운데 정렬이라서 해당 div 역시 margin: 0 auto;를 사용해 x축 정렬을 해줬다. 그러나 수업에선 정확하게 가운데 정렬되는 게 눈에 보이는데 내가 만든 페이지는 양 옆 여백이 너무 좁았다. 혹시 적용이 안됐나 싶어서 개발자 도구로 봐도 분명히 적용은 된 상태였다. 알고 보니, 내 컴퓨터 화면 크기가 지정한 div의 width크기보다 작아서 생긴 웃픈 일이었다. 브라우저 화면 비율을 100%에서 90~80% 정도로 축소해서 보니 제대로 정렬된 것이 맞았다.

2. 오늘도 도면짤 때 닫힌 태그 안쪽에 넣어야 할 영역을 밖에 넣는 바람에 다시 고쳤다. 들여쓰기를 잘 본다고 한 건데 실수가 계속 나온다.

네이버 날씨 혼자 실습

1. 우선 어제 실습하며 생긴 문제를 먼저 들여다봤다.
   
   왼쪽 가장 상단의 로고 부분을 h1태그 안에 a태그, 그 안에 img 태그를 넣어서 처리했다.

<h1>
	<a href="#">
		<img src="https://via.placeholder.com/63x12" alt="네이버 로고">
	</a>
</h1>

그런데 이상하게 h1 태그 안에 a 영역이 들어가야 하는데 자꾸 밖에서 놀았다. 어제는 아무리 봐도 고쳐지지가 않아서 덮고 오늘 고쳐봤다.
어제는 a태그를 display: block;처리를 하면 클릭할 수 있는 범위가 부모 넓이만큼 늘어나는 걸로 배워서 해봐도 이상하게 안됐던 걸로 기억난다. 오늘은 영역 크기를 이래저래 조절해봤더니 다행히 h1태그 안에 a태그가 쏙 들어갔다. 문제는 이제 a태그와 img태그가 따로 놀기 시작했다는 것이다..

네이버에서 로고에 padding을 줬길래 나도 a태그에 패딩을 줬더니 img가 밑으로 내려가서 따로 논다. 부모 크기보다 이미지를 a태그 크기보다 작게 해서 크기 때문에 내려가는 건 아니었다. 패딩을 없앤 상태로 진행해야할까?..

2. 위에서도 적었듯 가상 선택자 before 문제....
   
   배운대로 가상 선택자를 display: inline-block; 처리를 하면 자꾸 저렇게 글이 밀려버린다.
   
   실제 네이버 날씨 페이지에선 li 안에 a태그가 쏙 들어가서 나오고 before 가상선택자를 썼어도 a와는 별개의 영역처럼 표시되었다. 아무리 크기 조절도 해봤지만 a태그를 자꾸 튕겨내는 모양새로만 나온다. 그래서 일단은 display: inline-block;을 꺼두고 다른 영역 도면 작업을 진행하였다. 쏙 들어가게 하고 싶은데 방법을 모르겠다.

해결 방법

네이버 쇼핑 페이지

1. 브라우저 화면 비율을 조절하니까 정렬된 걸 확인할 수 있었다.

2. 크롬 개발자 도구로 확인하고 고쳤다.

네이버 날씨 혼자 실습

두 문제 다 연구를 좀 더 해봐야할 것 같다. 내일 수업을 듣다가 해결법이 나올지도 모르고 안되면 멘토에게 질문을 해보려고 한다.

소감

종종 내 컴퓨터의 화면 크기가 작아서 강의와 화면이 다를 때가 있었으나 화면 크기 때문인 걸 알아서 그냥 넘어가곤 했다. 그런데 오늘은 좀 많이 차이가 났고 화면 크기 때문인 줄 눈치채지 못하고 오류를 찾는 시간이 길었다. 이건 모니터를 바꾸지 않는 한 어쩔 수 없는 문제기 때문에 앞으로는 내 화면 크기도 염두해가면서 확인하고 작업해야겠다.