HTML이란?
HTML은 "HyperText Markup Language"의 약어로, 웹 페이지를 만들기 위해 사용되는 마크업 언어이다. HTML은 웹 페이지의 구조를 정의하며, 텍스트, 이미지, 비디오 등의 다양한 콘텐츠를 표시할 수 있다.
태그(Tag)
HTML은 태그(Tag)라는 구문 요소를 사용하여 콘텐츠의 구조를 지정한다. 태그는 < >로 감싸져 있으며, 시작 태그와 끝 태그가 쌍으로 사용되어야 한다. 시작 태그는 "<태그이름>" 형식으로 표시되고, 끝 태그는 "</태그이름>" 형식으로 표시된다. 태그는 콘텐츠를 가지는 태그와 콘텐츠를 가지지 않는 태그로 나뉜다.
- 콘텐츠를 가지는 태그
열리는 태그(시작 태그)로 시작해서 닫히는 태그(끝 태그)로 끝남
<div> 콘텐츠 </div>- 콘텐츠를 가지지 않는 태그
단일 태그(Empty Elment)
<br/>속성과 값
태그의 속성은 <태그 속성="값"> 의 형태로 사용하며, 태그마다 여러 속성을 부여 할 수도 있다. 아래 예시에서, 태그 안에 title 을 속성(Attribute)이라하고 제목 을 값(Value)라고 한다.
<div title="제목"> Content </div>HTML 기본 문서
HTML 기본 문서의 구조는 아래와 같다.
<!DOCTYPE html> <!-- 문서 버전 -->
<html lang="ko"> <!-- HTML문서 시작 선언 및 문서 기본 언어 설정 -->
<head> <!-- 문서에 필요한 정보가 기입되는 곳 -->
<title>문서 제목</title> <!-- 문서의 제목 -->
<head>
<body> <!-- 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳 -->
안녕하세요!
</body>
</html>부모요소 자식요소
기준이 되는 태그에서 들여쓰기 되어 있는 태그는 자식요소이고, 내어쓰기 되어 있는 태그는 부모요소이다.
HTML을 작성할 땐 들어쓰기와 내어쓰기에 신경을 써서 작성해야 한다. 들어쓰기와 내어쓰기를 하지 않는다고 작성한 HTML이 정상적으로 인식 되지 않는 것은 아니지만, 내가 작성한 HTML을 누군가 보고 수정할 일이 생길 때 혼란을 야기할 수 있기 때문에 주의하는 편이 좋다.
주석
주석은 개발자가 코드 내에 입력한 메모와 같다. HTML에서 주석은 <!-- 주석내용 --> 와 같은 형태로 작성해야 한다. 참고로 HTML은 주석 안에 또 다른 주석을 작성할 수 없다. 또한 중요한 정보를 주석처리한 채로 문서를 작성하지 않도록 조심해야 한다.
HEAD와 BODY
HTML 문서는 기본적으로 HEAD와 BODY로 구분할 수 있다. HEAD는 문서의 메타데이터를 포함하고 있다. 예를 들어, 문서 제목, 작성자, 키워드, 스타일 시트 등을 포함할 수 있다. BODY는 실제 문서 내용을 포함하고 있다. 예를 들어, 본문 텍스트, 이미지, 동영상, 링크 등이 BODY 안에 포함된다.
HEAD
HEAD는 사람 눈에 보이지 않는 "문서의 정보"가 담기는 영역이다. <head>를 사용해서 정보를 담는다. HEAD 포함될 수 있는 정보의 종류는 다음과 같다.
- title
- meta data
- 인코딩 정보
charset(character set)은 문서에서 허용하는 문자의 집합이다. charset에 선언된 "문자의 집합" 규칙에 따라 문서에서 사용할 수 있는 문자가 제한된다. - 문서 설명
- 문서 작성자
- CSS, Script
BODY
BODY는 사용자의 눈에 실제로 보이는 콘텐츠를 담는 영역이다. <body>를 사용해서 정보를 담는다. BODY에 포함될 수 있는 정보는 '자주 사용되는 태그' 목록에서 정리해두었다.
display 속성
display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나이다. 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다.
block(블록 레벨 요소)
레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
- 블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다.
- 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없다.
- 대표적인 블록 레벨 요소
<div>, <article>, <section>
inline(인라인 레벨 요소)
블록 요소 내에 포함되는 요소
- 주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
- 좌/우에 여백을 넣는 것만 허용된다.
- 대표적인 인라인 레벨 요소
<span>, <a>, <strong>
inline-block
글자처럼 취급되나, block 태그의 성질을 가지는 요소
- block과 마찬가지로 크기와 내/외부 여백을 지정할 수 있다.
- CSS로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소이다.
레이아웃
다음은 레이아웃과 관련된 태그이다.
<div>- 가장 흔히 사용되는 레이아웃 태그로 단순히 구역을 나누기 위한 태그<header>- 블로그 글 제목, 작성일 등의 주요 정보를 담는 태그<footer>- 페이지의 바닥줄에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그<main>- 페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그<section>- 콘텐츠의 구역을 나누는 태그로, 신문지에서 여러 기사가 각자의 구역에서 각자의 정보를 전달하는 의미와 비슷한 역할을 하는 태그<article>- 블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그<aside>- 문서의 주요 내용에 간접적인 정보를 전달하는 태그로 쇼핑몰의 오른쪽에 따라다니는 "오늘 본 상품" 같은 것으로도 사용할 수 있다.
레이아웃 태그를 왜 알아야 할까?
- HTML5 부터 태그를 의미 있게 사용하기 위해 "Semantic(시멘틱)" 태그를 사용하여 문서 구조를 작성한다.
- 단순히 의미 구분자인
<div>를 남발하지 않고 적절한 태그를 사용하여 웹 문서가 담은 정보와 구조를 의미 있게 전달할 수 있다. - 시멘틱 하게 마크업을 함으로써 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높일 수 있다.
자주 사용되는 태그
<h1> ~ <h6>
문서 구획 제목을 나타내는 태그로 Heading(헤딩) 태그라고 부른다.
- h1 부터 h6까지 사용 가능
- h1 태그는 페이지 내에 "한번만" 사용되어야 하고 "구획의 순서"는 지켜져야 한다.
<p>
문서에서 하나의 문단(Paragraph)을 나타내는 태그이다.
- 제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 한다.
<b>, <strong>
글씨의 두께를 조절할 수 있다.
<b>태그는 의미를 가지지 않고 단순히 굵은 글씨로 변경만 해준다.<strong>태그는 굵은 글씨로 변경 후 "강조"의 의미를 부여한다.
<b> 와 <strong>은 시각적으로 굵은 효과는 같지만 의미가 다름으로 사용에 주의해야 한다.
<i>, <em>
글씨의 기울기를 조절할 수 있다.
<i>태그는 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용할 수 있다.
ex) 등장인물, 외국어 구절, 기술 용어 등<em>태그는 기울임과 내용에 "강조"를 나타낸다.
<i> 와 <em>은 시각적으로 기울임은 같지만 의미가 다름으로 사용에 주의해야 한다.
<u>
글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타낼 수 있다.
- CSS로 스타일링 하여 빨간 밑줄을 넣는 것으로 "오타"를 나타내는 것 처럼 사용할 수 있다.
- 단순하게 "밑줄"만 긋는 용도로 사용하면 안된다.
<s>, <del>
글씨에 취소선을 추가할 수 있다.
<s>태그는 단순히 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내는 하지 않는다.<del>태그는 문서에서 제거된 텍스트를 나타낼 수 있다.<ins>태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있다.
<a>
클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있다.
- href 속성을 사용해서 이동하고자 하는 파일 혹은 URL을 작성한다.
- target 속성을 사용해서 이동해야 할 링크를 새 창(_blank), 현재창(_self) 등 원하는 타겟을 지정할 수 있다.
멀티미디어 태그
<img>
문서 내에 이미지를 넣을 수 있는 태그이다.
- 가장 기본적인 이미지 넣은 방법
- "src" 속성을 사용해 이미지의 경로를 넣으면 이미지가 출력됨
- "alt" 속성을 사용해 이미지 로딩에 문제가 발생했을 때 대체 텍스트를 띄울 수 있음
<figure>, <figcaption>
하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그이다.
<figcaption>태그를 사용해 콘텐츠의 설명 혹은 범례를 추가할 수 있고 제일 처음이나 제일 아래에 추가해서 사용할 수 있다.- 보통 이미지를 넣는데 인용문, 비디오/오디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담을 수 있다.
<video>
문서 내에 영상을 첨부할 수 있는 태그
- "src" 속성을 사용하여 비디오를 문서 내에 첨부할 수 있다.
- "poster" 속성을 사용하면 비디오가 로드되기 전에 포스터를 보여줄 수 있다.
<source>태그를 사용하면 여러 타입의 비디오를 제공할 수 있다.
<audio>
문서 내에 소리를 첨부할 수 있는 태그
- "src" 속성을 사용하여 소리를 문서 내에 첨부할 수 있다.
<source>태그를 사용하면 여러 타입의 비디오를 제공할 수 있다.- "controls" 속성을 사용하면 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있다.
<svg>(Scalble Vector Graphics)
그래픽으로 만들어진 이미지
- 일반 이미지와 다르게 수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소가 자유롭다.
- 주로 크기를 자주 바꾸어야 하는 작은 아이콘에서 많이 사용된다.
리스트 태그
<ul>, <li>
정렬되지 않은 목록 태그
- 기본 불릿(bullet) 형식으로 목록을 그린다.
<li>태그를 사용하여 목록을 구성할 수 있고 다양한 태그를 포함할 수 있다.<ul>태그의 자식요소로는<li>태그만 들어와야 한다. 하위 리스트를 만드려면<li>태그 안에<ul>, <ol>태그를 사용하면 된다.
<ol>, <li>
정렬된 목록 태그
- 기본 숫자(1,2,3, ...) 형식으로 목록을 그린다.
<li>태그를 사용하여 목록을 구성할 수 있고 다양한 태그를 포함할 수 있다.<ol>태그의 자식요소로는<li>태그만 들어와야 한다. 하위 리스트를 만드려면<li>태그 안에<ol>, <ul>태그를 사용하면 된다.
<dl>, <dt>, <dd>
설명 목록 태그
<dt>태그에 사용된 단어 혹은 내용의 설명을<dd>태그에 작성할 수 있다.- 주로 용어사전이나 "키-값"이 있는 쌍의 목록을 나타낼 때 사용 한다.
<dt>태그를 여러 개 작성하고 하나의<dd>태그를 작성하는 것으로 여러 개의 용어를 설명할 수 있다.- 위와 반대로,
<dt>태그 하나에 여러개의<dd>태그를 가질 수 있다.
표 태그
<table>
표를 만드는 태그
<tr>태그로 행을 구분할 수 있다.(보통 row;로우 라고 부른다.)<td>태그로 열을 생성할 수 있다.(보통 cell;셀 이라고 부른다.)
<th>
열(cell) 제목 태그
<th>태그를 사용하면 셀의 제목을 만들 수 있다.
<thead>
제목 그룹 태그
<thead>태그 안에 "열(cell) 제목의 행"을 넣음으로써 그룹을 지을 수 있다.
<tbody>
표 본문 요소 태그
<tbody>태그 안에 여러 "열(cell)의 행"을 넣음으로써 본문 요소를 그룹 지을 수 있다.
<tfoot>
표 바닥글 요소 태그
<tfoot>태그 안에 여러 "열(cell)의 행"을 넣음으로써 표의 바닥글 요소를 넣을 수 있다.
<caption>
<caption>태그를 사용하여 "표가 가진 데이터에 대한 설명"을 넣을 수 있다.
외부 콘텐츠 관련 태그
<iframe>
현재 문서 안에 다른 HTML 페이지를 삽입할 수 있는 태그
- "src" 속성에 원하는 HTML 문서 또는 URL을 넣을 수 있다.
- 외부 페이지를 불러올 수 있기 때문에 불러온 외부 페이지의 영향을 받을 수 있다.
- "name" 속성을 지정하면,
<a>태그의 "target" 속성을 사용해 iframe에서 문서 또는 URL이 열리게 할 수 있다.
양식 태그
<form>
정보를 제출하기 위한 태그
- 정보를 입력하고 선택할 수 있는 input, selectbox, textarea 등을 가질 수 있다.
- 정보를 제출하기 위한 button을 가진다.
- "action" 속성으로 정보가 제출되었을 때 페이지를 이동시킬 수 있다.
- "method" 속성으로 정보가 제출될 때 처리 방식을 결정할 수 있다.
<label>
input, textarea, selectbox의 설명을 작성할 수 있는 태그
- "for" 속성을 사용하여 연결하고자 하는 태그에 "id" 속성을 지정하면 label을 클릭하면 연결된 태그가 선택된다.
- label 태그 안에 input을 넣으면 자동으로 for -> id 연결과 같은 처리를 해준다.
- "id" 속성은 값이 절대로 중복되면 안된다.
<input>
사용자에게 데이터를 입력 받을 수 있는 대화형 태그
- "type" 속성의 값에 따라 받을 수 있는 input의 유형이 달라진다.
- "value" 속성을 사용해 기본 내용을 입력 해둘 수 있다.
- "name" 속성을 사용해 input의 이름을 지정할 수 있다.
자주 사용되는 input 타입
- checkbox : input을 체크박스 형태로 만든다.
- radio : 라디오 버튼으로 만든다.
- file : 파일을 첨부할 수 있게 만든다.
- button : "value" 속성에 입력된 값을 이름으로 갖는 버튼으로 만든다.
- hidden : input을 시각적으로 숨겨준다. 정보 제출 시 "value" 속성에 입력된 값은 전송된다.
<select>
옵션 메뉴를 제공하는 태그
<option>태그를 사용해 옵션을 정의할 수 있다.- 첫번째 option은 이름이 된다.
- "value" 속성을 선언하지 않은 경우
<option>태그의 콘텐츠가 기본값이 된다. - 흔히 셀렉트 박스라고 불리워진다.
- 첫번째 옵션이 버튼명이기 때문에 "placeholder" 속성을 사용할 수 없다.
<textarea>
여러 줄을 입력할 수 있는 대화형 태그
- 콘텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 된다.
- "cols/rows" 속성으로 기본 너비와 높이를 지정할 수 있다. 너비와 높이는 글자 크기 기준으로 정의된다.
<input>,<select>,<textarea>에서 공통으로 사용할 수 있는 속성
- readonly : 사용자가 수정할 수 없는 "읽기 전용"으로 만든다.
- required : form이 제출될 때 "필수 입력 사항"으로 만든다.
- placeholder : input, textarea에 부가 설명을 입력해둘 수 있다.
- disabled : 요소가 비활성화 되며 정보 제출 시 값이 제출되지 않는다.
<button>
클릭 가능한 버튼을 태그로 <form> 태그 내에 어디서든 사용할 수 있다.
- "type"을 "reset"으로 지정하면, 버튼이 눌리면 입력한 양식이 모두 초기화 된다.
- "type"을 "submit"으로 지정하면 form 양식을 제출할 수 있다. form 태그 내 button 태그의 기본 type은 submit이다.
<button>태그 내 콘텐츠에 "태그"의 입력이 가능하나, 블록 레벨 태그는 사용하면 안된다.- "disabled" 속성을 가질 수 있다.
HTML 작성 시 주의사항
- 대소문자 주의(가능한 소문자로 작성할 것)
- 닫는 태그 생략 주의
- 한글 사용을 지양하고, 영어 사용을 지향
- ID 중복 사용 주의
- 계층 구조 유지
- 동일한 의미의 태그 중첩 금지
