HTML, CSS, JavaScript로 웹 분석하기
[코드스테이츠 PMB 13기]W7D1_개발 지식
출처: 비전공자를 위한 이해할 수 있는 IT지식웹을 구성하는 3요소가 있다. HTML, CSS, JavaScript이다.
HTML은 <head>와 <body>로 이루어져있는데, <head>는 홈페이지 정보가 들어가며, <body>는 실제 HTML 태그들이 들어간다.
CSS는 디자인만 표시할 수 있다.
JavaScript는 HTML과 CSS로 구현하기 힘든 기능들을 구현하기 위해 탄생한 프로그래밍 언어이다.
오늘은 '여행할 땐 여기어때~'의 웹페이지를 위의 3가지 요소로 분석해보려 한다.
HTML
여기어때의 <body> 부분이다.
위에 표시된 부분은 <body> 부분의 header 이다. 제일 상단에 나타나는 부분으로 주로 상단에 들어가는 검색, 프로덕트 이름, 햄버거 버튼 등이 들어간다.
footer 부분은 가장 아랫 부분을 차지하며, 보통 이용약관, 관련 사이트 링크, 회사 정보 등이 들어가는 부분이다.
css
css를 직접 태그에 적용한 예시이다. 가로 781픽셀로 설정되게 css가 처리되어 있다. 왼쪽 파란색 부분에서 css가 적용된 태그를 확인할 수 있다.
<link rel="stylesheet" href="/css/main.css?rand=1659394221">
좌측 화면은 위의 css 파일이 정상적으로 적용된 화면이고, 우측 화면은 해당 css 파일 링크를 삭제했을 때의 웹페이지 모습이다. 보통 많이 사용하는 css들은 파일로 따로 저장하여 여러 페이지에서 공통으로 사용하게 된다. 여기어때에서 주로 사용하는 css 코드들을 main.css 파일에 저장하여 사용하는 모습을 추측할 수 있었다.
JavaScript
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
JavaScript를 줄여서 js로 표현하기도 한다. 위의 코드를 확인해보면 구글 애널리틱스에서 제공하는 JavaScript 파일 링크를 호출하고 있는 것을 확인할 수 있다. 우측 화면은 https://www.google-analytics.com/analytics.js 파일 원본이다.
마무리하며,
와.. 정말 모르겠다. 역대급으로 부실한 과제였다. 부족한 부분이 많아서 솔직히 올리기 싫었다. 이게 현재 내 모습이니 부끄러워 하지 말고, 내용을 보충하기로 다짐했다. 그래도 정말 창피하다.. 휴..... 비가 많이 오는데, 다치는 사람 없이 무사히 지나가면 좋겠다.
