[HTML5 웹 프로그래밍 입문 4판 Chapter 02 연습 문제 포함]

[HTML5 웹 프로그래밍 입문 4판 Chapter 02 연습 문제 포함]
/category/Study/Web

2023. 9. 19. 09:54

Chapter 02 웹 페이지 기본 구조와 작성 방법

✨HTML5 기본 용어✨

1. 태그와 요소

요소는 HTML 페이지를 구성하는 각 부품으로 제목, 본문, 이미지 등이 모두 요소이다. 자바스크립트 개발에서는 요소를 객체(object)라고도 한다. 태그는 요소를 만들 때 사용하는 작성 방법이다. 흔히 요소와 태그를 구분하지 않고 사용한다.

내용을 가질 수 있는 요소와 내용을 가질 수 없는 요소

내용을 가질 수 있는 요소를 생성할 때는 시작 태그, 끝 태그를 사용한다. ** HTML 표기법은 <요소 이름> 만으로 요소를 생성하기 때문에 내용을 가질 수 있는 태그의 시작 태그로 오해할 수 있다. XHTML 표기법은 명확하게 내용을 가질 수 없는 태그라고 표기할 수 있다.

2. 속성

속성은 태그에 추가 정보를 부여하는 것이다. 예를 들어 아래를 참고하면 title과 src는 속성 이름이고, header, image.png가 속성 값이 된다.

<h1 title = "header">Hello HTML5</h1> //h1태그에 title 속성 부여
<img src = "image.png"> //src 속성에 출력할 이미지 정보 입력

3. 주석

프로그램 실행에 영향을 미치지 않으면서 설명하는 코드를 주석이라고 한다.

✨HTML5 페이지 구조와 작성법✨

1. HTML5 페이지의 구조

모든 HTML5 페이지의 기본 구조는 다음과 같다.

html 태그의 lang 속성과 head 태그 내부에 넣을 수 있는 태그는 다음과 같다.

lang 속성은 검색 엔진이 웹 페이지를 탐색할 때 해당 웹 페이지를 어떤 언어로 작성했는지 쉽게 알 수 있도록 돕니다. head 태그는 표2-4와 같은 태그만 입력할 수 있다. 다른 태그를 넣으면 웹 브라우저가 body 태그로 자동으로 옮긴다. head 태그 안의 title 태그에 글자를 입력하면 웹 브라우저 위쪽에 표시되는 것을 실습을 직접 해보면 확인할 수 있다.

2. HTML5 페이지의 작성과 실행

이 부분은 건너뛰겠다.

3. 스타일시트 작성과 실행

내부 스타일 방법, 외부 스타일 방법 이 두 가지 방법의 스타일시트를 사용해 스타일을 적용할 수 있다. 내부 스타일 방법은 style 태그를 사용해 스타일시트를 직접 입력한다. 외부 스타일 방법은 link 태그의 href 속성을 사용해 스타일시트를 불러온다. 여러 사람이 함께 협업하고 프로젝트 규모가 클 때는 외부 스타일이 좋다.

4. 자바스크립트 작성과 실행

script 태그를 사용해 내부에서 작성하거나 script 태그의 src 속성을 사용해 외부에서 불러오도록 작성이 가능하다. 자바스크립트는 길어질 때가 많아 주로 외부 자바스크립트로 작성한다. 외부 스타일 시트는 link를 사용하고, 외부 자바스크립트는 script 태그를 사용한다.

✨오류와 검증✨

버그란 프로그램이 원하지 않는 방향으로 동작하는 것이다. 그리고 디버그란 버그를 잡는(수정하는) 행위를 말한다. 웹 브라우저의 검사 기능으로 쉽게 디버그할 수 있다. 다양한 검사 기능 중 Elements 탭과 Console 탭을 사용한다. **Element는 현재 HTML 페이지의 계층 구조와 각 태그에 적용된 스타일을 파악할 수 있다. Console은 오류를 확인하거나 자바스크립트 코드를 추가로 입력할 수 있다.

✨02장 연습문제✨

[연습문제 01] 다음 문장에 O X를 표시하시오.

(1) HTML 태그는 반드시 내부에 무언가를 포함해야 합니다.(X)

(2) HTML 태그 내부에는 텍스트만 입력할 수 있습니다. (X)

(3) html 태그의 lang 속성은 구글 등 검색 엔진에 문서의 언어 정보를 알려 줄 때 사용됩니다. (O)

[연습문제 02] 다음 HTML 요소의 속성 이름과 속성값, 태그 이름을 모두 적으시오.

<img title ="바다" alt = "sea" src ="sea.png">

속성 이름 = title, src

속성값 = “바다”, “sea.png”

태그 이름 = img 태그

[연습문제 03] 다음 중 head 태그 내부에 입력할 수 없는 태그는?

① style 태그

② meta 태그

③ base 태그

④ header 태그

[연습문제 04] HTML5 기본 페이지 형태는 다음과 같습니다. 빈칸에 들어갈 알맞은 내용을 적으시오.

<①>
<②>
<③>
<meta charset ="UTF-8">
<meta name ="viewport"content ="width=device-width, initial-scale=1.0">
<title >Document </title >
</③>
<④>
</④>
</②>

① !DOCTYPE html

② html

③ head

④ body

[연습문제 05] 다음 코드에서 잘못된 부분을 찾아 바르게 수정하시오.

<!DOCTYPE html >
<html lang ="en">
	<head >
		<meta charset ="UTF-8"/>
		<meta name ="viewport"content ="width=device-width,initial-scale=1.0"/>
		<title >HTML5 Basic </title >
		<style src ="outer_stylesheet.css"></style >
	<script src = "outer_javascropt.js"></scropt >
	</head >
	<body ></body >
</html >

수정 후

<!DOCTYPE html >
<html lang ="en">
	<head >
		<meta charset ="UTF-8"/>
		<meta name ="viewport"content ="width=device-width,initial-scale=1.0"/>
		<title >HTML5 Basic </title >
		<link rel ="stylesheet"href ="outer_stylesheet.css"/>
		<script src ="outer_javascropt.js"></script >
	</head >
	<body >
		<h1 >hello </h1 >
	</body >
</html >

[연습문제 06]는 생략했습니다.

LIST

저작자표시

'Study > Web' 카테고리의 다른 글

[HTML5 웹 프로그래밍 입문 4판 Chapter 06] 연습 문제 정답 (0)	2023.12.22
[HTML5 웹 프로그래밍 입문 4판 Chapter 04 연습 문제 포함] (0)	2023.10.24
[HTML5 웹 프로그래밍 입문 4판 Chapter 05 연습 문제 포함] (0)	2023.10.23
[HTML5 웹 프로그래밍 입문 4판 Chapter 03 연습 문제 포함] (0)	2023.09.30
[HTML5 웹 프로그래밍 입문 4판 Chapter 01 연습 문제 포함] (0)	2023.09.17

REALITY

CATEGORIES