210901 개발일지

1) 학습한 내용

네이버 모바일 1편

github

	모바일 웹페이지를 작성 시 반드시 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	태그 넣기
        

vh : viewport, height의 약자,화면의 크기, 보고있는 화면의 풀사이즈에 맞추어 화면 나타내줌(브라우저의 높이가 달라지면 같이 변함) ex) height: 100vh;

---

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


    	#main-nav ul {
        overflow-x: auto;
        display: flex;
        align-items: center;

        white-space: nowrap; ->x축스크롤 생기면서 x축 으로 글자들이 정렬됨
    }
    	
    	#main-nav ul { 
        -ms-overflow-style: none; 익스플로러, 엣지
        scrollbar-width: none; 파이어폭스
    }

   	 #main-nav ul::-webkit-scrollbar {
        display: none; 크롬, 사파리, 오페라 브라우저에서 사용되는 가상선택자
    }

    스크롤바에 모두 영향

2) 학습내용 중 어려웠던 점
모바일 버전시 반드시 넣어야 하는 태그 잊지 않기

3) 해결방법
수업진행

4) 학습소감
웹사이트와 유사하게 진행되어 만드는데 크게 어려움은 없었다.