vscode 단축키
- 주석 : ctrl + /
- 저장 : ctrl + s
- 자동 완성 : ctrl + space
- 라인 복사 : alt + shift + 방향키
- 라인 이동 : alt + 방향키
- 라인 삭제 : shift + delete
HTML
- HyperText Markup Language
- 하이퍼텍스트(링크)를 만드는 언어
- 태그(Tag)로 구성
1) 기능이 정해져 있는 약속된 태그만 사용할 수 있음
2) 시작 태그<tag>와 종료 태그</tag>로 구성
3) 나 홀로 태그(단독 태그)도 존재.<tag>또는<tag/>
4) 태그는 모두 소문자로 작성
5) 계층 구조(부모-자식)를 가짐 - 태그 형식
1)<태그이름 속성="값" 속성="값" 속성="값"..></태그이름>
2)<태그이름 속성="값" 속성="값" 속성="값"../> - 태그 적용 범위
1) 블록 요소 : 해당 요소의 블록(라인 전체)에 적용되는 태그, 자동으로 줄바꿈됨
2) 인라인 요소 : 해당 요소의 인라인(요소 자체)에 적용되는 태그
HTML 기본 구조
- 선언부 : 또는
<html>태그 : 문서의 모든 내용을 포함하는 최상위 태그<head>태그 : 각종 헤더값을 설정하는 태그<body>태그 : 문서의 본문 내용을 포함하는 태그
HTML 태그
- 줄 바꿈
1)<br>또는<br/>
2) 원하는만큼 사용할 수 있음 - 수평선
1)<hr>또는</hr>
2) 화면의 너비만큼 수평선을 만듦 - 엔티티 코드
1) HTML 문서에서 사용하는 특수 문자
2) &로 시작하고 ;으로 끝남 - 제목 태그(heading tag)
1) 블록 요소
2) 제목을 만드는 태그
3) 글자 크기를 조정하고 글자를 굵게 표시함
4)<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - 문단 태그(paragraph tag)
1) 블록 요소
2) 문단을 만드는 태그 - 형식을 갖춘 문단 태그(pre-formatted paragraph tag)
1) 블록 요소
2) 문단에 입력된 모든 요소가 그대로 나타남
3) 공백 문자(스페이스, 줄 바꿈)를 그대로 나타낼 때 주로 사용
Emmet
- 줄여서 입력하면 원래 내용이 완성되는 기능
- 줄임말 예시
1) html:5 전체완성(!+enter)
2) ul>li5
3) tr>td3
목록 태그
-
순서가 없는 목록 태그(un-ordered list tag)
1) 블록 요소
2) 글머리기호를 이용해서 각 목록을 만듦
3) 형식
(1)<ul>태그 : 모든 목록을 포함하는 태그
(2)<li>태그 : 목록을 구성하는 개별 항목을 나타내는 태그,<ul>태그의 자식 태그
4) 글머리기호 종류
(1)<ul type="disc">● (디폴트, type 속성 생략 가능)
(2)<ul type="circle">○
(3)<ul type="square">■ -
순서가 있는 목록 태그(ordered list tag)
1) 블록 요소
2) 번호를 이용해서 각 목록을 만듦
3) 형식
(1)<ol>태그 : 모든 목록을 포함하는 태그
(2)<li>태그 : 목록을 구성하는 개별 항목을 나타내는 태그,<ol>태그의 자식 태그
4) 번호 종류
(1)<ol type="1">: 1,2,3, ... (디폴트, type 속성 생략 가능)
(2)<ol type="A">: A,B,C, ...
(3)<ol type="a">: a,b,c, ...
(4)<ol type="I">: I,II,III, ...
(5)<ol type="i">: i, ii, iii, ... -
개요 목록(description list tag)
1) 블록 요소
2) 이름과 설명을 하나의 항목으로 나타내는 태그
3) 형식
(1)<dl>태그 : 모든 목록을 포함하는 태그
(2)<dt>태그 : 목록을 구성하는 개별 항목의 이름을 나타내는 태그,<dl>태그의 자식 태그
(3)<dd>태그 : 목록을 구성하는 개별 항목의 설명을 나타내는 태그,<dl>태그의 자식 태그
텍스트 효과 지정하기
- 인라인 요소
- 블록 전체가 아니라 지정된 인라인 영역에만 적용
- 종류
1) 굵게
(1)<b></b>: bold
(2)<strong></strong>: 추천 (strong, 강하게)
2) 기울임
(1)<i></i>: italic
(2)<em></em>: 추천 (emphasis, 강조)
3) 밑줄
(1)<u></u>: underline
(2)<ins></ins>: 추천 (insert, 삽입된 텍스트)
4) 취소
(1)<s></s>: strikeline
(2)<del></del>: 추천 (delete, 삭제된 텍스트)
5) 기타
(1)<mark></mark>: 형광펜
(2)<sup></sup>: 위첨자
(3)<sub></sub>: 아래첨자
멀티 미디어
이미지
- 인라인 요소
- 형식
<img>또는<img/> - 주요 속성
1) alt : 이미지가 없는 경우에 이미지 대신 나타나는 텍스트 정보
2) src : 이미지의 경로를 작성
(1) 절대경로 : 사용 불가(주의!)
(2) 상대경로 : 사용 가능
① 현재 디렉터리 : .
② 상위 디렉터리 : ..
3) width : 이미지 너비 지정 (너비를 조정하면 높이도 자동 조정된다.)
4) height : 이미지 높이 지정 (높이를 조정하면 너비도 자동 조정된다.)
오디오
- 인라인 요소
- 형식
<audio>
<source src="오디오경로">
</audio>- audio 태그 주요 속성
- audio 미디어 타입(MIME)
1) MP3 : audio/mp3
2) WAV : audio/wav
3) OGG : audio/ogg
<audio controls autoplay="autoplay">
<audio controls autoplay>속성과 값의 이름이 같은 경우 생략해도 됨
비디오
- 인라인 요소
- 형식
<video>
<source src="비디오경로">
</video>- video 태그 주요 속성
- video 미디어 타입(MIME)
1) MP4 : video/mp4
2) WEBM : video/webm
3) OGG : video/ogg
