고정 헤더 영역
상세 컨텐츠
본문
반응형
이 글에서는 HTML 문서를 작성할 때 자주 등장하는 기본 개념과 태그들을 소개합니다.
1. 태그(Tag)
태그는 HTML에서 요소(Element)를 정의하는 기본 단위입니다. 각 태그는 꺾쇠 괄호(< >)로 둘러싸여 있으며, 시작 태그와 종료 태그로 구성되어 요소의 역할과 구조를 명확히 합니다. 대부분의 HTML 태그는 쌍으로 나타나며, 시작 태그는 <로 시작하고 종료 태그는 닫는 슬래시(/)를 포함합니다.
태그는 웹 브라우저에게 요소의 표시 방법을 지시하는 일종의 명령어라고 볼 수 있습니다. 예를 들어, <p></p>는 단락을 나타내는 태그로 <p>로 단락의 시작을 알리고 </p>로 단락의 끝을 표시합니다.
2. 요소(Element)
요소는 태그와 그 안의 내용 전체를 가리킵니다. HTML 요소는 시작 태그, 내용, 그리고 종료 태그로 이루어져 있습니다. 예를 들어 <p>Hello, World!</p>라는 요소는 p 태그로 감싸진 텍스트 "Hello, World!"를 포함합니다.
요소는 태그의 집합뿐 아니라 콘텐츠를 포함한 전체적인 구조를 의미하며, 다른 요소를 포함하거나 중첩할 수 있습니다.
3. 속성(Attribute)
속성은 태그에 추가적인 정보를 제공하는 부분으로, 보통 태그의 시작 부분에 정의되며 키-값 쌍으로 이루어집니다.
예를 들어, <img src="image.jpg" alt="Image description">에서 src는 이미지의 경로를 지정하는 속성이고 alt는 이미지가 표시되지 않을 때 보여줄 텍스트를 지정합니다. 속성은 일반적으로 큰따옴표로 감싸는 것이 표준입니다.
4. DOM(Document Object Model)
DOM은 웹 페이지의 구조화된 표현을 제공하는 모델로, HTML 문서를 트리 구조로 표현하여 브라우저가 해당 문서를 해석하고,자바스크립트와 같은 언어를 통해 동적으로 웹 페이지의 내용을 수정할 수 있게 합니다.
DOM에서 HTML 요소는 각각 노드로 표현되고 계층적 구조를 형성합니다.
5. DOCTYPE
DOCTYPE은 문서의 HTML 버전을 선언하는 태그입니다. 문서의 최상단에 위치하며 브라우저가 HTML 문서를 해석하는 방식을 결정합니다.
예를 들어, HTML5 문서를 작성할 때는 <!DOCTYPE html>을 사용합니다. 이를 올바르게 선언하지 않으면 브라우저가 문서를 비표준 모드로 해석할 수 있습니다.
6. 메타데이터(Metadata)
메타데이터는 웹 페이지에 대한 정보를 제공하는 태그로, 보통 <head> 태그 안에 포함됩니다. 예를 들어, <meta charset="UTF-8">은 문서의 문자 인코딩 방식을 UTF-8로 지정합니다.
이는 브라우저가 페이지를 올바르게 표시하고, 검색 엔진이 페이지를 인덱싱하는 데 도움을 줍니다.
7. 블록 요소(Block Element)
블록 요소는 화면에 블록 단위로 표시되며 새로운 줄에서 시작합니다. 다른 블록 요소나 인라인 요소를 포함할 수 있으며 전체 너비를 차지합니다. 예로는 <div>, <p>, <h1> 등이 있습니다. 이러한 요소는 독립적으로 표시되며 페이지 레이아웃을 구성합니다.
8. 인라인 요소(Inline Element)
인라인 요소는 같은 줄에 표시되는 요소로, 다른 인라인 요소나 텍스트와 함께 한 줄에 나란히 나타납니다. 예를 들어 <span>, <a>, <img> 등은 인라인 요소로, 문장 내에서 다른 콘텐츠와 함께 표시됩니다.
자체적으로 줄바꿈을 하지 않으며 작은 단위의 콘텐츠를 표시하는 데 적합합니다.
9. 주석(Comment)
주석은 HTML 문서에 설명을 추가할 수 있는 부분으로, 브라우저에 의해 렌더링되지 않습니다. 주석은 <!--와 -->로 감싸여 작성되며, 예를 들어 <!-- 이 부분은 주석입니다 -->와 같이 사용됩니다.
주석은 코드를 이해하기 쉽게 하고 필요에 따라 코드를 비활성화하는 데 사용됩니다.
10. HTML5
HTML5는 HTML의 최신 버전으로 멀티미디어 지원, 시맨틱 태그, 더 나은 사용자 경험을 제공하는 기능들이 추가되었습니다. 예를 들어 <section>, <article>, <nav>는 시맨틱한 의미를 가진 태그들로, 문서의 구조를 보다 명확하게 정의할 수 있습니다.
HTML5는 웹 개발자들이 효율적으로 작업할 수 있도록 설계되었습니다.
11. 폼(Form)
폼은 사용자 입력을 수집하는 HTML 요소로, 로그인, 회원 가입, 검색 등의 작업에 사용됩니다. 폼은 <form>, <input>, <button> 등의 태그로 구성되며, 사용자의 입력 데이터를 서버로 전송합니다.
예를 들어 <form action="submit.php" method="post">와 같이 작성하면 사용자의 입력 데이터를 서버의 특정 경로로 보낼 수 있습니다.
12. 시맨틱 태그(Semantic Tags)
시맨틱 태그는 문서의 구조와 의미를 명확하게 나타내기 위한 태그들입니다. 예를 들어 <header>, <footer>, <article>, <section> 등의 시맨틱 태그는 문서의 머리글, 바닥글, 개별 기사, 섹션 등을 명시적으로 정의합니다.
이러한 태그는 검색 엔진 최적화(SEO)와 코드 가독성에 도움이 됩니다.
13. 속성 값(Value)
속성은 특정 값을 가질 수 있으며, 속성 값은 속성 뒤에 이어지며 따옴표로 감싸서 표시합니다. 예를 들어 <input type="text">에서 type 속성의 값은 "text"로 지정되어 이 요소가 텍스트 입력 필드임을 나타냅니다.
속성 값은 HTML 요소의 다양한 동작과 모양을 제어합니다.
용 어 정 리
'전시 스포츠' 카테고리의 다른 글
| 전동스쿠터 종류와 선택 가이드 (4) | 2024.09.30 |
|---|---|
| 개천절의 뜻과 역사적 배경 (4) | 2024.09.30 |
| 워드프레스 우커머스: 시작하기부터 최적화까지 (12) | 2024.09.29 |
| 레버쿠젠 독일 축구의 전통과 열정의 역사 (12) | 2024.09.29 |
| 육군 비상근 예비군의 역할 및 훈련 안내 (2) | 2024.09.29 |
