[PM/PO강의] 1. IT 첫 걸음 개요
기초부터 다져보자
프론트엔드 개발의 큰 줄기
1. HTML (Hyper Text Markup Language)
페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 '구조' (요소) 자체를 담당
2. CSS (Cascading Style Sheets)
실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 저장해 콘텐츠를 꾸며주는 시각적 표현(정적)을 담당
3. JavaScript
콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당
물론 웹에서 이미지, 몇 가지 데이터 파일이 동작할 수 있지만, 기본적으로 웹 브라우저에서 동작하는 개발 언어는 이렇게 세 가지이다.
'사고 방식'이 다른 점에 주의
HTML, CSS는 레이아웃 중심, JavaScript는 데이터 중심
로컬 개발 환경
웹 사이트를 개발할 우리의 컴퓨터 환경을 말함. 외부에 노출하기 위해서는 '서버'에 업로드하고, 해당 서버 주소를 설정해서 사람들이 접속할 수 있어야 한다.
웹앱 (웹사이트, 웹페이지, 웹 애플리케이션)
우리가 보는 사이트를 의미한다.
도메인 주소를 입력하면 Request가 서버에 들어가고, 최초 응답 Response은 HTML이다. 그 구조에 맞게 서버에 추가 요청을 하고, 추가 응답으로 CSS, JS, JPG 등의 파일을 받는다.
웹 표준 (Web Standard)
웹에서 사용되는 표준 기술, 규칙은 W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술이다.
참고. W3C의 표준화 제정의 4단계
1. 초안 (Working Draft, WD)
2. 후보권고안 (Candidate Recommendation, CD)
3. 제안권고안 (Proposed Recommendation, PR)
4. 권고안 (W3C Recommendation, REC)
크로스 브라우징
웹 표준을 근거로 브라우저가 만들어졌지만 동작 방식이 저마다 다를 수 있다. 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술, 방법. 요즘은 많은 부분에서 통일이 되어, 크로스 브라우징 이슈는 점차 사라지고 있는 추세.
뷰포트(Viewport)s
하나의 웹 페이지가 출력(랜더링)되는 영역
웹에서 사용하는 이미지
1. 비트맵 (bitmap)
'픽셀'이 모여 만들어진 정보의 집합.
래스터(raster) 이미지라고도 불림.
대부분의 사진이 여기에 속함, 정교하고 다양한 색상을 자연스럽게 표현. 확대/축소 시 품질 저하.
벡터를 사용하면 사진은 너무 많은 수학적 정보 필요해서 용량이 커지므로 적절하지 않음.
확장자 예: jpg, png
JPG (JPEG) (Joint Photographic coding Experts Group)
손실 압축 방식 (픽셀이 손실되며 압축되기에 용량이 작은 장점)
이미지 품질, 용량 쉽게 조절 가능하나, 여러 번 저장되면 여러 번 손실되니 주의.
표현 색상도(24비트, 약 1600만 색상) 우수
PNG (Portable Network Graphic)
gif의 대체 포맷으로 개발되었고, 비손실 압축
8비트(256 색상), 24비트(약 1600만 색상)
Alpha Channel 지원 (투명도)
GIF (Graphics Interchange Format)
비손실 압축.
하나의 이미지 파일 내 이미지 및 문자열 같은 정보들을 저장. 여러 이미지를 한 개의 파일에 담을 수 있음 (움짤, 애니메이션)
8비트 색상만 지원
WEBP
구글이 개발한 이미지 포맷, 완벽한 손실/비손실 압축을 모두 지원.
GIF 기능 지원, Alpha Channel 지원 (손실/비손실 모두)
IE 브라우저 외 대부분의 브라우저에서 지원됨 (하위 호환성 O)
SVG (Scalable Vector Graphics)
마크업 언어 (HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷. CSS, JS로 제어 가능하고 파일 외에 코드로도 삽입 가능.
해상도의 영향에서 자유로움 (이미지 크기 자주 변동되는 환경이나 개체 - 아이콘 등- 에 사용)
다양한 포맷 사용하는 현대 웹페이지에 적합
2. 백터 (vector)
점, 선, 면의 위치(좌표), 색상 등 '수학적 정보' 형태(shape)로 이뤄진 이미지.
확대/축소 시 품질 및 용량 변화가 없음.
정교한 이미지 표현은 어려움.
확장자 예: svg
오픈소스
어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근 및 열람할 수 있도록 공개하는 것을 의미한다.
라이선스 내용을 자신의 프로젝트 소스 코드에 정확히 명시하면 충분하다. 개인용/상업적 이용이 가능한 것인지 확인을 해보자. 대부분의 프로젝트에서는 자동으로 오픈소스가 같이 빌드(웹 사이트의 최종 결과를 만드는 행위)되기에 따로 관리할 필요는 없다.
무료로 사용할 수 있는 라이선스
1. Apache License
2. MIT License
3. BSD License
4. Beerware
오픈 소스 역시 저작물이기에 보호를 받는다. 4번은 마음껏 사용은 할 수 있되 언젠가 만나면 맥주 한 잔 사달라는 의미의 라이선스 :)