<한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online.>
환급 챌린지 1일차 시작! 15만원이 걸려있다. 두근두근.... 성공 기원...
Ch1. 개요
프론트엔드란 HTML, CSS, JS를 사용해 데이터를 GUI로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것이다. 사용자의 앞에 보여지는 웹사이트를 만드는 것은 프론트엔드가, 비지니스 로직 등의 핵심적인 동작은 백엔드가 담당한다.
프론트엔드에서 사용할 수 있는 큰 줄기에는 HTML, CSS, JS가 있다. 각각의 언어들은 모두 다른 역할을 가지는데 HTML은 웹의 구조, CSS는 시각적인 표현(정적), JS는 페이지를 동작시키는 동적 처리를 담당한다.
크로스 브라우징은 크롬, 엣지, 웨일, 사파리 등 조금 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험을 줄 수 있도록 제작하는 기술이다. 즉 다른 브라우저에서 우리가 만든 웹 페이지가 동일하게 출력하고 동작하도록 제작하는 기술이나 방법들을 의미한다.
브라우저의 인터페이스는 창(Window), 탭(Tab), 주소창(Address bar), 뷰포트(Viewport)로 이루어져있다. 뷰포트는 하나의 웹페이지가 출력되는 전체 영역을 의미한다. 자주 쓰게 될 용어이므로 기억하기!
웹에서 사용하는 이미지에는 비트맵과 벡터가 있다. 비트맵은 픽셀이 모여 만들어진 이미지이며 레스터 이미지라고도 부른다. 벡터는 점, 선 면 등 수학적 정보의 형태로 이루어진 이미지이다.
먼저 비트맵 이미지의 대표적인 예를 알아보겠다.
- JPG : Full-color와 Gray-scale의 압축을 위해 만들어졌으며 손실 압축
- PNG : Gif의 대체 포맷으로 개발되었으며 Alpha Channel(투명도)를 지원하는 비손실 압축인
- GIF : 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있음
- WEBP : JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷. 완벽한 손실/비손실 압축과 애니메이션, Alpha Channel을 지원한다.
다음으로 벡터 이미지의 예이다.
- SVG : 마크업 언어 기반의 벡터 그래픽을 표현하는 포맷. 해상도의 영향에서 자유로움.
꼭 알아야 할 특수 문자 용어들!!
- 백틱, 그레이브 (Backtick, Grave) : ` (물결 기호와 함께 표시되어있는 기호)
- 틸드, 물결 표시 (Tilde) : ~
- 엑스클러메이션, 느낌표 (Exclamation mark) : !
- 앳, 골뱅이 (At sign) : @
- 샵, 넘머, 우물 정 (Sharp, Number sign) : #
- 캐럿 (Caret) : ^ (~~이상 을 표현할 때 사용)
- 엠퍼센드 (Ampersand) : &
- 에스터리스크, 별표 (Asterisk) : *
- 쿼테이션, 큰 따옴표 (Quatation mark) : "
- 아포스트로피, 작은 따옴표 (Apostrophe) : '
- 버티컬 바 (Vertical bar) : | (원화 표시와 함께 표시되어있는 기호)
- 퍼렌서시스, 소괄호, 괄호 (Parenthesis) : ( )
- 브레이스, 중괄호 (Brace) : { }
- 브래킷, 대괄호 (Bracket) : [ ]
- 앵글 브래킷, 꺽쇠괄호 (Angle Bracket) : < >
※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글
| 패스트캠퍼스 챌린지 6일차 - Part1. Ch5 (0) | 2021.11.06 |
|---|---|
| 패스트캠퍼스 챌린지 5일차 - Part1. Ch4 (0) | 2021.11.05 |
| 패스트캠퍼스 챌린지 4일차 - Part1. Ch3 (0) | 2021.11.04 |
| 패스트캠퍼스 챌린지 3일차 - Part1. Ch3 (0) | 2021.11.03 |
| 패스트캠퍼스 챌린지 2일차 - Part1. Ch2 (0) | 2021.11.02 |