기본 HTML 태그 레퍼런스로 자주 쓰는 주요 기능들을 모음으로 묶어 봤습니다.
웹개발 요즘 많이들 배우시죠?
Html, Css, JavaScript는 프론트엔드 입문으로 알려져 있지만 간단하지는 않습니다.
내 입맛대로 하이퍼텍스트 마크업 언어로 웹 페이지의 구조를 정의하고 제어하기까지 시간이 조금 필요합니다.
레퍼런스는 어느 정도 공부하신 분들이 기억이 가물가물할때 읽어보시면 좋아요.
여기에서는 자료를 간단히 추렸지만 더 많은 태그가 필요하신 분들은 검색을 하시면 되시겠어요!
전 개발자 처음 입문 때 뭐가 뭔지 하나도 모르겠고 누가 시키는대로 무작정 따라했는데 그때 도움 된 것이 잊혀지지 않게 자주 들여다보는 것이었습니다. 어떤 때 두꺼운 책 제목만 읽고 흩어 지나갔는데 그런 부분이 도움이 되었던 것 같아요.
특히 요즘은 OpenAI ChatGPT, 구글 제미나이, 퍼플렉시티, 코파일럿, 빙 등등 다양한 AI가 코딩을 지원하면서 용어만 알아도 될 정도가 되었습니다.
HTML 태그 레퍼런스
1. 기본 구조 태그
<!DOCTYPE html> : HTML 문서의 버전을 선언 (HTML5에서는 html 사용)
<html> : 문서의 최상위 요소
<head> : 메타데이터, 제목, 스타일, 스크립트 포함
<title> : 페이지 제목 (브라우저 탭에 표시됨)
<body> : 본문 콘텐츠 포함
2. 텍스트 관련 태그
<h1> ~ <h6> : 제목 태그 (h1이 가장 크고 h6이 가장 작음)
<p> : 단락(문단) 생성
<br> : 줄바꿈 (빈 태그, 종료 태그 없음)
<hr> : 가로 줄 삽입
<strong> : 굵은 글씨 (의미 강조)
<b> : 굵은 글씨 (단순 스타일)
<em> : 기울임 글씨 (의미 강조)
<i> : 기울임 글씨 (단순 스타일)
<mark> : 형광펜 효과
<small> : 작은 글씨
<del> : 취소선
<ins> : 밑줄
<sub> : 아래첨자
<sup> : 위첨자
3. 링크 및 네비게이션
<a href="URL"> : 하이퍼링크
<nav> : 내비게이션 영역
4. 목록 태그
<ul> : 순서 없는 목록
<ol> : 순서 있는 목록
<li> : 목록 항목
<dl> : 설명 목록
<dt> : 설명 제목
<dd> : 설명 내용
5. 테이블 태그
<table> : 표 생성
<tr> : 행 (row)
<th> : 제목 셀 (굵고 가운데 정렬)
<td> : 일반 셀
<thead> : 표의 헤더 그룹
<tbody> : 표의 본문 그룹
<tfoot> : 표의 푸터 그룹
6. 폼 관련 태그
<form> : 사용자 입력 폼 생성
<input> : 입력 필드 (텍스트, 패스워드, 체크박스 등)
<textarea> : 여러 줄 입력 필드
<button> : 버튼 생성
<select> : 드롭다운 목록
<option> : 드롭다운 항목
<label> : 입력 필드에 대한 레이블
7. 미디어 태그
<img src="경로"> : 이미지 삽입
<audio> : 오디오 삽입
<video> : 비디오 삽입
<source> : 오디오/비디오 소스 지정
<iframe> : 다른 웹 페이지 포함
8. 시맨틱 태그 (HTML5)
<header> : 머리글
<footer> : 바닥글
<section> : 섹션 그룹
<article> : 독립적인 콘텐츠 단위
<aside> : 보조 정보 영역
<main> : 주요 콘텐츠 영역
<figure> : 이미지, 차트, 다이어그램 그룹
<figcaption> : <figure> 설명
9. 기타 유용한 태그
<div> : 블록 레벨 요소 그룹화
<span> : 인라인 요소 그룹화
<code> : 코드 블록
<pre> : 공백 및 줄바꿈 유지한 코드
<blockquote> : 인용문
<cite> : 출처 표시
<abbr> : 줄임말 (마우스 오버 시 설명 표시 가능)
<time> : 날짜와 시간 표현솔직히 모든 프로그래밍 코드는 자주 쓰이는 기능만 씁니다.
배울 땐 이것저것 꼼꼼히 배우고픈 욕심에 잘 안쓰는 것도 달달 외울려고 하는데 내 머릿속에 오히려 렉만 옵니다. 물론 이 렉을 극복하고 개념을 정리하면 한단계 더 오르는 것인데 쉽게가고 싶을땐 용어 개념만 잘 익혀두셔도 되요!
이상 HTML 태그 레퍼런스 자주 쓰는 주요 기능들 모음이었습니다.
최근 블로그를 새롭게 단장하면서 IT 코딩 영역을 새롭게 구성하였습니다.
AI가 코딩해주는 시대에 복잡한 코드보다는 간단한 개념과, 제이와이의 경험을 바탕으로 한 도움되는 글들을 추려볼게요.
'기타 IT' 카테고리의 다른 글
| 홈페이지 레이아웃 막막할 때 참고하면 좋은 웹사이트 모음 (2) | 2025.03.09 |
|---|---|
| CSS 스타일 레퍼런스 자주 쓰는 주요 기능들 모음 (2) | 2025.03.05 |
| 뚜지자북만 알면 중국 걱정은 끝이라고 (1) | 2018.09.30 |
| 인스타그램 알아두면 좋은 이유 (0) | 2017.11.19 |
| 구글검색등록 지금 당장 시작해볼까요? (0) | 2017.11.18 |
| 티스토리 2차 주소 사용시 중요 팁 모음입니다 (0) | 2017.11.17 |
| 블로그 꾸미기 전 준비사항 (1) | 2016.10.31 |