네이버 메인화면 프론트엔드 훑어보기
프론트엔드ㅣ코드스테이츠PMB12기W7D1
UXUI디자인학원을 다니는 동안 HTML과 CSS를 실습한 적이 있다. 그 때의 경험을 바탕으로 네이버 메인화면 HTML과 CSS요소를 가볍게 훑어보려고 한다. 아주 가볍게^^!
JavaScript요소의 경우 좀 더 공부가 필요하다^_ㅠ
<wrap> 네이버 메인화면은 wrap태그로 페이지 전체를 감쌌다. 안에 큰 하위 항목 3개로 헤더, 컨테이너, 풋터 영역을 나누어놓았다.
<title> 타이틀은 'NAVER'로 해놓은 것을 확인할 수 있다.
<style> style태그 속, 여러 요소들 background-color설정이 눈에 띄었는데 0,0,0,0으로 순검정색을 사용한다는 것을 알 수 있다. 네이버 배경은 새하얀 색인데, 어떤 부분들은 검정색으로 구획을 잡아놓고 그 위에 이미지를 띄운 게 아닌가 추측하고 있다.
<div> div태그로 Logo area를 구분해놓았다.
gnb영역 역시 div로 구분!
본문 영역은 'container' 명칭으로 구분되어있다. 본문인 만큼, 다른 div태그들이 가득하다.
footer영역에는 광고, 공지사항까지 풋터에 포함되어있었다.
css의 경우 오른쪽 하단에서 확인할 수 있었다. font-size 폰트사이즈 , line-height 선 굵기, color 폰트 색상, font-family 서체, margin 마진, padding 패딩 값을 볼 수 있다.
태그들을 사용해본 적이 있어서 어떻게 묶고 어떤 기능을 구현했는지 감은 잡을 수 있었지만, 세세하게 분석하지 못 했다. 날을 잡고 내가 구현하고 싶은 페이지를 구글링을 통해 html,css,javascript를 직접 써보면 실력이 많이 늘 것 같다는 생각이 들었다.
