HTML의 기본 구조
📌 ① <!DOCTYPE html>
- 뜻: 이 문서는 HTML5 문서라는 걸 브라우저에게 알려주는 선언문이야.
- 왜 필요해? 브라우저가 문서를 해석할 때 어떤 표준을 따라야 할지 알려줘.
- 예시: “이거 최신 HTML이야! 그러니까 최신 방식으로 렌더링해줘!”
📌 ② <html lang="en"> ... </html>
- 뜻: HTML 문서의 시작과 끝을 의미하고, lang="en"은 문서의 기본 언어가 영어라는 뜻이야.
- 예시: 문서 전체를 감싸는 커다란 상자라고 생각하면 돼.
📌 ③ <head> ... </head>
- 뜻: 브라우저 화면에는 직접 보이지 않는 문서의 설정 정보를 담는 곳.
- 주요 내용들:
- <meta charset="UTF-8">: 한글도 깨지지 않게 문자 인코딩을 UTF-8로 설정.
- <meta name="viewport" ...>: 모바일 대응을 위한 설정.
- <link rel="stylesheet" href="style.css">: 외부 CSS 파일 연결.
- <script src="script.js" defer>: 외부 JS 파일을 읽어들임.
- <title>프로그램 기초 – HTML</title>: 브라우저 탭에 보이는 제목!
- 예시: 이건 웹사이트의 뒷단 설정 파일 같은 역할이야.
📌 ④ <body> ... </body>
- 뜻: 웹 브라우저 화면에 직접 보이는 내용이 들어가는 부분이야.
- 예시:→ 큰 제목으로 “2. HTML 개요”가 웹페이지에 표시돼.
-
html복사편집<h1>2. HTML 개요</h1>
하고 환영합니다를 오른쪽 클릭하고 LIVEserver를 실행하면
이렇게 웹 페이지가 하나 생성된다
VScode나 Cursor를 보면 아래 port번호가 있는데, html을 실행시키는 폴더의 port번호가 명시되어 있다.
이후 liveserver를 실행시키면
이런식으로 주소가 생성되고 실행 결과가 존재하게 된다
Body에 사용되는 문법에 해당한다
| <h1> | 가장 큰 제목(Heading 1). 보통 페이지의 주제나 메인 제목으로 사용돼 |
| <p> | 문단(paragraph). 일반적인 텍스트 내용을 표시할 때 사용돼 |
Contents Box에 우리가 쓰는 내용이 삽입되게 된다
Padding Box에 Context와 Context사이 거리를 주기 위해 padding을 삽입하게된다
Border Box는 서로다른 element간 간격을 조절하는것이다
'LLM' 카테고리의 다른 글
| [7]JavaScript (7) | 2025.08.11 |
|---|---|
| [6]CSS (3) | 2025.08.11 |
| [4]컴퓨터통신/HTML (7) | 2025.08.07 |
| [3]FAST API (5) | 2025.08.07 |
| [2][Docker]Docker Container (5) | 2025.08.04 |