✅ HTML 총정리
HTML(HyperText Markup Language)이란, 웹 문서를 작성하는 태그 언어이다. <!DOCTYPE> 선언과 주석문, 헤드 부분과 바디 부분으로 구성된다.
<html>, <head>, <title>, <body>는 html 필수 태그이다. 주석문은<!--주석문-->형식으로 달 수 있다.
❓ <!DOCTYPE html>은 왜 있어야 할까?
HTML 언어로 작성된 문서임을 브라우저에 알리는 지시어이기 때문에 HTML 페이지 첫 줄에 반드시 들어가야 한다.
HTML 태그 특징
- 태그는 태그 이름과 여러 속성들(attribute)로 구성된다.
- 종료 태그가 없는 태그도 있지만 대부분의 태그들이 시작, 종료 태그로 구성된다.
- 태그와 속성은 대소문자 구별이 없다.
- 속성 값에 불필요한 공백 문자가 들어가면 HTML 표준에 어긋난다.
💡 속성 값은 반드시 이중 인용 부호("")로 묶어야 할까?
단일 인용 부호('')와 이중 인용 부호("") 모두 사용가능하고 인용 부호를 사용하지 않아도 괜찮다. 그러나 속성 값에 빈칸이 들어가는 경우 반드시 인용 부호로 묶어야 한다.
인용 부호는 일관성 있게 사용하는 것이 중요하다. 이중 인용 부호를 사용할 것을 권한다.
HTML 태그 정리
-
<title></title>: 웹 페이지 타이틀 달기 -
<h1></h1>~<h6></h6>: 문단 제목(장, 절, 소제목 등) 달기
(h1이 가장 크고 h6가 가장 작다.) -
<p></p>: 단락 나누기, 문단을 여러 단락으로 나눌 수 있다.
(css를 사용하면 단락 단위로 들여쓰기와 내어쓰기가 가능하다.) -
<pre></pre>: 개발자 포맷 그대로 출력하기
❗ p 태그와의 차이점 : p 태그는 여러 개의 빈칸이나 enter를 하나로 처리하지만 pre 태그는 입력한 그대로 출력해준다. -
<hr>: 수평선 긋기 -
<br>: 새로운 줄로 넘어가기
✅ 블록 태그, 인라인 태그
블록 태그는 항상 새 라인에서 시작하고 브라우저 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지한다.
ex) <p>, <h1>, <div>, <ul> 등
인라인 태그는 블록에 삽입되어 블록 콘텐츠의 일부를 표현하는 데 사용된다.
ex) <strong>, <a>, <img>, <span> 등
<div></div>: 블록을 구성하기 위해 가장 많이 사용되는 블록 태그
❗ p 태그와의 차이점 : p 태그는 문단을 만들기 위해 사용되지만 div 태그는 특별한 의미없이 여러 HTML 태그를 블록으로 묶는 컨테이너로 사용된다.<span></span>: 많이 사용하는 인라인 태그, 텍스트 일부분에 특별한 모양을 주거나 자바스크립트 코드로 텍스트 일부분을 제어하기 위해 사용한다.
✅ HTML 메타 데이터 삽입
먼저 메타 데이터란, 데이터를 설명하는 데이터이다. 예를 들어 이미지 파일의 경우 이미지 폭과 높이, 컬러 해상도 정보 등이 메타 데이터라고 할 수 있다. HTML 역시 HTML 페이지에 대한 메타 데이터를 표현하는 여러 태그들을 두고 있다.
ex) <script>, <style>, <base>, <title>, <meta> 등
style 태그는 CSS 스타일 시트를 담는 태그이고, script 태그는 자바스크립트 코드를 담는 태그이다.
<base>: 웹 페이지의 베이스 URL, 웹 페이지들이 담겨 잇는 기본 URL과 웹 페이지가 출력될 윈도우를 지정하기 위해 사용된다.<meta>: 웹 페이지 저작자, 문자 인코딩 방식, 문서 내용 등의 다양한 메타 데이터를 표현하기 위해 사용한다.
✅ 이미지 삽입하기
삽입할 수 있는 이미지 종류는 GIF, PNG, JPG(JPEG), BMP, ANIMATED-GIF이다.
<img>: 이미지 삽입하는 태그
<img src="이미지 파일 URL" alt="이미지를 출력할 수 없을 때 출력되는 문자열" title="툴팁" width="이미지 폭" height="이미지 넓이">
title 속성은 이미지에 마우스가 올라갈 떄 설명문(툴팁)이 출력되게 할 수 있다.
✅ 리스트 만들기
데이터를 나열할 때 사용되며 순서 있는 리스트(ordered list), 순서 없는 리스트(unordered list), 정의 리스트(definition list)로 총 3가지 종류이다. 리스트의 각 아이템은 li 태그를 사용하며 li 종료 태그는 생략 가능하다. 정의 리스트의 경우 dt, dd 종료 태그 또한 생략 가능하다.
- 순서 있는 리스트
<ol></ol>
아이템<li></li>
type, start 속성으로 정할 수 있지만 CSS를 이용하여 꾸밀 것을 권장한다. - 순서 없는 리스트
<ul></ul>
아이템<li></li> - 정의 리스트
<dl></dl>
용어<dt></dt>
설명<dd></dd>
✅ 테이블 만들기
표 전체는 table 태그로 감싸고 그 안에 표제목, 헤드, 바디, 바닥을 모두 포함한다. 행과 열을 만들어 표를 그릴 수 있다. border 속성을 사용하여 테이블의 테두리를 꾸밀 수 있다.
❗ 표 만들기 팁
검색 엔진은 표의 의미를 파악하기 위해 표 구성 태그를 찾기 때문에 thead, tbody 등을 이용하지 않고 tr로만 테이블을 만드는 방법은 바람직하지 않다. 또한 tfoot과 tbody를 함께 사용할 시 tfoot이 먼저 나오는 것이 좋다.
표 전체 구성
<table></table>: 표 전체를 담는 컨테이너<caption></caption>: 표 제목<thead></thead>: 헤딩 셀 그룹<tfoot></tfoot>: 바닥 셀 그룹<tbody></tbody>: 데이터 셀 그룹
행, 열 만들기
<tr></tr>: 행, 여러 개의 th, td 포함<th></th>: 제목(헤딩) 셀<td></td>: 데이터 셀
❗ 비정형 표 만들기
rowspan과 colspan을 이용하여 비정형 표 작성가능
ex) <td rowspan='2'></td>
✅ 하이퍼링크와 항해(내비게이션)
여러 개의 HTML 페이지들을 상호 연결하는 방식으로 전체를 구성한다. 이때 페이지를 연결하는 고리를 하이퍼링크(hyperlink)라고 부른다. 하이퍼링크를 따라 다른 웹 페이지로 이동하는 것을 항해 혹은 내비게이션(navigation)아라고 부른다.
<a></a>: 하이퍼링크 만드는 태그
<a href="URL | URL#앵커명 | #앵커명" target="윈도우명" download>
href 속성은 이동할 URL을 지정한다. 여기서 지정하는 앵커란, 문서의 특정 위치로 id를 이용하여 아이디를 앵커명으로 선언해주면 해당 id가 있는 위치로 이동가능하다.
target 속성은 링크에 연결된 웹 페이지가 출력될 윈도우(탭)를 지정한다. (조금 더 자세한 내용은 iframe에서 다룬다. 이동하기)
download 속성은 이미지, PDF, MP3, HTML 파일 등 모든 파일을 다운로드 할 수 있는 링크를 생성한다. 이때 다운로드 할 파일명은 href 속성에 지정한다.
✅ 인라인 프레임 만들기
이 iframe 태그를 이용하면 현재 HTML 페이지에 내장 윈도우를 만들고 다른 HTML 페이지를 출력할 수 있다.
<iframe> </iframe>: 인라인 프레임 만드는 태그
<iframe src="URL" srcdoc="HTML 문서 텍스트" name="윈도우명" width="프레임 폭" height="프레임 넓이"> </iframe>
name 속성은 프레임 윈도우의 이름으로 다른 웹 페이지에서 target 속성 값으로 사용한다.
❗ target 속성은 base, a, area, form 태그에서 HTML 페이지를 출력할 윈도우를 지정하는데 사용된다. 총 5가지의 종류가 있다.
1. _blank : 새로운 브라우저 탭 생성
2. _self : 현재 윈도우
3. _parent : 부모 윈도우
4. _top : 최상위 브라우저 윈도우
5. 윈도우명 : 해당 이름의 윈도우
ex)
<iframe src="https://www.ooo.org" name="frame1"></iframe>
...
<a href="https://www.ooo.org" target="frame1">링크 클릭시 frame1프레임에 해당사이트 출력</a>✅ 미디어 삽입하기
video와 audio 태그는 플러그인 없이 오디오나 비디오를 재생할 수 있도록 표준화한 태그이다. 표준화되지 않은 미디어를 재생하기 위해서는 플로그인 설치가 필요하며, embed와 object 태그를 사용한다.
- 영상 삽입
<video></video>: 비디오 삽입하는 태그
<video src="비디오 소스" width="프레임 폭" height="프레임 넓이" controls autoplay loop muted> </video>
controls 속성은 비디오 제어 버튼을 보여준다.
autoplay 속성은 비디오를 즉시 재생한다.
loop 속성은 비디오를 반복재생한다.
muted 속성은 비디오의 소리를 제거한다.
source 태그를 사용하여 비디오 소스를 별도로 저장하여 재생 가능 타입을 지정할 수 있다. video 태그 안에<source src="비디오 소스" type="비디오 타입">코드를 삽입하면 된다.
※ 재생 가능한 타입 : MP4, WebM, Ogg
- 소리 삽입
<audio></audio>: 오디오 삽입하는 태그
<audio src="오디오 소스" controls autoplay loop> </video>
video 태그와 마찬가지로 source 태그를 사용하면 재생 가능한 타입을 설정할 수 있다.
※ 재생 가능한 타입 : MP3, Wav, Ogg
✅ 문자, 기호, 심볼 입력
HTML 문서에서 문자들은 유니코드 UTF-8 코드체계로 작성되는 것이 표준이므로 html 파일을 저장할 때 UTF-8 코드체계로 저장한다. 가장 다양한 종류의 문자, 기호, 심볼을 표현할 수 있는 코드 체계이지만 '<'나 '>'와 같은 HTML 언어에서 예약어로 사용하는 문자나 키보드로 입력할 수 없는 기호, 심볼, 글자들은 다음 두 방법으로 입력할 수 있다.
- &엔터티; or &#코드값;
ex) < :<또는<
✅ 텍스트 꾸미기
HTML은 강조하는 단어나 삭제 문자 등 텍스트에 의미를 부여할 수 있다. 아래 표 외에도 텍스트를 꾸미는 다양한 태그가 있다.
📌 참고자료
웹 프로그래밍 (황기태) 교재 참고
