01. HTML5 기본 용어
HTML5의 기본 용어는 태그, 요소, 속성.
1. 태그와 요소
- 요소: HTML 페이지를 구성하는 각 부품. 제목, 본문, 이미지 등을 요소라고 함.
- 태그: 요소를 만들 때 사용하는 작성 방법. 자바스크립트에서는 요소 = 객체.
요소와 태그는 구분하지 않고 사용. 요소를 생성하는 것 = 태그를 생성하는 것.
HTML 요소는 두가지로 구분.
1) 내용을 가질 수 있는 요소: <요소 이름>내용</요소 이름>
2) 내용을 가질 수 없는 요소: <요소 이름>
내용을 가질 수 있는 요소의 내용은 다양함.
1) 텍스트: <h1>Hello HTML5</h1>
2) 다른 태그:
<div>
<h1>Hello HTML5</h1>
<p>즐거운 웹 프로그래밍 입문</p>
</div>
3) 내용 미입력: <div></div>
내용을 가질 수 있는 태그 생성시, 앞의 태그를 시작 태그, 뒤의 태그를 끝 태그라고 함.
! 내용을 가질 수 없는 요소의 태그 = 내용을 가질 수 있는 요소의 시작 태그. 구별하기 위해서 XHTML 표기법은 내용을 가질 수 없는 태그를 <img />로 표기. HTML 표기법에서는 여전히 <img>로 표현.
2. 속성: 태그에 추가 정보를 부여할 때 사용. 다음은 속성 사용 예시.
<h1 title="header">Hello HTML5</h1>
h1 태그에 title 속성 부여.
<img src="image.png">
src 속성에 출력할 이미지 정보 입력.
3. 주석: 프로그램 실행에 영향을 주지 않고 설명용으로 사용하는 코드.
<!-- 주석 -->
02. HTML5 페이지 구조와 작성법
1. HTML5 페이지의 구조
<!DOCTYPE html>
<html>
<head>
<title>Hello HTML5</title>
<head/>
<body>
<body/>
</html>
1) 웹 브라우저에 HTML5 문서라는 것을 알리기 위해 반드시 첫 행에 나와야 한다.
2) 모든 HTML 페이지의 기본 요소, 모든 태그는 이 html 태그 내부에 작성한다.
3) body 태그에 필요한 스타일시트/자바스크립트 등을 제공.
4) 웹 브라우저에 표시하는 제목 지정.
5) 사용자에게 실제로 보이는 부분 작성.
- html 태그의 lang 속성
1) ko: 한국어
2) en: 영어
3) ja: 일본어
4) ru: 러시아어
5) zh: 중국어
6) de: 일본어
html태그에는 다음과 같은 lang 속성 입력 가능.
lang 속성: 웹 브라우저 동작에는 영향을 주지 않고, 검색 엔진이 웹 페이지를 탐색할 때 해당 웹 페이지가 어떤 언어로 작성됐는지를 알 수 있도록 한다.
ex. <html lang="ko">
- head 태그 내부에 넣을 수 있는 태그
1) meta: 웹 페이지에 추가 정보 전달
2) title: 페이지 제목 지정
3) script: 웹 페이지에 스크립트 추가
4) link: 웹 페이지에 다른 파일 추가
5) style: 웹 페이지에 스타일시트 추가
6) base: 웹 페이지의 기본 경로 저장
head 태그에는 다음과 같은 태그만 입력 가능. 다른 태그를 넣으면 웹 브라우저가 body로 자동으로 이동.
title 태그에 글자를 입력하면 웹 브라우저 위쪽에 표시. (티스토리에서 웹 프로그래밍(2) 웹 페이지 기초가 뜨는 것처럼.) title 태그는 html태그의 lang 속성처럼 웹 페이지 정보를 검색 엔진에 제공한다.
2. HTML5 페이지의 작성과 실행 방법
비주얼 스튜디오 코드의 [파일]-[새 파일] 메뉴 선택.
[파일]-[다른 이름으로 저장] 메뉴를 선택해 저장. 이때 파일 형식을 .html 또는 .htm으로 저장해야 비주얼 스튜디오 코드와 웹 브라우저가 HTML파일로 인식.
파일을 크롬으로 드래그하면 웹 페이지 실행. 혹은 더블클릭.
! html:5를 입력하고 탭키를 누르면 HTML 기본 형태 자동 생성. 외에도 h1을 입력하고 탭키를 누르면 h1 태그를 자동 생성.
3. 스타일시트 작성과 실행
두가지 방법의 스타일시트를 사용해 스타일 적용.
- 내부 스타일 방법: HTML 페이지 내부에서 style 태그를 사용해 스타일시트를 직접 입력.
- 외부 스타일 방법: HTML 페이지 내부에서 link 태그의 href 속성을 사용해 스타일시트를 불러온다.
스타일시트가 짧으면 내부 스타일로, 여러 사람이 함께 협업하고 프로젝트 규모가 클 때에는 외부 스타일로.
-> 내부 스타일시트 작성과 실행
head 태그 안에 style 태그 입력.
-> 외부 스타일시트 작성과 실행
새 파일을 생성하고 Style.css라는 이름으로 저장(에디터가 확장자를 자동으로 인식).
head 태그 안에 link 태그 사용해 외부 스타일시트를 불러오도록 한다.
3. 자바스크립트 작성과 실행
스타일시트처럼 script 태그를 사용해 내부에서 작성하거나, script 태그의 src 속성을 사용해 외부에서 불러오도록 작성 가능. 1000행을 넘는 경우가 많아 주로 외부 자바스크립트로 작성.
다음의 두가지가 가장 기본적인 방법.
- 내부 자바스크립트 작성과 실행
head태그나 body 태그 내부에 script 태그를 생성.
- 외부 자바스크립트 작성과 실행
새 파일을 생성해 OuterJavaScript.js 라는 이름으로 저장(에디터가 확장팩을 자동으로 인식).
script 태그르르 사용해 외부 자바스크립트를 불러오도록 한다.
! 외부 스타일시트는 link 태그 사용, 외부 자바스크립트는 script 태그 사용.
03. 오류와 검증
- 버그: 프로그램이 원하지 않는 방향으로 동작하는 것.
- 디버그: 버그를 잡는 행위.
디버그는 웹 브라우저의 검사 기능을 활용해 쉽게 수행할 수 있다. F12 / Ctrl+Shift+I / 마우스 오른쪽 버튼을 누르고 [검사] 메뉴를 선택하면 검사 실행.
검사 기능은 다양하지만 일단 [Elements(요소)] 탭과 [Console(콘솔)] 탭만 사용.
[Elements] 탭은 현재 HTML 페이지의 계층 구조와 각 태그에 적용된 스타일을 파악한다.
[Console] 탭은 오류를 확인하거나 자바스크립트 코드를 추가로 입력할 때 사용한다.
'교재 정리 > HTML5' 카테고리의 다른 글
| 웹 프로그래밍 (9) 자바 스크립트 기본 문법 (0) | 2024.05.07 |
|---|---|
| 웹 프로그래밍 (3) HTML5 기본 태그 (0) | 2024.04.01 |
| 웹 프로그래밍 (1) 웹 개요와 실습 환경 구축 (0) | 2024.03.15 |
