Front-End

[HTML] 자주 쓰이는 태그 정리

YB CHA 2023. 8. 26.

HTML은 무엇인가?

HTML (Hypertext Markup Language) 약자로 콘텐츠의 구조를 정의하는 마크업 언어 입니다. HTML 태그를 이용하여 웹페이지를 만드는 데에 사용하는 언어이며 쉽게 사용이 가능합니다.

HTML 기본 태그

1. <html>은 모든 태그들을 감싸는 가장 큰 단위의 태그이며 대부분의 태그가 <></> 이렇게 한 쌍으로 구분되어 있지만 시작 태그만 있고 종료 태그가 없는 태그들이 존재합니다.

2. <head>는 HTML의 전반적인 특성을 설정하는 곳이며 문서에 대한 메타 데이터를 넣을 수 있고 <style>,<script>, <link>도 넣을 수 있습니다. 이중 <script>는 <body>태그 요소에 포함될 수 있습니다.

3. <meta>는 HTML태그의 하나이며 일반적으로 자주 사용되는 <meta chatset = "utf-8">를 사용합니다. 이는 웹페이지를 해석해주는 방식이며 이를 인코딩이라고 합니다. 여기서 UTF-8(8-bit Unicode Transformation Format)이란 전 세계 모든 문자를 표현할 수 있게 해주는 유니코드 형식을 말합니다. 또한 meta태그는 닫는 태그가 없는 태그입니다.

4. <title>는 웹 페이지의 제목을 나타내는 태그입니다. 웹페이지 본문에는 보이지 않으며, 브라우저의 탭 등에서 확인 할 수 있습니다.

5. <body>는 HTML 문서에 단 하나의 <body> 요소만이 존재할 수 있고 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의 할 때 사용합니다.

<html>
<head>
	<meta charset="UTF-8">
	<title>웹페이지 제목</title>
</head>
<body>
    HTML 기본 설명
</body>
</html>

그 외 자주 사용되는 태그

1. <div>는 Division의 약자로 레이아웃을 나누는데 사용됩니다. 특별한 기능은 없지만 레이아웃을 설계하여 주로 CSS와 연동하여 사용합니다. 또한 구획(section)을 정의할 때 사용합니다.

2. <a>는 하이퍼링크를 걸어주는 태그입니다. 속성으로는 href(클릭시 이동할 링크)가 있습니다.

<a href="https://yuvyn.tistory.com/">YB WEB</a>

3. <link>는 CSS, 외부 소스(external resource)를 연결하는 태그입니다. head태그 안에 적으며 CSS 문서를 링크하려면 <link href="" rel="stylesheet" >로 걸어주면 됩니다. href안에는 CSS파일 위치를 입력합니다.

<head>
    <link href="/tistory.css" rel="stylesheet">
</head>

4. <img>는 이미지(image)를 정의할 때 사용하고 문서에 직접 삽입되는 것이 아니라 HTML 문서에 이미지가 링크되는 형태입니다. <img>요소에는 src 속성과 alt 속성을 반드시 명시해야 합니다.

<img src="/images/img_tistory.png" alt="티스토리">

5. <span>는 인라인 요소(inline-element)들을 하나로 묶을 때 사용하는 태그입니다. <span> 요소는 <div> 요소와 매우 비슷하게 사용되지만, <div> 요소는 블록 타입의 요소인데 반해 <span> 요소는 인라인 타입의 요소입니다.

*인라인 요소란? 콘텐츠 흐름을 끊지 않고 요소를 구성하는 태그에 할당된 공간만 차지하는것을 말합니다.

6. <p>는 문단(paragraph)을 뜻하는 태그이며 웹 페이지에 일반적인 텍스트를 넣을 때 사용되는 태그를 사용합니다.

<p>텍스트 문장.</p>

7. <li>,<ul>에서 <li>태그는리스트(list)의 내용을 적는 태그이고 <ul>태그는 li 태그를 감싸고 있다고 생각하면 됩니다.

<ul>
    <li>티스토리</li>
    <li>yuvyn</li>
    <li>YB WEB</li>
</ul>

8. <br>은 텍스트 내의 줄바꿈(line-break)을 해주는 태그입니다. 코드 내에서는 엔터를 사용하여 줄바꿈을 하면 브라우저 화면에는 적용되지 않습니다.

9. <h1~h6>은 문서 내에 있는 크고 작은 제목을 적는 태그입니다. h1이 가장 주요하고 큰 단위이며, 문서의 구조에 따라 가장 작은 단위인 h6까지 적을 수 있습니다.

10. <form>은 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용하고 input을 담는 태그입니다. php를 할 때 많이 쓰이는데, input을 이용해 입력받은 데이터를 저장하거나 데이터에 따라 출력을 할 수 있습니다.

11. <input>은 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용합니다. 아이디를 적거나 회원가입 양식 등이 이에 해당됩니다. 또한 type 속성값을 달리함으로써 여러 가지 모양으로 나타낼 수 있습니다.

<form action="/tistory/test/YBWEB.php">
    이름 : <input type="text" name="name"><br>
    학번 : <input type="text" name="id"><br>
    <input type="submit">
</form>

10. <nav>은 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용합니다.

11. <header>은 주로 사이트의 로고와 메뉴, 배너 등을 담는 태그입니다.

12. <footer>은 사이트의 정보나 주소, 이메일, 연락처 등을 적는 태그입니다.

13. <button>은 클릭할 수 있는 버튼을 정의할 때 사용합니다.

<button type="button" onclick="alert('YB WEB')">클릭</button>

레이아웃 설정 태그

1. <article>은 독립적으로 구성할 수 있는 요소를 정의할 때 사용합니다.

2. <aside>은 메인과 분리시킬 수 있는 콘텐츠 영역을 정의할 때 사용합니다.

3. <section>은 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용합니다.

이상으로 HTML에 자주 사용되는 태그들을 정리해봤습니다.

'Front-End' 카테고리의 다른 글

웹사이트 디자인할 때 유용한 툴 (0)	2023.10.20
포트폴리오 만들때 유용한 사이트 (0)	2023.10.20
[CSS] Flexbox 정리 (0)	2023.10.19
프론트엔드 개발자가 알아두면 유용한 사이트 모음 (0)	2023.07.20