반응형
1. <!DOCTYPE html>
- 역할: 문서가 HTML5 형식임을 선언합니다.
- 브라우저가 문서를 올바르게 해석하도록 돕습니다.
- 항상 문서의 가장 첫 줄에 위치해야 합니다.
2. <html> 태그
- HTML 문서의 시작과 끝을 정의합니다.
- 모든 내용은 <html> 태그 안에 포함됩니다.
3. <head> 태그
- 역할: 웹 페이지의 메타데이터(정보)를 포함합니다.
- 메타데이터란?
- 브라우저가 이해하거나 검색 엔진이 읽는 정보입니다.
- 페이지 제목, 문자 인코딩 방식, 외부 파일 연결 등을 정의.
중요한 태그
- <meta>: 문자 인코딩, 뷰포트 설정 등을 지정.
- <title>: 웹 브라우저 탭에 표시될 제목을 지정.
- <link>: 외부 CSS 파일 연결.
- <script>: JavaScript 파일을 포함.
4. <body> 태그
- 역할: 웹 페이지에 표시되는 실제 콘텐츠를 포함.
- 모든 사용자에게 보이는 요소는 <body> 태그 안에 작성됩니다.
자주 사용하는 요소
1. 제목 태그 (<h1>~<h6>)
- <h1>은 가장 큰 제목, <h6>은 가장 작은 제목을 나타냅니다.
2. 문단 태그 (<p>)
- 텍스트를 문단 단위로 구분.
- 예: <p>이것은 문단입니다.</p>
3. 이미지 삽입 (<img>)
4. 링크 삽입 (<a>)
5. 목록 (<ul>과 <ol>)
- <ul>: 순서 없는 목록 (불릿 포인트).
- <ol>: 순서 있는 목록 (숫자).
HTML의 구조 시각화
아래는 간단한 다이어그램으로 HTML 구조를 이해하기 쉽게 설명한 것입니다
HTML 코드 작성 팁
- 들여쓰기와 정렬: 태그를 중첩할 때 들여쓰기하여 코드의 가독성을 높입니다.
- 주석 사용하기: 코드에 주석을 추가해 나중에 쉽게 이해할 수 있도록 합니다.
- 태그 닫기: HTML 태그는 열고 닫는 쌍이 맞아야 합니다
HTML 실습하기
- 간단한 HTML 페이지를 직접 만들어보세요.
- 텍스트 편집기(예: VS Code)와 브라우저가 있으면 시작할 수 있습니다.
- 실시간으로 코드를 수정하고 결과를 확인하면서 학습하면 더 효과적입니다.
HTML은 간단하지만 매우 강력한 언어입니다. 기본 구조를 이해하면 웹 개발의 첫걸음을 뗀 것입니다!
반응형
'AI.IT 정보 > 코딩초보 전문가되기' 카테고리의 다른 글
| 초보자를 위한 웹 개발 기초: 첫걸음을 내딛다 HTML CSS JavaScript (1) | 2024.12.29 |
|---|---|
| HTML의 <!DOCTYPE html>: 왜 중요할까? (1) | 2024.12.29 |
| [HTML관련] html을 배우면 어떤것들을 할수 있을까? (3) | 2024.12.20 |
| 파이썬 단계별 학습순서- 프로그래밍 언어[python] (4) | 2024.12.14 |
| "프로그래머? 그게 뭔데?" 한방에 알려드림 (1) | 2024.09.27 |
| 프로그래밍 언어에서 사용되는 다양한 라이브러리들 소개 (1) | 2024.09.13 |
