Part1. HTML & CSS 첫걸음

나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 HTML & CSS

강의자료: https://heropy.blog/2019/04/24/html-css-starter/

강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/

1. HTML, CSS 그리고 JS

◾️ HTML(Hyper Text Markup Language)

- 웹의 뼈대를 담당하는 역할

- 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어

 

◾️ CSS(Cascading Style Sheets)

- 화면을 예쁘게 꾸미는 역할로 웹의 시각적인 표현을 담당

- 마크업 언어(HTML, XML 등)가 실제 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어

 

◾️ JS(JavaScript)

- HTML과 CSS 모두 정적 언어인 반면 JS는 동적 언어로 웹의 동적 처리를 담당

- 콘텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할

2. 웹 표준과 웹

◾️ 웹 표준(Web Standard)

- ‘웹에서 사용되는 표준 기술이나 규칙’을 의미

- W3C의 권고안에서 나온 기술들이 웹 표준에 해당

- 표준 기술들을 기준으로 웹 브라우저들(크롬, IE, 사파리 등)이 만들어짐

✔️ 브라우저를 만드는 업체(구글, MS, 애플 같은)에서 표준 기술을 해석하는 차이, 새로운 기술 삽입(표준화 단계에 따른) 등으로 브라우저들이 다르게 구동되는 것임

구글 크롬, MS 엣지, 모질라 파이어폭스, 오페라, 이스트소프트 스윙, 네이버 웨일, MS IE, 애플 사파리

◾️ 크로스 브라우징(Cross Browsing)

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

- 대부분의 브라우저는 최대한 웹 표준을 준수해서 제작되기 때문에 문제 되는 경우가 적지만 MSIE(마이크로소프트 인터넷 익스플로어) 브라우저는 웹 표준과 맞지 않는 것들이 있음

✔️ 그래서 대부분의 경우 IE에서 문제가 없으면 다른 브라우저는 OK

 

◾️ 웹 접근성

- 정상적인 웹 콘텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법

- 정보 통신 보조기기, 웹 접근성 품질인증 마크

 

웹의 힘은 그것의 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
팀 버너스 리 경 - 웹의 창시자

 

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

◾️ 비트맵과 벡터 이미지

- 이미지(그래픽)는 크게 비트맵과 벡터로 구분

 

◽️ 비트맵(Bitmap)

- 각 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고도 부름

- 픽셀 단위로 화면에 렌더링(렌더링: 컴퓨터가 화면에 그림을 그려서 우리가 볼 수 있게 함)

 

◽️ 벡터 이미지

- 벡터(Vector)는 수학적 정보의 형태(Shape)들이 만들어내는 결과물

- 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 이를 화면에 렌더링함

- 더 많은 연산을 해야 하지만, 해상도로부터 자유로워짐 (즉 확대나 축소를 해도 이미지가 깨지지 않음)

- 수학적 정보만을 가지고 있기 때문에 이미지 확대/축소에 따른 용량 변화가 없음

이미지 종류	장점	단점
비트맵	정교하고 다양한 색상을 자연스럽게 표현	확대/축소 시 계단 현상, 품질 저하
벡터	확대/축소에서 자유로움, 용량 변화가 없음	정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움

 

◾️ JPG(JPEG)(Joint Photographic coding Experts Group)

- Full-color와 Gray-scale의 압축을 위해 만들어짐

- 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용됨

- 손실압축의 방식을 쓰기 때문에 원본을 다시 JPG의 파일로 변환시키는 방법은 추천하지 않음! 이미지가 손실됨

• 손실 압축
• 표현 색상도(24비트, 약 1600만 색상) 뛰어나 고해상도 표시장치에 적합
• 이미지의 품질과 용량을 쉽게 조절 가능
• 가장 널리 쓰이는 이미지 포맷

 

◾️ PNG(Portable Network Graphics)

- Gif의 대체 포맷으로 개발됨

• 비손실 압축
• 8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
• Alpha Channel 지원(투명도)
• W3C 권장 포맷
• 투명도 지원!

 

◾️ GIF(Graphics Interchange Format)

- 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장

• 비손실 압축
• 여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
• 8비트 컬러만 지원(다양한 색상을 표현하는 작업에는 적합하지 않음)

 

✔️ 웹에서 가장 많이 사용되는 3가지 유형: JPG, PNG, GIF

• 이미지의 용량이 커서 용량의 문제가 가장 이슈일 경우는 JPG를 사용
• 이미지를 삽입할 때 이미지의 투명도가 필요하면 PNG를 사용
• 이미지가 애니메이션 기능을 지원하길 원한다면 GIF를 이용

 

◾️ WEBP

- JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷이지만 지원 브라우저가 많지 않아서...

 

◾️ SVG(Scalable Vector Graphics)

- 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷

- 반응형 사이트에서 많이 사용되는 이미지 포맷

• 해상도의 영향에서 자유로움
• CSS로 Styling 가능
• JavaScript로 Event Handling 가능
• 코드 혹은 파일로 사용 가능

 

4. 오픈소스와 라이선스

◾️ 오픈소스

- 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것

- 오픈소스가 무조건 무료라는 생각은 틀림! 그러다 큰 코 다칠 수도...

- 오픈소스를 찾았다면 바로 License부터 찾아야됨!!

 

◽️ 무료로 쓸 수 있는 라이선스

• Apache License
• MIT License - 가장 많이 보게 될 라이선스
• BSD License
• Beerware

더 많은 오픈소스 라이선스에 대한 정보는 OpenSource.org