HTML
1. HyperText Markup Language
2. 하이퍼텍스트(링크)를 만드는 언어이다.
3. 태그(Tag)로 구성된다.
1) 기능이 정해져 있는 약속된 태그만 사용할 수 있다.
2) 시작 태그 <tag>와 종료 태그 </tag>로 구성된다.
3) 나 홀로 태그(단독 태그)도 있다. <tag> 또는 <tag/>
4) 모두 소문자로 작성한다.
5) 계층 구조(부모-자식)를 가진다.
4. 태그 형식
1) <태그이름 속성="값" 속성="값" 속성="값"></태그이름>
2) <태그이름 속성="값" 속성="값" 속성="값"/> - 범위가 필요 없는 경우
5. 태그 요소
1) 태그가 적용되는 범위를 의미한다.
2) 블록 요소 : 해당 요소의 블록(라인 전체)에 적용되는 태그, 자동으로 줄 바꿈 된다.
3) 인라인 요소 : 해당 요소의 인라인(요소 자체)에 적용되는 태그
HTML 기본 구조
1. 선언부 : <!DOCTYPE html> 또는 <!doctype html>
2. <html> 태그 : 문서의 모든 내용을 포함하는 최상위 태그
3. <head> 태그 : 각종 헤더 값을 설정하는 태그
4. <body> 태그 : 문서의 본문 내용을 포함하는 태그
기본
1. 줄 바꿈
1)<br> 또는 <br/>
2)원하는만큼 사용할 수 있다.
2. 수평선
1) <hr> 또는 <hr/>
2) 화면의 너비만큼 수평선을 만든다.
3. 엔티티 코드
1) HTML 문서에서 사용하는 특수 문자
2) &로 시작하고 ; 으로 끝난다.
작다(less then) <<br> -> <
크다(greater then) ><br> -> >
작거나 같다(less then equal) ≤<br> -> <=
크거나 같다(greater then equal) ≥<br> -> >=
앰퍼센드 &<br>
공백 <br>
4. 제목 태그(heading tag)
1) 블록 요소
2) 제목을 만드는 태그이다.
3) 글자 크기 조정하고 글자를 굵게 표시한다.
4) <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<h1>1번째로 큰 제목(32px)</h1>
<h2>2번째로 큰 제목</h2>
<h3>3번째로 큰 제목</h3>
<h4>4번째로 큰 제목(16px)</h4>
<h5>5번째로 큰 제목</h5>
<h6>6번째로 큰 제목(10px)</h6>
5. 문단 태그(paragrph tag)
1) 블록 요소
2) 문단을 만드는 태그이다.
6. 형식을 가진 문단 태그(pre-formatted paragraph tag)
1) 블록 요소
2) 문단에 입력된 모든 요소가 그대로 나타난다.
3) 공백 문자(스페이스, 줄바꿈)를 그대로 나타낼 때 주로 사용한다.
Emmet
1. 줄여서 입력하면 원래 내용이 완성되는 기능이다.
2. 기본 줄임말
1) html:5
2) ul>li*5
3) tr>td*3
목록 태그
1. 순서가 없는 목록 태그(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"> ■
2. 순서가 있는 목록 태그(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,....
3. 개요 목록 (description list tag)
1) 블록 요소
2) 이름과 설명을 하나의 항목으로 나타내는 태그이다.
3) 형식
(1) <dl> 태그 : 모든 목록을 포함하는 태그
(2) <dt> 태그 : 목록을 구성하는 개별 항목의 이름을 나타내는 태그, <dl> 태그의 자식 태그
(3) <dd> 태그 : 목록을 구성하는 개별 항목의 설명을 나타내는 태그, <dl> 태그의 자식 태그
텍스트 효과
1. 인라인 요소
2. 블록 전체가 아니라 지정된 인라인 영역에만 적용된다.
3. 종류
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> : 아래첨자
이미지
1. 인라인 요소
2. 형식
<img> 또는 <img/>
3. 주요 속성
1) alt : 이미지가 없는 경우 이미지 대신 나타나는 텍스트 정보
2) src : 이미지의 경로를 작성
(1) 절대경로 : 사용 불가 (주의 !)
(2) 상대경로 : 사용 가능
① 현재 디렉터리 : .
② 상위 디렉터리 : ..
3) width : 이미지 너비 지정(너비를 조정하면 높이도 자동 조정된다.)
4) height : 이미지 높이 지정 (높이를 조정하면 너비도 자동 조정된다.)
#### 절대 경로
<p>
<img alt="절대 경로는 원래 안 나옵니다." src="D:/GDJ69/images/404.jpg">
</p>
#### 상대 경로
D:/GDJ69/webstudy/01_HTML/04_multimedia.html 에서
D:/GDJ69/images/animal1.jpg 이미지 포함하기
D:
ㄴGDJ69 : 상위 상위 디렉터리 (../..)
ㄴassets :멀티미니어 폴더 (../../assets
ㄴimages : 이미지 디렉터리 (../../assets/images)
ㄴwebstudy :상위 디렉터리(..)
ㄴ01_HTML :현재 디렉터리()
<p>
<img alt="여우" src="../../assets/images/animal1.jpg" width="500px">
</p>
Audio
1. 인라인 요소
2. 형식
<audio>
<source src="오디오경로">
</audio>
3. audio 태그 주요 속성
속성명 | 속성값 | 의미
1) controls | controls | 오디오 컨트롤 패널 생성(재생, 중지, 소리조절 등)
2) autoplay | autoplay | 오디오 자동 재생
3) loop | loop | 오디오 반복 재생
4) muted | muted | 음소거
4. audio 미디어 타입(MIME)
1) MP3 : audio/mp3
2) WAV : audio/wav
3) OGG : audio/ogg
<audio controls autoplay>
<source src="../../assets/audio/t-rex-roar.mp3" type="audio/mp3">
브라우저가 <audio> 태그를 지원하지 않으면 내가 보일 것이다.
</audio>
video
1. 인라인 요소
2. 형식
<video>
<source src="비디오경로">
</video>
3. video 태그 주요 속성
속성명 | 속성값 | 의미
1) controls | controls | 비디오 컨트롤 패널 생성(재생, 중지, 소리조절 등)
2) autoplay | autoplay | 비디오 자동 재생
3) loop | loop | 비디오 반복 재생
4) muted | muted | 음소거
5) width | 픽셀값 | 비디오 너비
4. video 미디어 타입(MIME)
1) MP4 : video/mp4
2) WEBM : video/webm
3) OGG : video/ogg
<video controls autoplay width="300px">
<source src="../../assets/video/flower.webm" type="video/webm">
브라우저가 <vedio> 태그를 지원하지 않으면 내가 보일 것이다.
</video>