오늘은 html의 기본 구조에 대해서
포스팅 해보겠습니다.
HTML의 기본 구조는 웹페이지를 구성하는 골격입니다.
구성은 형식선언(Doctype) 루트 요소(html), 헤드(Head), 본문(Body)으로 구성됩니다.
이 구조는 웹페이지를 만듦에 있어서 필수이며,
웹 브라우저가 올바르게 해석하여 사용자에게 메타데이터, 실제 콘텐츠를 구분하여 표시합니다.
HTML의 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
차례대로 설명을 해보겠습니다
문서 형식 선언(DOCTYPE)
문서 형식 선언은 HTML 문서가 어떤 버전의 HTML로 작성되었는지 웹 브라우저에게 알려주는 역할을 합니다.
Doctype은 웹 브라우저에게 문서를 올바르게 해석하고 렌더링하는 데 필요한 정보를 제공합니다.
Doctype 선언은 HTML 문서의 맨 위에 위치합니다.
루트 요소 (html)
루트 요소<html>은 HTML 문서의 최상위 요소입니다. 이말은 다른 HTML 요소들을 포함하는 부모 요소라는 뜻입니다.
모든 HTML 문서는 <html> 요소로 시작합니다.
html 요소에는 lang 이라는 속성이 포함되어있는데 영어로 작성된 문서는 lang ="en" 한국어는 lang = "kr" 로 작성됩니다.
헤드 (head)
<head> 요소는 HTML 문서의 메타데이터와 외부 리소스에 대한 정보를 포함하는 부분입니다.
화면에는 직접적으론 보이지않지만, 문서를 처리하고 표시하는데 매우 중요한 역할을 합니다.
title : 문서의 제목을 지정합니다
메타 데이터
문서의 특정 정보를 정의하는데 사용됩니다. 주로 검색엔진 최적화(SEO), 문자 인코딩, 뷰포트 지정을 합니다.
ex)
<head>
<meta name = "description" content="문서 설명">
<meta name = "author" content="김의진">
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 웹을 위한 뷰포트 설정.
<meta charset="UTF-8">: UTF-8 문자 인코딩을 지정
</head>
스타일 시트, 외부 리소스
문서의 스타일을 적용하기 위해서는 <style> 요소를 사용할수 있으며, CSS파일, JAVASCRIPT 파일
같은 외부 리소스를 문서에 연결합니다.
<!-- 내부 스타일 시트 -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #007BFF;
}
</style>
<!-- 외부 CSS 파일 -->
<link rel="stylesheet" href="styles.css">
</head>
본문 (body)
<body> 요소는 HTML 문서의 실제 내용을 담고 있는 부분이라고 말할수 있습니다.
웹페이지를 구성하는 텍스트 이미지 링크 폼 등 모든 콘텐츠는 <body> 요소 안에 있는 내용으로 표사됩니다.
1. 텍스트
html 삽입결과 ..
김의진
취뽀
할수 있겠지?..ㅜ
<body>
<h1> 김의진</h1>
<h2> 취뽀 </h2>
<p> 할수 있겠지?..ㅜ </p>
</body>
2. 이미지
<body>
<img src="/assets/images/euijin.jpg" alt="의진 이미지">
</body>
3. 링크
<body>
<a href="https://cookiekie.com/" target="_blank">쿠키 바로가기</a>
</body>
이처럼 기초부터 포스팅을 하는데, 다시한번 확실히 기억되는것 같아서 좋은 것 같습니다.
다음 포스티은 좀 더 딥한 내용으로 뵙겠습니다.
'HTML' 카테고리의 다른 글
| 웹 접근성(A11Y) & WAI-ARIA (0) | 2025.02.17 |
|---|---|
| HTML 시멘틱 태그 (0) | 2025.01.25 |