반응형
태그란?
HTML(하이퍼텍스트 마크업 언어)에서 태그(tag)는 웹 페이지의 구조와 콘텐츠를 정의하는 데 사용되는 마크업 언어의 기본 구성 요소입니다. HTML 태그는 요소(element)를 감싸거나 특정한 형태로 표시하기 위해 사용되며, 일반적으로 꺾쇠괄호(<>)로 둘러싸여 있습니다.
HTML 태그의 기본 구조
HTML 태그는 시작 태그와 종료 태그로 구성됩니다. 시작 태그는 요소의 시작을 알리고, 종료 태그는 요소의 끝을 알립니다. 태그 이름은 대소문자를 구분하지 않지만, HTML5 표준에서는 소문자를 사용하는 것이 일반적입니다.
<태그이름>내용</태그이름>예를 들어, 단락을 정의하는 <p> 태그는 다음과 같이 사용됩니다:
<p>이것은 단락입니다.</p>HTML 태그의 종류
- 블록 레벨 태그(Block-level Tags):
- 단락(p): 단락을 정의합니다.
<p>이것은 단락입니다.</p> - 제목(heading): 제목을 정의합니다.
<h1>에서<h6>까지 사용됩니다.<h1>가장 중요한 제목</h1> <h2>중요한 제목</h2> - 디브(div): 문서 내 구획을 정의합니다.
<div> <p>디브 내부의 단락</p> </div>
- 단락(p): 단락을 정의합니다.
- 인라인 태그(Inline Tags):
- 강조(em): 텍스트를 기울임체로 표시합니다.
<em>강조된 텍스트</em> - 굵게(b): 텍스트를 굵게 표시합니다.
<b>굵은 텍스트</b> - 앵커(a): 하이퍼링크를 정의합니다.
<a href="https://www.example.com">링크 텍스트</a>
- 강조(em): 텍스트를 기울임체로 표시합니다.
- 빈 태그(Empty Tags):
- 이미지(img): 이미지를 삽입합니다. 종료 태그가 필요 없습니다.
<img src="image.jpg" alt="이미지 설명"> - 줄 바꿈(br): 줄 바꿈을 삽입합니다.
줄을 바꿔 <br> 이 텍스트는 새로운 줄에 있습니다.
- 이미지(img): 이미지를 삽입합니다. 종료 태그가 필요 없습니다.
HTML 태그의 속성
태그는 다양한 속성(attribute)을 가질 수 있으며, 속성은 태그의 동작을 제어하거나 추가 정보를 제공합니다. 속성은 시작 태그 내에 이름과 값의 쌍으로 지정됩니다.
<태그이름 속성이름="속성값">내용</태그이름>예를 들어, <a> 태그의 href 속성은 링크의 목적지를 지정합니다.
<a href="https://www.example.com">Example 사이트로 이동</a>HTML의 기본 구조
모든 HTML 문서는 기본적으로 다음과 같은 구조를 가집니다.
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<h1>이것은 제목입니다</h1>
<p>이것은 단락입니다.</p>
</body>
</html>- !DOCTYPE html: HTML5 문서임을 선언합니다.
- html: HTML 문서의 루트 요소입니다.
- head: 메타데이터, 제목, 스타일, 스크립트 등을 포함합니다.
- title: 문서의 제목을 지정합니다.
- body: 문서의 실제 콘텐츠가 들어가는 부분입니다.
정리
HTML 태그는 웹페이지의 구조를 정의하고 콘텐츠를 표현하는 데 필수적인 요소입니다. 태그와 속성들을 적절히 사용하여 의미 있는 페이지를 작성할 수 있습니다. 다양한 태그를 이해하고 활용함으로써 더 풍부하고 접근성 높은 웹 콘텐츠를 만들 수 있습니다.
'컴퓨터과학과' 카테고리의 다른 글
| Microsoft에서 제공하는 강력한 명령줄 셸, PowerShell (0) | 2024.07.07 |
|---|---|
| [HTML] 추가 정보를 보관하는 메타 태그 (0) | 2024.06.25 |
| [HTML] 인터넷 브라우저 (0) | 2024.06.22 |
| [HTML] 라이브 서버 단축키로 이용하기 (0) | 2024.06.21 |
| DOSBox와 NASM으로 기계어 체험 (0) | 2024.06.20 |
댓글