HTML
기본용어
- hyper text markup language
웹 구조- cascading style sheets
시각적 표현(정적)- javascript
동적
- communication protocol
: 컴퓨터 혹은 원거리 통신 장비 사이에서 메시지를 주고 받는 양식 및 규칙의 체계
http, https, ftp, ssl 등이 있음웹앱 동작원리: 최초 요청 request -> server -> response 최초 응답 -> 추가 요청 -> 추가 응답
웹 표준(web standard)
: 웹에서 사용되는 표준 기술이나 규칙
W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술크로스 브라우징(cross browsing)
: 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술 및 방법뷰포트(viewport)
하나의 웹 페이지가 렌더링되는 전체 영역렌더링
브라우저의 뷰포트에 웹 사이트를 출력하는 행위
웹 이미지
bitmap & vector
*비트맵: 픽셀이 모여 만들어진 정보의 집합
raster 이미지라고도 부름
정교하고 다양한 색상을 자연스럽게 표현
확대/축소 시 계단 현상, 품질 저하
ex. jpg*vector: 점, 선, 면의 위치, 색상 등 수학적 정보의 형태로 이루어진 이미지
확대/축소에서 자유로움, 용량 변화가 없음
정교한 이미지(인물, 풍경 사진 등)를 표현하기 어려움
ex. svg
1. bitmap
1) jpg, jpeg (joint photographic coding experts group)
: full-color 와 gray-scale 압축을 위해 만들어 졌으며 압축륙이 훌륭해 사진, 예술 분야에서 많이 사용
손실 압축(용량이 획기적으로 줄어드는 장점이 있으나 여러 번 손실이 발생하면 이미지가 상하므로 여러 번 저장하는 행위는 지양하는 것이 좋음)
표현 색상도가 뛰어남
2) png(portable network graphics)
: gif 대체 포맷으로 개발됨
비손실 압축
8비트, 24비트 컬러 이미지 처리
alpha channel 지원(투명도)
W3C 권장 포맷
3) gif(graphics interchange format)
: 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
비손실 압축
여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
8비트 색상만 지원하여 다양한 색상 표현에는 적합하지 않음
4) webp
: jpg, png, gif를 대체할 수 있는 구글이 개발한 이미지 포맷
완벽한 손실/ 비손실 압축 지원
gif 같은 애니메이션 지원
alpha channel 지원(손실, 비손실 모두)
하위호환성 확인 필요
2. vector
1) svg(scalable vector graphics)
: 마크업 언어(html/xml) 기반의 벡터 그래픽을 표현하는 포맷
해상도의 영향에서 자유로움
css, js로 제어 가능
파일 및 코드 삽입 가능
특수 기호 명칭
` backtick, grave 백틱, 그레이브
~ tilde 틸드, 물결
! exclamation mark
@ at sign
# number sign, sharp
$ dollar sign
% percent sign
^ caret 무언가의 이상을 의미할 때
& ampersand 엠퍼센드
* asterisk 에스터리스크
- hyphen, dash 하이픈, 대시
_ underscore, low dash
= equals sign
" quotation mark
' apostrophe
: colon
; semicolon
, comma
. period, dot
\ backslash
| vertical bar
() parenthesis
{} brace
[] bracket
<> angle bracket
Emmet
css 선택자 활용
- (곱하기), {} (내용 삽입), $ (순서대로 숫자 입력)
ex. div>ul>li*4{$}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>인라인/블록 요소
요소가 화면에 출력되는 특성
1. 인라인 요소: 글자를 만들기 위한 요소들
ex. img, span, a, br, label
2. 블록 요소: 상자(레이아웃)를 만들기 위한 요소들
ex. div, h, p, ul, li
3. 인라인 블록 요소: input (수평으로 쌓이지만 가로세로 값과 위아래 여백 지정 가능)
4. 테이블 요소: table/표 요소, 행과 열의 집합/블록 요소 안에서 테이블이라는 요소로 구분할 수 있음
tr(table row) 안에 td(table data)
-
인라인 요소는 수평으로 쌓임, 코드 줄바꿈 해서 작성하면 띄어쓰기 됨
포함한 콘텐츠 크기만큼 자동으로 줄어듬
가로, 세로, 위아래 여백 사이즈를 지정할 수 없음
인라인 안에는 블록 요소를 넣을 수 없음 -
블록 요소는 수직으로 쌓임
가로는 부모 요소의 크기만큼 자동으로 늘어나고, 세로는 포함한 콘텐츠 크기만큼 자동으로 줄어듬
-
input 타입이 radio일 때 name 속성을 통해 그룹화 (택 1)
-
table 의 td 태그에서 colspan 속성을 사용하면 열의 크기를 확장할 수 있음
전역 속성
- html 전체 영역에서 사용할 수 있는 속성
- title: 요소의 정보나 설명을 지정
- style: 요소에 적용할 css 지정
- class: 요소를 지칭하는 중복 가능한 이름
- id: 요소를 지칭하는 고유한 이름
- data-이름="데이터": 요소에 데이터를 지정
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>-> 저장된 데이터를 js를 통해 출력
const els = document.querySelectorAll('div')
els.forEach(el => {
console.log(el.dataset.fruitName)
})- script 요소의 defer 속성은 html 구조가 준비된 후에 js를 해석하겠다는 의미
