안녕하세요!
첫 번째 글로 어떤 내용을 써볼까 고민하다가
제일 첫 번째로 알아야 할 HTML태그에 관해서 설명해 보려고 해요.
코딩을 시작할 때 꼭 알아야 할 HTML의 기본 구성에 대해 알아볼까요?
HTML이란?
먼저 HTML이 뭔지 설명해 보려고 해요.
HTML은 Hypertext Markup Language의 약자로 웹 페이지와 웹 페이지 내의 내용을 주고 화하기 위해 사용하는 코드입니다.
HTMl은 프로그래밍 언어가 아닌 콘텐츠의 구조를 정의하는 마크업 언어입니다.
Markup Language(마크업 언어)
Markup Language(마크업 언어)는 mark(부호, 표시)를 이용하여 문서나 데이터의 구조를 표기하는 언어입니다.
HTML에서의 Mark는 태그 '< >'를 의미하기 때문에 '< >'를 이용해서 문서의 구조를 표현하는 언어를 말합니다.
자주 쓰는 태그 </> 모음
HTML에는 많은 태그들이 있지만 그중 제가 작업을 하면서 자주 쓰는 태그들을 모아봤어요.
|
태그
|
설명
|
|
<!-- -->
|
주석(comment)을 정의함
|
|
<!DOCTYPE>
|
해당 문서(document)의 타입을 정의함.
|
|
<html>
|
HTML 문서의 루트 요소(root element)를 정의함.
|
|
<style>
|
해당 HTML 문서의 스타일 정보를 정의함.
|
|
<script>
|
자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의함.
|
|
<head>
|
해당문서에 대한 정보인 메타데이터(matadata)의 집합을 정의함.
|
|
<meta>
|
해당 문서에 대한 정보인 메타데이터(matadata)를 정의함.
|
|
<body>
|
해당문서의 콘텐츠 영역을 정의함.
|
|
<header>
|
문서나 특정 섹션의 헤더(header)를 정의함.
|
|
<footer>
|
문서나 특정 섹션의 푸터(footer)를 정의함.
|
|
<title>
|
해당 문서의 제목(title)을 정의함.
|
|
<h1> ~ <h6>
|
HTML 문서에서 제목(headings)을 정의함.
|
|
<nav>
|
다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의함.
|
|
<div>
|
HTML 문서에서 특정 영역이나 구획을 정의함.
|
|
<p>
|
문단(paragraph)을 정의함.
|
|
<a>
|
다른 콘텐츠와 연결되는 하이퍼링크(Hyperlink)를 정의함.
|
|
<span>
|
HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용함.
|
|
<strong>
|
해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조함.
|
|
<em>
|
강조된 텍스트를 표현함.
|
|
<address>
|
문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시함.
|
|
<area>
|
이미지 맵(image-map)에서 하이퍼링크가 연결될 영역을 정의함.
|
|
<article>
|
해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의함.
|
|
<img>
|
이미지(image)를 정의함.
|
|
<svg>
|
SVG 그래픽을 위한 컨테이너를 정의함.
|
|
<audio>
|
음악이나 오디오 스트림과 같은 사운드를 정의함.
|
|
<video>
|
무비 클립(movie clip)이나 비디오 스트림(cideo stream)과 같은 비디오를 정의함.
|
|
<canvas>
|
자바스크립트와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용함.
|
|
<br>
|
행 바꿈(line-break)을 정의함.
|
|
<hr>
|
콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의함.
|
|
<form>
|
사용자로부터 입력을 받을 수 있는 HTML 입력 폼(form)을 정의함.
|
|
<fieldset>
|
<form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용함.
|
|
<legend>
|
<fieldset> 요소의 캡션(caption)을 정의함.
|
|
<label>
|
사용자 인터페이스(UI) 요소의 라벨(label)을 정의함.
|
|
<input>
|
사용자로부터 입력을 받을 수 있는 필드(input filed)를 정의함.
|
|
<textarea>
|
사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의함.
|
|
<select>
|
옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의함.
|
|
<option>
|
옵션 메뉴를 제공하는 드롭다운 리스트(drop-dwon list)에서 사용되는 하나의 옵션을 정의함.
|
|
<button>
|
클릭할 수 있는 버튼을 정의함.
|
|
<table>
|
데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의함.
|
|
<caption>
|
테이블의 캡션(caption)을 정의함.
|
|
<colgroup>
|
테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용함.
|
|
<col>
|
<colgroup> 요소에 속하는 각 열(column)의 속성을 정의함.
|
|
<thead>
|
테이블에서 푸터 콘텐츠(footer content)들을 하나의 그룹으로 묶을 때 사용함.
|
|
<tbody>
|
테이블에서 내용 콘텐츠(body content)들을 하나의 그룹으로 묶을 때 사용함.
|
|
<tr>
|
테이블에서 셀들로 이루어진 하나의 행(row)을 정의함.
|
|
<th>
|
테이블에서 제목이 되는 헤더 셀(header cell)들을 정의함.
|
|
<td>
|
테이블에서 하나의 셀(cell)을 정의함.
|
|
<tfoot>
|
테이블에서 푸터 콘텐츠(footer content)들을 하나의 그룹으로 묶을 때 사용함.
|
|
<ul>
|
순서가 없는 HTML 리스트(list)를 정의함.
|
|
<ol>
|
순서가 있는 HMTL 리스트(list)를 정의함.
|
|
<li>
|
HTML 리스트(list)에 포함되는 아이템(item)을 정의함.
|
|
<dl>
|
용어와 그에 대한 설명을 리스트 형식으로 정의함.
|
|
<dt>
|
용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 용어(term) 부분을 정의함.
|
|
<dd>
|
용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 설명(description) 부분을 정의함.
|
자주 쓰는 태그들만 썼는데도 이 정도나 되네요!
이 외 다른 태그들도 많으니 그 외 궁금한 부분은 w3schools을 확인해 보세요!
예시부터 다양한 태그들을 확인할 수 있어요.
코딩을 하는 사람이라면!! 필수!! 사이트랍니다!
여기까지
HTML과 태그들을 소개해봤는데요.
글을 정리하면서 저도 다시 한번 공부하게 됐던 거 같아요.
'Programming > HTML & CSS' 카테고리의 다른 글
| [HTML] 의미 없는 텍스트를 만들어 주는 사이트 - 로렘 입숨(Lorem Ipsum) (9) | 2024.11.12 |
|---|---|
| 웹 페이지에 구글 지도 삽입하기 (구글맵 삽입 방법, 구글맵 반응형) (0) | 2024.03.18 |
| [CSS] Background의 모든 것 (image, color, size, repeat, position, attachment) (0) | 2024.03.13 |
| [CSS] 기본 css 초기화 하기 (0) | 2024.02.29 |
| [HTML] 이미지맵 태그 사용법(map,area) (0) | 2024.02.28 |
