목차
- 페이지 영역 분할 태그 <div> 또는 <span>
1-1. <div> </div>
1-2. <span> </span> - 다른 웹 페이지 추가 <iframe> </iframe>
2-1. <iframe> 속성 - 시맨틱 태그
3-1. HTML5 페이지 구조
3-2. 시맨틱 태그 사용 예시
❗ 여기서 사용한 <style> 지정은 두 가지 방법이다.
① 태그마다 id를 부여하고, <head> 내부에 <style>을 작성한다.
② 해당 시작태그에 style 속성 및 속성값으로 설정한다.
1. 페이지 영역 분할 태그 <div> 또는 <span>
1-1. <div> </div>
- <div> 태그는 이미 존재하는 태그 다음 줄에 영역이 설정된다.
- 블록(block) 형식을 따른다. 즉 공간을 수평으로 분할하며, 페이지상에서 보았을 때 한 줄을 다 차지한 모양새이다.
- 영역간에 딱 붙어서 이어진다.
<body>
<div style="background-color: yellow;">
동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세<br>
무궁화 삼천리 화려강산<br>
대한사람 대한으로 길이 보전하세
</div>
</body>- 시작태그에서 속성 및 속성값으로 style을 지정할 수도 있다.
- 결과적으로 <div> 특성 따라 사각형 박스 모양으로 영역을 지정한 모습이다.
1-2. <span> </span>
- <span> 태그는 개행이 일어나지 않고, 옆으로 연이어서 영역이 설정된다.
- 인라인(inline) 형식을 따른다. 즉 공간을 수직으로 분할하고 있는 것이다.
<body>
<span style="background-color: blue;">
동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세<br>
무궁화 삼천리 화려강산<br>
대한사람 대한으로 길이 보전하세
</span>
</body>
- <span>은 문장 단위로 영역을 지정한다.
2. 다른 웹 페이지 추가 <iframe> </iframe>
- <iframe>은 웹 문서 안에 다른 웹 페이지를 추가하는 태그이다.
- 인라인(inline) 형식을 따른다.
2-1. <iframe> 속성
<iframe width="600px" height="800px" src="1_글자태그.html"></iframe>
<iframe width="600px" height="800px" src="https://developer-r.tistory.com/"></iframe>
| width/height | 페이지 크기 설정(너비/높이) |
| name | 인라인 프레임의 이름 |
| src | 페이지 경로 |
| seamless | 태그의 테두리 생략 |
- src 속성에는 같은 경로에 있는 파일인 경우 "파일명"만 작성할 수가 있다.
- 유튜브(YouTube) 동영상 임베드 또한 <iframe> 통해 가능하다.
3. 시맨틱 태그
3-1. HTML5 페이지 구조
- HTML4, 즉 HTML5 이전 페이지 구조는 위와 같다. <div>, <span> 태그를 이용해 구역을 설정하고, 모든 태그마다 id를 부여해 구분했다.
단점 ①. 사용자마다 id값을 다르게 설정하기에 구조를 이해하는 데 어려움이 따른다. 구조 파악에 따르는 단점은 곧 유지 보수의 어려움으로 이어진다.
단점 ②. 검색 엔진이 웹 소스를 확인할 때도 메뉴와 본문을 분간하기 어렵다.
단점 ③. 다양한 기기에서 이해하기에 구조가 복잡하다.
- HTML5에 들어 시맨틱 태그(semantic tag)가 적용된 모습이다.
- 시맨틱 태그는 특정 기능에 맞는 태그를 사용하여 페이지 구조를 구분케 한다.
- 또, 페이지 구조를 쉽게 파악하고 보다 더 정확한 정보를 검색할 수 있도록 돕는다.
3-2. 시맨틱 태그 사용 예시
<body>
<header>
<h1>제목</h1>
<nav>
<ul>
<li><a>HOME</a></li>
<li><a>게시판</a></li>
<li><a>사진첩</a></li>
</ul>
</nav>
</header>
<section>
<article> "컨텐츠 내용" </article>
<article> "컨텐츠 내용" 여러 개 존재 가능 </article>
</section>
<footer>
사업번호, 사업자 주소, 연락처, 저작권, 링크모음
</footer>
</body>
'Frontend > HTML' 카테고리의 다른 글
| [HTML5] 하이퍼링크 태그 | a | href | target (0) | 2022.02.09 |
|---|---|
| [HTML5] 멀티미디어 태그 | img | audio | video (0) | 2022.02.09 |
| [HTML5] 테이블 태그 | table | rowspan | colspan | thead (0) | 2022.02.08 |
| [HTML5] 목록 태그 | li | ul | ol | dl (0) | 2022.02.08 |
| [HTML5] 글자 태그 | br | p | cite (0) | 2022.02.08 |
