1. HTML5 기본용어
1) 요소 : HTML 페이지를 구성하는 각 부품 (제목, 본문, 이미지 등)
- 내용을 가질 수 있는 요소 (ex) <h1>Hello HTML5</h1>)
(1) 택스트인 경우
<h1>안녕</h1> / <p>메롱</p>
(2) 다른 태그인 경우
<div>
<h1>안녕</h1>
<p>안녕</p>
</div>
(3) 내용을 입력하지 않은 경우
<div></div>
<audio></audio>
<video></video>
- 내용을 가질 수 없는 요소 (ex) <img> / <br> / <hr>)
2) 태그 : 요소를 만들 때 사용하는 작성 방법
3) 속성 : 태그에 추가 정보를 부여할 때 사용하는 것
4) 주석 : 코드 설명 기록 (ex) <!-- 주석 --> )
2. HTML5 페이지의 구조와 작성법
1) HTML5 페이지의 구조
<html> 태그
- 웹 페이지의 사용 언어를 구글 검색 엔진에 제공
(1) html 태그의 lang 속성 (ex) <html lang="ko">)
lang 속성값 / 언어 = ko / 한국어, en / 영어, ja / 일본어, zh / 중국어, ru / 러시아어, de / 독일어
(2) html 태그 내부에 넣을 수 있는 태그
meta = 웹 페이지에 추가 정보 전달
title = 페이지 제목 지정
script = 웹 페이지에 스크립트 추가
link = 웹 페이지에 다른 파일 추가
style = 웹 페이지에 스타일시트 추가
base = 웹 페이지의 기본 경로 지정
2) HTML5 페이지의 작성과 실행
(1) 새 파일 만들기
- vscode의 [파일]-[새파일] (or 단축키 Ctrl + N 사용)
(2) 코드 작성 후 파일로 저장
- [파일]-[다른이름으로 저장]
- XX.html or XX.htm 형식으로 저장
(3) 실행
3) 스타일시트 작성과 실행
(1) 내부 스타일
- HTML 페이지 내부에서 style 태그를 사용해 스타일시트를 직접 입력
- 스타일시트가 짧은 경우
(2) 외부 스타일
- 스타일시트를 별도로 생성하고 link 태그의 href 속성을 사용해 불러옴
- 협업 업무나 프로젝트의 규모가 클 경우 사용
4) 자바스크립트 작성과 실행
(1) 내부 자바스크립트
- <script> 태그를 사용해 HTML 페이지 내부에 코드 작성
(2) 외부 자바스크립트
- <script> 태그의 src 속성에 파일 경로를 입력해 HTML 페이지로 불러옴
4) 검사를 이용한 오류 확인
- 버그 : 프로그램이 원하지 않는 방향으로 동작하는 것
- 디버그 : 버그를 잡는 행위
- 웹 브라우저 검사 기능으로 디버그 수행
> 크롬을 열고 [F12] 또는 [Ctrl] + [Shift] + [I]
> 웹 페이지에서 마우스 오른쪽 버튼 클릭해 [검사] 메뉴
- [Elements] 탭 : 현재 HTML 페이지의 계층 구조를 보여줌. 태그 스타일 파악
- [Console] 탭 : 오류를 확인, 자바스크립트 코드 추가 입력
연습문제
1번
(1) ( ) HTML 페이지를 구성하는 각 부품입니다.
(2) ( )는 요소를 만들 때 사용하는 작성 방법입니다.
(3) ( )은 프로그램 실행에는 영향을 미치지 않고 설명용으로 사용하는 코드를 의미합니다.
(4) ( ) 마크업 언어가 표시되는 방법을 기술하는 언어로 HTML 페이지의 스타일을 지정할 때 사용한다.
(5) ( )는 HTML 페이지에서 사용하는 프로그래밍 언어를 의미합니다.
2번
(1) HTML 태그는 반드시 내부에 무언가를 포함해야 한다.
(2) HTML 태그 내부에는 텍스트만 입력할 수 있다.
(3) html 태그의 lang 속성은 구글 등 검색 엔진에 문서의 언어 정보를 알려 줄 때 사용된다.
3번
다음 HTML 요소의 속성 이름과 속성 값, 태그 이름을 모두 적으시오.
속성:
속성값:
태그:
4번
다음 중 head 태그 내부에 입력할 수 없는 태그는?
1. style 태그 2. base 태그 3. meta 태그 4. header 태그
5번
빈칸에 들어갈 알맞은 내용을 적으시오.
< (1) >
< (2) >
< (3) >
<title>HTML5 Basic</title>
</ (3) >
< (4) >
</ (4) >
</ (2) >
6번
다음 코드에서 잘못된 부분을 찾아 바르게 수정하시오.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
<style src="outer_stylesheet.css"></style>
<script src="outer_javascript.js"></script>
</head>
<body>
</body>
</html>
정답
1번
요소, 태그, 주석, 스타일시트, JS
2번
X, X, O
3번
속성: title, alt, src
속성값: 바다, sea, sea.png
태그: img
4번
4. header 태그
5번
(1) !DOCTYPE html
(2) html
(3) head
(4) body
6번
틀린코드 : <style src="outer_stylesheet.css"></style>
수정 : <link rel="stylesheet", href="outer_stylesheet.css">
'📚 [Archive] CS & AI 스터디 > [STUDY] HTML5 입문 🌐' 카테고리의 다른 글
| [HTML5 웹 프로그래밍 입문 3판]-1장 웹 개요와 실습 환경 구축 (1장 연습 문제 및 정답) (5) | 2024.10.20 |
|---|---|
| [HTML5 웹 프로그래밍 입문 3판]-4장 HTML5 입력 양식 태그와 구조화 태그 (4장 연습 문제 및 정답) (3) | 2024.10.20 |
| [HTML5 웹 프로그래밍 입문 3판]-3장 HTML5 기본 태그 정리 (3장 연습 문제 및 정답) (2) | 2024.10.19 |