[카테캠 1주차] 개요

 

프론트 엔드 개발이란?

HTML CSS JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것.

 

 

HTML, CSS 그리고 JS

HTML (Hyper Text Markup Language)

페이지의 제목, 문단, 표, 이미지, 동영상 등의 웹의 구조를 담당.

 

* 하이퍼 텍스트란? : 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동) 할 수 있는 텍스트를 말합니다. 일반적으로 알고 있을 링크 버튼(텍스트)를 의미합니다.

 

 

CSS (Cascading Style Sheets)

실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당.

 

 

JS (JavaScript)

콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당.

 

웹앱의 동작원리

 

1. 사용자가 브라우저를 통해 주소창에 페이지 주소를 입력한다.

* 통신 프로토콜(Communication Protocol, 통신 규약)은 컴퓨터나 원거리 통신 장비에서 메세지를 주고 받는 양식 및 규칙의 체계를 의미합니다. 대표적으로 HTTP, HTTPS. FTP. SSL 등이 있습니다.

 

2. 해당 페이지에 맞는 서버로 최초 요청(Request)을 한다.

 

3. 서버는 브라우저에게 최초 응답(Response)을 준다.

HTML 파일을 전송한다.

 

4. 브라우저는 HTML 을 해석하여 CSS, JS, 이미지 파일을 추가 요청한다.

 

5. 서버는 해당 되는 CSS, JS, JPG 를 추가 응답한다.

 

 

웹 표준과 크로스 브라우징

웹표준

웹 표준(Web Standard)란 '웹에서 사용되는 표준 기술이나 규칙'을 의미합니다. W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술입니다.

 

* W3C의 표준화 제정 단계는 크게 다음과 같이 4가지 단계를 가집니다.

1. 초안

2. 후보권고안

3. 제안권고안

4. 권고안

 

 

크로스 브라우징

크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법.

 

 

뷰포트 (Viewport)

 

렌더링(Rendering)이란 브라우저의 뷰포트에 웹 사이트를 출력하는 행위를 말합니다.

 

 

웹에서 사용하는 이미지

웹 이미지

• 비트맵(Bitmap): 픽셀이 모여 만들어진 정보의 집합, 래스터(Raster) 이미지라고도 부름.
  • 장점: 정교하고 다양한 색상을 표현할 수 있다.
  • 단점: 확대 / 축소 시 계단 현상, 품질 저하
• 벡터(Vector): 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지.
  • 장점: 확대 / 축소에서 자유로움, 용량 변화가 없음..
  • 단점: 정교한 이미지(인물, 풍경 사진)를 표현하기 어렵다.

 

비트맵

JPG 

압축률이 우수해 사진이나 예술 분야에서 많이 사용된다.

• 손실 압축 
  이미지가 손실되면서 압축됨을 의미한다. 계속해서 저장이 반복될 경우 이미지가 손실이 되어 원본과 차이가 나게된다. (디지털 풍화)
• 표현 색상도 24비트 (1600만 개의 색상을 표현가능)

 

PNG

Gif의 대체 포맷으로 개발되었습니다.

• 비손실 압축 (반복 저장에 손실이 발생하지 않지만 JPG와 비교할때 크기가 더 큽니다.)
• 색상 표현에 8비트 와 24비트를 지원한다.
• 투명도 지원

 

투명도를 지원하기 때문에 배경이 투명색이 된다.

 

GIF

이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장합니다.

• 비손실 압축
• 움짤, 애니메이션
• 8비트 색상만 지원(다양한 색상표현에는 적합하지 않다.)

 

WEBP

JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷.

• 손실/ 비손실 압축 지원
• GIF 같은 애니메이션 지원
• 투명도 지원

 

벡터(Vector)

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

• 해상도의 영향에서 자유롭다.
• CSS와 JS로 제어 가능
• 파일 및 코드 삽입 가능

 

SVG 코드

SVG 이미지의 복잡한 코드를 CSS 와 JS 로 디테일하게 제어하기는 매우 어렵기 때문에,

색상이나 일부 영역의 추가/제거 혹은 간단한 형태 생성 정도로 가볍게 사용한다.

 

 

 

특수 기호

• ^ (캐럿)
• ~ (틸드)
• & (엠퍼센드)
• - (하이픈)
• _ (언더스코어)
• | (버티컬 바)
• < > (앵글 브래킷)

 

오픈 소스 라이선스(저작권)

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

 

아래의 라이선스들은 무료이다.

 

Apache License

아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스, 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능

 

 

MIT License

MIT에서 소프트웨어 학생들을 위해 개발한 라이선스, 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며 나머지 사용에 대한 제약은 없음.

 

프로젝트 소스 코드에 외부에서 가져온 오픈소스의 라이선스 내용만 명시하면 충분하다.

 

 

BSD Licnese

BSD는 버클리 캘리포니아대학에서 개발한 라이선스, MIT와 동일 조건

 

 

Beerware

오픈소스 개발자에게 맥주를 사줘야 하는 라이선스

 

재밌는 라이선스네 ㅋㅋ..