프론트엔드 - 1. HTML/CSS/JS 기본지식

프론트엔드: 사용자에게 보여지는 앞단

 

HTML: 기획자

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

눈, 코, 입 등 영역의 구조를 만듬

CSS: 디자이너

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

얼굴, 눈, 입의 모양새를 만듬

JS: 개발자

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

그 얼굴을 움직이게 하는 것

 

*자바스크립트 시작하면 그만두는 사람이 많음

사고 방식이 달라짐

데이터 중심의 사고

 

 

1.웹앱 동작 구조

사용자 컴퓨터 브라우저 오픈->주소창에 페이지 주소 입력->최초 요청->(서버)->최초응답->추가요청->(서버)->추가응답

 

-로컬 개발 환경: 웹사이트를 개발할 우리의 컴퓨터환경

서버에 프로젝트를 업로드하고 사이트에 접속할 수 있도록 하는 것이 필요

 

 

2.웹 표준

W3C에서 표준 권고안을 만듬->거기에 해당하는 기술들만 웹 표준

전 세계의 표준 웹기술

 

-브라우저 공급업체: 브라우저를 만든 회사

브라우저 공급업체에서도 브라우저를 웹 표준을 기반으로 해석하고 표현할 수 있도록 만듬

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

->다 다르게 구동되는 크로스 브라우징 이슈가 사라지고 있음

 

*인터넷 익스플로러는 웹 표준과 동떨어진 환경이 많음. 공식 익스플로러는 종료됨

오래된 서비스들은 익스플로러에서 서비스를 해야 할 수도 있음

 

 

3.용어

-창: 브라우저 창 전체

-탭: 창 안에 들어있는 각각의 페이지를 구분 가능한 영역

-주소창

-뷰포트: 웹페이지가 출력(렌더링)되는 전체 영역, 창 탭 주소창을 제외한 영역

 

 

4.웹 이미지

 

1)비트맵: 

픽셀이 모여 만들어진 정보의 집합. 레스터 이미지

정교하고 다양한 색상을 자연스럽게 표현

확대, 축소시 계단현상, 품질 저하

jpg, png

 

 

(1)jpg

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

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

 

-장점

용량 획기적 감소

표현색상도(24비트, 약 1600만 색상)가 뛰어남

사용 환경 다양함

-단점

손실압축(이미지가 손실되면서 압축)

jpg포맷으로 여러번 저장시 색상이 바램->반복적으로 새롭게 저장하는 행위 자제

 

 

(2)png

비손실 압축

Gif 대체 포맷

 

-장점

비손실 압축

8비트(256색상) / 24비트 (약 1600만 색상) 컬러 이미지 처리

Alpha Channel 지원(투명도)

W3C권장 포맷

 

-단점

용량 큼

투명영역 없으면 jpg선택이 유리

 

 

(3)Gif

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

하나의 이미지 안에 여러장의 이미지 저장 가능

 

-장점

움짤, 애니메이션

 

-단점

8비트 색상만 지원(256개)->다양한 색상 표현에는 적합하지 않음

 

 

(4)WebP

Jpg, png, Gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷

 

-장점

완벽한 손실/비손실 압축 지원

애니메이션 지원

Alpha Channel 지원(손실, 비손실 모두)

 

-단점

인터넷 익스플로러 사용 불가

브라우저에서 사용 가능한지 확인해야함(하위 호환성** 확인)

 

 

 

2)벡터: 

점, 선, 면의 위치(좌표) 색상 등 수학적 정보의 형태로 이루어진 이미지

확대,축소에서 자유롭고 용량 변화가 없음

정교한 이미지를 표현하기는 어려움

svg등 Material Design

 

 

(1)SVG

마크업 언어(HTML/XML)기반의 벡터 그래픽

 

-장점

해상도의 영향에서 자유로움->이미지를 자주 변경해야 하는 아이콘이나 로고에서 자주 사용

CSS와 JS로 제어 가능->코드로 되어 있음

*SVG이미지의 복잡한 코드를 디테일하게 코드로 제어하기는 매우 어렵기 때문에 색상이나 일부 영역의 추가/제거 혹은 간단한 형태 생성 정도로 가볍게 사용

파일 및 코드 삽입 가능

 

 

 

5.특수 용어 정리

"그레이브(백틱)기호를 사용해서 문자를 보간해서 넣어주세요"

 

-백틱, 그레이브(Backtick, Grave)

`

-틸드, 물결

~

-엑스클러메이션, 느낌표

!

-앳사인, 골뱅이

@

-샵, 넘버사인, 우물정

#

-캐럿

^(~이상이라는 뜻)

-앰퍼센드

&

-에스터리스크, 별표

*

-하이픈, 대시, 마이너스

-

-언더스코어, 로대시, 밑줄

_

-피리어드, 닷

.

-슬래시

/

-버티컬바

|(원화 쉬프트)

-백슬래시

\

-퍼렌서시스, 소괄호, 괄호

()

-브레이스, 중괄호

{}

-브래킷, 대괄호

[]

-앵글 브래킷, 꺽쇠괄호

<>

 

 

6.오픈소스 라이선스

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

OpenSource.org

개인사용가능-기업사용가능=>무료

 

(1)Apache License

아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스

개인적/상업적 이용, 배포, 수정, 특허신청 가능

자유 사용 가능

 

(2)MIT License

MIT에서 학생들을 위해 개발한 라이선스

개인 소스에 이 라이선스를 사용하고 있다는 표시를 해야함

대부분은 자동으로 오픈소스가 같이 빌드되기 때문에 신경쓸 필요는 없음

 

(3)BSD License

MIT와 동일

 

(4)Beerware

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

 

=>무료로 해석될 수 있는 라이선스들