HTML/CSS/JS

수업 개요

학습 개요

• 웹 프론트엔드 개발의 핵심 줄기를 학습!
• 중요도가 높은 내용을 위주로 학습
• 난이도가 높고 중요도가 낮은 내용은 가볍게 학습하거나 생략

프론트엔드 개발

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

HTML, CSS, JS

HTML(Hyper Text Markup Language)

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

CSS(Cascading Style Sheets)

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

JS(JavaScript)

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

웹앱의 동작원리

1. 브라우저(https://) 사용 시 최초 요청(Request)이 서버로 갑니다.
2. 서버에서 요청이 들어온 사용자의 브라우저로 가서 최초 응답(Response)을 해줍니다. 응답을 통해서 나가는 파일은 기본적인 구조를 담은 html 파일이 갑니다.
3. 기본적인 것 외에 다른 것들(이미지, 입력창, 팝업창 등)을 추가 요청을 합니다.
4. 서버에서는 다른 파일들(css, js, jpg)을 추가 응답을 해주어야 합니다.

웹 표준과 브라우저

웹표준

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

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

1. 초안(Working Draft, WD)
2. 후보권고안(Candidate Recommendation, CR)
3. 제안권고안(Proposed Recommendation, PR)
4. 권고안(W3C Recommendation,REC)

크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서 동일한 사용장 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법입니다.(ex. 크롬, 엣지, 파이어폭스, 오페라, 스윙, 웨일, 사파리)

웹에서 사용하는 이미지

비트맵(Bitmap) - 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster)이미지라고도 부릅니다.(.jpeg, gif, png)
1. 정교하고 다양한 색상을 자연스럽게 표현합니다.
2. 확대/축소 시 계단 현상과 품질을 저하시킵니다.
벡터(Vector) - 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지입니다.(.svg)
1. 확대/축소에서 자유로움과 용량 변화가 없습니다.
2. 정교한 이미지(인물, 풍경 같은 사진 같은)를 표현하기가 어렵습니다.

특수 기호

` - Backtick(백틱), Grave(그레이브)
~ - Tilde(틸드, 물결표시)
! Exclamation mark(엑스클러메이션, 느낌표)
@ - At sign(앳 ,골뱅이)
# - Sharp, Number sign(샵, 넘버, 우물 정)
$ - Dollar sign(달러)
% - Percent sign(퍼센트)
^ - Caret(캐럿)
& - Ampersand(엠퍼센드)
* - Asterisk(에스터리스크, 별표)
- - Hyphen, Dash(하이픈, 대시, 마이너스)
_ - Underscore, Low dash(언더스코어, 로대시 , 밑줄)
= - Equals sign(이퀄, 동등)

오픈소스 라이선스

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

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

MIT License - 매사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스이고, 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되고, 나머지 사용에 대한 제약이 없습니다.

BSD License - 버클리 캘리포니아대학에서 개발한 라이선스, MIT와 동일한 조건을 가지고 있습니다.

Beerware - 오픈소스 개발자에게 맥주를 사줘야 하는 라이선스입니다.(단. 만날수 있는 경우에만...)