728x90
반응형
HTML(Hyper Text Markup Language)개념
- 웹 페이지를 만들기 위해 사용하는 기본적인 마크업 언어
- -> 링크를 통해 서로 다른 정보로 이동할 수 있는 문서를 구조화된 태그의 집합을 표현
기본구조
<!DOCTYPE html>
- HTML5 문서임을 브라우저에게 알리는 지시문입니다.
- 이 선언을 통해 브라우저는 HTML5의 문서 규격을 따르게 되며, 최신 웹 표준을 준수한 렌더링을 수행합니다.
<html>
- HTML 문서의 루트 요소입니다.
- 모든 HTML 요소는 이 태그 안에 위치해야 합니다.
<head>
- 문서의 메타데이터를 포함하는 부분입니다.
- 메타데이터는 문서의 제목, 문자 인코딩, 스타일 시트 링크, 스크립트 파일 등을 포함합니다.
- <title>, <link>, <meta>, <script>
<body>
- 실제 콘텐츠가 들어가는 부분입니다.
- 이 태그 안에는 웹 페이지에 표시될 모든 콘텐츠가 포함됩니다.
- 예를 들어, 텍스트, 이미지, 링크, 표 등 모든 요소가 이 안에 위치합니다.
시맨틱 구조
- 시맨틱 구조는 HTML 요소를 사용하여 문서의 구조를 명확하게 정의하는 방법입니다.
- 시맨틱 요소는 단순히 스타일을 적용하기 위한 것이 아니라, 문서의 의미를 명확히 하고 검색 엔진이나 웹 크롤러가 문서를 이해하고 분석하는 데 도움을 줍니다.
- 이를 통해 웹 접근성을 높이고 SEO(검색 엔진 최적화)를 개선할 수 있습니다.
- -> 의미를 가지고 있지 않은 <div>의 사용을 지양하고, 최대한 의미가 있는 태그를 사용하는 것
주요 시맨틱 태그 종류
| 시맨틱 태그 | 설명 |
| header | 웹 페이지나 섹션의 머리말을 정의합니다. 주로 로고, 제목, 검색 폼 등이 포함됩니다. |
| nav | 네비게이션 링크를 정의합니다. 주로 사이트의 메뉴나 링크 목록을 포함합니다. |
| main | 문서의 주요 콘텐츠를 정의합니다. 하나의 문서에는 하나의 <main> 요소만 사용해야 합니다 |
| section | 문서의 섹션을 정의합니다. 주제별로 묶인 콘텐츠를 나타냅니다 |
| article | 독립적인 콘텐츠 블록을 정의합니다. 뉴스 기사, 블로그 글, 포럼 게시물 등의 콘텐츠를 표현할 때 사용됩니다 |
| aside | 사이드바 콘텐츠를 정의합니다. 주로 별도의 컨텐츠, 광고, 측면 정보 등을 표시합니다 |
| footer | 문서나 섹션의 푸터를 정의합니다. 저작권 정보, 연락처 정보, 사이트 링크 등을 포함합니다. |
자주 사용되는 태그
| 태그 이름 | 설명 |
| <div> |
구획을 나누거나 그룹화할 때 사용하는 태그입니다.
|
| <p> | 문단을 정의하는 태그로, 일반적으로 텍스트를 포함합니다. |
| <a> | 하이퍼링크를 생성하는 태그로, 다른 웹 페이지나 동일 페이지로 이동할 수 있습니다. |
| <img> | 이미지를 삽입하는 태그로, 웹 페이지에 이미지를 표시할 때 사용합니다. |
| <ul> | 순서 없는 목록을 정의하는 태그로, 항목들이 순서 없이 나열됩니다. |
| <ol> | 순서 있는 목록을 정의하는 태그로, 항목들이 순서대로 나열됩니다. |
| <li> | 목록의 항목을 정의하는 태그로, <ul>이나 <ol> 내부에서 사용됩니다. |
| <table> | 표를 정의하는 태그로, 데이터를 행과 열로 구조화하여 표시할 수 있습니다. |
| <form> | 사용자 입력을 받는 양식을 정의하는 태그입니다. |
| <input> | 사용자가 양식에 데이터를 입력할 수 있도록 하는 입력 필드를 생성하는 태그입니다. |
| <button> | 클릭 가능한 버튼을 생성하는 태그로, 사용자와의 상호작용을 유도할 때 사용됩니다. |
728x90
반응형
'카카오테크 부트캠프' 카테고리의 다른 글
| [카카오테크 부트캠프] 자바스크립트 기초 (0) | 2024.08.13 |
|---|---|
| [카카오테크 부트캠프] CSS 기초 (0) | 2024.08.03 |
| [카카오테크 부트캠프] 4일차 회고(웹 페이지 개발 기초) (0) | 2024.08.01 |
| [카카오테크 부트캠프] 3일차 회고(풀스택 엔지니어링 개론) (0) | 2024.07.27 |
| [카카오테크부트캠프] CDE란? (0) | 2024.07.25 |
