📌 학습한 내용

---

네이버 모바일 실습

전체 코드 : 💾

👉 모바일 버전 작업시 반드시 넣어줘야 하는 코드

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

-> 디바이스 화면 크기에 맞춰서 비율을 자동으로 확대/축소 해줌

• overflow-x: hidden; : x축으로 영역을 벗어나는 요소를 숨김

• overflow-y: auto; : y축으로 영역을 벗어나는 요소가 있을 시 스크롤 생성 (없으면 스크롤 생성 x)

• vh(viewpoint height) : 기기 화면의 높이값을 기준으로 맞춤 (100vh = 기기 높이의 100%)

상단 네비게이션

• overflow-x: auto; : 가로 스크롤 생성
• flex를 이용해 x축 정렬 + 줄바꿈 없이 옆으로 넘어가게 하기 위해 flex-wrap: nowrap, white-space:nowrap으로 줄바꿈 없애줌

#main-nav {
	overflow: hidden;
	background-color: rgb(7, 189, 120);
}   

#main-nav ul {
	overflow-x: auto;

	display: flex;
	flex-wrap: nowrap;
	align-items: center;

	white-space: nowrap;
} 

👉 스크롤 감추기

#main-nav ul {
	-ms-overflow-style: none; 
	scrollbar-width: none;
}

#main-nav ul::-webkit-scrollbar {
	display: none;
}

• -ms- : explore, edge 브라우저에 영향을 미치는 pre-fix
• scrollbar-width : firefox에서 사용 가능한 css
• ::-webkit-scrollbar { display: none; }
  : -webkit- : chrom, safari, opera 브라우저에서 사용하는 가상선택자
  => 위의 세 가지의 코드는 스크롤바에 영향을 미치는 css 속성

상단 헤더

banner

• 이미지의width를 설정해주면 height도 자동으로 비율에 맞춰 조정됨

• 전체적으로 배너는 이미지를 사용해서 넣어줬다. 'banner-4' 영역은 실제 화면보다 큰 이미지를 사용했다.
  -> overflow: hidden;을 사용해 해당 영역을 벗어나는 부분을 감추고, x축 중앙정렬 공식으로 정중앙으로 배치

#banner-4 {
	overflow: hidden;
	background-color: #ffffff;
	margin-top: 10px;
}

#banner-4 .banner-wrap {
	width: 100%;
	height: 155px;
}

#banner-4 .banner-wrap img {
	position: relative;

	height: 100%;

	left: 50%;
	transform: translate(-50%);
}

일기예보

NOW.

• 영역 하단의 버튼에 대해 :before 가상선택자를 지정할 때, '|'의 위치 조정
  1) display: inline-block; 설정시

#now .btn-wrap .btn-shopping:before {
	display: inline-block;
	content: "";
	width: 1px;
	height: 14px;

	margin-top: 15px;
	background-color: rgba(125, 127, 133, .2);

	vertical-align: top;
}

-> 동일 선상에 배치됨

2) '|'를 해당 영역 안에서 왼쪽 끝으로 넣어주어야 하므로, float: left;를 사용 -> float을 사용하면 3차원 속성을 일부 가지게 되기 때문에 display를 이용해 배치작업을 하지 않아도 된다.

• <ul>이 슬라이드 되는 영역을 왼쪽 끝까지로 하기 위해 margin-left: 20px;이 아니라 padding-left: 20px;로 적용
  1) margin-left 적용시
  

2) padding-left 적용시

코로나19

• :before 가상선택자에 position: absolute;를 사용할 경우, 가상선택자 바로 앞의 태그를 기준으로 움직이기 위해 해당 태그에 position: relative;를 적용해주어야 한다.

#corona .corona-wrap a {
	position: relative;

	display: flex;
	flex-wrap: wrap;
	align-items: center;

	padding: 20px 0;
}

#corona .corona-wrap a.right-corona {
	padding-left: 11px;
}

#corona .corona-wrap a.right-corona:before {
	display: inline-block;
	content: "";

	position: absolute;
	width: 1px;
	height: 42px;
	background-color: #efeff0;

	top: 20px;
	left: 0;
}

QR 체크인 안내

• 실제 네이버 모바일에서는 높이값을 고정값으로 잡아주었지만, padding 값을 넣어주는 것으로 대체

📌 학습내용 중 어려웠던 점

---

1. 상단 네비게이션 바에서 '홈' 영역의 아래쪽에 border-bottom 넣기

📌 해결방법

---

1. 평소에 자주 했던 부분인데 조금 헤맸다. 실제 네이버 모바일 페이지의 상단바와 동일하게 border-bottom을 넣어주기 위해,
   (1) <a>에 display: block;을 넣어 height: 100%;를 인식할 수 있게 함.
   (2) 강의에서는 <a>에 작성했던 padding: 0 10px;을 <li>로 옮겨줌.
   (3) 해당 영역의 모든 <a>에 border-bottom: solid 3px transparent;을 적용 후, class="on" 선택자를 가진 <li>의 <a>의 border-bottom의 색을 변경해줌.

📌 학습소감

---

모바일 버전은 오랜만에 만들었다. 네이버는 pc 버전과 모바일 버전을 하나의 html 파일로 만들지 않고 완전히 다르게 사용했다. 이는 디자인에서 많은 차이가 나기 때문이다. 모바일 버전은 실제 pc 버전보다 요소들이 간소화 되어 있고, 이미지로만 이루어진 배너가 대부분을 이루어 꽤 쉽게 작업했다. 😗