[ HTML5 ]
- HTML(Hyper Text Markup Language)의 최신 버전
- HTML5 = HTML + CSS + JavaScript
- "오픈된 표준을 기반으로 한 웹 어플리케이션 구축 플랫폼"
1. 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
<link rel="stylesheet" href="style.css">
<style>/* CSS */</style>
<script>// JavaScript</script>
</head>
<body>
<!-- 주석 -->
본문 내용
</body>
</html>
| 태그 |
설명 |
| <!DOCTYPE html> |
HTML5 문서 선언 |
| <html> |
문서의 루트(ROOT) 요소 |
| <head> |
메타정보, 스타일, 스크립트 포함 (화면에 표시 안됨) |
| <title> |
브라우저 탭 제목 표시줄에 표시 |
| <body> |
화면에 실제 표시되는 본문 내용 |
2. 속성 (Attribute)
- html 요소에 대한 추가적인 정보를 제공
- 속성값은 항상 시작 태그에 정의
- name="value" 형식
<태그 속성="값">내용</태그>
| 속성 |
설명 |
| class |
CSS 클래스 지정 |
| id |
문서 내 유일한 식별자 |
| style |
인라인 스타일 정의 |
| title |
툴팁 텍스트 |
| contenteditable |
요소를 편집 가능한 영역으로 설정 (true/false) |
| draggable |
드래그 가능 여부 설정 (true/false/auto) |
| hidden |
요소를 숨김 상태로 설정 |
| data-* |
커스텀 데이터 속성, JavaScript에서 dataset으로 접근 가능 |
[ 블록 레벨 요소 vs 인라인 레벨 요소 ]
1. 블록 레벨 요소
- <br> 없이도 스스로 줄바꿈
- 너비를 지정하지 않으면 가로 전체를 채움
- 종류: <div>, <p>, <h1>~<h6>, <form>, <table>, <ul>, <ol>, <dl>, <hr>, <address>, <blockquote>, <fieldset>
2. 인라인 레벨 요소
- 줄바꿈 없이 가로로 나열
- 주변에 공간이 생기지 않음
- 반드시 블록 요소 안에 포함되어야 함 (웹 표준)
- 종류: <span>, <a>, <img>, <input>, <label>, <select>, <textarea>, <strong>, <br>, <button>, <b>, <i>, <sub>, <sup>
'Web > HTML' 카테고리의 다른 글
| [HTML] 주요 태그와 속성 - h1, p, br, ul,ol,dl, a, table, 시맨틱태그(Semantic) (0) |
2026.03.09 |
| [HTML] 주요 태그와 속성 -form, input, label, select, button, image (0) |
2026.03.09 |