HTML4
HTML4 으로 화면을 구성할 땐, div를 쓴다. div가 많아지면 구분이 어렵고 복잡해진다.
네이버의 소스를 보면, HTML4로 구성돼 있음. 다음의 소스를 보면, HTML4와 HTML5가 혼합돼 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
HTML4 버전으로 표현
div가 너무 많아서 복잡하다.
-->
<div>
<h1>광명융합기술교육원 학과소개</h1>
<div>
<ul>
<li><a href = "#">데이터분석</a></li>
<li><a href = "#">바이오융합</a></li>
<li><a href = "#">전기에너지시스템</a></li>
<li><a href = "#">증강현실시스템</a></li>
</ul>
<ol>
<li>데이터분석</li>
<li>바이오융합</li>
<li>전기에너지시스템</li>
<li>증강현실시스템</li>
</ol>
</div>
<div>
<h3>데이터분석과</h3>
<p>
안녕하세요 <b>데이터분석과</b>입니다.
</p>
</div>
<div>
<h3>바이오융합과</h3>
<p>
안녕하세요 <span style="background-color: yellow">바이오융합과</span> 입니다.
</p>
</div>
<div>
<h3>전기에너지시스템과</h3>
<p>
안녕하세요 전기에너지시스템과입니다.
</p>
</div>
<div>
<h3>증강현실시스템</h3>
<p>
안녕하세요 증강현실시스템과입니다.
</p>
</div>
</div>
<div>
<div>
한국폴리텍대학 광명융합기술교육원
</div>
<div>
<i>주소 : 경남 거제시 오리로</i>
</div>
</div>
</body>
</html>HTML5
화면을 크게 'header(머리)', 'section(가슴)', 'footer(발)' 3개로 구성할 수 있다.
header(머리) : 사이트명, 로고 포함
--- nav : 사이트의 메뉴 포함
section(가슴) : 문서의 내용
--- article : 문서의 내용이 많은 경우 세부적으로 구분
--- aside : 문서의 주내용을 제외한 나머지 영역에 배치
footer(발) : 사이트의 정보(주소, 전화번호), 저작권, 부가정보
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
HTML5 버전의 화면 구성
header(머리) : 사이트명, 로고 포함
nav : 사이트의 메뉴 포함
section(가슴) : 문서의 내용
article : 문서의 내용이 많은 경우 세부적으로 구분
aside : 문서의 주내용을 제외한 나머지 영역에 배치
footer(발) : 사이트의 정보(주소, 전화번호), 저작권, 부가정보
-->
<header>
<h1>광명융합기술교육원 학과정보</h1>
<nav>
<ul>
<li><a href ="#">데이터분석과</a></li>
<li><a href ="#">바이오융합과</a></li>
<li><a href ="#">전기에너지시스템과</a></li>
<li><a href ="#">증강현실시스템과</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h3>데이터분석과</h3>
<p>
안녕하세요 <strong>데이터분석과</strong>입니다. <!-- strong : 볼드 기능을 하는 태그 -->
</p>
</article>
<article>
<h3>바이오융합과</h3>
<p>
안녕하세요 <mark>바이오융합과</mark>입니다. <!-- mark : 형광펜 기능을 하는 태그. -->
궁금하신 사항이 있나요? 그럼 <mark style ="background-color: orange">010-5555-5555</mark>로 연락주세요.
</p>
</article>
<article>
<h3>전기에너지시스템과</h3>
<p>
안녕하세요 전기에너지시스템과입니다.
</p>
</article>
<article>
<h3>증강현실시스템과</h3>
<p>
안녕하세요 증강현실시스템과입니다.
</p>
</article>
</section>
<footer>
<address>주소: 경기도 광명시 오리로 904 전화번호 : 02-2618-2306</address>
</footer>
</body>
</html>'웹 프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] 멀티미디어 삽입하기 HTML4 VS HTML5 (0) | 2020.06.11 |
|---|---|
| [HTML] 목록 접기, 같은 문서 내 이동(details , a 태그의 #) (0) | 2020.06.11 |
| [HTML] 정적인 웹사이트 구현하기 (0) | 2020.06.11 |
| [HTML] 여러개 중 하나를 선택하기 <select >, <option>, <datalist> (0) | 2020.06.11 |
| [HTML] 이미지 띄우기(경로 지정 방법: 상대, 절대 / 경로 404 에러 주의) <img> 태그 (0) | 2020.06.11 |
