컴퓨터 언어도 언어다. 한국말이였으면 얼마나 좋았을까... 

 

처음 html 언어를 접했을 땐 그냥 있는 그대로 단어들을 받아들였는데 지금은 해당 태그의 뜻을 살펴보고 사용하려고 하니

그래도 생각이라는걸 하면서 사용하게 된다. 

 

자주 사용하는 태그부터 소개해드릴게요...

 

1. 문서 구조와 콘텐츠 관련 태그

  • `<html>`: HTML 문서의 루트 요소.
  • `<head>`: 메타데이터를 정의하는 부분(문서 제목, 스타일, 스크립트 등 포함).
  • `<title>`: 브라우저 탭에 표시되는 제목.
  • `<body>`: 사용자가 보는 콘텐츠를 포함하는 태그.

2. 텍스트 관련 태그

  • `<h1> ~ <h6>` (Heading): 제목을 표시하는 태그. <h1>이 가장 크고 <h6>이 가장 작아.
  • `<p>` (Paragraph): 단락(문단)을 표시.
  • `<span>`: 인라인 텍스트를 묶어서 스타일 지정에 사용.
  • `<strong>`: 굵은 글씨를 표시(중요도 강조).
  • `<em>`(Emphasis): 기울임 글씨를 표시(의미 강조).
  • `<br>`(Break): 줄바꿈.
  • `<hr>`(Horizontal Rule): 수평선을 삽입(구분선 역할).

3. 링크와 이미지

태그가 웹의 왕국이라면 `<a>` 태그는 제왕이다,..  정보의 바다에 정착한다는 닻의 의미....

  • `<a>`(Anchor): 하이퍼링크를 생성.
    • ex: `<a href = "https://example.com">예시</a>`
    • `href`(hypertext reference)
  • `<img>`(Image): 이미지를 삽입.
    • ex: `<img src="image.jpg" alt="이미지 설명">`
    • `src`(Source)
    • `alt`(Alternative Text) "대체 텍스트"

4. 리스트 관련 태그

  • `<ul>`(Unordered List): 순서 없는 리스트(점 또는 원형).
  • `<ol>`(Ordered List): 순서 있는 리스트(숫자나 알파벳).
  • `<li>`(List Item): 리스트 항목.
  • `<dl>`(Definition List): 정의 리스트.
  • `<dt>`(Definition Term): 정의 항목(단어).
  • `<dd>`(Definition Description): 정의 설명(설명).

5. 테이블 관련 태그

  • `<table>`: 테이블
  • `<tr>` (Table Row): 테이블의 행
  • `<td>` (Table Data): 테이블의 데이터 셀
  • `<th>` (Table Header): 테이블 헤더 셀
  • `<caption>` (Caption): 테이블 제목)

6. 폼(form) 관련 태그

  • `<form>` : 사용자 입력 데이터를 서버로 전송
  • `<input>`: 사용자 입력 필드
    • `type`:입력 유형: text, password 
  • `<textarea>`: 여러 줄의 텍스트 입력
  • `<button>`
  • `<select>`:드롭다운 리스트
  • `<option>`: 드롭다운 리스트 항목

7. 레이아웃 및 구조

  • `<div>` (Division): 블록 구역
  • `<section>`: 문서의 섹션
  • `<article>`: 독립적인 콘텐츠, 예: 블로그 글
  • `<header>`: 머리 부분
  • `<footer>`: 바닥 부분
  • `<nav>` : 내비게이션 링크 모음
  • `<aside>`: 부가 콘텐츠/사이드바
  • `<main>`: 주요 콘텐츠
  • `<figure>`: 독립적인 콘텐츠, 예: 이미지
  • `<figcaption>`: 캡션/설명

8. 기타 태그

  • <script>
  • <style>
  • <link>
  • `<meta>`: 문서 정보 제공)
  • `<canvas>`: 그래픽을 그릴 수 있는 공간
  • `<svg>`(Scalable Vector Graphics): 벡터 그래픽 삽입

'프로그래밍 언어 > 퍼블리싱 ( HTML, CSS )' 카테고리의 다른 글

개발자가 꼭 알아야 할 이슈 트래커와 협업 도구 총정리  (0) 2025.03.28
[ CSS ] 레이아웃  (0) 2025.03.07
[HTML / CSS] 개념 다지기 2.  (0) 2025.03.06
[HTML / CSS] 개념 다지기 1.  (0) 2025.03.05
[html] HyperText Markup Language  (0) 2025.01.21

티스토리툴바