HTML 학습하면서 자주 쓰이는 Tag들에 대한 정의를 나만의 방식으로 요약해보았다.
텍스트 요소 😊
<h1> ~ <h6>
HTML 구획 제목 요소
<p>
하나의 문단을 나타내는 요소
<br>
텍스트 안에 줄바꿈 생성
<blockquote>
인용 블록 요소
안쪽의 텍스트가 긴 인용문 나타냄
주로 들여쓰기 한것
인용문의 출처 문서나 메시지를 가리키는 URL
인용문의 맥락 혹은 출처 정보를 가리킬 용도
<q>
인라인 인용문 요소
둘러싼 텍스트가 짧은 인라인 인용문
앞과 뒤에 따옴표 붙여 표현, 줄 바꿈 없는 짧은 경우 적합
<pre>
미리 서식을 지정한 텍스트를 나타냄
HTML에 작성한 내용 그대로 표현
텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자 그대로 유지
<figure>
독립적인 콘텐츠를 표현
<figcaption>
요소를 사용해 설명을 붙일 수 있음
피규어, 설명, 콘텐츠는 하나의 단위로 참조
<hr>
이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냄
한 줄을 표시
<abbr>
준말 또는 머리글자 나타냄
선택 속성인 title 사용하면 준말의 전체 뜻이나 설명을 제공
<b>
독자의 주의를 요소의 콘텐츠로 끌기 위한 용도, 굵은 글씨 요소, 굵은 글씨체 강조
<strong>
높은 중요도 요소, 중대하거나 긴급한 콘텐츠를 나타냄
<i>
텍스트에서 어떤 이유로 주위와 구분해야 되는 부분 나타냄, 기울임꼴 표시
<em>
텍스트의 강세를 나타냄(강조), 기울임꼴 표시
<mark>
현재 맥락에 관련이 깊거나 중요해 표시, 하이라이트 적용(연관성 있을 때)
<small>
덧붙임 글 요소, 저작권과 법률 표기 등 작은 텍스트 나타냄
<sub>
아래 첨자 요소, C8H10, H2O 같은 화학식에서 아래 첨자 사용, 각주, 변수에도 사용
<sup>
위 첨자 요소, a^2 + b^2 = c^2 제곱2 나타낼 때 사용
<del>
문서에서 제거된 텍스트의 범위를 나타냄
<ins>
추가된 텍스트의 범위를 나타냄
<code>
인라인 코드 요소, 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠 표시
기본 스타일은 사용자 에이전트의 고정폭 글씨체
<kbd>
키보드 입력 요소(컨트롤, 쉬프트, 이런것들 나타내 줌)
<a>
앵커(닻) 요소, href특성 통해 다른 페이지나 같은 페이지의 어느 위치,
파일, 이메일 주소와 그 외 다른 URL로 연결할 수있는 하이퍼링크 만듬
<a> 안의 콘텐츠는 링크 목적지의 설명을 나타내야 함.
* a Tag 안의 target 속성 *
링크한 URL을 표시할 위치
_self: URL을 현재 브라우저에 표시
_blank: 새로운 브라우저에 표시
_parent: 현재 브라우저의 부모에 표시, 부모가 존재하지 않으면 _self와 동일
_top: 최상단 브라우저에 표시, 부모가 존재하지 않으면 _self와 동일
<Entity>
HTML에 특수 문자 포함
< : <
> : >
" : "
' : '
& : &
spacing :
구조를 나타내는 요소 😊
<div>
블록 컨테이너
구획 나눠 줌, 순수 컨테이너로서 아무것도 표현 해주지 않음
<span>
인라인 컨테이너
텍스트를 꾸밀 때 많이 사용
<header>
소개 및 탐색에 도움을 주는 콘텐츠
제목, 로고, 검색 폼, 작성자 이름, 페이지 제목, 글 제목 등 요소 포함 가능
웹 페이지내 하나만 사용, 웹 페이지 내 동일 표현
<footer>
구획 콘텐츠, 구획 루트 나타냄
일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등 내용 담음
웹 페이지 가장 아래 단 영역, 하나만 사용, 웹 페이지 내 동일 표현
<nav>
탐색 구획 요소
현재 페이지 내, 또 다른 페이지로의 링크를 보여주는 구획 나타냄
메뉴, 목차, 색인에 자주 쓰임
<aside>
별도 구획 요소
문서의 주요 내용과 간접적으로 연관된 부분을 나타냄
주로 사이드바, 콜아웃 박스로 표현
<main>
body안에서 딱1나만 사용
주요 콘텐츠들을 묶어줌
익스플러로에서는 지원 안함
<article>
문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할수있는 구획을 나타냄
사용 예제로 게시판 과 블로그 글, 매거진이나 뉴스 기사 등
<section>
일반 구획 요소
article 아니면 section 사용
HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용
보통 <section>은 제목을 포함, 덜렁 section만 가져갔을때 맥락이 이상해 짐
목록과 표 😊
<ol>
Order List(순서가 있거나 순위)
<ul>
Unordered List(순서 없음, 단순 나열)
<li>
List Item / <ol>, <ul>에서 단일 아이템으로 사용하는 태그
<dl>
용어를 정의하거나 설명하는 목록
주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)표시할 때 사용
<dt> / <dd>태그를 자식으로 사용
<dt>
용어
<dd>
설명
<table>
표
<tr>
table row(행)
<th>
table head: 무언가를 대표(굵은 글씨)
<td>
table data: 일반 데이터
<thead>
table header
<tbody>
table body
<tfoot>
table footer
<caption>
표 설명 요소
무조건 table요소에 첫번째 자식이여야 함(<tr> 위 또는 <thead>위)
아래에 캡션 달고 싶으면 css이용하여 바꿔야 함
임베디드 요소 😊
<img>
이미지 삽입 요소
* <img> 속성 *
src : 필수이며, 포함하고자 하는 이미지로의 경로를 지정
alt(alternative) : 이미지의 텍스트 설명, 필수는 아니지만 스크린리더 접근성 차원에서 매우 유용
height : 픽셀 단위 이미지의 고유 크기, 단위 없는 정수
width : 픽셀 단위 이미지의 고유 너비, 단위 없는 정수
srcset : 작은 화면엔 작은 이미지, 큰 화면엔 큰 이미지가 보여지게 함(반응형 이미지)
여러개의 이미지 파일을 쉼표로 구분 -> 그 뒤에 공백 -> 너비 소술자(w) or 픽셀 밀도 서술자(x) 입력
sizes : 특정 조건에 따라 아예 다른 파일 줄 수도 있고 다른 파일에 사이즈 지정(반응형 이미지)
미디어 조건 -> 소스 크기 값
<video>
비디오 삽입 요소
* <video> 속성 *
src : 경로, <source src=''>사용 가능
autoplay : 자동재생 하려면 muted같이 사용해야 함
controls : 소리조절, 일시정지 등 컨트롤러
muted : 음소거
loop : 반복
width, height : 사이즈
poster : 썸네일
* PS: <video> </video> 태그 안의 콘텐츠는 브라우저가 <video> 요소를 지원하지 않을 때 보여짐
<audio>
소리 콘텐츠 요소
* <audio> 속성 *
src : 경로, <source src=''>사용 가능
autoplay : 자동재생 하려면 muted같이 사용해야 함
controls : 소리조절, 일시정지 등 컨트롤러
muted : 음소거
loop : 반복
<canvas>
그래픽 캔버스 요소
<iframe>
인라인 프레임 요소
<폼 관련 요소> 😊
<form>
웹 페이지에서의 입력 양식
* <form> 속성 *
name : form의 이름
action : 양식 데이터를 처리할 프로그램의 URL
method
- get : 전달 내용이 주소창에 뜸
- post : 전달 내용이 서버에 보내질 때 숨겨짐
<label>
입력 창 설명
* <label> 속성 *
for : 구분 할 수 있는 id 값
<fieldset>
필드셋 요소
웹 양식의 여러 컨트롤과 레이블을 묶을 때 사용
<legend>
범례 / fieldset 설명
<input>
실제로 사용자가 양식을 입력하기 위한 태그
* <input> 속성 *
type
- text: 일반 문자
- password: 비밀번호
- button: 버튼
- submit: 양식 제출용 버튼
- reset: 양식 초기화용 버튼
- radio: 한개만 선택할 수 있는 컴포넌트
- checkbox: 다수를 선택할 수 있는 컴포넌트
name : 대표하는 이름, 서버로 보낼 때 보여지는 이름
placeholder : 예제 힌트
autocomplete : 양식 자동 완성
required : 필수 속성 지정 -> required 지정 되 있으면 입력 안한채로 제출하면 오류메세지 띄움
disabled : input 자체 비활성화, 전송도 안됨
readonly : 값 입력 할수 없고 커서도 안깜박임, 제출은 됨(빈 값으로) -> value로 지정해주면 기본값 넣어 줄 수 있음
step: 증/감을 얼마만큼 간격으로 할지 설정(input type= number 또는 range 에 한함)
min: 최소 값 설정(input type= number 또는 range 에 한함)
max: 최대 값 설정(input type= number 또는 range 에 한함)
<button>
버튼 요소
* <button> 속성 *
name : 대표하는 이름, 서버로 보낼 때 보여지는 이름
type
- submit: 제출 버튼
- reset: 초기화 버튼
- button: 기본 행동 없음, 빈 버튼
* PS: 인풋 요소는 value에 텍스트 값만 지정 가능 하지만, 버튼 요소는 <em> <strong> <img>도 가능 *
<select>
옵션 메뉴를 제공하는 컨트롤러
<option>
셀렉트 메뉴에 후보군 설정
value : 서버에 보낼 값 설정, ''으로 두면 값이 없음 처리
selected: 옵션 메뉴에 후보 중 제일 먼저 띄울 것 고르기
<optgroup>
옵션이 여러가지 일때 그룹화에 사용 / <optgroup label="이름">
<datalist>
다른 컨트롤러에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option>요소 여럿을 담음
*list 속성*
datalist id ='name'>을 이용하고 <input type list='name'>으로 연결
*PS*
<select>는 사용자가 수정 할 수 없이 후보군에서 골라야 하는 선택지 이지만
<datalist>는 input type ='text'를 사용하기에 사용자가 후보군을 선택할 수 도있고
내용 수정도 가능 함. 또한 해당되는 이름이 있을 시 그것만 후보군에서 보여줌!
<textarea>
멀티라인 일반 텍스트 편집 컨트롤러
* <textarea> 속성 *
rows : 보여줄 행 개수
cols : 보여줄 열 개수
disable / placeholder / readonly / required 가능
'HTML' 카테고리의 다른 글
| HTML TAG 및 속성 정의 요약(2) (0) | 2022.11.13 |
|---|