당근 마켓 랜딩페이지 프런트엔드 탐색하기
[코드스테이츠 PMB 09기]
웹 프론트엔드는 3가지로 구성되어 있다.
1. HTML: Hypertext Markup Language : 구조 만드는 역할
콘텐츠의 레이아웃을 제어합니다.
웹 페이지 디자인을 위한 구조 제공
모든 웹 페이지의 기본 빌딩 블록
2. CSS: Cascading Style Sheets : 웹사이트 스타일을 지정하는 역할
웹 페이지 요소에 스타일을 적용합니다.
웹 페이지를 반응형으로 만들기 위해 다양한 화면 크기를 대상으로 합니다.
주로 웹 페이지의 "모양과 느낌"을 처리합니다.
3. Javascript : 프로그래밍 랭귀지 중 하나 (C, 파이썬 등) : 상호 작용을 증가하는 역할
웹 페이지에 상호 작용 추가
복잡한 기능 및 기능 처리
기능을 향상시키는 프로그래밍 코드
당근 마켓의 웹 사이트를 이 세 가지로 한번 들여다보려고 한다.
당근 마켓 랜딩페이지의 HTML
당근 마켓 랜딩페이지의 HTML구성을 크게 본다면 HEAD와 BODY로 구성되어 있다. HEAD는 메타데이터와 링크, 스크립트, 스타일로 구성되어 있다. BODY는 HTML 문서의 텍스트, 이미지, 하이퍼링크 등 모든 데이터가 담겨 있는 곳이다.
당근 마켓 랜딩페이지
당근 마켓 랜딩페이지의 HEAD와 BODY 일부당근 마켓 랜딩페이지의 CSS
CSS는 BOYD-FOOTER부분에서 찾아보았다.
BOYD-FOOTER에서 배경색을 켜고 끄는 차이
BOYD-FOOTER에서 PADDING을 켜고 끄는 차이위에 찾은 두 가지 이외에도 페이지 내에 있는 폰트 종류, 색상, 크기와 줄 간격 등을 CSS라고 볼 수 있다.
당근 마켓 랜딩페이지의 Javascript
스크립트 타입을 Javascript을 사용한다는 것을 일단 알 수 있었고 다양한 하이퍼 링크를 연결시켜주는 기능이 Javascript라고 볼 수 있다.
아직 프론트엔드에 대한 지식이 부족하여서 많은 것을 찾지는 못했지만 간단하게 살펴본 결과 어떻게 나뉘는지 이해할 수 있는 시간이었다. 특히 CSS를 찾으면서 당근 마켓에서 설정해 놓은 것을 켰다 껐다를 반복해 보며 이 스타일이 굉장히 중요하다는 사실을 알았습니다. 그리고 다음 기회에 조금 더 공부해서 다른 기능들도 많이 찾아보고 싶다는 생각이 들었습니다.
