공간 분할 태그
공간 분할 태그는 다음과 같이 세 가지가 있다.
1. <div>
브라우저 전체 공간을 기준으로 일정 영역을 설정하는 태그로, 크기를 지정하면 고정되며 블록 요소이다.
2. <span>
브라우저의 일부 공간(블록 요소의 일부)을 설정하는 태그로, 인라인 요소이기 때문에 크기 요소 변경이 불가능하다.
3. <iframe>
한 페이지를 여러 html로 구성할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js 프레임워크 강좌 사이트</title>
</head>
<body>
<h3>ifame을 사용한 공간 분할</h3>
<div style="background-color: rgb(127, 181, 226);">
<span>
<a href="iframe_intro.html" target="">인사말</a>
</span>
<span>
<a href="iframe_lecture.html" target="">강의 소개</a>
</span>
<span>
<a href="iframe_info.html" target="">강사</a>
</span>
<span>
<a href="http://icia.co.kr" target="">교육원 홈페이지</a>
</span>
</div>
<p/>
<iframe src="iframe_lecture.html" width="300px" height="200px" name="if_a" frameborder="1" scrolling="no"></iframe>
<iframe src="iframe_basic.html" width="300px" height="200px" name="if_b" scrolling="auto"></iframe>
</body>
</html>* 위 소스코드 속 html 파일을 추가로 만들어줘야 정상 실행됨.
시맨틱 태그
시맨틱 태그는 페이지 영역에 의미를 부여하는 태그로, CSS가 적용되지 않을 경우 특별한 모양이나 형식을 보이지는 않는다. 페이지 완성 또는 작업 중, 유지보수 등을 작성할 시 해당 영역을 쉽고 빠르게 찾아서 처리하는 데 도움을 준다.
태그 종류)
- header : 머리글
- nav : 메뉴
- section : 본문 영역
- article : 세부 영역
- aside : 부가 정보, 광고
- footer : 바닥글
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서의 구조 지정</title>
</head>
<body>
<!-- 헤더 부분 -->
<header>
<h1>문서의 주제목</h1>
<nav>메뉴바1</nav>
<nav>메뉴바2</nav>
</header>
<hr>
<!-- 본문 부분 -->
<section>
<article>
<header>
<h2>부제목 1</h2>
</header>
<p>이 곳은 부 섹션 영역입니다.</p>
</article>
<article>
<header>
<h2>부제목 2</h2>
</header>
<p>이곳은 두 번째 두 섹션 영역입니다.</p>
</article>
</section>
<!-- 부가 정보 부분 -->
<aside>
<h2>부가 정보 제목</h2>
<p>이곳은 이 사이트의 부가적 정보를 제공하는 영역입니다.</p>
<p>이곳에는 광고를 넣기도 합니다.</p>
</aside>
<!-- 사이트 정보(풋터) 부분 -->
<footer>
<small>사이트 정보 표시</small>
</footer>
</body>
</html>'HTML' 카테고리의 다른 글
| 6. form 및 input (0) | 2022.08.12 |
|---|---|
| 4. 오디오/비디오/특수문자 (0) | 2022.08.11 |
| 3. List 및 Table (0) | 2022.08.11 |
| 2. 기본적인 태그 알아보기 (0) | 2022.08.11 |
| 1. HTML 기초 (0) | 2022.08.11 |
