今日の勉強

7679 ワード
名学習 テキストリンク 
*프론트엔드 개발
-HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 그것으로 사용자와 상호 작용할 수 있도록 하는 것.
-비즈니스 로직(Business Logic)은 웹 사이트가 동작하는데 필요한, 핵심 데이터 처리를 수행하는 알고리즘 등을 말한다.
-비즈니스 로직은 백엔드에서 개발됨.

*HTML(Hyper Text Markup Language)
-페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당
-기획자

*CSS(Cascading Style Sheets)
-실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 컨텐츠를 꾸며주는 시각적인 표현(정적)을 담당.
-디자이너

*JS(JavaScript)
-콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당.
-개발자 

*제작된 웹 사이트(웹 애플리케이션, 웹앱)를 제품(Product)이라고 부르기도 한다. 

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

*웹애플리케이션(웹 사이트, 웹 페이지) 동작 방식
주소창에 페이지 주소 입력 => (1)최초 요청(Request) => 서버
서버 => (2)최초 응답(Response) => 사용자 컴퓨터(브라우저) => (3) 추가요청 => 서버 => (4)추가 응답(CSS,JS,JPG..) 

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

*W3C의 표준화 제정 단계
-1.초안(Working Draft, WD)
-2.후보권고안(Candidate Recommendation, CR)
-3.제안권고안(Proposed Recommendation, PR)
-4.권고안(W3C Recommendation,REC)


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

-크로스 브라우징 이슈?

-2020년 8월, 마이크로소프트(MS)는 인터넷 익스플로러(IE)의 모든 서비스 지원을 종료한다고 발표



*웹 이미지
-비트맵(Bitmap)과 벡터(Vector)
-비트맵 : 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름. jpeg, gif, png 
	정교하고 다양한 색상을 자연스럽게 표현. 확대/축소 시 계단 현상, 품질 저하.

-벡터 : 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지. svg
	확대/축소에서 자요로움, 용량 변화가 없음. 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움.

-JPG(Joint Photographic coding Experts Group)는 Full-color와 Gray-scale의 압축을 위해 만들어졌으며,
	압축률이 훌륭해 사진이나 예술 분야에서 많이 사용.
	손실 압축으로써 표현 색상도(24비트, 약 1600만 색상)가 뛰어남. 이미지의 품질과 용량을 쉽게 조절 가능.
	가장 널리 쓰이는 이미지 포맷

-PNG(Portable Network Graphics)는 Gif의 대체 포맷으로 개발됨.
	비손실 압축으로써, 8비트(256색상) / 24비트 컬러 이미지 처리
	Alpha Channel 지원(투명도) W3C 권장 포맷

-GIF(Graphics Interchange Format)는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장.
	비손실 압축으로써, 여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
	8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

-WEBP는 JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷.
	완벽한 손실/비손실 압축 지원, GIF 같은 애니메이션 지원, Alpha Channel 지원(손실, 비손실 모두)
	IE 지원 불가

-SVC(Scalable Vector Graphics)는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷.
	해상도의 영향에서 자유로움
	CSS와 JS로 제어가능
	파일 및 코드 삽입 가능






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




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

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

*<!DOCTYPE html> 
-문서의 HTML 버전을 지정
-DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도.
-HTML1 ~ HTML4 -> XHTML -> HTML5(표준)

*<html></html>
-문서의 전체 범위
-HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할

*<head></head>
-문서의 정보를 나타내는 범위
-웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹 페이지의 보이지 않는 정보를 작성하는 범위.

*<body></body>
-문서의 구조를 나타내는 범위
-사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은 웹 페이지의 보여지는 구조를 작성하는 범위

*글자와 상자
-요소가 화면에 출력되는 특성, 크게 2가지로 구분
-1.인라인(Inline)요소 : 글자를 만들기 위한 요소들.
-2.블록(Block)요소 : 상자(레이아웃)을 만들기 위한 요소들.

*글자요소(인라인)
-<span></span> 대표적인 인라인 요소!
-본질적으로 아무것도 나타내지 않는, 콘텐츠(내용) 영역을 설정하는 용도.
-요소가 수평으로 쌓임!
-포함한 콘텐츠 크기만큼 자동으로 줄어듬!!
-인라인 요소는 글자 요소이기 때문에 가로, 세로너비(width, height)를 지정할 수 없다!
-외부여백(margin), 내부여백(padding)을 사용할 때 위아래여백은 적용이 안된다! 좌우여백은 적용가능!
-인라인요소(span) 안에는 블록요소(div) 사용 불가능(글자요소 안에 상자요소를 넣을 수 없음)

*상자요소(블록)
-<div></div> 대표적인 블록요소!
-본질적으로 아무것도 나타내지 않는, 콘텐츠(내용) 영역을 설정하는 용도.
-요소가 수직으로 쌓임!
-가로너비가 부모 요소의 크기만큼 자동으로 늘어남!
-외부여백(margin), 내부여백(padding) 상하좌우 모두 적용 가능
-블록 요소 안에 블록요소, 블록 요소 안에 인라인 요소 사용 가능!

*인라인블록요소(Inline-block)
-<input type />
-인라인의 수평으로 쌓이는 성질과, 블록의 width, height와 margin, padding 성질 적용 가능 

*HTML과 CSS
-HTML은 구조를 만드는 역할을 하므로, 각 태그(요소)가 어떤 역할을 하는지, 어떤 속성을 사용하는지 정도만 기억해 두면 충분하다! 눈에 보이는 예쁘게 만드는 작업은 CSS가 그 역할을 담당한다.

*래핑(Wrapping)
-요소(텍스트)를 어떤 요소로 묶어주는(감싸는) 행위를 Wrapping(래핑)이라고 부른다.
-<p>동해물과 <span>백두산</span>이</p> => 백두산 텍스트를 span 요소로 묶어준게 래핑!


*콜스팬(Colspan)
-Colspan 속성은 Column Span 단어의 약어이며, 열을 몇 칸 확장할 것인지를 의미한다.
-실제 엑셀이나 구글 시트 같은 표(table)가 필요한 경우가 아니라면 레이아웃을 TABLE(표)요소로 만들려 시도하지 말자!
-대표적으로 그리드(Grid) 같은 다른 CSS 기능으로 레이아웃을 작업해야 한다!

*전역속성 class="이름"
-요소를 지칭하는 중복 가능한 이름! 중복 가능!

*전역속성 id="이름"
-요소를 지칭하는 고유한 이름! 고유한 이름!
-자주 사용하지는 않지만, 중요한 위치에는 id를 사용하는 것이 효율적! id는 고유해야되기 때문에 찾기가 쉬움!
-중복이 되면 안되는 핵심적인 요소에다가 부여!

*전역속성 data-이름="데이터"
-요소에 데이터를 지정

**defer(디퍼)**
-SCRIPT 요소에 defer 속성은, HTML 구조가 준비된 후(문서 분석 이후)에 JavaScript를 해석하겠다는 의미가 있다!
[TIL] Day 15 - Flask (web app)
Next.js _document.js