웹앱의 동작 원리, 웹 표준과 브라우저, 웹에서 사용하는 이미지, 특수 기호
- Fastcampus 프론트엔드 웹 개발의 모든 것 초격차 패키지 - Ch 1, Ch2
Review
스터디에서 강의를 추천 받아 패스트캠퍼스의 유료 강의를 들어보기로 했다.
2월에 결제 했지만 제로초님의 강의를 듣고 있어서 미루어 뒀었다. 이제 웹디자인기능사 실기 시험을
앞두고 다시 HTML과 CSS 공부를 시작하려고 한다.
국비 과정을 마무리하고 혼자 공부를 하니 감을 조금 잃은 것 같아서 다시 독하게 공부해보려고 한다.
낮에는 공부하고 밤에는 일하는 일상이 아직 익숙지 않지만 그래도 필라테스 학원에서 일하는 것이
지금 내 일상에 조금은 도움이 된다.
일을 하면서 얻게 된 것도 참 많다.
개인적으로 힘든 시기에 시작한 일이라 그런지 맡은 업무가 적고 중요하지 않은 일일지라도 감사한
마음으로 임하게 된달까. 국비 교육을 들으면서 일을 시작해 6개월이 지났고, 감사하게도 원장님께서
월급도 인상해주셨다. 일과 공부를 병행할 수 있게 편의를 많이 봐주셔서 감사하게 일하고 있다.
코딩 공부도 어렵지만 재밌고 무언가를 만들고 보면서 그 성취를 맛볼 수 있다는 것이 좋다 !
꾸준히 열심히 해봐야지 !
파이팅 !!!
- Fastcampus 프론트엔드 웹 개발의 모든 것 초격차 패키지 - Ch 1, Ch2
프론트엔드 개발이란?
: HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와
상호작용할 수 있도록 하는 것.
쉽게 설명하자면 HTML, CSS, JS를 이용해서 웹 페이지를 만들어 그 페이지를 사용자에게 보여주고,
사용자가 그 페이지를 사용할 수 있도록 하는 과정을 말한다.
사용자의 앞에 보이는 웹 사이트를 프론트엔드라고 칭하고, 보안을 요구하는 여러가지 데이터들이나
비즈니스 로직(Business Logic) 같은 사이트가 동작하기 위해 핵심적인 여러가지 정보들은 백엔드라는
뒷단에서 개발이 된다.
* 비즈니스 로직(Business Logic) : 웹 사이트가 동작하는데 필요한, 핵심 데이터 처리를 수행하는
알고리즘 등을 말한다.
또 풀스택 개발(Full-stack development)이란 GUI 프론트엔드부터, 데이터베이스 백엔드 등 모든 소프트
웨어 스택을 개발하는 것을 말한다.
HTML (Hyper Text Markup Language)이란?
: 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당한다.
하이퍼 텍스트(Hyper Text)는 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동)할 수 있는
텍스트를 말한다. 일반적으로 알고 있을 링크 버튼(텍스트)을 의미한다.
CSS (Cascading Style Sheets)란?
: 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현
(정적)을 담당한다.
JS (JavaScript)란?
: 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당한다.
우리가 알고 있는 웹 사이트들(웹 애플리케이션, 웹앱)은 구조, 스타일, 동적인 내용들이 합쳐져서 만들어진
하나의 결과물, 즉 사용자에게 제공되는 하나의 제품(Product)이다.
웹앱의 동작 원리
: 사용자는 컴퓨터에서 자신이 주로 사용하는 브라우저를 오픈한다.
그 브라우저로는 Chrome, Firefox, Edge 등이 있다.
그 중에 하나를 열어 주소창에 http 혹은 https의 형태로 각각의 프로토콜을 작성한 다음 자신이 접속하고자
하는 주소를 입력하게 된다.
* 통신 프로토콜(Communication Protocol, 통신 규약)은 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고
받는 양식 및 규칙의 체계를 의미한다. 대표적으로 HTTP, HTTPS, FTP, SSL 등이 있다.
해당하는 사이트의 주소에 맞는 서버로 최초의 요청(Requset)이 들어가게 된다.
서버에서는 요청이 들어온 시용자의 브라우저로 최초의 응답(Response)을 내어준다.
응답을 통해서 나가는 파일은 기본적인 웹 사이트의 구조를 담고 있는 HTML이 사용자에게 응답 된다.
그 HTML 파일을 통해 화면에 보여질 기본적인 구조들을 확인할 수 있다.
그 구조에 맞게 추가적으로 작성되어져 있는 여러가지 CSS 파일이나 JS 파일 혹은 이미지 파일 같은 것들이
명시되어 있을 것이다. 그런 파일들 역시 서버에 추가적으로 요청한다.
서버에서는 추가로 '새로운 파일 열어주세요' 라는 요청이 들어오면 그 새로운 파일들 역시 추가적으로 응답을
내어 준다. 그 추가 응답을 통해 CSS, JS, JPG 파일 등 다양한 정보들을 내어주는 과정을 거친다.
웹 사이트를 개발할 우리의 컴퓨터 환경을 '로컬(Local) 개발 환경' 이라고 부른다.
우리는 일단 HTML, CSS, JS를 이용해서 사용자에게 보여질 웹 페이지를 잘 만들어야 하고, 그렇게 잘 만든
제품, 즉 우리의 프로젝트들을 서버에다가 업로드하고 기본적인 설정들을 통해 사용자들이 접속할 수 있게
해야 한다.
웹 표준이란?
: 웹 표준(Web Standard)이란 '웹에서 사용되는 표준 기술이나 규칙'을 의미하고, W3C의 표준화 제정 단계인
'권고안(REC)'에 해당하는 기술이다.
W3C의 표준화 제정 단계는 크게 다음과 같이 4가지 단계를 가진다.
1. 초안 (Working Draft, WD)
2. 후보권고안 (Candidate Recommendation, CR)
3. 제안권고안 (Proposed Recommendation, PR)
4. 권고안 (W3C Recommendation, REC)
이런 단계들 중 '이제 이 기술은 표준입니다' 라고 권고를 내는 것이 있다. 이것이 권고안인데 이렇게 권고하는
기술들만 명확하게 표준이라고 정의할 수 있다.
구글, 마이크로소프트, 애플 등의 브라우저 공급업체(Browser Vendors)에서도 웹 표준에 의거해서 작성한
코드를 해석하고, 그 해석된 결과로 브라우저를 만드는 것이다.
크로스 브라우징
: 다음과 같은 브라우저들도 모두 웹 표준에 의거해서 만들어졌지만 모두 다른 사람에 의해 만들어진 것이
기 때문에 동작하는 환경은 조금씩 다를 수 있다.
그래서 등장한 것이 크로스 브라우징이라는 개념이다.
크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험
(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법이다.
이 중 인터넷 익스플로러(IE)는 브라우저 환경 자체가 웹 표준과 동떨어지는 것들이 많았다.
그래서 2020년 8월, 마이크로소프트(MS)는 인터넷 익스플로러(IE)의 모든 서비스 지원을 종료한다고
발표했다.
브라우저의 기본적인 인터페이스
1. 창(Window)
: 파란색 테두리로 감싸져 있는 영역을 브라우저 창(Window)라고 한다.
2. 탭(Tab)
: 브라우저 상단에 Google이라고 명시되어져 있는 작은 영역을 브라우저 탭(Tab)이라고 한다.
3. 주소창(Address bar)
4. 뷰포트(Viewport)
: 하나의 웹 페이지가 출력(렌더링, Rendering)되는 전체 영역을 뷰포트라고 한다.
* 렌더링(Rendering) : 브라우저의 뷰포트에 웹 사이트를 출력하는(그림 그려내는) 행위를 말한다.
웹에서 사용하는 이미지
1. 비트맵(Bitmap)
: 각각의 픽셀이 모여 만들어진 정보의 집합이다. 레스터(Raster) 이미지라고도 부른다.
<특징>
- 정교하고 다양한 생상을 자연스럽게 표현할 수 있다.
- 확대 / 축소 시 계단 현상이 일어나며 품질의 저하가 발생된다.
2. 벡터(Vector)
: 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지이다.
<특징>
- 확대 / 축소에서 자유롭고 용량 변화가 없다.
- 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어렵다.
* Material Design은 고품질 디지털 경험을 구축할 수 있도록 Google에서 만든 디자인 시스템(방식)이다.
비트맵에서 가지고 있는 확장자
1. JPG (JPEG)
: JPG(Joint Photographic coding Experts Group)는 Full-color와 Gray-scale의 압축을 위해 만들어졌으며,
압축률이 훌륭해 사진이나 예술 분야에서 많이 사용된다.
- 장점
: 손실을 압축할 수 있고, 표현 색상도(24비트, 약 1600만 색상)가 뛰어나다.
이미지의 품질과 용량을 쉽게 조절할 수 있고, 가장 널리 쓰이는 이미지 포맷이다.
- 단점
: 손실을 압축할 수 있지만 이미지를 반복적으로 저장하는 작업은 이미지 색상을 발하는 문제를 가지고
있기 때문에 되도록이면 피하는 것이 좋다.
Alpha Channel을 지원(투명도)하지 않는다.
2. PNG
: PNG(Portable Network Graphics)는 Gif의 대체 포맷으로 개발된 것이다.
- 장점
: 비손실 압축 방식이다.
8비트 색상(256 색상) / 24비트(약 1600만 색상) 컬러를 지원하여 이미지를 처리한다.
Alpha Channel을 지원(투명도)하여 원하는 이미지 영역만 화면에 출력할 수 있다.
W3C 권장 포맷 방식이다.
* Alpha Channel : 이미지 내부에서 투명한 부분을 사용할 수 있다.
- 단점
: JPG와 비교하면 용량이 조금 더 크다.
3. GIF
: GIF(Graphics Interchange Format)는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장한다.
- 장점
: 비손실 압축 방식이다.
여러 장의 이미지를 한 개의 파일에 담을 수 있다. (움짤, 애니메이션)
- 단점
: 8비트 색상(256 색상)만 지원하기 때문에 다양한 색상 표현에는 적합하지 않다.
4. WEBP
: JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷이다.
- 장점
: 완벽한 손실 / 비손실 압축을 지원한다.
GIF 같은 애니메이션을 지원한다.
Alpha Channel을 지원한다. (손실, 비손실 모두)
- 단점
: WEBP 라는 포맷은 완벽하기는 하지만 비교적 최근에 개발되었기 때문에 아직은 지원되는 브라우저에
한계가 있어 그 내역(하위호환성)을 분명하게 확인한 후 사용해야 한다.
5. SVG
: SVG(Scalable Vector Graphics)는 마크업 언어(HTML / XML) 기반의 벡터 그래픽을 표현하는 포맷이다.
- 장점
: 해상도의 영향에서 자유롭기 때문에 해상도나 이미지의 크기를 자주 변경해야 하는 환경(아이콘, 로고)
에서 자주 사용된다.
CSS와 JS로 제어가 가능하다.
파일 및 코드 삽입이 가능하다.
- 단점
: SVG 이미지의 복잡한 코드를 CSS와 JS로 디테일하게 제어하기는 매우 어렵기 때문에, 색상이나 일부
영역의 추가 / 제거 혹은 간단한 형태 생성 정도로 가볍게 사용한다.
특수 문자 용어
1. 그레이브(백틱) 기호 `
: Backtick, Grave 라는 용어로 사용하며 키보드에서 물결 기호와 함께 있다.
2. 틸드 기호 ~
: Tilde 라는 용어로 사용하며 물결 표시(~)라고도 한다.
3. 숫자 1번 - 느낌표 !
: Exclamation mark(엑스클러메이션)이라는 용어로 사용하며 느낌표라고도 한다.
4. 숫자 2번 - At sign @
: 앳, 골뱅이라는 용어로 사용한다.
5. 숫자 3번 - 샵 기호 #
: Sharp, Number sign이라는 용어로 사용하며, 우물 정자라고도 한다.
6. 숫자 4번 - 달러 기호 $
: Dollar sign이라는 용어로 사용하며, 달러 기호라고도 한다.
7. 숫자 5번 - 퍼센트 기호 %
: Percent sign이라는 용어로 사용하며, 퍼센트 기호라고도 한다.
8. 숫자 6번 - 캐럿 기호 ^
: Caret 이라는 용어로 사용하며, 캐럿 기호라고도 한다.
~이상, ~이하과 관련된 내용을 작성하는 경우에 사용한다.
9. 숫자 7번 - 엠퍼센드 기호 &
: Ampersand 라는 용어로 사용하며, 엠퍼센드 기호라고도 한다.
10. 하이픈 기호 -
: Hyphen, Dash, Minus 라는 용어로 사용하며, 음수를 나타낼 때 사용한다.
11. 언더스코어 기호 _
: Underscore, Low dash 라는 용어로 사용하며, 키보드에서 하이픈 기호와 같은 곳에 위치한다.
마이너스 기호와 헷갈릴 수 있지만 언더스코어 기호는 밑줄을 치는 것처럼 생겼다.
12. 이퀄 기호 =
: Equals sign이라는 용어로 사용하며, 동등함을 나타낼 때 사용한다.
13. 쿼테이션 마크 "
: 쿼테이션 마크라는 용어로 사용하며, 큰 따옴표라고도 한다.
14. 아포스트로피 기호 '
: Apostrophe 라는 용어로 사용하며, 작은 따옴표라고도 한다.
15. 콜론 :
: Colon이라는 용어로 사용하며, 땡땡 기호라고도 한다.
16. 세미콜론 ;
: Semicolon이라는 용어로 사용하며, 세미콜론이라고도 한다.
17. 콤마 ,
: Comma 라는 용어로 사용하며, 쉼표라고도 한다.
18. 피리어드 .
: Period, Dot이라는 용어로 사용하며, 닷, 마침표, 점이라고도 한다.
19. 퀘스천 마크 ?
: Question mark 라는 용어로 사용하며, 물음표라고도 한다.
20. 슬래시 기호 /
: Slash 라는 용어로 사용하며, 오른쪽 상단에서 시작해 왼쪽 하단으로 끝난다.
21. 버티컬 바 |
: Vertical bar 라는 용어로 사용하며, 위에서 아래로 수직으로 그어 놓은 기호이다.
원화 표시와 같은 기호이다.
22. 백슬래시 \
: Backslash 라는 용어로 사용하며, 역 슬래시라고도 한다. 왼쪽 상단에서 시작해 오른쪽 하단으로
끝난다.
23. 퍼렌서시스 ( )
: Parenthesis 라는 용어로 사용하며, 소괄호, 괄호라고도 한다.
24. 브레이스 기호 { }
: Brace 라는 용어로 사용하며, 중괄호라고도 한다.
25. 브래킷 기호 [ ]
: Bracket이라는 용어로 사용하며, 대괄호라고도 한다.
26. 앵글 브래킷 기호 < >
: Angle Bracket이라는 용어로 사용하며, 꺽쇠괄호라고도 한다.