[Course 1 ] Part1. HTML/CSS/JS로 만드는 스타벅스 웹사이트

Minji Lee·2023년 4월 3일

HTML/CSS/JS 웹 앱 동작원리 웹 표준과 브라우저 패스트캠퍼스 프론트엔드 강의

프론트엔드 웹 개발의 모든 것 초격차 패키지 Online.

목록 보기

1/9

HTML/CSS/JS

HTML(Hpyer Text Markup Language)

페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당

💡 하이퍼텍스트(Hyper Text)
참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동)할 수 있는 텍스트 → 링크 버튼을 의미

CSS(Cascading Style Sheets)

실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당

JS(JavaScript)

콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당

웹 앱의 동작 원리

웹 앱: 웹 애플리케이션을 줄인 말, 웹 사이트, 웹페이지, 홈페이지를 말함

💡 통신 프로토콜(통신 규약)
컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식 및 규칙의 체계를 의미 → HTTP, HTTPS, FTP, SSL등이 있음

사용자(브라우저) 는 주소창에 페이지 주소 입력(프로토콜+주소) → 주소에 맞는 서버로 최초의 요청이 들어감(request) → 해당 서버는 요청에 해당하는 응답을 제공(response) → 서버로 추가 요청 → 서버는 추가 응답 제공(js+css+jpg)

❗️ 사용자들이 사용할 수 있도록 만든 웹페이지를 서버에 업로드하여, 기본적인 설정을 하여 사용가능하도록 해야함

웹 표준과 브라우저

웹 표준(Web Standard): ‘웹에서 사용되는 표준 기술이나 규칙’을 의미, W3C의 표준화 제정 단계의 ‘권고안’에 해당하는 기술

브라우저 공급업체: 브라우저를 만드는 회사

크로스 브라우징: 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 동작, 같은 화면 등)을 줄 수 있도록 제작하는 기술, 방법

ex) 크롬, 엣지, 파이어폭스, 오페라, 사파리, 웨일, 스윙, IE 등

렌더링(rendering): 브라우저의 뷰포트(웹 페이지가 출력되는 영역)에 웹 사이트를 출력하는(그림 그려내는)행위

웹에서 사용하는 이미지

Raster(.jpeg, .gif, .png): 픽셀이 모여 만들어진 정보의 집합
- 정교하고 다양한 색상을 자연스럽게 표현 가능
- 확대/축소 시 계단 현상, 품질 저하
- JPG(JPEG)
  - 손실 압축
  - 표현 색상도(24비트)가 뛰어남
  - 이미지의 품질과 용량을 쉽게 조절 가능
  - 가장 널리 쓰이는 이미지 포맷
- PNG
  - Gif의 대체 포맷으로 개발됨
  - 비손실 압축
  - 8비트/24비트 컬러 이미지 처리
  - Alpha Channel 지원 → 투명도 사용 가능
  - W3C권장 포맷
- GIF
  - 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
  - 비손실 압축
  - 여러 장의 이미지를 한 개의 파일에 담을 수 잇음(움짤, 애니메이션)
  - 8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)
- WEBP
  - JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
  - 완벽한 손실/비손실 압축 지원
  - GIF 같은 애니메이션 지원
  - Alpha Channel지원(손실, 비손실 모두)
Vector(.svg): 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태로 이루어진 이미지
- 확대/축소에서 자유로움, 용량 변화가 없음
- 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움
- SVG
  - 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷
  - 해상도의 영향에서 자유로움
  - CSS와 JS로 제어 가능
  - 파일 및 코드 삽입 가능