< Code diaries />

우리가 공부할 HTML tag list 본문

Html

우리가 공부할 HTML tag list

ejey 2024. 6. 6. 17:45

 

 

HTML(Hyper Text Markup Language)

 

 

  • HTML 웹문서는 브라우저에서 읽을 수 있는 텍스트로 이루어진 마크업 언어입니다.
  • 일반 문서를 만들듯이 큰제목, 두번째 제목... 내용, 이미지, 섹션, 머릿말, 꼬릿말등 계층구조에 맞춰서 시각적인 요소와 상관없이도 계층구조가 맞게 마크업을 하는 것이 중요하고, 이것을 우리는 웹표준이라고 합니다.

  • 100% 웹표준이라는 말은 없습니다. 최대한 웹표준에 맞게 문법의 계층구조를 지키고, HTML요소 중 필수속성의 사용을 지키며, 위계를 지켜 마크업하는 것이 중요합니다.

 

 

기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다.

 

자, 커피한잔 하고.. 시작합시다~!

01. 영역의 의미를 정의하는 태그(Sementic Tag)

Tag Description Meaning
<header> 머릿말 태그로,
<body>태그의 child element일때에는 문서의 머릿말 역할로써,
로고, 메뉴등을 넣어 문서의 헤더영역을 나타낸다.

하지만, <section> 태그에 넣으면, 그영역의 머릿말로 해석될 수 있으며,
<footer> 태그에 넣을 수 없다.

적어도 하나의 헤딩요소 사용을 권장한다.		  
<main> 문서의 메인영역을 나타내는 태그로써, 한 문서에 한번만 사용할 수 있다.
구 브라우저대응을 위해 role = "main" 속성을같이 사용하는 것이 좋다.		  
<footer> 꼬릿말 태그로, 
<body> 태그의 child element일때에는 문서의 꼬릿말 역할로써,
copyright정보 address등을 넣어 저작권자의 정보를 넣어준다.

또한, <nav>태그도 내부에 들어올 수 있다.
<section>태그에 넣을경우, 그 영역의 꼬릿말로 해석될 수있으며,
<header> 태그에 넣을 수 없다.		  
<section> 의미론적으로 영역을 구분할 때 사용한다.
적어도 하나의 헤딩요소 사용을 권장한다.		  
<article> 제목과 내용이 있는 하나의 기사영역과 같은 의미로 사용되고,
보통 <section>보다 작은 개념이지만, 
상황에 따라 내부에 <section>이 들어와도 상관없다.
적어도 하나의 헤딩요소 사용을 권장한다.		  
<nav> 문서의 주요메뉴 링크를 넣는 영역이며,
내부에 보통 목록태그와 같이 사용한다.		 Navigation
<aside> 작성하고 있는 문서의 내용과 상관없는 영역을 묶는다.
(배너, 퀵메뉴 등)		  
<figure> 그래프, 표, 이미지등을 묶는 용도로 사용한다.  
<figcaption> <figure>태그의 첫번째, 또는 마지막 child element로만 사용되며,
단독으로 사용할 수 없다.		  
<template> javascript 에서 사용하기위한 태그이다.  

 

 

02. 제목과 글자를 다루는 태그

Tag Description Meaning
<h1>~<h6> 헤딩요소.
문서의 내용중 제목을 나타낼 때에 사용하며,
보통 문서의 가장 큰제목은 '로고 - 사이트 제목' 로 분류되어
<h1>태그는 로고를 묶거나, 사이트명을 적을때에 한번만 사용하는 것이 대부분 입니다.		 Heading
<p> 문단, 문장을 표현 Paragraph
<strong> 주의, 또는 강한 강조 Strong
<em> <strong>태그보다는 약하지만 강조의 의미 Emphasis
<b> 문맥상의 살짝 강조하는 느낌에 사용
HTML5이전에는 시각적인 역할을 담당하는 태그였지만, 웹표준이 중요시 되면서 시각적인 분류태그들이 많이 없어졌는데, 그때 살아남은 태그 ^^ 큰 의미를 두지는 않습니다.		 Bold
<i> <b>와 동일 Italic
<sup>,<sub> 위첨자, 아래첨자 superscript, subscript
<del>,<ins> 정보를 지우고 다시 넣는 의미
예를 들면 59,900 -> 9,900 으로 정정할때,
또는 일정변경시 변경전, 후를 나타낼 때에 적절		 delete, insert
<time> 날짜, 시간정보  
<mark> 텍스트에 형광펜 효과 - 시각적인 요소로 생겨남  
     

 

 

 

03. 목록을 만드는 태그 - 목록 태그는 글 목록에도 사용하지만, 주로 메뉴구조에도 사용됩니다.

Tag Description Meaning
<ul> 목록그룹태그, 순번이 없는 목록에 사용
Child element는 <li>만 허용됨(중요)
Bullet 기호로 목록을 표시하며 종류는 3가지 또는 이미지로도 가능하나 잘 사용하지 않습니다. 		 Unordered List
<ol> 목록 그룹태그, 순번이 있는 목록에 사용
Child element는 <li>만 허용됨(중요)
순번을 나타낼수 있는 숫자, 로마자, 알파벳 대소문자등으로 변경이 가능합니다.		 Ordered List
<li> <ul>,<ol> 태그의 child element로 사용되며, 다른태그의 child element가 절대로 될 수 없습니다. 또한 목록그룹태그없이 혼자 사용이 불가합니다. List Item
<dl> 정의형 목록 그룹 태그
키워드와 설명으로 이루어진 구조에 적합한 태그입니다.		 Definition List
<dt> 키워드를 나타내며, 하나의 <dt>태그뒤에는 반드시 적어도 이 키워드를 설명하는 하나의 <dd>태그가 있어야합니다. 
또한, Child element로 어떠한 블럭요소도 올 수 없습니다.		  
<dd> <dt>태그의 바로뒤에 형제요소로 올 수 있으며,
연달아 여러개의 <dd> 태그를 작성할 수 있습니다.
주의할 점은 <dt>태그의 child요소로 마크업되지 않도록 합시다.		  

 

 

04. 표를 만드는 태그

Tag Description Meaning
<table> 표를 만들때에 제일먼저 적어주는 그룹태그이다.  
<thead> 행 그룹 중 제목행에 속한다. 하나의 <table>태그내에 한개만 존재할 수 있다.  
<tbody> 행 그룹 중 내용을 묶을때 사용하며, 하나의 <table>태그내에 여러개가 존재할 수 있다.  
<tfoot> 행 그룹 중 결과행에 속한다. 하나의 태그내에 한개만 존재할 수 있다.
웹접근성에 따라 <thead>바로밑에 <tfoot>을 적어서, 이 표의 최종 결과를 먼저
인식할 수있도록 마크업의 위치를 바꾸는 걸 목표로 한다.
현재에는 이런 본질적인 의미보다 표의 꼬릿말처럼 사용되는 것같다.
하지만, 본래의 목적과 사용방법은 <thead> 바로밑에 셋트처럼 존재해야한다는 사실을 잊지말자.		  
<caption> 표의 제목을 나타내며, <table>태그내에 존재할 수 있으며, 안써도 무방하나
쓸 경우 <table>태그의 첫번째 child element로 존재해야 한다.		  
<colgroup> 열 그룹을 나타내는 태그이다.  
<col> 열 그룹내에서 열을 순서대로 나타낸다. 보통 열의 너비 지정을 위해 존재한다.  
<tr> 행을 나타낸다.  
<th> 제목에 해당하는 셀을 나타내며 scope 속성이 필수이기 때문에 꼭 같이 써줘야 웹표준에 맞는다.  
<td> 일반 셀을 나타낸다.  

 

05. Form 관련 태그

Tag Description Meaning
<form> 폼 그룹 태그이다.  
<fieldset> 필드들을 그룹을 묶어 줄 수 있다.  
<legend> <fieldset>태그의 첫번째 child element로 꼭 존재해야하며, 필드그룹의 제목을 표시한다.  
<label> 폼필드의 레이블 태그이다. 연결해주는 방법은 명시적인방법과 암묵적인 방법 두가지가 있다.  
<input> 폼필드 명령어이며, type에 따라 다양한 형태로 존재한다.  
<button> 버튼을 만드는 태그이며 종류는 3가지 이다.  
<select> 드롭다운 메뉴그룹 태그이다. <option>태그와 셋트로 사용된다.  
<optgroup> <select>메뉴내에 <option>이 많을경우 그룹으로 여러개 묶을 때 사용한다.  
<option> <select>태그의 선택할 수 있는 메뉴리스트 이다.  
<textarea> 여러줄을 입력할 수 있는 텍스트필드이다. 컨텐츠는 공백병합현상이 일어나지 않으며, Text만 입력할 수있다.  

 

06. Media 및 기타 태그

Tag Description Meaning
<video> 동영상 파일을 넣을 수 있는 태그이다.  
<audio> 오디오 파일을 넣을 수 있는 태그이다.  
<iframe> 다른 웹문서를 현재문서에 창을 만들어 보여줄 수 있는 태그이다.
종료태그가 있지만 컨텐츠를 포함할 수없으니 주의하자.		  



 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

하지만, 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.

 

반응형
저작자표시 비영리 변경금지

'Html' 카테고리의 다른 글

TAG 02 - 제목과 글자를 다루는 태그, 기타 태그  (4) 2024.06.06
TAG 01 - 영역을 분리하는 태그  (2) 2024.06.06
HTML Markup 방법과 DOM 트리구조  (2) 2024.06.06
HTML - 무엇인지 스치듯이 알아봅시다~!  (2) 2024.06.06
[HTML] input 패턴 정규표현식. html 입력필드에 들어가는 값에 대한 표현식 정하기. RegExp in javascript  (6) 2024.01.25
'Html' Related Articles more