프론트엔드란?
: HTML, CSS, JS를 사용하여 웹페이지를 사용자에게 보여주는 것.
프로그램을 사용하여 데이터를
-> 그래픽 사용자 인터페이스(GUI)로 변환하여
-> 사용자와 상호작용할 수 있도록 하는 것이다.
3개의 언어란?
: HTML, CSS, JS를 말한다.
HTML
: 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당한다. [기획자]
이미지와 글씨 등의 정보들이 나열만 되어있는 날것의 상태이다.
CSS
: 실제 화면에 표시되는 방법(색상,크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당한다. [디자이너]
JS
: 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당한다. [개발자]
- HTML로 구조를 만들고 -> CSS로 스타일(꾸미기) -> JS로 동적인 내용
- 모든 언어를 다룰 줄 알아야 제대로 된 개발을 할 수 있게 된다.
웹사이트를 만드는 순서와 흐름
브라우저
: 크롬, 파이어폭스, 엣지 등이 있다.
브라우저에 http 또는 https (통신 프로토콜)을 작성 후 페이지 주소를 입력하면
만들어진 웹사이트에 들어갈 수 있다.
- 기본 흐름
브라우저
-> Request(최초요청)
-> 서버
-> Response(최초응답) : HTML
-> 브라우저
-> 서버에 추가요청
-> 서버
-> 추가응답 : CSS, JS, IPG 등
웹사이트 개발은 우리의 컴퓨터에서 만든다. (=로컬 개발 환경)
로컬 개발 환경에서 만든 것을
-> 서버에 업로드하고
-> 서버에 주소를 설정하여
-> 그 주소로 접근하는 사람들에게 웹사이트를 보여준다.
웹표준(W3C)이란?
: 웹에서 사용되는 표준 기술 이나 규칙을 의미한다. ( HTML, CSS, JS 등 )
크로스 브라우징이란?
여러 브라우저에서 동일한 사용자경험(같은 화면, 같은 동작등)을 줄 수 있도록 제작하는 기술 방법
- 크림, 엣지, 파이어폭스, 오페라, 스윙, 웨일, 사파리 등의 모든 브라우저에서도 동일한 화면을 보여주고 동작하게 하는 것이다.
브라우저의 인터페이스
: 창, 탭, 주소창, 뷰포트
- 창 (Window)
: 화면에 보이는 모든 영역. - 탭 (Tap)
: 새창을 열때 사이트의 이름이 적힌 창이 뜨는 것. (맨위에 위치) - 주소창 (Address bar)
: http뒤에 주소가 적힌 영역. - 뷰포트 (Viewport)
: 하나의 웹페이지가 출력되는(렌더링되는) 영역. (주소창 아래의 모든 부분)
웹 이미지란?
: 비트맵과 벡터로 나뉜다.
-
비트맵 (Birmap)
: 픽셀이 모여 만들어진 이미지이다.
레스터(Raeter)이미지라고도 불린다.
ㅡ jpeg, gif, png -
벡터 (Vector)
: 점, 선, 면으로 이루어진 이미지이다.
ㅡ svg
비트맵과 벡터의 장 단점
-
비트맵
: 정교하고 다양한 색상을 자연스럽게 표현이 가능하다.
확대/축소시 계단(점)현상과 품질 저하가 일어난다.
고용량으로 용량이 높다. -
벡터
: 확대/축소에서 자유롭다.
용량변화가 없다.
정교한 이미지를 표현하기 어렵다. (인물, 풍경등과 같은 이미지)
머터리얼디자인(Material design)의 이미지를 만들기 적합하다. (단순한 로고나 픽토그램 등)
JPG란?
: 다양한 컬러를 사용하며 압축률이 훌륭하다. (사진, 예술 분야에서 많이 사용)
- 손실 압축
: 이미지가 손실되면서 압축이 되는 것이다.
용량이 획기적으로 줄어들기 때문에
이미지를 반복적으로 새롭게 저장하는 것을 피해야 한다.
표현색상도가 24비트(약 1600만색상으로) 매우 뛰어나 컬러표현이 넓다.
이미지의 품질과 용량을 쉽게 조절이 가능하다.
가장 널리 쓰이는 이미지 포맷이다.
PNG란?
: 배경을 없애고 이미지만 사용이 가능하다.
- Alpha Channel을 지원한다. (투명도)
비손실압축으로 이미지가 손상되지 않지만 용량이 크다.
8비트(256색상)와 24비트(약1600만색상)의 컬러를 동시에 지원한다.
W3C의 권장포맷이다.
GIF란?
: 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장한다. (움짤, 애니메이션에서 사용)
비손실 압축으로 이미지가 손상되지 않지만 용량이 크다.
8비트색상만 지원하여 다양한 색상표현에는 적합하지 않다.
WEBP란?
: jpg, png, gif 를 모두 대체할 수 있는 이미지 포맷이다.
완벽한 손실과 비손실 압축을 을 동시에 지원한다.
GIF같은 애니메이션 기능도 가능하며
Alpha Channel(투명도)를 지원한다. (손실,비손실 모두 지원)
SVG란?
: 마크업언어인 HTML, XML을 기반으로한 벡터 그래픽을 표현하는 포맷이다.
점, 선, 면으로 이루어져있어 해상도에서 자유롭다.
아이콘이나 로고같이 크기가 자주 변경되는 것들에서 주로 사용한다.
CSS와 JS로 제어가능하다.
파일 및 코드 삽입이 가능하다.
오픈 소스 라이선스란?
: 오픈 소스 = 소스코드나 설계도를 공개하는것 / 라이선스 = 저작권
인터넷에 공개되어있는 정보들에 있는 저작권들을 말한다.
라이선스에 저작권이 있으므로 무료로 된 라이선스들을 확인 한 후에 사용을 하여야 한다.
-
무료로 사용이 가능한 것들은
개인사용가능, 상업적이용가능으로 적혀져있다. -
Apache License 아파치라이센스
: (무료) 개인적/상업적인 사용이가능, 배포, 수정, 특허신청이 가능하다. -
MIT License
: (무료) 개인소스에 이 라이선스를 사용하고 있다는 표시를 지켜주면 사용에 제약은 없다. -
BSD License
: (무료) 라이선스 사용 표시하면 제약없이 사용가능하다. -
Beerware
: (무료) 만날 경우 맥주를 사주는 라이선스이다.
!!프로젝트를 새로 시작할때는 바탕화면에서 폴더를 만들지 말고 깃허브에서 레퍼지토리 뉴 로 폴더 만들고 vscode에 연동하기!!
