HTML 구조: 웹 페이지의 기반
안녕하세요! 1dg입니다.
오늘은 html 기본 구조 에 대해 알려드리려고 합니다!
웹 개발을 시작하면서 HTML (HyperText Markup Language) 이란 용어를 들어보셨을 것입니다.
HTML은 웹 페이지의 구조와 내용을 정의하는 언어로,
웹 페이지 개발의 핵심입니다.
이 글에서는 HTML의 기본적인 구조와 주요 요소에 대해 알아보겠습니다.
2023.08.10 - [Frontend/HTML] - Visual Studio Code(VSCode) 설치 방법 안내
Visual Studio Code(VSCode) 설치 방법 안내
Visual Studio Code(VSCode) 설치 방법 안내 안녕하세요 오늘은 비주얼 스튜디오 코드가 무엇인지, 그리고 Visual Studio Code(VSCode) 설치 방법에 대해 알려드리겠습니다. # 비주얼 스튜디오 코드(VSCode)란? 비
1dg0601.tistory.com
아래는 오늘 알려드릴 목차입니다!
# 목차
# HTML 기본 구조
HTML 문서는 일련의 요소들로 구성되며, 각 요소는 태그로 표시됩니다.
보통 HTML 문서는 아래와 같은 기본 구조로 시작됩니다:
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>웹 페이지 제목</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>이곳에 웹 페이지 내용을 작성하세요.</p>
</body>
</html>
|
cs |
1. <!DOCTYPE html>
문서의 형식을 HTML5로 지정합니다.
2. <html>
HTML 문서의 루트 요소로, 모든 내용이 이 안에 포함됩니다.
3. <head>
문서의 메타데이터를 정의하며, 웹 페이지의 제목(title) 등을 포함합니다.
4. <title>
웹 페이지의 제목을 설정합니다. 브라우저의 탭에 표시됩니다.
5. <body>
실제 웹 페이지의 내용을 포함하는 부분입니다.
6. <h1>, <p>
각각 제목과 단락을 나타내는 태그입니다.
# HTML 요소와 속성
HTML은 다양한 요소로 구성되며, 각 요소에는 속성과 값이 포함될 수 있습니다.
예를 들어, 링크를 만들기 위해 <a> 태그를 사용할 수 있습니다:
|
1
|
<a href="https://www.example.com">예시입니다.</a>
|
cs |
위의 코드에서 href는 링크의 URL을 나타내는 속성이며,
"https://www.example.com"는 해당 속성의 값입니다.
# 요소 중첩과 계층 구조
HTML 요소들은 중첩하여 사용할 수 있습니다.
이로써 웹 페이지의 구조를 계층적으로 표현 할 수 있습니다.
예를 들어, 제목과 단락을 함께 사용해 보겠습니다:
|
1
2
|
<h2>웹 페이지 구조</h2>
<p>HTML은 웹 페이지의 구조를 정의하는 언어입니다.</p>
|
cs |
이제 여러분은 HTML의 기본 구조 와 몇 가지 주요 요소 에 대해 알아보았습니다.
HTML을 이용하여 웹 페이지의 뼈대를 구성하고 내용을 표현할 수 있습니다.
앞으로 더 많은 HTML 태그와 속성들을 알려드리겠습니다!
'Frontend > HTML' 카테고리의 다른 글
| [HTML] SEO를 위한 효과적인 HTML 구조 구축하기 (0) | 2023.08.15 |
|---|---|
| Visual Studio Code(VSCode) 설치 방법 안내 (0) | 2023.08.10 |
