728x90
반응형
SMALL
1. HTML5 기본 용어
1.1 태그와 요소
- 요소(Element) : 웹페이지를 구성하는 기본 단위로, 제목·본문·이미지 등
- 태그(Tag) : 요소를 만들 때 사용하는 작성 방법
- 자바스크립트에서는 요소를 객체(Object)라고 부름
- 실제 현업에서는 '요소'와 '태그'를 혼용해서 사용
1.2 시작 태그와 끝 태그
| 구분 | 예시 |
| 시작 태그 | `<h1>` |
| 끝 태그 | `</h1>` |
| 요소 | `<h1>제목입니다</h1>` |
1.3 속성(Attribute)
- 요소에 추가 정보를 부여하는 값
<h1 title="제목 태그">Hello!</h1>
<img src="image.png" alt="이미지 설명">1.4 주석(Comment)
- 웹페이지에는 표시되지 않고, 개발자 메모용으로 사용하는 부분 (ctrl + /)
<!-- 여기는 주석입니다 -->
✅ 핵심 요점 정리
| 항목 | 내용 |
| 태그와 요소 | HTML 기본 구성 단위 |
| 시작/끝 태그 | `<태그명>`과 `</태그명>`으로 구성 |
| 속성 | 추가 정보 부여 (`title`, `src` 등) |
| 주석 | 개발자 메모 (화면 출력 안됨) |
2. HTML5 페이지 구조와 작성법
2.1 HTML5 페이지 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML5 Basic</title>
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
| 구역 | 역할 |
| `<!DOCTYPE html>` | HTML5 문서 선언 |
| `<html>` | 문서 전체 영역 |
| `<head>` | 메타정보 및 외부 리소스 연결 |
| `<body>` | 실제 콘텐츠 표시 영역 |
2.2 언어 설정
- 문서의 언어 정보를 설정하여 검색 엔진과 접근성 도구가 참고
<html lang="ko">
| lang 속성값 | 언어 | lang 속성값 | 언어 |
| `ko` | 한국어 | `ru` | 러시아어 |
| `en` | 영어 | `zh` | 중국어 |
| `ja` | 일본어 | `de` | 독일어 |
2.3 문서 제목 설정
- 브라우저 탭에 표시되는 제목을 설정
<title>TITLE</title>
2.4 스타일 적용
| 방식 | 설명 | 예시 |
| 내부 스타일 | `<style>` 태그에 직접 작성 | `<style>h1 {color:red;}</style>` |
| 외부 스타일 | 별도 CSS 파일로 연결 (권장) | `<link rel="stylesheet" href="style.css">` |
2.5 자바스크립트 적용
| 방식 | 설명 | 예시 |
| 내부 스크립트 | `<script>` 태그로 직접 작성 | `<script>alert('hi')</script>` |
| 외부 스크립트 | 별도 JS 파일로 분리 (권장) | `<script src="app.js"></script>` |
✅ 핵심 요점 정리
| 항목 | 내용 |
| 기본 구조 | `DOCTYPE` 선언 → HTML, HEAD, BODY 구성 |
| 언어 설정 | `<html lang="ko">`로 명시 |
| 제목 설정 | `<title>`로 탭 제목 설정 |
| 스타일 적용 | 내부보다 외부 스타일 권장 |
| 스크립트 적용 | 외부 스크립트 권장 |
3. 오류와 검증
3.1 버그와 디버깅
| 용어 | 설명 |
| 버그(Bug) | 프로그램이 예상과 다르게 동작하는 현상 |
| 디버그(Debug) | 버그를 수정하는 작업 |
3.2 크롬 개발자 도구 활용
- 크롬에서 F12 또는 우클릭 → "검사" 메뉴 선택
- 주요 탭 설명
- Elements: HTML 구조 확인 및 실시간 수정
- Console: 자바스크립트 오류 및 로그 확인
3.3 실시간 디버깅 예시
- 페이지 깨짐 → Elements 탭에서 구조 점검
- 스크립트 오류 → Console 탭에서 에러 확인
✅ 핵심 요점 정리
| 항목 | 내용 |
| 버그 | 예상과 다른 프로그램 동작 |
| 디버그 | 버그 수정 작업 |
| 크롬 도구 | Elements·Console 탭 활용 |
| 주요 기능 | HTML 구조 확인, JS 오류 로그 확인 |
📚 참고자료
- MDN HTML 문서 구조
- HTML5 웹 프로그래밍 입문 4판 (김성윤 저, 한빛미디어)
728x90
반응형
LIST