한번에 끝내는 프론트엔드 개발 초격차 패키지 Part 1 ch1

온라인 교육 내용 중 꿀팁 정리하기🧐

Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트

ch1. 개요

02. HTML, CSS 그리고 JS

• html은 웹의 구조를 담당 (기획자)
• css는 콘텐츠를 꾸며주는 시각적인 표현 정적인 처리(디자이너)
• js는 페어지를 동작시키는 동적인 처리 (개발자)

03. 웹앱의 동작원리

• 사용자가 최초 요청 -> 서버가 최초의 응답 (기본적인 구조를 담고있는 html이 사용자에게 응답이 되게됨) -> 추가적 css, js, jpg 등에 대한 추가 요청-> 서버가 응답

04. 웹 표준과 브라우저

• 크로스 브라우징 (cross browsing) : 크롬, 엣지, 파이어폭스, 오페라 등의 다양한 브라우저에 동일한 사용자 경험을 제공하는 기술 방법

• 크로스 브라우징 이슈 해결을 위한 해결책들이 많이 나오고 있고, 표준이 많이 생겨서 개발자들에겐 다행이지만 아직 해결해야할 부분들이 있어서 이슈 해결 필요!

• IE는 2020년 서비스 종료, 웹표준을 따르지 않은 경우가 많다.

• 뷰포트 (viewport) 는 하나의 웹페이지가 출력되는 전체 영역

05. 웹에서 사용하는 이미지

비트맵 vs 벡터

• 비트맵 : 정교하고 다양한 색상을 ㅈ연스럽게 표현, 확대 축소 시 품질 저하 (ex. png, jpg)

  • jpg는 손실압축이어서 압축률이 훌륭해서 손실되면서 압축된다,,, 그래서 여러번 저장하지 않아야 함!

  • png가 비손실 압축이고 w3c 권장 포맷이고, alpha channel 지원 (transparent 색상 제공)

  • WEBP는 jpg, png, gif 모두 대체 가능한구글이 개발 완벽한 손실/ 비손실 압축 지원, gif같은 애미네이션 지원, alpha channel 지원, ie에서 제공 안함

• 벡터 : 확대 축소시 자유로움 용량변화가 없음 , 정교한 이미지를 표현하기 어려움 (ex. svg)

  • svg 해상도의 영향에서 자유로움, css와 js 로 제어 가능 마크업 언어 기반의 벡터 그래픽을 표현하는 포맷

  • 하위호환성 : 예전 버전 환경에서 특정 기술이 사용가능한지 확인하는 것

6. 특수기호

• ` (backtick, grave) 백틱, 그레이브
• ~ (tilde) : 틸드
• ^ (caret) : 캐럿
• & (ampersand): 엠퍼센드

7. 오픈소스 라이선스

• 오픈소스 라이선스 확인하기! beerware 라이센스 귀엽당
  만나면 맥주를 사주세요 ㅎㅎㅎㅎ