HTML이란?
HTML (HyperText Markup Language)은 웹 페이지의 구조와 내용을 명기하는 마크업 언어이다. 마크업 언어는 문서를 인간과 기계가 읽을 수 있는 형식으로 인코딩하기 위한 규칙을 정의한다. HTML은 텍스트 서식 지정, 하이퍼링크 생성, 멀티미디어 삽입 및 헤딩, 문단, 목록과 같은 명확한 구역으로 콘텐츠를 구성하는 데 사용되는 다양한 태그를 사용한다.
아래 위키백과 마크업 언어 페이지를 예로 들었을 때 '마크업 언어'를 굵게 표시하거나 '태그'에 링크를 삽입하거나 '종류'를 제목으로 쓰는 방법 등 텍스트를 구조화하고 꾸며 더 효과적으로 전달할 수 있다.
태그 Tag
태그는 웹 페이지를 형식화하고 표시하는 방법을 정의하는 웹 브라우저의 핵심 요소이다.
괄호 <>로 표시하며 일반적으로 태그는 시작 태그 <tag>와 종료 태그 </tag>로 구성되며, 일부 태그는 자체 종료되어 별도의 종료 태그가 필요하지 않는다.
예시:
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph.</p>
</body>
</html>
예시에서 <!DOCTYPE html>, <html>, <head>, <title>, <body>, <h1>, 그리고 <p>는 HTML 태그이다.
구조 태그
웹 페이지의 기본 구조(뼈대)를 정의하는 태그
| 태그 | 설명 |
| <!DOCTYPE> | 문서 유형을 선언합니다. 현재의 표준인 HTML5를 사용할 때는 <!DOCTYPE html> |
| <html> | HTML 문서의 시작과 끝을 나타낸다. 웹 페이지의 전체 내용을 감싸며 <head>와 <body> 요소를 포함한다. |
| <head> | 웹 페이지의 메타 데이터(Metadata) 영역으로, 문서의 제목, 문자셋, 스타일시트, 스크립트 등과 같은 정보를 담는다. |
| <title> | 웹 페이지의 제목(Title)을 지정. 브라우저 탭, 북마크, 검색 엔진 결과 등에서 표시된다. |
| <body> | 웹 페이지의 본문(Body) 영역으로, 실제로 사용자에게 보여지는 콘텐츠(텍스트, 이미지, 동영상 등)를 포함한다. |
<head> 태그는 웹 페이지의 메타 데이터 영역을 뜻한다. 이 영역에는 페이지의 제목, 스타일시트, 글꼴, 스크립트 등과 같은 정보가 들어간다. <head> 태그 안의 내용은 일반적으로 웹 브라우저에 직접 표시되지 않지만, 검색 엔진 최적화(SEO), 페이지 스타일링, 동작 등의 내부적인 목적을 위해 사용된다. <head> 태그는 <html> 태그 내부에서 <body> 태그 앞에 위치한다.
텍스트 서식 태그
텍스트 요소의 스타일을 지정하고 서식을 적용하는 태그
| 태그 | 설명 |
| <h1>-<h6> | 제목(Heading) 태그로, 웹 페이지의 여섯 가지 크기의 제목을 나타낸다 h1이 제일 크다. |
| <p> | 문단 (paragraph) 태그 |
| <b> | 굵게 표시(Bold) 태그 |
목록 태그
순서가 있는 목록, 순서가 없는 목록을 생성하는 태그
| 태그 | 설명 |
| <ol> | 순차 목록(ordered list)을 정의할 때 사용 |
| <ul> | 비순차 목록(unordered list)을 정의할 때 사용 |
| <li> | 목록 항목(List Item)을 정의할 때 사용 |
링크 태그
하이퍼링크를 생성하거나 리소스를 연결하는 태그
+ HTML 속성(attributes)은 HTML 요소(element)의 추가 정보를 제공하며, 요소의 작동 방식이나 외관 등을 변경하는 데 사용된다. 속성은 요소의 시작 태그 안에 존재하며, 일반적으로 속성 이름과 값이 속성="값" 형태로 표현됩니다.
| 태그 | 설명 |
| <a> | 앵커(Anchor) 태그를 사용하여 하이퍼링크를 생성합니다. - 'href': 링크 대상의 URL을 지정합니다. - 'title': 링크에 대한 추가 정보를 제공하는 텍스트입니다. |
이미지 태그
| 태그 | 설명 |
| <img> | 이미지를 삽입할 때 사용하며, src 속성을 통해 이미지 위치를 표시. 종료 태그가 필요 없다. - alt 이미지가 로드되지 않을 경우 대체 텍스트를 표시 - width 속성으로 이미지의 너비를 설정하는것도 가능하나 css에서 하는 걸 추천한다. |
블록 & 인라인 요소
블록 요소(Block elements):
- 블록 요소는 항상 새로운 줄에서 시작하며, 사용 가능한 전체 너비를 차지한다.
- 요소의 너비와 높이를 설정할 수 있다.
- 일반적으로 구조적 요소(머리글, 목록, 단락 등)를 나타낸다.
- 예: <div>, <h1>, <p>, <form>, <header>, <footer>, <section> 등
인라인 요소(Inline elements):
- 인라인 요소는 텍스트 또는 기타 인라인 요소와 함께 같은 줄에 배치된다.
- 요소의 상자 크기는 콘텐츠 크기에 따라 자동으로 조정되며, 너비와 높이를 직접 설정할 수 없다.
- 일반적으로 텍스트의 일부를 변경하거나 영역에 링크를 적용하는 등의 작업에 사용된다.
- 예: <span>, <a>, <strong>, <em>, <img> 등
| 태그 | 설명 |
| <div> | 일반적인 블록 수준 컨테이너로 사용되어, 웹 페이지의 구조와 레이아웃을 구성하거나 CSS 스타일을 적용하기 위해 다른 요소들을 그룹화하는데 사용 |
| <span> | 인라인 요소로, 텍스트나 문서 내 다른 인라인 요소에 스타일, 클래스, ID 등을 적용하기 위해 사용되며, 구조나 의미를 변경하지 않는다. |
네이버 날씨 위젯 예시를 들면, 이 위젯은 '날씨'라는 <a> 태그와 '서울시 을지로1가'라는 텍스트, 그리고 또 다른 <div>로 구성되어 있다. 이렇게 <div> 태그를 사용하여 여러 요소들을 그룹화하고 스타일을 쉽게 적용할 수 있습니다.
테이블 태그
HTML에서 테이블 태그는 표를 표현하기 위해 사용되는 태그이다.
| 태그 | 설명 |
| <table> | 테이블을 생성하는 태그 |
| <tr> | 테이블의 행(table row)을 생성하는 태그 |
| <th> | 테이블의 제목 셀(table header)을 생성하는 태그 |
| <td> | 테이블의 데이터 셀을 생성하는 태그 |
| <thead> | 테이블의 헤더 부분을 정의. 이 태그는 테이블의 열 머리글을 그룹화하고 표시하는 데 사용 |
| <tbody> | 테이블의 본문 부분을 정의. 이 태그는 테이블의 실제 데이터 행을 포함하고 표시하는 데 사용 |
| <tfoot> | 테이블의 바닥글 부분을 정의. 이 태그는 테이블의 요약 정보나 추가 정보를 표시하는 데 사용 |
| <colspan> | 테이블의 셀을 가로로 병합하는 데 사용되는 속성 |
| <rowspan> | 테이블의 셀을 세로로 병합하는 데 사용되는 속성 |
테이블 예제
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
양식 (form 폼) 태그
폼 태그는 사용자 입력을 위한 HTML 양식을 생성하는 데 사용된다. <form> 요소는 일반적으로 사용자 입력을 수집하여 처리하고/또는 웹 서비스와 상호작용하는 데 사용된다.
자주 쓰이는 속성:
- action 폼 데이터가 전송되는 URL을 지정.
- method 폼 전송 방식 HTTP 메소드를 지정 (GET / POST)
- name 폼의 이름을 지정. 서버 측에서 데이터를 처리할 때 사용
| 태그 | 설명 |
| <form> | 사용자 입력을 수집하여 처리하고/또는 웹 서비스와 상호작용하는 데 사용되는 태그 |
| <input> | 가장 많이 사용되는 폼 요소이다. type 속성에 따라 텍스트 필드, 체크박스, 라디오 버튼, 제출 버튼 등 다양한 방식으로 렌더링 할 수 있다. e.g. type="checkbox" |
| <textarea> | 여러 줄 입력을 위해 사용. 특히 많은 양의 텍스트를 위한 것입니다. |
| <button> | 클릭 가능한 버튼을 나타내며, 어떻게 설정되었는지에 따라 폼 제출 또는 이벤트 핸들러를 트리거하는 데 사용될 수 있다. |
| <label> | 텍스트 설명을 <input> 요소와 연결하는 데 사용 |
| <select> | 입력을 위한 드롭다운 목록을 생성하는 데 사용된다. 각각 목록에서 하나의 선택을 나타내는 <option> 요소를 포함한다. |
| <fieldset> | 폼 내의 관련 요소를 그룹화하는 데 사용된다. 관련 폼 컨트롤 주위에 상자를 그리고 <legend>와 연결될 수 있다. |
| <legend> | 부모 <fieldset>의 콘텐츠에 대한 캡션 또는 제목을 나타낸다. <fieldset> 내에 그룹화된 필드의 목적을 사용자가 이해하는 데 도움이 된다. |
엔티티 Entities
HTML 엔티티(Entities)는 특수 문자를 HTML 문서에서 안전하게 표시하기 위해 사용되는 문자열이다. 미리 정의된 엔티티로, 코드 안에서 예약 문자(예: 꺽쇠 괄호 <, > 또는 앰퍼샌드 &)나 특수 기호들을 나타내기 위해 사용된다.
HTML 엔티티는 앰퍼샌드(&)로 시작하며 세미콜론(;)으로 끝난다.
- < - 꺽쇠 괄호(<) 기호
- > - 꺽쇠 괄호(>) 기호
- & - 앰퍼샌드(&) 기호
- - 공백(space) 기호
- © - 저작권(Copyright) 기호 ©
시맨틱 (Semantic)
시맨틱 마크업(Semantic Markup)은 HTML에서 콘텐츠의 의미를 명확하게 나타내기 위해 사용되는 코드이다. 시맨틱 태그는 웹 페이지의 구조와 내용에 대한 정보를 제공하며, 코드의 가독성과 접근성을 높이고, 검색 엔진 최적화(SEO)에도 도움이 된다.
시맨틱 태그 예시:
- <header>: 페이지나 섹션의 헤더를 나타냅니다.
- <main>: 웹 페이지의 주요 콘텐츠 영역을 나타냅니다.
- <article>: 독립적인 콘텐츠 블록을 나타냅니다.
- <section>: 문서나 애플리케이션의 일반적인 섹션을 나타냅니다.
- <nav>: 웹 페이지의 네비게이션 요소를 나타냅니다
- <footer>: 페이지나 섹션의 바닥글을 나타냅니다.
'Web development' 카테고리의 다른 글
| [CSS] 박스 모델 Box model (0) | 2021.07.05 |
|---|---|
| [CSS] 선택자 Selector #1 (전체/요소/클래서/아이디 선택자) (0) | 2021.06.16 |
| [CSS] 색상 바꾸기 (색상 이름, RGB, Hex 색상 코드) (0) | 2021.06.14 |
| [웹 개발] CSS 기초: CSS란?, HTML에 CSS 적용하는 방식 (0) | 2021.06.10 |