💻 학습 내용

🛫GIT-HUB

HTML | naver_mobile_1
CSS | naver_mobile_1

모바일 네이버 1

🖤 vh : 기기 화면의 높이값으로 100% 맞추겠다는 뜻이다.
vh = viewport height 약자임
vh는 화면의 기준으로 하기 때문에 반응형 웹사이트 제작 시에 유용하게 사용
꼭 width height에서만 사용되는 게 아니라 폰트에서도 사용이 가능합니다.
⭐️ vh 설명

🖤 white-space : nowrap
width 100px에 맞춰 내용이 줄바꿈이 자동으로 되어있는 거는
white-space:wrap; 이 기본값이기 때문
풀이하자면 여백을 띄워 줄바꿈을 하게 하라 이런 느낌이다.
이때 한 줄로 바꿀려면 줄바꿈이 없어진 white-space:nowrap; 사용

🖤 스크롤바 사라지는 코드

#main_nav ul {
	-ms-overflow-style: none; /* IE and Edge */
	scroll-width: none; /* Firefox */
}
#main_nav ul:-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera*/
}

🖤 margin-left:20px;

➜ 컨텐츠 바깥쪽에 여백을 주기 때문에 wrap 부분과 딱 일치하게 됨

🖤 padding-left:20px;

➜ 컨텐츠 안쪽에 여백을 주기 때문에 이미지가 wrap 부분에서 여유공간이 생김
❤️‍🔥 레이아웃의 디자인에 따라 padding, margin 구분해서 사용해야 함

📝 마무리

💛 네이버 모바일 버전을 카피캣해보았는데 스크롤을 숨기게 하는 코드도 배웠다

💛 flex가 통일되는 부분이 적어서 태그에 flex를 각자 작성해주어야 했다. class로 작성해서 주는 방법이 훨씬 수월하고 시간이 절약된다는 것을 깨달았다.

💛 flex_wrap:nowrap; 으로 컨텐츠가 지정된 크기를 벗어나도 줄 바꿈 현상이 일어나지 않게 해주었다. overflow-y:auto;로 스크롤도 자동으로 생기게 해주었다.

💛 now_wrap 부분에서 before로 | 를 작성했는데 now_wrap 부분에 position:relative;를 주지 않아서 위치가 제대로 잡히지 않았었다. 코드를 수정해서 올바른 위치에 작성해 주었다.