프론트엔드 탐색
코드스테이츠 PMB 8기
프론트엔드 탐색
웹과 사용자 사이의 인터페이스 부분
-프론트엔드
테크놀로지 분야에서 ‘웹과 사용자 사이의 인터페이스 부분’을 ‘프론트엔드’라고 말한다. 쉽게 말해 사용자의 화면에 나타나는 웹 화면이 프론트엔드 영역이다.
프론트엔드 개발자는 백엔드 API에서 가져온 데이터의 입출력을 통한 비즈니스 로직 구성과 사용자 인터페이스 부분을 작업하는 사람이다. 사용자가 웹에 접속했을 때 보이는 영역을 담당하는 직무로써 출력되는 화면에서 상호작용하는 모든 요소를 맡는다.
프론트엔드 개발은 사용자가 직접 웹 사이트 또는 웹 응용 프로그램을 보고 상호 작용할 수 있도록 HTML, CSS 및 JavaScript 등을 이용한다.
▷ 웹 프론트엔드의 3가지 언어
HTML : 사용자가 웹에 접속했을 때 화면에 보이는 사이트의 기본적인 구조를 만들어주는 역할
CSS : 풍부한 디자인으로 웹을 설계할 수 있도록 글의 크기와 색상, 글꼴, 배경과 이미지의 크기와 색상 등을 꾸며주는 역할
JavaScript : 다양한 기능과 알고리즘을 구현시키는 프로그래밍 코드로 웹 사이트의 동적인 요소를 담당하는 역할
Apple
Apple애플(영어: Apple Inc.)은 미국 캘리포니아에서 아이폰, 아이패드, 애플 워치, 에어팟, 아이맥, 맥북, 맥 프로, 홈팟 등의 하드웨어와 iOS, iPadOS, macOS 등의 소프트웨어를 설계, 디자인하는 기업이다.
앱등이로서 이번 과제에서는 애플 웹에서 에어팟 페이지를 HTML, CSS, Java Script의 각 측면에서 분석해 보려고 한다. (에어팟3 예판 시작..!)
Apple web AirPods Page▷ 애플 웹 에어팟 페이지의 HTML 요소
haedHead : 애플 로고, 스토어, 맥, 아이패드, 아이폰, 애플 워치, 에어팟, 애플 티비, 애플 독점, 액세서리, 고객 지원, 검색, 장바구니 등으로 구성 (원래 구조 이름은 nav이지만, 아래 nav와 차별되도록 Head로 설정)
navNav : 에어팟 2세대, 에어팟 3세대, 에어팟 프로, 에어팟 맥스, 비교하기, Apple Music 등으로 구성
mainMain : 출시일을 약 일주일 앞둔 에어팟 3세대가 가장 먼저 노출되고 있다
▷ 애플 웹 에어팟 페이지의 CSS 요소
css 유/무CSS : CSS를 적용한 화면과 제거한 화면을 비교해 봤다. CSS를 활용하면 사용자가 보다 쉽게 이해하고 사용할 수 있는 웹 페이지 구성이 된다. 반면 CSS를 제외한 화면은 폰트, 컬러, 이미지 등 디자인 요소 없이 텍스트 위주로 구성되어 사용성이 떨어지고 심미적으로도 부족함이 느껴진다.
▷ 애플 웹 에어팟 페이지의 JavaScript 요소
head.built.jsHead : ‘.js’파일을 ‘html’에서 호출하는 부분을 확인할 수 있었다. ‘다른 페이지로의 연결’이 주 기능으로 작동한다.
main.built.jsMain : ‘.js’파일을 ‘html’에서 호출하는 부분을 확인할 수 있었다. ‘다른 페이지로의 연결’이 주 기능으로 작동한다.(‘Head’와 ‘Main’에서 작동하는 Java 기능이 ‘다른 페이지로의 연결’로 한정되어 있는 점 참고 부탁드립니다..)
▷분석 내용 중 하나를 선택해 해당 기능의 구현 코드 찾아 보기
nav
nav html code애플 웹 에어팟 페이지의 HTML 내에서 NAV 부분과 해당 부분의 코드를 찾아 봤다.
