구조화가 중요한 이유

브라우저를 통해 보는 것 이상으로 웹 문서에 들어 있는 정보 탐색이 중요한 시대가 왔다. 빅 데이터와 함께 사물 인터넷(IOT, Internet of things) 시대에는 사물 속에 내장된 컴퓨터들이 스스로 찾든 검색엔진을 이용하든 인터넷 상의 웹 문서에서 의미 있는 정보를 찾는다. 그러므로 탐색이 쉬워 검색엔진이 좋아하는 웹 사이트를 만들어야 웹 사이트의 가치가 올라간다.

 

HTML5 문서의 구조와 시맨틱 태그

<header></header> 

페이지나 섹션의 머리말을 표현하는 태그

페이지 제목, 페이지를 소개하는 간단한 설명이 들어간다.

<section> 이나 <article> 내에도 사용된다.

 

< nav></nav>

navigation의 줄임말로 하이퍼링크들을 모아 놓은 특별한 섹션

페이지 내 목차를 만들기 위해 주로 사용된다.

 

<section></section>

문서의 장(chapter, section) 혹은 절을 구성하는 역할을 하며 섹션이라고 부른다. 

 

<article></article>

본문과 연관되어 있지만, 독립적인 콘텐츠를 담는 영역이다.

<section>이 본문의 필수적인 내용을 담는다면, <article>은 웹 페이지의 본질을 훼손하지 않는 내용을 담는데 주로 사용된다.

 보조적인 기사, 블로그 포스트, 댓글이나 기타 독립적인 내영을 담는 영역

<article>에 담는 내용이 많은 경우 여러 <section>으로 나누어 담을 수 없다.

 

<aside></aside>

웹페이지 본문 흐름에서 약간 벗어난 노트나 팁, 신문, 잡지에서 주요 기사 옆에 짤막하게 곁들이는 관련기사.

문서의 주요부분에서 벗어난 내용을 담기 때문에, 페이지의 오른쪽이나 왼쪽에 주로 배치한다.

 

<footer></footer>

꼬리말 영역을 표시하는 태그

페이지나 <section>내에 꼬리말을 담는다.

이곳에는 주로 저자나 저작권 정보 등을 주로 표시한다.

<header>와<footer>가 꼭 웹페이지의 서두와 말미에 배치될 필요는 없다.

 

css3을 이용해 만든 구조의 예 (위의 태그들의 위치나 모양은 브라우저에 의해 자동으로 정해지지 않는다.) 

 

시맨틱 블록 태그

<figure></figure>

그림을 블록화 하는 시맨틱 태그.

이미지, 동영상, 소스 코드 등 콘텐츠를 블록화 할 수 있다.

 

<details></details>

상세 정보를 담는 시맨틱 블록 태그이다.

브러우저 화면에 핸들이 나타나며 상세정보를 감추거나 보이게 할 수 있다.

 

<summary></summary>

<details>로 구성되는 블록의 제목을 표현한다.

 

 

 

시맨틱 블록 태그

<mark></mark> - 중요한 시간 텍스트임을 표시

<time></time> - 시간 정보임을 표시

<meter></meter> - 주어진 범위나 %의 데이터 양 표시

<prograss></prograss> - 작업의 진행 정도 표시

 

 

 

 

 

 

 

 

'프로그래밍 > WEB' 카테고리의 다른 글

HTML5 + CSS3 + Javascript 웹프로그래밍 chapter3 연습문제  (0) 2020.10.20
HTML5 + CSS3 + Javascript 웹프로그래밍 chapter2 연습문제  (0) 2020.10.20
HTML5 + CSS3 + Javascript 웹프로그래밍 chapter1 연습문제  (0) 2020.10.20
MVC  (0) 2019.03.19
[html&css&js]회원가입 유효성검사  (0) 2018.10.21

이론 문제 

 

1. HTML5 표준에 명시된 것으로 HTML페이지에 반드시 있어야 하는것이 아닌 것은?

(2)<img>

 

2. 검색엔진이 좋아하는 태그가 아닌 것은?

(1)<div>

 

3. HTML에서 문서 구조화와 관련이 먼 태그는?

(2)<span>

 

4.  HTML5에서 문서의 구조화를 강력히 추진하는 이유는?

(1) 웹 페이지 내 가치 있는 정보의 탐색이 원할 하도록 하기 위해

 

5. 개발자가 웹에 맞추어 웹페이지를 작성해야 하는 이유는?

(3) 검색 엔진이 좋아하는 웹페이지로 만들기 위해

 

6. 검색 엔진이 저작권 정보를 웹 페이지 내에서 검색할 때 어떤 태그를 검색하면 좋을까?

(2)<footer>

 

7. 웹 문서의 목차 정보를 두기에 바람직한 태그는?

(4)<nav>

 

8. 다음 보기에서 골라 빈칸에 <form>태그의 속성 중 적절한 것을 삽입하라.

< form> 태그의 action 속성은 웹 서버의 응용프로그램 이름을 지정하며, method는 폼 데이터를 웹 서버로 전송할 때 데이터를 전송하는 방식을 결정한다. 이 방법에는 get 와 post가 있다. 그리고 target 속성에는 폼 데이터를 전송하고 웹 서버로부터 받은 결과를 출력할 윈도우의 이름을 지정한다.

 

9. 다음 물음에 대해 적절한 폼 요소를 작성하라.

(1) -5 에서 5 까지 0.5 단위로 숫자 입력이 가능한 폼 요소

<input type="number" min="-5.0" max="5.0" step="0.5">

(2) 달력에 2017년 5월 달로 초기화하고 몇 월 달인지 입력받는 폼 요소

<input type="month" value="2017-05">

(3)"자바스크립트" 문자열과 함께 출력되는 체크박스

<label>자바스크립트<input type="checkbox"></label>

(4)"오후 7시" 문자열과 함꼐 출력되는 라디오버튼

<label>오후 7시<input type="radio"></label>

 

10. 다음은 버튼을 만드는 여러가지 방법이다. 버튼에 대한 설명으로 틀린 것은?

(4) <button type = "button">버튼은<form>없이 사용되어야 한다.

 

'프로그래밍 > WEB' 카테고리의 다른 글

HTML5 문서 구조화  (0) 2020.10.21
HTML5 + CSS3 + Javascript 웹프로그래밍 chapter2 연습문제  (0) 2020.10.20
HTML5 + CSS3 + Javascript 웹프로그래밍 chapter1 연습문제  (0) 2020.10.20
MVC  (0) 2019.03.19
[html&css&js]회원가입 유효성검사  (0) 2018.10.21

이론 문제

 

1. HTML5 표준에 따라 HTML 페이지에 반드시 있어야 하는 것이 아닌 것은?

(2) <img>

 

2. HTML 언어에서 사용되는 옳은 주석은?

(3) <!--이것은 주석문-->

 

3. 다음 중 틀린 것은?

(4) src : sherk.png (바르게 고치면 src = "sherk.png"이다.)

 

4. herf 속성을 가지지 않는 태그는?

(1) <iframe> (<iframe> 인라인 프레임, 태그를 이용하면 현재 HTML 페이지 내에 내장 윈도우를 만들고 다른 HTML 페이지를 출력할 수 있다.)

 

5. target속성을 가지지 않는 태그는?

(1)<iframe>, (4)<img>

 

6. src 속성을 가지지 않는 태그는?

(4)<div>

 

7. 다음 중 블록형 태그가 아닌 것은?

(4)<img>

 

8. 웹 페이지의 제작자를 표현하기 위해  사용되는 태그는?

(2)<meta>

 

9. 웹페이지를 만든 이유를  "자바에 대해 알려주려고"라고 웹 페이지에 내에 적어 놓고자 한다. 가장 적절한 태그는 무엇인가? 태그를 완성하라

<meta name="description" content = "자바에 대해 알려주려고">

 

10. 웹 개발자는 작성된 HTML 페이지들을 www.mysite.com/html/design  폴더 밑에  모두 저장해 두고 어떤 웹페이지에 다음과 같이 링크를 작성하였다.

<base> 태그를 이용하여 베이스 URL을 저장하고, 이 두 <a> 태그를 간략히 다시 작성하라

<head>

<base href = "www.mysite.com/html/design">

</head>

<a href = "dress.html"> 옷 </a>

<a href = "shoes.html"> 신발 </a>

 

11. 웹 페이지에 다음 정보를 작성하려고 한다. 다음 각 경우에 <ol>, <ul>, <dl> 태그 중 어떤 것이 적합 한가?

(1)<ul> 물품에는 순서가 없기 때문

(2)<ol> 출국 수속은 순서가 있기 때문

(3)<dl> 나라와 특징을 묶어서 나열하기 때문

 

12. 링크 텍스트에 대한 디폴트 색에 대해 답하라. 링크 텍스트는 처음에 Blue 색으로 출력된다. 사용자가 일단 방문한 후에는 purple 색으로 출력되고, 방문하기 위해 마우스를 누르고 있는 동안 Red 색으로 출력된다.

 

13. HTML 페이지에 다른 HTML  페이지를 삽입하기 위해서 사용되는 태그는?

(1)<iframe>

 

14. 다음은 오류가 있는 HTML5 문서이다. 틀린 부분을 찾아 완성하라.

(1) <!doctype html>

<head><title></title></head>

<body>

<h3>나의 이야기</h3>

<hr>

나는 자랑스러운 대한민국의 국민입니다.

</body>

</html>

(2)

(1) <!doctype html>

<head><title></title></head>

<body>

<br>Merry Christmas! Happy New Year!

</body>

</html>

 

15.HTML5 문서에 사용하지 않는 것이 바람직한 태그는?

(3)<frameset>

 

16. <source>태그를 사용하여 다음 문장을 수정하라.

<audio controls>

<source src = "hello.mp3" type ="audio/mpeg">

audio를 지원하지 않습니다.

</audio>

 

17. 다음에 작성한 HTML태그의 의도를 자세히 설명하라.

웹 브라우저의 공간에 320 * 240의 크기의 영역을 할당받아 비디오 출력

비디오의 크기를 이 크기에 맞추어 조절. 비디오의 크기는 가로세로 비율을 일정하게 유지.

웹브라우저가 로딩되면 바로 비디오재생 재생, 중단, 음량 조절, 음소거 등의 제어 버튼을 함께 출력.

현재 브라우저가 mp4타입의 비디오를 재생할 bear.mp4 파일을 재생하고, 그럴 수 없는 경우 ogg 타입의 비디오를 재생할 수 있으면 bear.org 파일을 재생한다. 즉 브라우저가 <video>태그를 지원하지 않는 경우, 비디오를 재생하는 대신 브라우저가 video 태그를 지원하지 않습니다. 라고 출력한다

'프로그래밍 > WEB' 카테고리의 다른 글

HTML5 문서 구조화  (0) 2020.10.21
HTML5 + CSS3 + Javascript 웹프로그래밍 chapter3 연습문제  (0) 2020.10.20
HTML5 + CSS3 + Javascript 웹프로그래밍 chapter1 연습문제  (0) 2020.10.20
MVC  (0) 2019.03.19
[html&css&js]회원가입 유효성검사  (0) 2018.10.21

+ Recent posts

티스토리툴바