인터넷활용 6 - 2 공간 분할 태그와 시맨틱 태그

용어체크

1. 블록 태그와 인라인 태그

• 블럭태그: 태그를 사용하면 전체 한 줄을 다 차지하는 태그들을 의미
• 인라인 태그: 태그를 표현한 만큼만 표시되는 태그를 의미

2. 공간 분할

• 페이지 레이아웃을 작성할 때 주로 사용되며 페이지 레이아웃은 웹 페이지에서 HTML 요소를 이용하여 문서의 헤더에 해당하는 로고, 배너, 내비게이션 메뉴, 실제 메뉴를 클릭할 때 나타나는 내용, 문서의 footer에 해당하는 저작권, 출처를 표시하기 위한 위치, 크기 등을 결정하는 것

3. 시맨틱 태그

• 공간 분할 태그로 HTML5에서 페이지의 레이아웃 작성용도로 만든 태그

 

학습내용 1. 블록 태그와 인라인 태그 2. 공간 분할 태그 3. 시맨틱 태그 div을 이용하여 페이지 구조를 작성 시맨틱 태그를 이용하여 페이지 구조 작성 학습목표 1. 블록 태그와 인라인 태그의 개념과 종류에 대해서 설명할 수 있다. 2. 공간 분할 태그인 DIV, SPAN 태그에 대해서 설명할 수 있다. 3. 시맨틱 태그에 대해서 설명할 수 있다.

 

 

 

 

 

---

연습문제

 

Quiz 01<span>은 블록 태그에 해당하지 않는다.

• 1 O
• 2 X

정답 :1

해설 :블록 태그에는 <p>, <div>, <ul> 등이 있다.

Quiz 02다음 중 시맨틱 태그에서 메뉴를 만들 때 주로 사용하는 태그는?

• 1 <header>
• 2 <nav>
• 3 <section>
• 4 <footer>

정답 :2

해설 :<nav> 태그를 이용해 메뉴를 만든다.

Quiz 03다음 중 시맨틱 태그에서 본문을 나눌 때 사용하는 태그는?

• 1 <header>
• 2 <nav>
• 3 <section>
• 4 <footer>

정답 :3

해설 :<section> 태그를 이용해 본문을 나눈다.

 

---

학습정리

1. 공간 분할 태그와 시맨틱 태그

• 공간분할 태그를 이용하여 웹페이지의 구조를 나눌 수 있음
• 페이지 레이아웃: 웹 페이지에서 HTML 요소의 위치, 크기 등을 결정
• 페이지 레이아웃을 이용하는 방법에는 DIV이용하는 방법과 시맨틱 태그를 이용하는 방법이 있음
• 시맨틱 태그에는 페이지의 머리말 표현하는 <header>, 메뉴나 하이퍼링크 에 사용되는 <nav>,본문내용에 주로 사용하는 <section>, <article>, 본문에서 벗어나는 내용은 표현하는 <aside>, 꼬리말 영역을 표시하는 <footer>로 구성