* 이 글은 황기태 저자의 HTML5 + CSS + Javascript 웹 프로그래밍 교재를 참고하여 작성했습니다.
HTML 개요
HTML 페이지 기본
1. <!DOCTYPE html>
2. <!-- 주석문 -->
3. 헤드부분
<head> </head>
4. 바디 부분
<body> </body>
HTML 태그
1. 태그 구성
태그 이름, 여러개의 속성(속성이름-값)
ex) <img src="" width = "100" height="300">
2. 시작 태그와 종료 태그
대부분 시작 태그와 종료 태그는 한 쌍, 아닌 경우도 있다.
3. 태그의 속성은 대소문자 구분x
ex ) <HTML> </html>
4. 속성 값에 불필요한 공백은 넣지 않는다.
-> 오류 발생
* 속성 값은 반드시 인용 부호 쓰지 않아도 된다. ex) width=100, src=happy.jpg
HTML 기본 문서 만들기
1. <title>, 페이지 제목
<head> 내에서만 작성
2. <h1> .......<h6>, 문단 제목
<h1>이 가장 큰 제목, <h6>가 가장 작다
3. title 속성, 튤팁 달기
<h1 title="튤팁입니다">1장</h1> -> 본문에 마우스가 올라가면 설명문(튤팁)출력
4. <p>, 단락 나누기
</p>로 끝나는 문단 뒤에는 자동으로 빈 줄이 생긴다.
5. <hr>, 수평선 긋기
6. <br>, 새로운 줄로 넘어가기
다음 줄로 넘어가기 위해 사용
7. 문자, 기호, 심볼 입력
엔티티 또는 코드로 표현
ex) < -> < 혹은 <
8. <pre>, 개발자 포맷 그대로 출력하기
내가 원하는 글자와 스타일 그래도 출력한다. (글자는 약간 얇게 출력되는 듯 하다.)
9. 텍스트 꾸미기
<b>진하게
<strong>중요한
<em>강조
<i>이탤릭체
<small>작게
<del>삭제
<ins>밑줄
<sup>윗 첨자
<sub>아래 첨자
<mark>하이라이팅
10. 블록태그와 인태그
블록태그 : <p>, <div>, <h1>, <ul>
- 항상 새 라인에서 시작, 왼쪽 부터 오른쪽 블록 공간 차지
인라인태그 : <img>, <strong>, <a>, <span>
- 블록에 삽입되어 일부를 표현
11. HTML 메타 데이터 삽입
: 메타데이터란 데이터를 설명하는 데이터이다.
ex) <base> - 웹 페이지의 base URL, <head>태그에서만 , <link>, <script>, <style>, <title>, <meta> - name과 content로 구성
고급 문서 만들기
1. <img>, 이미지 삽입
<img src ="파일 URL", alt="문자열"(이미지가 출력되지 않을 때), width="이미지 폭", height="이미지 높이">
2. <ol>, <ul>, <dl>, 리스트 만들기
<ol> - 순서 있는 리스트
<ol type="A" | "1" | "a" | "I" | "i" | start="value"(숫자일때만)>
<ul> - 순서 없는 리스트
<li> - 각 항목
3. 정의 리스트 만들기
<dl>
<dt>용어</dt>
<dd>설명></dd>
</dl>
4. <table>, 표 만들기
<table>
<caption>제목</caption>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>4</th>
</tr>
</tfoot>
</table>
하이퍼링크와 항해
1. <a>, 하이퍼링크
<a href="URL 또는 #앵커이름" target="윈도우이름" download>텍스트 또는 이미지</a>
*링크 텍스트 색
standard link(처음 링크) - 파란색, visited link(방문한 링크) - 보라색, active link(마우스로 누르는 동안) - 빨간색
*target 속성
페이지가 출력될 윈도우 지정
_blank, _top, _parent, _self
2. <id>, 앵커 만들기
문서의 특정 위치 - 앵커
<p id="history">역사</p>
:
:
<a href="#history">역사로 가기</a>
-> 위의 예에서 역사로 가기를 누르면 역사 부분으로 이동
인라인 프레임
1. <iframe>, 인라인 프레임 만들기
<iframe src="URL" srdoc="html문서 텍스트" name="윈도우 이름" width="프레임의 폭" height="프레임의 높이">
*주의사항
1. <body>태그 안에서만 사용 가능
2. src태그 빈 속성으로 두면 빈 상태로 출력
2. target 속성에 문서를 출력할 윈도우 지정
<base>, <a>, <area>, <form> 태그에서 사용
_blank - 새 윈도우
_top - 최상위 브라우저 윈도우
_parent - 부모 윈도우
윈도우 이름 - 해당 이름의 윈도우
미디어 삽입
1. <audio>, <video>, 미디어의 표준화
플러그인 없이 사용할 수 있게 됨
2. <video>, 비디오 삽입
<video src="" width="" height="" controls autoplay></video>
또는
<video width="", height="" controls autoplay>
<source="" type="video/mp4">
</video>
*controls - 비디오 제어 버튼
autoplay - 자동 재생
muted - 오디오 끌 때 사용
loop - 반복 재생
<video src="비디오 파일의 URL" width="비디오 재생 영역의 폭" height="비디오 재생 영역의 높이" controls autoplay muted loop></video>
2. <audio>, 오디오 삽입
<audio src="오디오 파일의 URL" controls autoplay loop>
'프론트엔드 > HTML + CSS + Javascript' 카테고리의 다른 글
| [HTML + CSS + Javascript] HTML5 문서 구조화와 웹 폼 (0) | 2021.04.17 |
|---|---|
| [HTML + CSS + Javascript] 웹 프로그래밍과 HTML5 개요 (0) | 2021.04.09 |
