HTML 공부 기록

!DOCTYPE html 현재 문서가 html 언어로 작성한 웹 문서라는 뜻

html ~ /html 웹 문서 시작과 끝을 나타냄

head ~ /head 웹 브라우저 문서를 해석하는 데 필요한 정보를 입력하는 부분

body ~ /body 실제로 웹 화면 나타나는 내용.

title ~ /title 문서 제목을 나타내는 태그

*vscode에서 ! 엔터 기본형태 자동입력

 

meta name="viewport" content="" 반응형 웹도 가능

 

h1 ~ h6, h1은 한 페이지에 1개만 사용. h1~h6 위계질서

줄을 바꾸는 br 싱글태그

분위기 전환 hr  싱글태그

인용할때 사용 blockquote 

strong 굵게 강조할 텍스트

b 굵게 표시할 텍스트

em 이탤릭체 강조

i 이탤릭체 표시 글꼴 아이콘 표시하는 용도 많이 사용

cite 저작물 제목 책 영화 블로그 같은 저작물 제목 나타낼때 사용함

addr 줄일말을 표시 title 속성 함께 사용 

code 소스코드 표시

del 문서 삭제된 텍스트 나타냄

ins 문서 추가된 텍스트 나타냄

mark 태그 적용 부분에 하이라이트 표시

small 덧붙이는 글이나 저작권 등 부가 정보를 작게 표시 사용

sub 아래첨자

sup 위첨자 표시

 

 ol li태그

ol 순서태그

li 리스트

 

ul 순서없는

li

 

dl 설명목록을 만드는 이름 값 형태로 구성된 목록 사전에서 단어명과 설명

dt 이름 

dd 값

 

- 표만들기

table  표의 시작과 끝

caption 제목은 표의 위쪽 중앙에 표시됨

tr 행을 만듬

td 진해짐 th 셀을 만듬

 

- 표의 구조, 구조를 지정하면 시각 장애인도 화면 낭독기를 통해 표를 쉽게 이해할 수 있다.

thead 제목

tbody 본문

tfoot 요약

 

- 행, 열 합치는 태그

rowspan: td rowspan="합칠 셀의개수"> 내용 </>

colspan

 

- 열 묶어주는 태그

col 열 1개만 지정시

colgroup col태그 2개 이상 묶어서 사용함

 

- 이미지 삽입하기

img

 

tip % 현재 웹 창의 너비와 높이 기준 크기 조정, px 이미지 너비나 높이를 해당 픽셀 크기만큼 표시

 

- 웹 요소에 설명 글 붙이기

figure 도표 일러스트, 이미지, 소스코드 독립된 콘텐츠 나타냄

figcaption table img 대신해서 내용과 구별되는 요소라는 의미

함께 사용함.

 

- 오디오와 비디오 삽입하기

object width 너비 he 높이 data"파일" 

embed 오래된 브라우저까지 고려할 때 사용함 요즘 안씀

 

- 오디오와 비디오 파일 삽입

audio img랑 비슷하게 사용

video 동일

 

- 태그 속성

controls 플레이어 화면 컨트롤 바 표시

autoplay 자동실행

loop

muted 소리 제거

preload 어떻게 로딩할것인가

 

- 섬네일 이미지 삽입하기

poster 

 

- 링크를 삽입하는

a 

링크를 새탭으로 target 속성

 

- 한 페이지 안에서 점프하는 앵커 만들기

 

 

p ~ /p 텍스트 단락 한줄씩 입력됨

 

시멘틱 태그 (태그 이름만 봐도 의미를 알수있음)

header nav main(seciton (article) aside footer

main 핵심 콘텐츠 담는 곳, 콘텐츠 영역은 section(몇개 묶음.) article은 블로그 포스트처럼 독립된 콘텐츠

aside는 왼쪽 오른쪽 아래쪽 사이드바를 만듬. 필수는 아님

footer 하단표시

div 여러 코드 묶는 태그

 

 

꿀팁

ctrl + / 주석됨

 

---

주의할점

태그는 소문자

여는, 닫는 태그 정확히 입력

적당하게 들여쓰기(기본 4칸 -> 2칸 추천)

일부 태그는 속성과 함께 사용함