티스토리 뷰
<!DOCTYPE html> : 문서 유형을 선언함. (버전 : HTML5)
<html> : 웹 문서의 시작과 끝을 나타냄.
<head> : 웹 문서를 해석하기 위해 알아두어야 할 정보, 속성.
<body> : 브라우저 화면에 표시될 내용.
Head
<meta> : 문자 인코딩 정보 태그. 단일 태그
· charset 속성 <meta charset="값"> : 인코딩 유형
charset="utf-8" : 여러 나라의 글자 지원
<title> : 문서 제목 태그, 브라우저의 탭에 나타나는 내용.
텍스트
<p>1 : 단락 태그, 전후에 빈 줄이 추가됨.
<br>2 : 강제 줄 바꿈 태그. 단일 태그
<pre>3 : html 문서에 입력한 그대로 화면에 표시하는 태그, 프로그램 소스 등을 표시할 때 사용.
<h1> ~ <h6>4 : 제목 태그, 페이지의 머리기사 등의 용도로 사용.
* 검색엔진의 검색효율을 증가 시킴.
* <h1>이 가장 중요한 제목을 의미함.
강조
<b>5 : 볼드체 태그.
<strong> : 볼드체 + 강조 태그.
<i>6 : 이탤릭체 태그.
<em>7 : 이탤릭체 + 강조 태그.
<mark> : 형광펜 태그.
인용
<blockquote> : 인용 태그, 들여쓰기(블록레벨 태그).
<q>8 : 인용 태그, 들여쓰기 X(인라인레벨 태그), 따옴표 표시.
수평선
<hr>9 : 수평선 태그, 주제 분리를 의미. 단일 태그
특수문자
10 : 공백 문자 한 개
<11 : <
>12 : >
"13 : "
&14 : &
리스트
<ol>15 : 번호 있는 리스트 태그.
· type 속성 <ol type="값"> : 숫자 유형 변경 가능.
type="1" : 숫자 (기본값)
type="a" : 영문 소문자
type="A" : 영문 대문자
type="i" : 로마숫자 소문자
type="I" : 로마숫자 대문자
· start 속성 <ol start="n"> : 중간 번호부터 시작 가능.
n : 시작하는 번호
· reserved 속성 <ol reserved> : 번호를 역순으로 표시 가능 (부울 속성), edge 브라우저 불가16.
<ul>17 : 번호 없는 리스트 태그.
<li>18 : 리스트 항목 태그.
* 리스트 안에 리스트 (중첩 사용) 가능
Ex> 리스트 쓰기
1 2 3 4 5 | <ol> <li>1번 항목</li> <li>2번 항목</li> <li>3번 항목</li> </ol> | cs |
1 2 3 4 5 | <ol type="A" reversed> <li>C 항목</li> <li>B 항목</li> <li>A 항목</li> </ol> | cs |
설명 목록
<dl>19 : 설명 목록 태그, 항목과 함께 항목의 설명이 표시됨.
<dt>20 : 항목(제목) 태그
<dd> : 항목에 대한 설명 태그
Ex> 설명 목록 쓰기
1 2 3 4 5 6 7 | <dl> <dt>신라면</dt> <dd>- 매운 라면</dd> <dt>짜파게티</dt> <dd>- 짜장 라면</dd> <dd>- 검은색이다.</dd> </dl> | cs |
앵커
· href22 속성 <a href="주소"> : 누르면 주소로 이동.
* 웹 사이트의 경우 앞에 http:// 또는 https:// 를 붙여야 함.
· target 속성 <a target="창 유형"> : 링크가 걸리는 위치 지정.
target="_blank" : 새 창
target="_self" : 현재 창
· id 속성 : 한 페이지 내에서 항목으로 이동.
Ex> id 속성 쓰는 방법
1) 이동하고 싶은 위치마다 id 속성을 사용하여 앵커 생성, 각각 다른 이름으로 지정
<h1 id="content1">제목1</h1> (ol, ul, p 등의 태그에도 id 속성 사용 가능)
2) 앵커로 연결하는 링크 만들기
<a href="#content1">제목1로 바로 가기</a>
>> '제목1로 바로가기'를 누르면 '제목1'이 쓰여있는 위치로 이동.
Ex> 앵커 태그 사용하기
1 2 3 4 5 6 7 | <p><a href="https://google.com">구글로 바로 가기</a></p> <p><a href="#korean">한국어로 바로 가기</a></p> <p><a href="#english">영어로 바로 가기</a></p> <h1 id="korean">한국어</h1> <p>한국어는 세계가 인정한 과학적인 언어입니다.</p> <h1 id="english">영어</h1> <p>영어는 세계 공용어입니다.</p> | cs |
이미지
<img>23 : 이미지 삽입 태그. 단일 태그
· src24 속성 <img src="주소"> : 주소의 이미지 삽입
1) 내 컴퓨터에 이미지 파일이 있는 경우
· html 문서와 같은 경로에 있는 경우에는 파일 이름만 넣음
Ex> hello.jpg
· 다른 경로에 있는 경우에는 경로 이름과 함께 넣음
Ex>../source/hi.jpg
* 다른 사람과 문서를 공유할 때 이미지 파일도 함께 공유해야 함
2) 웹의 이미지를 가져오는 경우
· 이미지의 주소를 넣음
· width 속성 <img width="값"> : 이미지 폭 설정
· height 속성 <img height="값"> : 이미지 높이 설정
· alt25 속성 <img alt="설명"> : 이미지가 출력되지 않았을 때나 시각 장애인을 위한 대체 텍스트 출력
<figure> : 설명 글을 붙일 대상을 지정하는 태그.
· 이미지, 비디오, 오디오, 텍스트, 표 등
<figcaption> : 설명 캡션을 붙이는 태그.
Ex> 이미지에 설명 캡션 넣기
1 2 3 4 | <figure> <img src="source/peng1.png" width="500px" alt="팽도리"> <figcaption>샤샤샷</figcaption> </figure> | cs |
표
<table> : 표 태그, 표가 들어갈 위치 지정.
· border 속성 <table border="값"> : 표의 테두리 (두께)
<tr>26 : 표 태그, 행 만들기.
<td>27 : 표 태그, 셀 만들기 및 셀 안에 들어갈 내용 작성.
· rowspan 속성 <tr rowspan="a"> : 세로 a칸만큼 병합
· colspan 속성 <td colspan="b"> : 가로 b칸만큼 병합
<th>28 : 표 태그, 제목 셀 만들기, Bold체 + 가운데 맞춤.
<thead>, <tbody>, <tfoot> : 표 태그, 표의 구조를 정의.
* 시각장애인 : 화면 낭독기를 통해 표의 구조를 쉽게 이해 가능
* CSS : 제목, 본문, 요약 부분에 각각 다른 스타일 적용 가능
* JavaScript : 표가 긴 경우에 제목, 요약부분은 고정, 본문만 스크롤 되도록 만들기
<caption> : 표 태그, 표에 제목 붙이기.
* table 태그 바로 다음에 사용
* 여러 줄로 사용 가능
Ex> 표 만들기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <table border="1"> <caption> <strong>수행평가 계획</strong> <p>정보통신과</p> </caption> <thead> <tr> <th>이수단위</th><th>구분</th><th>수행평가</th> <th>중간고사</th><th>기말고사</th> </tr> </thead> <tbody> <tr> <td rowspan="2">2</td><th>배점</th><td>100</td><td>100</td><td>100</td> </tr> <tr> <th>학생부반영비율</th><td>60</td><td>20</td><td>20</td> </tr> </tbody> <tfoot> <tr> <td colspan="5">1, 2학기 동일합니다.</td> </tr> </tfoot> </table> |
Ex> 표 만들기 : 결과
| 이수단위 | 구분 | 수행평가 | 중간고사 | 기말고사 |
|---|---|---|---|---|
| 2 | 배점 | 100 | 100 | 100 |
| 학생부반영비율 | 60 | 20 | 20 | |
| 1, 2학기 동일합니다. | ||||
오디오
<source> : 호환성을 높이기 위해 여러 형식의 미디어 파일(확장자)을 정의하는 태그.
· src 속성 <source src="주소 및 파일명"> : 재생할 오디오가 존재하는 주소 지정
* source 태그를 사용한다면 video 태그에는 src 속성을 사용하지 않음.
· type 속성 <source type="비디오의 확장자"> : 오디오의 확장자 지정
type="audio/wav" : wav 파일
윈도우에서 사용되는 표준 사운드 포맷. 파일크기가 큼.
type="audio/mp3" : mp3 파일
'MPEG-1 Audio Layer-3'의 약자로 MPEG기술의 음성 압축 기술.
type="audio/ogg" : ogg 파일
오픈 소스로 개발됨.
* 위에서부터 순서대로 검사, 재생 가능한 파일을 찾으면 검사 종료.
Ex> 오디오 재생
1 2 3 4 5 6 | <audio autoplay controls loop> <source src="old_pop.wav" type="audio/wav"> <source src="old_pop.mp3" type="audio/mp3"> <source src="old_pop.ogg" type="audio/ogg"> <!-- 위에서 부터 순서대로 검사, 지원되는 형식이 없다면 실행 X --> </audio> |
비디오
<video> : 비디오 태그.
· src 속성 <source src="주소 및 파일명"> : 재생할 비디오가 존재하는 주소 지정
· poster 속성 <video poster> : 재생 전 또는 재생 불가 시 표시되는 이미지 지정
· muted 속성 <video muted> : 비디오 소리 끔
· width 속성 <video width="n"> : 비디오 너비 지정
· height 속성 <video height="n"> : 비디오 높이 지정
· autoplay, controls 등과 같은 오디오 속성 사용 가능.
<source> : 호환성을 높이기 위해 여러 형식의 미디어 파일(확장자)을 한 번에 지정하는 태그.
· src 속성 <source src="주소 및 파일명"> : 재생할 비디오가 존재하는 주소 지정
* source 태그를 사용한다면 video 태그에는 src 속성을 사용하지 않음.
· type 속성 <source type="비디오의 확장자"> : 비디오의 확장자 지정
type="video/mp4" : mp4 파일
‘MPEG-4’ 기술의 약자. 적은 용량으로 고품질 영상 및 음성 구현
type="video/ogg" : ogg(v) 파일
무료, Theora 비디오 압축 기술.
type="video/webm" : webm 파일
무료, 개방형 고화질 영상 압축 형식의 영상 포맷, 구글이 지원
* 위에서부터 순서대로 검사, 재생 가능한 파일을 찾으면 검사 종료.
Ex> 비디오 재생
1 2 3 4 5 6 7 | <video width="640px" controls poster="poster.png" muted> <source src="trailer.mp4" type="video/mp4"> <source src="trailer.ogv" type="video/ogg"> <source src="trailer.webm" type="video/webm"> <p>지원되지 않는 형식입니다.</p> <!-- 위에서 부터 순서대로 검사, 지원되는 형식이 없다면 p태그 실행 --> </video> | cs |
입력 및 선택
여기(클릭)에 정리하여 올렸습니다.
시맨틱 태그
시맨틱 태그란?
웹 페이지에서 사람이 인식하는 정보를 기계가 이해할 수 있도록 하는 HTML 기술.
태그만 보고도 문서 구조에서 어떤 역할을하는지 쉽게 이해할 수 있음.
<header> : 머리말에 해당하는 부분, 주로 검색창 / 사이트 메뉴 / 머리말 등으로 구성.
<footer> : 문서의 끝자락에 해당하는 부분, 주로 제작자 연락처 / 저작권 정보 등으로 구성.
* footer 태그 안에 header, section, article 등의 다른 시맨틱 태그 사용 가능.
<nav> : 문서를 연결하는 링크들을 모아놓은 부분.
* 다른 시맨틱 태그 안에 포함시킬 수도 있고, 독립하여 사용할 수도 있음.
<section> : 주제별로 컨텐츠 영역을 구분하기 위해 사용.
* section 태그 안에 또 다른 section 태그 사용 가능
<article> : 본문 내용, 보통 블로그 포스트 / 뉴스 기사 등의 본 내용으로 구성.
<aside> : 사이드 바, 광고 / 주로 링크 모음 등 문서의 내용에 영향을 미치지 않는 내용들을 넣음.
<address> : 페이지 제작자의 이름, 연락처, 주소 등을 넣음. 주로 footer 태그 안에 사용.
<iframe>29 : 웹 페이지 안에 다른 웹 페이지를 삽입하고자 할 때 사용.
src 속성 <iframe src="URL"> : 프레임에 표시할 웹 문서의 주소
width, height 속성 : <iframe width="값" height="값"> : 프레임의 너비와 높이 지정
name 속성 <iframe name="이름"> : 프레임의 이름, target 프레임 지정시 사용
* <a>의 target 속성에 <iframe>의 name 속성 값을 넣으면,
<a> 클릭 시 <a>의 src 속성의 주소 값이 <iframe>의 프레임에 나옴.
내용 분리
<div>30 : 컨텐츠를 논리적인 구역으로 분리, 주로 시각적 효과를 줄 때 사용하며 블록 레벨 요소임.
* 블록 레벨 요소 : 한 라인에 하나만 사용 가능 (전체 폭을 차지함)
<span> : 텍스트 일부의 스타일 속성을 설정할 때 사용, 인라인 레벨 요소.
* 인라인 레벨 요소 : 한 라인에 2개 이상 사용 가능 (필요한 크기만 차지),
블럭 레벨 요소 또는 다른 인라인 레벨 요소 안에만 사용 가능.
- paragraphs [본문으로]
- break [본문으로]
- previously formatted text [본문으로]
- heading [본문으로]
- bold [본문으로]
- italic [본문으로]
- emphasize [본문으로]
- quotation [본문으로]
- horizontal rule [본문으로]
- non-breaking space [본문으로]
- less than [본문으로]
- greater than [본문으로]
- quotation marks [본문으로]
- ampersand [본문으로]
- ordered list [본문으로]
- 2018 03 27 기준 [본문으로]
- unordered list [본문으로]
- list [본문으로]
- definition list [본문으로]
- definition title [본문으로]
- anchor [본문으로]
- hypertext reference [본문으로]
- image [본문으로]
- source [본문으로]
- alternate text [본문으로]
- table row [본문으로]
- table data [본문으로]
- table head [본문으로]
- inline frame [본문으로]
- divide [본문으로]