HTML 기초 태그
①브라우저의 타이틀 바에 텍스트 출력
<title>텍스트</title>
<head>
<title>첫 타이틀</title>
</head>
②문단 제목(장, 절, 소제목 등)
<h1>텍스트<h6>
<h1>1장 홈페이지 만들기</h1>
<h2>1장 HTML 언어</h2>
<h3>1. 웹</h3>
※ h1이 가장 큰 제목
③툴팁 달기
<h1 title="텍스트">텍스트</h1>
<h1 title="h1태그로 작성하였습니다.">1장 홈페이지</h1>
<h2 title="h2태그로 작성하였습니다.">1절 HTML언어</h2>
④단락 나누기
<p>텍스트</p>
<p>HTML 문서도 본문을 여러 단락으로 나눌 수 있다. CSS스타일을 사용하면 단락 단위로 내어쓰기와 들여쓰기가 가능하다.</p>
<p>여러 개의 빈칸은 하나로 취급되며, 엔터키 역시 하나의 빈 칸으로 처리된다.</p>
⑤수평선 긋기
⑥새로운 줄로 넘어가기
⑦공백 입력하기
⑧개발자 포맷 그대로 출력하기
<pre>텍스트</pre>
<pre> pre 태그를 사용하면
사용자가 입력한
그대로 출력됩니다.
</pre>
⑨텍스트 꾸미기
<b>진하게</b>
<strong>중요한</strong>
<em>강조</em>
<i>이탤릭으로 강조</i>
<small>한단계 작은 문자</small>
<del>삭제</del>
<ins>추가</ins>
<sup>윗첨자</sup>
<sub>아래첨자</sub>
<mark>하이라이팅</mark>
⑪이미지 삽입
<img src="이미지 파일의 URL" alt="문자열" width="이미지 폭" height="이미지 높이">
src(필수 속성), alt(필수 속성), width(생략되면 원본 이미지의 폭, 픽셀 수), height(생략되면 원본 이미지의 높이, 픽셀 수)
block & inline tag
- block tag
<div>텍스트</div>
<ul>
<p>
<ul>
※ 블록 전체에 동일한 CSS 스타일을 적용/자바 스크립트로 블록을 하나의 단위처럼 다루고자 할 때는 div 사용
- inline tag
<strong>
<a>
<img>
<span>텍스트</span>
<div style="background-color:skyblue;padding:20px;">
내가 사람의 방언과 천사의 말을 할지라도
<span style="color:red">사랑</span>이 없으면 소리나는 구리와 울리는 꽹과리가 되고,
<span style="color:red">사랑</span>이 없으면 아무 것도 아니라.
</div>
※ 텍스트 일부분에 특별한 모양을 주거나, 자바 스크립트 코드로 텍스트 일부분을 제어하고자 할 때 span 태그 사용.
HTML 메타 데이터 삽입
<base> // 웹페이지들이 담겨 있는 기본 URL과 웹페이지가 출력될 윈도우를 지정하기 위해 사용.
<meta> // 다양한 메타 데이터(웹 페이지의 저작자, 문자 인코딩 방식, 문서 내용 등)를 표현하기 위해 사용. name과 content의 속성쌍으로 구성.
<meta name="author" content="황기태"> // 웹페이지의 저작자가 "황기태"임을 표기하는 사례
<meta name="description" content="입학 요령에 대한 자세한 사항"> // 웹페이지의 내용 설명
<meta name="keywords" content="컴퓨터, 소프트웨어, 스마트폰">
<meta charset="utf-8"> // 웹페이지에 사용된 문자의 인코딩 방식 지정.
<script> // HTML페이지에 자바 스크립트를 담는 태그
<style> // HTML페이지에 CSS 스타일 시트를 담는 태그
리스트 만들기
- 순서 있는 리스트, "1" or "A" or "a" or "I" or "i"
<ol type = "1" start="value">
<li>아이템1</li>
<li>아이템2</li>
</ol>
- 순서 없는 리스트
<ul>
<li>아이템1</li>
<li>아이템2</li>
</ul>
- 정의 리스트. 용어나 설명을 하나의 아이템으로 나열하는 리스트. 와 모두 생략할 수 있다.
<dl>
<dt>용어</dt>
<dd>설명</dd>
</dl>
표 만들기
<table>~</table> // 표 전체를 담는 컨테이너
<caption>텍스트</caption> // 표 제목
<thread> // 헤딩 셀 그룹
<tfoot> // 바닥 셀 그룹
<tbody> // 데이터 셀 그룹
<tr> // 행. 여러 개의 <td>, <th> 포함
<th> // 제목(헤딩) 셀
<td> // 데이터 셀
<table>
<caption>2017년 1학기 성적</caption>
<thread>
<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
</thread>
<tfoot>
<tr><th>합</th><th>225</th><th>230</th></tr>
</tfoot>
<tr><th>황기태</th><th>80</th><th>70</th></tr>
<tr><th>이재문</th><th>95</th><th>99</th></tr>
<tr><th>이병은</th><th>40</th><th>61</th></tr>
</table>
하이퍼링크
<a href= "URL" | "URL#앵커이름" | "#앵커이름" target="윈도우 이름" download></a>
href(이동할 html 페이지의 url 혹은 html 페이지 내의 앵커 이름)
target(링크에 연결된 html 페이지가 출력될 윈도우 지정. "_blank" | "_self" | "_parent" | "_top" | 윈도우 이름)
downlaod(링크가 클릭되면 href에 지정된 파일이 다운로드됨)
- 이미지에 하이퍼링크 만들기
<img src="naver.png" alt="네이버 사이트">
</a>
- 앵커 만들기&앵커에 연결하는 링크 만들기.
※ 웹사이트로 연결하는 경우, <a href="student.html#chap1">학생 부분으로</a> 같은 식으로 작성.
<a href="#chap1">서론으로 가기</a>
<a href="#chap2">본론으로 가기</a>
<!-- ... -->
<p id="chap1">1장 서론</p>
<!-- ... -->
<h3 id="chap2">2장 본론</h3>
인라인 프레임
<iframe src="URL" srcdoc="HTML 문서 텍스트" name="윈도우 이름" width="프레임의 폭" height="프레임의 높이-"></iframe>
src // 출력할 웹 페이지의 url주소
srcdoc // 직접 html태그로 작성된 텍스트로서 출력될 내용
name // 프레임 윈도우의 이름. 다른 웹 페이지에서 target 속성 값으로 사용
width // 프레임의 폭. 디폴트 300
height // 프레임의 높이. 디폴트 150
- 예시
<body>
<h3>2개의 인라인 프레임을 가집니다. </h3>
<hr>
<iframe src="iframe1.html" width="200" height="150">
</iframe>
<iframe src="iframe2.html" width="200" height="100">
</iframe>
</body>
※ 브라우저 윈도우와 인라인 프레임의 계층 관계
parent 윈도우 // 부모 윈도우
child 윈도우 // 자식 윈도우
top 윈도우 // 최상위 브라우저 윈도우
비디오 삽입
<video src="bear.mp4" width="320" height="240" controls></video>또는
<video width="320" height="240" controls>
<source src="bear.mp4" type="video/mp4">
브라우저가 video 태그를 지원하지 않습니다.
</video>
①비디오를 여러 타입으로 만들어 두고, 브라우저가 재생 가능한 타입을 선택하도록 하기
<video width="320" height="240" controls>
<source src="bear.mp4" type="video/mp4">
<source src="bear.ogg" type="video/ogg">
브라우저가 video 태그를 지원하지 않습니다.
</video>
②<video>태그
width, heigth // 비디오가 재생될 브라우저 공간의 폭과 넓이 지정. 생략되면 비디오의 원본 크기로 설정됨
controls // 이 속성이 설정되면 재생, 재생 시간, 중단, 음소거 등 제어 버튼이 출력됨
autoplay // 이 속성이 설정되면 비디오 로딩 즉시 재생
loop // 이 속성이 설정되면 반복 재생
muted // 오디오를 끌 때 사용
③<source>태그
<source src="비디오 파일의 url" type="비디오의 마임 타입">
마임타입 // MP4는 video/mp4 webM은 video/webm Ogg는 video/ogg
오디오 삽입
<audio src="mymusic.mp3" controls loop></audio>
또는
<audio control>
<source src="mymusic.mp3" type="audio/mpeg">
<source src="mymusic.ogg" type="audio/ogg">
브라우저가 audio 태그를 지원하지 않습니다.
</audio>
①<audio>태그
controls // 재생, 재생 시간, 중단, 음소거 등 제어 버튼 출력
autoplay // 비디오 로딩 즉시 재생
loop // 반복 재생
②<source>태그
<source src="오디오 파일의 url" type="오디오의 마임 타입">
마임타입 // MP3는 audio/mpeg Wav은 audio/wav Ogg는 audio/ogg