yongmin

반응형 웹

: 다양한 크기의 기기에 대응하여 웹사이트의 구조가 최적환된 구조로 변경하는 웹

뷰포트

• 정의 : 기기에서 실제 콘텐츠가 표시되는 부분
• <meta name="viewport" content="width=device-width, initial-scale=1. user-scalable=no">

미디어 쿼리

• 정의 : 화면해상도, 기기방향 등의 조건으로 html에 적용하는 css 스타일을 전환할 수 있는 css 속성
• 기본문법 : @media [only | not ] [미디어유형] [and | , ] (조건문) (실행문)
• @media all and (min-width:320px) { ... }
  @media all and (min-width:768px) { ... }
  @media all and (min-width:1024px) { ... }

그리드 레이아웃

• 정의 : 2차원 격자무늬의 레이아웃. 화면에 정보를 구성할 때 논리적으로 일관성 있게 표현하기 위한 구조
• 화면 너비를 특정 값으로 고정해 놓고 그 안에 표시할 요소의 너빗값을 지정

반응형 웹 구현 기법

1. 가변 그리드 레이아웃
   • 레이아웃을 고정 값이 아닌 백분율로 지정함으로써 화면의 너비가 바뀔 때마다 웹 요소의 너빗값도 함께 바뀜
2. 플렉스 박스 레이아웃
   • 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 레이아웃

플렉스 박스

• flexbox 구성
  1. flex container : flexbox가 놓여있는 영역. display : flex 속성이 적용 된 요소는 flex container가 된다
  2. flex item : flex container의 자식 요소
• flexbox의 두개의 축
  1. main axis : 주축. flex-direction에 의해 정의되며 주축을 따라 플렉스 아이템이 배치됨.
  2. cross axis : 교차축
• 시작선과 끝선
  1. 시작선: 처음 배치되는 위치, flex-direction이 row이면 주축의 시작선은 왼쪽 끝
  2. 끝선 : 마지막에 배치될 위치, flex-direction이 row이면 주축의 끝선은 오른쪽 끝
• 주요 속성
  1. display : flex | inline-flex 
     • flexbox로 작동시키기위한 기본 설정
     • flex : 박스를 블록수준의 flexbox로 작동하게 함
     • inline-flex : 인라인 수준의 flexbox로 작동하게 함
  2. flex-direction : row | row-reverse | column | column-reverse
     •  flexitem의 배치 방향을 설정
     • row : 박스를 왼쪽에서 오른쪽으로 배치
     • column : 박스를 위에서 아래로 배치
  3. flex-wrap : nowrap | wrap | wrap-reverse
     
     • 자식박스를 한줄안에 여러개를 배치하기 위한 부모속성
     • nowrap : 박스를 한 줄로 배치 (기본값)
     • wrap : 박스룰 여러 줄로 배치
  4. flex-flow : [flex-direction] [flex-wrap]
     • flex-direction과 flex-wrap의 축약 속성
  5. justify-content : flex-start | flex-end | center | space-between | space-around
     • 주축방향에서 플렉스아이템 배치 방법 설정
     • flex-start : 자식박스를 부모박스 주축의 시작점에 붙도록 배치 (기본값)
     • flex-end : 자식박스를 부모박스 주축의 끝점에 붙도록 배칙
     • center : 자식박스를 부모박스의 중앙에 배치, 양끝에 빈 공간 생길 수 있음
     • space-between : 자식박스가 시작점과 끝점에 붙도록 배치하고 자식박스들을 동일한 간격으로 정렬
     • space-around : 자식박스가 시작점과 끝점에 붙지 않도록 자식박스들을 동일한 간격으로 정렬
  6. align-items : stretch | flex-start | flex-end | center | baseline
     • 교차축방향으로 한줄의 플렉스아이템 배치 방법 설정
     • stretch : 자식박스를 확장해서 배치 (기본값)
     • flex-start : 자식박스를 시작점에 붙도록 배치
     • flex-end : 자식박스를 끝점에 붙도록 배치
     • center : 자식박스를 교차축 중앙에 배치
     • baseline : 자식박스의 문자열 baseline에 맞춰 자식박스들을 배치
  7. align-content : stretch | flex-start | flex-end | center | space-between | space-around
     • 교차축방향으로 여러줄의 플렉스아이템 배치 방법 설정
     • stretch : 자식박스를 확장해서 배치 (기본값)
     • flex-start : 자식박스가 시작점에 붙도록 배치
     • flex-end : 자식박스가 끝점에 붙도록 배치
     • center : 자식박스를 부모박스의 중앙에 배치
     • space-between : 자식박스가 시작점과 끝점에 붙도록 배치하고 자식박스들을 동일한 간격으로 정렬
     • space-around : 자식박스가 시작점과 끝점에 붙지 않도록 배치하고 자식박스들을 동일한 간격으로 정렬
  8. order : 정수값
     • 플렉스아이템의 배치 순서 바꾸기, 입력된 양수값값에 따라 배치
     • 0 : 기본값
  9. flex-grow : 양의 정수
     • 부모박스에 여백이 있을때 자식박스의 크기를 늘일 수 있는 속성, 자식박스간의 flex-grow 값 비율대로 남은 공간을 등분하여 확장
     • 0 : 기본값
  10. flex-shrink : 양의 정수
      • 부모박스 안의 자식박스의 크기가 넘치는 경우 크기를 줄이는 속성, 자식박스간의 flex-shrink 값 비율대로 크기 줄어듬
      • 1 : 기본값
  11. flex-basis : auto | width 속성값
      • 플렉스아이템의 기본 크기를 설정
      • auto : 플렉스아이템이 기본적으로 가지고 있는 크기를 기준으로 flex-grow, flex-shrink 속성값 적용 (기본값)
  12. flex : [flex-grow] [flex-shrink] [ flex-basis] | auto | initial | none
      • flex-grow, flex-shrink, flex-basis 축약속성
      • auto : 1 1 auto
      • initial : 0 1 auto
      • none :  0 0 auto
• 플렉스 박스 레이아웃 : https://d2.naver.com/helloworld/8540176

자바스크립트 역활

• 사용자 입력, 계산
• 웹페이지 내용, 모양의 동적제어
• 브라우저 제어
• 웹 서버와 통신
• 웹 애플리케이션 작성

자바스크립트 객체

• 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체
• 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합
• 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다
• 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입(prototype)”이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 이 프로토타입은 타 언어와 구별되는 중요한 개념이다.

자바스크립트 객체 종류

• built-in object : array, string, date, math
• user-defined object
• DOM
• Document Object
• BOM

Built-In Object

1. Array 객체
   • 자바스크립트에서 배열은 [ ] 로 생성하든 new Array()로 생성하든 모두 Array 객체로 다룬다
   • 배열에는 여러 타입의 데이터가 섞여 저장 
   • Array 객체 메소드
     • Array.concat(arr) : 현재 배열에 배열 arr 원소들을 덧붙여 만든 새 배열 리턴
     • Array.join( [ separator ] ) : 배열의 모든 원소들 사이에 separator를 삽입하여 하나의 문자열을 만들어 리턴
     • Array.reverse( ) : 원소를 역순으로 재배열한 새로운 배열 리턴
     • Array.slice( idxA [ , idxB] ) : idxA부터 idxB 까지를 잘라내어 만든 새로운 배열 리턴, idxB 생략시 맨 마지막 원소까지 포함
     • Array.sort( ) : 배열의 원소들을 정렬
     • Array.toString( ) : 원소들을 사이에 , 을 삽입하고 모두 연결하여 하나의 문자열로 리턴
2. String 객체
   
   • 문자열 객체는 new String( ) 또는 문자열리터럴로 생성
   • 문자열 길이 정보는 length 프로퍼티에 자동 저장
   • [ ] 로 문자 접근, 자바스크립트에는 문자 타입이 없으므로 길이가 1인 문자열 반환
   • String 메소드
     • String.concat(str1, str2, ...) : 현재 문자열 뒤에 str1, str2, ... 를 붙여 새로운 문자열 리턴
     • String.indexOf(str1 [, idx ] ) : idx부터 첫번째 str1이 나타나는 인덱스 리턴, idx 생략시 처음부터 검색
     • String.replace(str1, str2) : str1을 찾아서 str2로 수정한 새로운 문자열 리턴
     • String.slice(idxA [, idxB ] ) : idxA에서 idxB 이전의 문자열을 복사하여 리턴, idxB 생략시 문자열 끝까지 복사하여 리턴
     • String.substr(idxA [, len] ) : idxA에서 len개의 문자열을 복사하여 리턴, len 생략시 문자열 끝까지 복사하여 리턴
     • String.substring(idxA, idxB) : idxA에서 idxB 이전의 문자열을 복사하여 리턴
     • String.split( [separator] ) : separator을 구분자로 문자열을 분리하여 문자열 배열을 생성하여 리턴
     • String.trim( ) : 문자열을 앞뒤 공백을 제거한 새로운 문자열 리턴
3. Date 객체
   • new Date( ) 로 새로운 Date 객체 생성시 현재시간 정보로 초기화된 객체 생성
4. Math 객체

User-Defined Object

• 프로토타입 : 개발자가 선언하는 새로운 객체 타입
• 사용자 정의 객체 생성 방법
  1. 자바스크립트의 내장객체 중 Object 타입을 이용하여 생성
  2. 프토로타입객체를 위한 생성자함수 정의하고 new 연산자로 객체 생성
     
     • 프로토타입은 객체를 생성하기 위해서는 먼저 "생성자함수"를 정의
  3. ES6의 클래스 문법
     • es6 부터 class 키워드를 이용한 class 정의 가능
       
       class Dog {
         constructor(name) {
           this.name = name;
         }
         say() { console.log(this.name + ' : 멍멍'); }
       }
       
       const myDog = new Dog('흰둥이');
       myDog.say( ); //  흰둥이 : 멍멍

DOM, Document Object Model

• 정의 : 브라우저가 각 html 태그들을 객체화해서 만든 객체, html 태그 하나당 한개의 DOM 객체 생성
• DOM 트리 : DOM 객체들의 계층관계, DOM트리의 루트노드인 document 객체는 DOM객체가 아니다.
• DOM 객체의 구성요소
  • 프로퍼티 : html 태그의 속성. ex) innerHTML : html 태그에 들어있는 html 콘텐츠
  • 메소드 : html 태그 제어
  • 컬렉션 : 정보를 집합적으로 표현하는 일종의 배열
  • 이벤트 리스너 : html 태그에 작성된 이벤트 리스너를 그대로 가지고 있다
  • style 프로퍼티 : html 태그에 적용된 css 스타일시트에 접근
• this : 객체 자신을 가리키는 자바스크립 키워드로서, DOM 객체에서 객체 자신으 가리키는 용도로 사용됨

Document Object

• 정의 : html 문서 전체를 나타내는 객체로 DOM 트리의 최상위 객체
• 모든 DOM 객체를 접근하는 경로의 시작점
• document 객체의 프로퍼티들을 통해 html 문서 전반적인 속성을 나타냄
  • location 프로퍼티 : 현재문서의 url 정보를 가진 location 객체의 레퍼런스
  • head 프로퍼티 : head 객체에 대한 레퍼런스
  • body 프로퍼티 : body 객체에 대한 레퍼런스
• document 객체의 메소드들을 통해 DOM 객체 검색, 생성등 html 문서 제어 지원
  • getElementById( ) : 주어진 id 속성 값을 가진 첫 번째 DOM 객체 리턴
  • getElementsByClassName( ) : 주어진 class 속성 값을 가진 모든 태그의 컬렉션 리턴
  • write( ) : document 객체에 html 콘텐츠 삽입
• document 객체에는 동일한 이름의 html 태그들을 배열처럼 접근할 수 있는 컬렉션 존재
  • images : 문서내의 모든 <img> 객체들의 컬렉션
  • links : 문서내의 모든 href 속성을 가진 모든 링크객체들의 컬렉션

BOM, Browser Object Model

• 정의 : 윈도우, 윈도우에 로드된 문서의 url, 브라우저출력 스크린, 브라우저와 브라우저가 실행되고 있는 환경 등을 자바스크립트 코드로 접근, 제어할 수 있도록 설계된 객체 그룹
• BOM 종류
  • window 객체 : 열려있는 브라우저 윈도우나 탭 윈도우를 나타내는 객체
  • navigator 객체 : 현재 작동중인 브라우저에 대한 정보를 담고있는 객체
  • history 객체 : 사용자가 방문한 웹 페이지의 히스토리 정보를 담고있는 객체
  • location 객체 : 윈도우에 로드된 웹 페이지의 url 정보를 담고있는 객체
  • screen 객체 : 브라우저가 실행되는 스크린 장치에 대한 정보를 담고 있는 객체

1. CSS3

• Cascading Style Sheet, css로 작성된 코드를 style sheet이라고 한다
• 적용방법 : <link href="url" type="text/css" rel="stylesheet">
• 규칙 
  1. 자식태그는 부모태그의 스타일을 상속
  2. cascading : 여러 스타일이 합쳐서 적용된다
  3. overriding : 여러 스타일이 합쳐서 적용되어 충돌이 발생되는 경우 우선 순위가 높은 스타일을 적용
     ①html 태그의 style 속성  ② <style> 태그  ③스타일시트  ④브라우저디폴트스타일
• selector
  1. 태그이름 셀렉터 : h1 { color : red; }
  2. class 셀렉터 : .class1 { color : red; }
  3. id 셀렉터 : #id1 { color : red; }
  4. 자식 셀렉터 : div > h1 { color : red; }
  5. 자손 셀렉터 : div h1 { color : red; }
  6. 전체 셀렉터 : * { color : red; }
  7. 슈도 클래스 셀렉터 : h1:hover { color : red; }

2. 폰트 프로퍼티

- 폰트 단위

• html 요소 크기의 기본값은 웹브라우저에서 설정한 글자크기, 디폴트 16px
• em : 상위 요소 크기의 몇 배인지로 폰트 크기를 정함
• rem : html 요소 (문서의 최상위 요소) 크기의 몇 배인지로 폰트 크기를 정함

- 웹 폰트

• <style> </style> 태그 내에서 @font-face 규칙을 설정
  1. font-family : 사용할 웹 폰트의 이름 지정, 폰트 파일의 이름과 일치할 필요는 없지만 비슷하게 설정하여 유지보수 용이성 확보
  2. src : url( )에 폰트 파일의 경로를 설정하고 format( )에 폰트 파일의 형식을 설정
• @font-face 규칙을 설정한 다음 웹 폰트가 필요한 선택자의 font-family 속성에서 사용할 웹 폰트의 이름을 호출하여 사용. 웹 폰트 로딩 실패시 fallback폰트가 렌더링

font-family

• 글꼴 지정
• font-family : 글꼴1, 글꼴2  // 글꼴1 없는 경우 글꼴2(fallback 폰트) 적용

font-size

• 글자크기 지정
• font size : small | mediann | large | 3rem | 1.2em | 10px ...

font-weight

• 글자 굵기 지정
• font-weight : bold | bolder | lighter | normal | 100~900수치

font-style 

• 글자스타일
• font-style : italic | oblique

font 

• 단축 프로퍼티
• font : style weight size family

3. 텍스트 프로퍼티

text-decoration

• 밑줄
• text-decoration : none | underline | overline | line-through

text-transform

• 대,소문자 전환
• text-transform : none | capitalize | uppercase | lowercase

text-align

• 문단 정렬
• text-align : start (시작위치 맞춤) | end (끝위치 맞춤) | left (왼쪽정렬) | right | center | justify (양쪽정렬)

text-justify

• 문단 정렬시 공백 조절
• text-justify : auto | none

text-indent

• 들여쓰기
• text-indent : 10px | 10% (부모요소기준으로 10% 들여쓰기)

line-height

• 줄 높이
• line-height : noraml | 2.0 (2배) | 200% | 20px

4. 박스모델

- 개념

• html 태그 요소를 하나의 박스로 보고 박스의 크기, 배경, 색 여백 등을 다루는 시스템
• box는 margin, border, padding, content로 구성

box-sizing

• 박스의 크기의 기준을 설정
• box-sizing : content-box | border-box | initail (기본값으로 설정 : content-box) | inherit

- 박스 제어 프로퍼티

overflow

• html 콘텐츠가 width와 height 의 크기를 넘어가는 경우 콘텐츠를 자를 것인지 말 것인지 지정
• 블록태그에만 적용
• overflow : visible (잘리지 않고 태그 영역을 넘어서 출력, 디폴트) | hidden (넘어가는 것은 보이지 않음, 스크롤바 없음) | scroll | auto  

5. 포지셔닝

- 개념

• html 태그가 출력되는 위치를 지정하는 것

display 프로퍼티

• 디폴트 박스 유형을 무시하고 html 박스 유형을 지정한다
• display : block | inline | inline-block
• css3 박스유형

• 박스 유형 비교

position 프로퍼티

• 단일 박스 모델의 배치방법
• position : static (기본위치에 배치)
• positiion : relative (기본위치에서 left, top, bottom, right 프로퍼티 값 만큼 이동한 상대위치)
• position : absolute (부모요소를 기준으로 left, top, bottom, right 프로퍼티 값 만큼 이동한 절대위치)
• position : fixed (스크롤하거나 브라우저 크기 변경과 상관없이 left, top, bottom, right 값으로 뷰포트의 특정위치에 고정)

float 프로퍼티

• html 요소를 문서에 떠있게끔 배치
• position 이 absolute이나 fixed로 지정되어 있으면 해당 요소는 완전히 독립적인 위치를 갖으므로 float 속성은 none으로 지정된다.
• float : left (요소 자신을 포함하고 있는 컨테이너의 왼쪽으로 띄움)
• float : right (요소 자신을 포함하고 있는 컨테이너의 오른쪽으로 띄움)
• float : none (요소를 띄우지 않음, 디폴트)

clear 프로퍼티

• clear된 요소의 좌우에 float된 요소를 허용하지 않도록 함
• clear : none (요소들이 양쪽으로 float 할 수 있음, 디폴트)
• clear : left (왼쪽으로 float 할 수 없게 함)
• clear : right (오른쪽으로 float 할 수 없게 함)
• clear : both (양쪽으로 다 float 할 수 없게 함)

z-index 프로퍼티

• html 태그들을 z축을 따라 수직으로 쌓는 순서를 지정
• 값이 클 수록 위에 쌓인다
• position이 relative나 absolute인 경우에만 작동
• z-index : 3

 visibility 프로퍼티

• html 태그를 출력할 것인지 숨길 것인지 지정
• visibility : visible(출력) | hidden(공간은 차지하지만 태그는 보이지 않음)
• display : none (공간도 차지않고 태그도 출려되지 않음)

1. 기본태그

<title> : 페이지 제목으로 <head> 내에서만 작성

<meta> : 웹 페이지의 메타데이터를 표현하기위해 사용

<h1> ~ <h6>

• 문단 제목, 블록태그
• title 속성 : tooltip(설명문) 출력 (ex. <h1 title="h1 tag"> )

<p> : 단락 나누기, 블록태그

<hr> : 수평선 긋기

 <br> : 새로운 줄로 넘어가기

html entities

• html문서에서 예약어로 사용되고 있는 문자나 기호는 html entities를 이용하여 입력

<pre> : 개발자 포맷 그대로 출력

<strong> : 굵게 강조

<i> : 이탤릭체로 강조

<del> : 취소선

<ins> : 밑줄

<mark> : 하이라이팅

<div>

• 블록을 구성하기 위한 컨테이너로 사용되는 블록태그
• 블록태그는 항상 새 라인에서 시작하고 기본적으로 가로폭 전체 넓이를 가지는 직사각형 형태

<span>

• 텍스트 일부분에 스타일링을 하거나 JS로 제어하기 위해 사용되는 인라인 태그
• 인라인태그는 블록에 삽입되어 블록 콘텐트의 일부를 표현하는데 사용

<img>

• 이미지 삽입 태그
• src 속성 : 이미지파일의 url, 필수 속성
• alt 속성 : 이미지를 출력할 수 없는 경우 출려되는 문자열, 필수 속성
• width 속성 : 이미지 너비, 생략시 원본의 너비
• height 속성 : 이미지 높이, 생략시 원본의 높이

<ol> : 순서 있는 리스트

<ul> : 순서 없는 리스트

<li> : 리스트 아이템

<dl>

• definition list
• <dt> : 용어
• <dd> : 설명

<table>

• 표 전체를 담는 컨테이너
• <caption> : 표제목
• <thead> : 헤드
• <tbody> : 바디, 데이터 표현
• <tfoot> 바닥
• <tr> : 행, 여러개의 <td>, <th> 포함
• <th> : 제목 셀
• <td> : 데이터 셀

2. 하이퍼링크

<a>

• 하이퍼링크 태그
• href 속성 : 이동할 html 페이지의 url 또는 html 페이지 내의 앵커 ( 앵커는 id속성으로 지정)
• target 속성 : 연결된 html 페이지가 출력될 윈도우 지정
  • _blank : 새창에서 열기
  • _self : 현재창에서 열기
  • _parent : 부모창에서 열기
  • _top : 최상위 창에서 열기
  • iframe_name : 해당 인라인프레임에서 열기
• download 속성 : 링크 클릭시 href에 지정된 파일 다운로드 시작

3. 인라인 프레임

<iframe>

• 현재 html 페이지 내에 내장 윈도우를 만들고 다른 html 페이지를 출력
• src 속성 : 출력할 html 페이지 url
• name 속성 : 프레임 윈도우 이름 -> 다른 웹 페이지에서 <a> 태그의 target 속성 값으로 사용됨

4. 미디어

- 미디어 표준화

: html5 이전에는 오디오나 비디오를 재생하기 위해 플러그인 소프트웨어를 설치해야 했고 브라우저마다 설치해야되는 플러그인이 달라 브라우저에 따라 미디어가 재생되지 않는 문제점이 있었다. html5에서는 플러그인 없이 오디오나 비디오를 재생할 수 있도록 미디어 태그를 이용하여 표준화 시켰다.

<video>

• src  : 비디오 파일의 url
• width, height : 비디오 재생 영역의 너비와 높이
• controls : 비디오 제어 버튼
• autoplay : 비디오 로딩 즉시 재생
• loop : 비디오 반복 재생
• type : 비디오의 MIME type 설정 = video/mp4 | video/webm | video/ogg

<audio>

• src  : 오디오 파일의 url
• controls : 오디오 제어 버튼
• autoplay : 오디오 로딩 즉시 재생
• loop : 반복 재생

5. 문서구조화

- 시맨틱 웹

: 웹 문서를 구조화 하여 의미 있는 내용 탐색이 용이한 웹

- 시맨틱 태그

1. <header> : 페이지나 <section>의 머리말을 표현하는 태그
2. <nav> :  하이퍼링크들을 모아 놓은 섹션. ex) 페이지 내 목차
3. <section> : 본문의 콘텐츠를 분류
4. <article> : 콘텐츠의 실질적인 내용
5. <aside> : 본문의 흐름에서 약간 벗어난 내용
6. <footer> 페이지나 <section>의 꼬리말

<figure>

• 본문에 삽입된 그림, 이미지, 동영상등을 블록화하는 시맨틱 블록 태그
• <figcaption>으로 <figure>태그의 제목을 붙인다

<time> : 시간정보임을 표시하는 시맨틱 인라인 태그

<meter> 

• 퍼센테지를 나타내는 시맨틱 인라인 태그
• value 속성 : 0~1 사이의 값으로 비율 표현

<progress>

• 작업의 진행 정도를 표시하는 시맨틱 인라인 태그
• value 속성, max 속성 : max속성값 기준 value 값의 비율 표현

6. 웹 폼

- 개념

• 웹 페이지를 통해 사용자 입력을 받는 폼을 web form 이라고 한다.
• web from을 구성하는 태그들을 form element라고 한다. ex) <input>, <select>, <button>

<form>

• 웹 폼을 구성하는 폼 태그들을 담는 컨테이너
• name 속성 : 폼이름 지정
• action 속성 : 폼 데이터를 처리할 웹 서버 응용프로그램의 url
• method 속성 : 폼 데이터를 웹 서버로 전송하는 형식 지정 = "GET|POST"

- 텍스트 입력 form element

1. <input type="text"> : 한줄 텍스트를 입력받음
2. <input type="password"> : 비밀번호 입력받음
3. <textarea cols="20" rows="5"> : 20 x 5 크기의 여러줄의 텍스트 입력 받음
4. <input type="text" list="datalistId"> : 데이터 목록을 가진 텍스트 입력
     <datalost id = "datalistId">
       <option value="listItem1">
       <option value="listItem2">
     </datalist>

- 버튼 form element

1. <button type="button"> : 단순버튼, JS 코드에서 주로 이용
2. <button type="submit"> : submit 버튼
3. <button type="reset"> : 폼에 입력된 내용 모두 지우고 초기화하는 버튼
4. <button type="button"> : 이미지버튼
     <img src="imageUrl" alt="이미지버튼">
   </button>

- 선택형 form element

1. <input type="checkbox" value="요소 값" name="요소 이름" checked>
   • 각각의 체크박스를 선택/해제 하는 폼 요소
   • value 속성 : 폼 요소가 선택된 상태일 때 웹서버에 전송되는 값
   • checked 속성 : 이 속성이 설정되어 있으면 초기에 선택 상태로 출력
2. <input type="radio" value="요소 값" name="요소 이름 checked>
   • 가은 name 값을 가진 radio 버튼들이 하나의 그룹을 형성하고 그 중 하나만 선택되는 폼 요소
3. <select name="요소이름" size="5"> 
     <option value="1">option1</option>  
     <option value="2">option2</option>
   </select>
   • 드롭다운 목록을 보여주고 그 중 하나를 선택하는 폼 요소
   • size 속성 : 드롭다운 목록에 보여지는 항목 갯수

<input type="color" value="초기값">

• color 입력 form element

<input type="month | week | date | time | datetime-local">

• 시간정보 입력 form element

- 특정형식 입력 form element 

1. <input type="email"> : email 주소 형식으로 입력하지 않고 submit 하는 경우 오류메세지를 출력
2. <input type="url"> : url 형식으로 입력하지 않고 submit 하는 경우 오류메세지 출력

- placeholder 속성

• 입력할 정보의 예시를 보여주는 속성
• <input type="tel" placeholder="010-0000-0000">

- form element caption 설정 : 라벨링

• caption : 폼 요소 앞에 붙는 간단한 설명이나 이름
• 라벨링1 
  <label>
    캡션 : <input type="text">
  </label>
• 라벨링2
  <label for="formId">
    캡션 :
  </label>
  <input type="text" id="formId">

- 다수의 form element를 grouping

• <fieldset> : 폼 요소들을 감싸서 그룹핑. 브라우저는 그룹을 둘러싸는 외곽선 출력
• <legend> : 그룹핑된 그룹의 제목
• <form>
    <fieldset>
      <legend>회원정보</legend>
      이름 : <input type="text"><br>
      메일 : <input type="email">
    </fieldset>
  </form>

- 웹

• 한 컴퓨터에서 만든 문서를 다른 컴퓨터에서 볼 수 있도록 하기위해 인터넷으로 전 세계의 컴퓨터들을 거미줄처럼 연결하고 웹 문서를 쉡게 주고 받을 수 있도록 만든 시스템.

- 웹의 구성

• 웹 서버 : 문서, 이미지, 동영상 등의 데이터 저장. 웹 서버로 동작하려면 웹 브라우저로부터 요청을 해석하고 웹 문서를 전달하거나 적절한 웹 응용 프로그램을 실행시키고 실행결과를 다시 전송하는 웹 서버 소프트웨어(ex Apach, Nginx)를 탑재해야 한다.
• 웹 클라이언트 : 웹 서버로부터 데이터를 다운받아 사용자에게 보여주거나 사용자 데이터를 웹 서버에 업로드 하는 인터페이스. 웹 클라이언트로 작동하기 위해서는 웹 브라우저가 필요.

- 웹 페이지

• 정의 : 월드 와이드 웹 상에 있는 개개의 문서
• 웹 페이지 구성 3요소
  1. 웹 페이지 구조, 내용 - html 태그로 작성
  2. 웹 페이지 모양 - css로 작성
  3. 웹 페이지 행동 및 응용 프로그램 - javascript로 작성
• 정적 웹 페이지 : 저장된 그대로 사용자에게 전달되는 웹 페이지
• 동적 웹페이지
  • 서버사이드 동적 웹페이지 :  서버사이드 스크립트를 처리하는 애플리케이션 서버에 의해 통제되는 구조의 웹페이지이다. 서버 사이드 스크립트에서 파라미터는 클라이언트 사이드 처리의 구성을 포함하여, 새로운 모든 웹 페이지의 조합이 어떻게 처리되는지를 결정한다.
  • 클라이언트 동적 웹페이지 : 로드될 때 브라우저에서 실행되는 HTML 스크립트를 사용하여 웹 페이지를 처리한다. 자바스크립트와 다른 스크립트 언어들은 수신된 페이지의 HTML이 문서 객체 모델(DOM)로 구문 분석하는 방식을 결정하며 로드되는 웹 페이지를 표출한다. 동일한 클라이언트 사이드 기법들이 동일한 방식으로 DOM을 동적으로 업데이트하거나 변경한다.

- URL

• 웹 서버의 주소와 웹 페이지 파일의 경로명으로 구성된 인터넷 자원 주소
• 구성요소 : 프로토콜 + 서버주소 + tcp/ip 포트번호 + 경로명 + 파일이름

- HTTP

• 웹 브라우저와 웹 서버가 웹 페이지 등의 자원을 주고받기 위해 사용하는 통신 규약
• 웹 브라우저가 요청하고 웹 서버가 응답하는 방식으로 작동
• http 세션 : 하나의 html 파일을 받아오는 과정

- 쿠키

• 정의 : 브라우저가 웹 서버에 처음 접속하면 그 응답으로 웹 서버가 브라우저에게 보내는 4KB 이하의 작은 데이터
• 용도 : 웹의 stateless 상태에서도 현재 방문한 사용자가 다음에 방문할 때 알아보기 위해 사용된다.
• 쿠키 데이터는 6개의 쌍으로 구성되어 있다
  name=value; Expires=[Date]; Domain=[Domain]; Path=[Path]; [Secure]; HttpOnly;
• 웹 사이트의 어떤 웹 페이지가 다른 웹 페이지에게 전달할 정보를 쿠키로 만들어 사용자 로컬 컴퓨터에 저장하면, 다른 웹 페이지는 쿠키를 통해 정보를 전달 받는다
• 한계점
  • 크기가 4KB로 제한
  • 웹서버에 요청 보낼때마다 쿠키가 함께 전송되서 높은 트래픽 발생
  • 쿠키는 브라우저의 모든 윈도우가 공유하므로 윈도우마다 독립적인 값을 저장할 수 없다 

- 세션 스토리지

• 브라우저 윈도우마다 마련된 독립적인 저장소로 윈도우가 사라지면 함께 사라지는 일시적인 저장소
• 세션 : 브라우저 윈도우와 웹 사이트가 연결된 상황
• 용도 : 세션 스토리지는 한 세션동안 한 윈도우에 연결된 웹 사이트의 웹 페이지들이 주고 받는 임시 데이터를 로컬 컴퓨터에 일시적으로 저장하기 위해 사용된다.

- 로컬 스토리지

• 모든 브라우저 윈도우들이 공유하며 윈도우나 브라우저가 닫혀도 사라지지 않는 영구적인 저장소
• 웹 사이트와 연결하지 않고도 오프라인 상태에서 웹 어플리케이션이 로컬 스토리지를 활용할 수 있다