basic concepts

FrontEnd

HTML, CSS, JS를 사용해 데이터를 Graphical User Interface(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것
웹 사이트를 구축하는데 FrontEnd만으로 구현할 수 없기 때문에 보안 or 비지니스 로직(Business Logic)은 BackEnd에서 개발됨
비지니스 로직(Business Logic)은 웹 사이트가 동작하는데 필요한, 핵심 데이터 처리를 수행하는 알고리즘 등을 말합니다.
풀스택 개발(Full-stack development)이란 GUI FrontEnd 부터, DB BackEnd 등 모든 software의 stack을 develope하는 것

HTML, CSS, JS

FrontEnd개발에서 사용할 수 있는 프로그래밍 언어
HTML(Hyper Text Markup Language) : 페이지의 제목, 문단, 표 , 이미지, 동영상 등 웹의 구조 담당 (기획자)
Hyper Text : 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동)할 수 있는 텍스트를 말합니다. 일반적으로 알고 있을 링크 버튼(텍스트)을 의미함
CSS(Cascading Style Sheets) : 실제 화면에 표시되는 방법 (색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당 (디자이너)
JS : 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당 (개발자)
제작된 웹사이트(web application = webapp)를 제품(Product)이라고 부르기도 함.

웹앱의 동작원리

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

프로토콜://주소입력

개발은 개발자 컴퓨터에서 진행
컴퓨터에서 만들어놓은 웹 페이지를 사용자들이 접속할 수 있게 만들려면 사용자가 접속할 수 있는 서버에 있어야함. 우리는 개발한것을 서버에 업로드를 해놓고 서버주소 설정하고 그 이후엔 그 주소로 접근하는 사람들은 아래와 같은 구조에 의해 웹사이트 접속 가능
웹 사이트를 개발할 컴퓨터 환경을 '로컬(Local) 개발 환경' 이라고 부름.
HTML, CSS, JS 를 이용하여 사용자에게 제공할 사이트 제작
사용자에게 제공하기 위해 서버에 업로드 해야함

웹 표준 & 브라우저

웹 표준 : 웹 표준(Web Standard)이란 '웹에서 사용되는 표준 기술이나 규칙'을 의미, W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술
- 위에 해당하는 대표적인 표준 기술 : HTML, CSS, JS 등 이 있고 세부적으로 들어가면 더 나눠지는데 다음에 알아보도록 함
- 권고안 : "이 기술은 표준이다" 라고 정의하는 권고를 내는것, 권고안에 해당되는 것들만 웹 표준이라고 할 수 있음
W3C의 표준화 제정 단계
1. 초안(Working Draft, WD)
2. 후보권고안(Candidate Recommendation, CR)
3. 제안권고안(Proposed Recommendation, PR)
4. 권고안(W3C Recommendation, REC)
웹 표준들이 동작하는 곳 웹 브라우저이다. 웹 브라우저에서 코드를 인식하기 위해서 웹 표준을 해석하고 해석 결과로 브라우저를 만듦
브라우저 공급업체(Browser Vendors) : 브라우저 만드는 회사
크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법
- 브라우저) 크롬, 엣지, 파이어폭스, 오페라, 스윙, 웨일, IE, 사파리
- 크로스 브라우징 이슈(cross browsing issues)
- 마이크로소프트에서 만든 Internet Explore(IE) : 웹 표준과 거리가 멀어서 20년 8월에 모든 서비스 지원 종료
- IE를 이용한 서비스를 유지보수 해야할 경우 표준과 거리가 먼 기술을 사용해야 할 경우가 있을 수 있음
창(Window)
탭(Tab)
주소창(Address bar)
뷰포트(Viewport) : 하나의 웹페이지가 출력 되는(렌더링) 영역
렌더링(Rendering) : 브라우저의 Viewport에 web site를 출력하는(그림 그려내는) 행위를 말함.

웹 이미지

비트맵(Bitmap) : 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름
- 정교하고 다양한 색상을 자연스럽게 표현
- 확대/축소 시 계단 현상, 품질 저하(원본에 비해서)
- .jpeg, .gif, .png
- 흔히 사용하는 이미지에 사용됨
벡터(Vector) : 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지)
- 확대/축소에서 자유로움, 용량 변화가 없음
- 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움
- .svg
- 아이콘, 로고 등 에 주로 사용됨
- Material Design(머터리얼 디자인)은 곺움질 디지털 경험을 구축할 수 있도록 Google에서 만든 디자인 시스템(방식)입니다.

비트맵 이미지

JPG(Joint Photographic coding Experts Group)는 Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용
- 손실 압축 방식 사용 : 이미지가 손실 되면서 압축 됨
1. 이미지용량이 줄어듦
2. jpeg 방식으로 여러번 압축/저장 될 경우 이미지 손실이 많이 일어남
- 표현 색상도(24비트, 약 1600만 색상)가 뛰어남
- 이미지의 품질과 용량을 쉽게 조절 가능(jpg 사용하는 프로그램이 많아서)
- 가장 널리 쓰이는 이미지 포맷
PNG(Portable Network Graphics)는 Gif의 대체 포맷으로 개발됨
- 비손실 압축
1. 저장할 때 이미지 손실 안됨
2. .jpg에 비해 용량이 클 수 있음
- 8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
Alpha Channel 지원(투명도) : 이미지 내부에서 투명한 부분을 지원,사용 가능하다. (누끼 따기)
- 투명도가 있는 이미지일 경우 .png, 없는경우 .jpg 사용하는게 용량이 낮아서 좋은 선택이 될 수 있음
W3C 권장 포맷
GIF(Graphics Interchange Format)는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
- 비손실 압축
- 여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
- 8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)
WEBP : JPG,PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
- 완벽한 손실/비손실 압축 지원
- GIF 같은 애니메이션 지원
Alpha Channel지원(손실, 비손실 모두)
- IE 지원 불가
하위호완성 : 이전 버전에서 특정한 기술들이 사용 가능한지 확인하는 것
하위호완성을 확인한다 : WEBP를 web browser에서 사용할 수 있는지 확인하는 것을 의미함

벡터 이미지

SVG(Scalable Vector Graphics)는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷
- 해상도의 영향에서 자유로움(점, 선, 면의 정보를 가지고 있기 때문에)
- CSS와 JS로 제어 가능
- 파일 및 코드 삽입 가능
- 이미지의 크기가 자주 변경되는 환경에서 사용함
- SVG 이미지의 복잡한 코드를 CSS/JS로 디테일하게 제어하기는 매우 어렵기 때문에, 색상이나 일부 영역의 추가/제거 혹은 간단한 형태 생성 정도로 가볍게 사용함
- 다양한 해상도를 지원해야하는 현대적인 웹페이지에서 많이 사용되는 이미지 포맷

특수 문자 용어 정리

그레이브(Grave) or 백틱(Backtick) : ` (숫자 1옆에 있는 자판)
틸드(Tilde) or 물결표시 : ~ (숫자 1 옆에 있는 자판 + shift와 함께)
엑스클러메이션(Exclamation mark) or 느낌표 : !
앳(At sign) or 골뱅이 : @
샵(Sharp) or 넘버(Number) or 우물 정 : #
달러(Dollar sign) : $
퍼센트(Percent sign) : %
캐럿(Caret) : ^ (숫자 6번과 함께있는것)
예) 6이상 : 6^
엠퍼센드(Ampersand) : &
에스터리스크(Asterisk) or 별표 : *
하이픈(Hyphen), 대시(Dash), 마이너스 : -
언더스코어(Underscore), 로대시(Low dash), 밑줄 : _
이퀄(Equals sign) or 동등 : =
쿼테이션(Quotation mark) or 큰따옴표 : "
아포스트로피(Apostrophe) or 작은따옴표: '
콜론(Colon) : :
세미콜론(Semicolon) : ;
콤마(Comma) or 쉼표 : ,
피리어드(Period) or 닷(Dot) or 점 or 마침표 : .
퀘스천(Question mark) or 물음표 : ?
슬래시(Slash) : /
버티컬 바(Vertical var) : |
백슬래시(Backslash) or 역슬래시 : \
퍼렌서시스(Parenthesis) or 소괄호, 괄호 : ()
브레이스(Brace) or 중괄호 : {}
브래킷(Bracket) or 대괄호 : []
앵글 브래킷(Angle Bracket) or 꺽쇠괄호 : <>

Open Source License

Open Source License : 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것
License : 저작권
오픈 소스라도 저작권을 사용해야함
개인이 사용할 수 있는것, 상업적 사용 가능할 수 있는것 확인(OpenSource.org)
Ahache License : 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 license, 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능
MIT License : 메사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 license
- 개인 소스에 이 license를 사용하고 있다는 표시만 지켜주면 됨
- 나머지 사용에 대한 제약은 없음
프로젝트 소스 코드에 외부에서 가져온 오픈소스의 license 내용만 정확히 명시하면 충분함
- 대부분 프로젝트에서는 자동으로 오픈소스가 같이 빌드(웹 사이트 최종 결과를 만드는 행위)되기 때문에 따로 관리할 필요는 없음
BSD License(Berkeley Software Distribution) : 버클리 캘리포니아대학에서 개발한 라이선스, MIT와 동일 조건
Beer License : 오픈소스 개발자에게 맥주를 사줘야 하는 license(만날 수 있는 경우)

Doctype(DTD)

index.html
인덱스라는 이름을 쓰는 이유는 브라우저에서 기본적으로 프로젝트 단위로 화면에 출력될 떄 index라는 이름을 가진 .html 파일을 우선적으로 찾아서 열게 됨
프로젝트 directory 최상위(root)에 index.html이 존재 해야함
태그는 영역을 가지고 있음
<!DOCTPYE html>
- 문서(페이지)의 HTML 버전을 지정
- DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도
- index.html 파일을 HTML 문서라고도 부름
혹은 main.css 파일을 CSS 문서,
main.js 파일을 JavaScript 문서 라고도 부름
HTML version
HTML1, HTML2, HTML3, HTML4, XHTML, HTML5(표준)
HTML 1 ~ 4 는 직접 명시하지 않음(사용을 안함)
XHTML은 유지보수 할 경우가 있을텐데 그럴 경우에는 아래와 같이 페이지가 작성되어 있음
<!DOCTPYE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
Windows 95, 98, ME, XP, Vista 같은 예전 버전의 운영체제를 최신의 컴퓨터에서는 사용하지 않는 것과 비슷한 개념

HTML, HEAD, BODY

<html> ... </html> : 문서의 전체 범위
HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할
HTML 확장자로 파일을 만들고 웹 브라우저에서 실행되기 때문에 컴퓨터 혹은 브라우저가 이해할 수 있도록 정해진 규칙에 따라서 알려줘야함
<head> ... </head> : 문서의 정보를 나타내는 범위
웹 브라우저가 해석해야 할 특정 정보
웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)과 같은 웹페이지의 보이지 않는 정보를 작성하는 범위
<body> ... </body> : 문서의 구조를 나타내는 범위
사용자 화면을 통해 보여지는 것
로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지 등 웹페이지의 보여지는 구조를 작성하는 범위
head, body 해석, 작동 방식 다름

CSS, JS 연결하기

CSS : html 구조적인 부분을 꾸며주는 역할
연결은 정보를 나타내는 범위인 <head> 태그 범위 안에 코딩해야함

lang(language 단어의 약어) : 지정할 문서의 언어(ISO 639-1)를 명시하는 HTML 속성
지정 가능한 언어 목록은 아래 링크에서 확인할 수 있음
https://ko.wikipedia.org/wiki/ISO_639-1_코드_목록
아래와 같이 lang="en" 에서 lang="ko" 로 변경하면 페이지 새로 고침시 상단에 언어 번역 창 안뜸

main.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div>Hello world!</div>

</body>

</html>

main.css

div {

color: red;

font-size : 100px;

}

main.js

console.log('자바스크립트 log 텍스트 입니다.');

// log : 기록

정보를 의미하는 태그 <haed>

<title> : HTML 문서의 제목(title)을 정의

<link> : 외부 문서를 가져와 연결할 때 사용
대부분 CSS 파일
rel(Relationship 단어의 약어)은 가져올 외부 문서(대표적으로 CSS 파일)가 현재의 HTML과 어떤 관계인지를 명시하는 HTMl 속성(Attribute)임
Favicon(Favorite Icon) : HTML Favicon을 적용할 떄는 이름을 favicon이라고 지정하시길 권장하며, favicon.ico 혹은 favicon.png 파일이 주로 사용됨

link 태그 : 연결해주는 태그

rel : 가져올 문서와 관계 , href : 가져올 문서의 경로

<style> : 스타일(CSS)를 HTMl 문서 안에서 작성하는 경우에 사용
선언 방식의 차이
- css를 파일로 만들어서 link 태그로 가져오는 방식
- HTML 에 style 태그를 만들어서 작성하는 방식

<head>

<style>

div {

text-decoration: underline;

}

</style>

</head>

<script> :
1. 외부에 있는 자바스크립트(JS) 파일 가져오는 경우
2. JS를 HTML 문서 내부에서 작성하는 경우

<head>

// 1

// 2

console.log('hello world!')

</script>

</head>

<meta> : link, style, title 태그로 나타낼 수 없는 나머지 모든 정보를 표시할 때 사용하는 태그
- meta : 정보
- HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은, 여러 정보를 검색엔진이나 브라우저에게 제공
charset(Character Set단어의 약어) : 문자 인코딩 방식을 지정하는 HTML 속성(Attribute)임
문자 인코딩(Encoding)이란 무자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 말하며, 대표적으로 한글 사용에서는 EUC-KR 혹은 UTF-8 등이 사용되며, 웹에선 UTF-8의 사용을 권장함
viewport : 브라우저에서 실제 웹페이지가 출력되는 영역
모바일 장치에만 해당됨
스마트폰(타블렛)에서 웹 사이트를 오픈할 수 있음
스마트폰이 여기서 말하는 모바일 장치(디바이스)임
모바일에서 웹 페이지의 가로 너비를 모바일 환경의 가로 너비와 일치시키거나,
웹 사이트가 처음 출력될 때 확대 / 축소 여부 정도나 어떻게 결정하겠다 등 몇 가지 정보를 META 태그로 명시하는 개념이 name="viewport"임

<img> : 이미지 출력 태그
alt(Alternate 단어의 약어) : 이미지가 출력되지 못하는 경우 대신 출력할 텍스트라고 해서 대체 텍스트라고 부름
이미지 경로가 잘못되거나 네트워크가 불안정하거나, 이미지를 출력할 수 없는 다양한 상황에 이미지 대신 화면에 나올 글자

StarryNight

basic concepts

티스토리툴바