프론트엔드 #2 자주 사용하는 웹페이지 분석해보기

네이버, 유튜브, 페이스북 등등 우리는 많은 웹페이지를 본다. 하지만 일반적인 사람들 관점에서는 그냥 별 생각없이 웹페이지를 이용한다. 프론트엔드 공부를 시작하면서 중요했던건 자주 사용하는 웹페이지를 보더라도 그냥 지나치는 것이 아닌, HTML 골격구조는 어떻게 구성되어 있고, 어떤 CSS 기법이 쓰였는지 분석해보는게 정말 중요한 것 같다. 

그래서 엄~~청 자주 사용하는 네이버 메인 페이지를 분석해보았다. (※참고, 몇 개월 전에 공부할때 해본 것이며, 정확한 정답은 아닙니다!)

처음에는 크게 골격만 분석해보았다.

파란색 박스 : body

초록색 박스 : header (헤더 안에 네이버로고, 검색창, 검색버튼, '네이버를 시작페이지로', '쥬니어 네이버', '해피빈' 등의 로고가 있다.)

빨간색 박스 : 사이드바 (사이드바에도 엄청 많은 박스들로 세분화 되어있다.)

주황색 박스 : 메인 (마찬가지로 엄청 많은 박스들로 세분화 되어있다.)

이렇게 같은 웹페이지를 볼때도 박스들로 나누어 분석해서 볼 수 있는 능력을 기르는 것이 중요한 것 같다. (그래야 더욱 깔끔한 코드, 깔끔한 웹페이지를 만들 수 있다.) 다음은 HTML의 나무위키 화면을 분석해보았다.

아까 네이버 메인페이지를 분석했을때 보다는 더욱 세분화하여 분석해보았다.

※ 주의! 무작정 세분화한다고 좋은 것은 아니다. 너무 많이 세분화 해버리면 코드가 복잡해지고, 코드가 복잡해지면 웹페이지를 기획할 때, 혼동되어 효율적인 웹페이지를 만들 수 없다.

※ 팁! 웹페이지가 어떻게 구성되어 있는지 확인해보고 싶다면 '개발자도구' 기능을 이용하면 된다! 단축키는 F12 이다. 크롬 브라우저 기준  F12키 -> elements 탭 -> 'elements inspector' 기능을 사용하면 된다.