[HTML로 웹페이지 제작 실습 01]
1. 웹페이지를 제작 할 예제 준비
- 원본 화면
- 그룹화
출처 : https://cafe.naver.com/wepub
출처 : http://www.subcide.com/examples/creating-a-css-layout-from-scratch/
2. 그룹화하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About | Enlighten Designs</title>
</head>
<body>
<dl class="skip-nav">
<dt><strong>skip navigation</strong></dt>
<dd><a href="#contents">skip to contents</a></dd>
</dl>
<hr>
<div id="wrap">
<!-- header -->
<div id="header">
<h1>Enlighten Designs</h1>
<h2>Main menu</h2>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- contents -->
<div id="contents">
<h2>About</h2>
<h2>Contact Us</h2>
</div>
<!-- //contents -->
<!-- aside -->
<div id="aside">
<h2>Aside</h2>
</div>
<!-- //aside -->
</div>
<!-- //container -->
<!-- footer -->
<div id="footer">
</div>
<!-- //footer -->
</div>
</body>
</html>위 코딩이 적용된 웹화면
-
ID : 큰 영역이나 중요한 영역을 그룹화할때 사용.
-
CLASS : id보다 작은 영역이나 반복되는 디자인등을 그룹화할때 사용.
-
a href="#contents" : id contents를 이용해서 class로 그룹화하여 '본론으로 바로가기' 활성화하기 위해 적용된 링크태그와 속성.
<dl class="skip-nav">
<dt><strong>skip navigation</strong></dt>
<dd><a href="#contents">skip to contents</a></dd>
</dl>3. HTML5 섹셔닝(sectioning)을 이용해서 그룹화
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About | Enlighten Designs</title>
<!-- 아래는 조건부 주석 | 만일 익스프로어9보다 낮은 파일에서 적용된다는 의미 -->
<!--[if lt IE 9]>
<script src="js/파일명"></script>
<![endif]-->
</head>
<body>
<dl class="skip-nav">
<dt><strong>skip navigation</strong></dt>
<dd><a href="#contents">skip to contents</a></dd>
</dl>
<hr>
<div id="wrap">
<!-- header -->
<header id="header">
<h1>Enlighten Designs</h1>
<nav>
<h2>Main menu</h2>
</nav>
</header>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- contents -->
<section id="contents">
<h2>About</h2>
<h2>Contact Us</h2>
</section>
<!-- //contents -->
<!-- aside -->
<aside id="aside">
<h2>Aside</h2>
</aside>
<!-- //aside -->
</div>
<!-- //container -->
<!-- footer -->
<footer id="footer">
</footer>
<!-- //footer -->
</div>
</body>
</html>- sectioning : 제목이 필수.
- section : 본문
- article
- nav : 메인메뉴
- aside
- header
- footer
- html5 shiv 사용방법
-
Internet Explorer8 이전버전에서는 섹셔닝요소 반영이 안된다. 아직 관공서 등 현장에서는 Internet Explorer8을 사용하는 곳이 많다.
-
html5 shiv 설치
- 구글검색창에 html5 shiv을 검색하고 html5shiv.min.js나 html5shiv.js 파일을 다운받아서 열어준다.
- Ctrl + S를 눌러 적용이 필요한 폴더에 새폴더를 만들어 저장한다.
- 조건부 주석
- 만일 Internet Explorer9보다 낮은 파일에서 저장된 파일을 적용된다는 의미
<!--[if lt IE 9]>
<script src="새폴더/저장된 파일명"></script>
<![endif]-->4. 각 그룹 채워넣기
- 연습중이므로 링크는 #으로 고정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About | Enlighten Designs</title>
</head>
<body>
<dl class="skip-nav">
<dt><strong>skip navigation</strong></dt>
<dd><a href="#contents">skip to contents</a></dd>
</dl>
<hr>
<div id="wrap">
<!-- header -->
<div id="header">
<h1><a href="#"><img src="img/logo_enlighten.gif" alt="Enlighten Designs"></a></h1>
<h2>Main menu</h2>
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVUCES</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- contents -->
<div id="contents">
<h2><img src="img/about.gif" alt="About"></h2>
<p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio.</p>
<p>We are currently undergoing a 'face lift', so if you have any questions or would like more information about the services we provide please feel free to contact us.</p>
<h2><img src="img/contact.gif" alt="Contact Us"></h2>
<address>
<em>Phone:</em> (07) 853 6060 <br>
<em>Fax:</em> (07) 853 6060 <br>
<em>Email:</em> <a href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a> <br>
<em>P.O Box:</em> 14159, Hamilton, New Zealand <br>
</address>
<p><a href="#">More contact information...</a></p>
</div>
<!-- //contents -->
<!-- aside -->
<div id="aside">
<h2>Aside</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</p>
</div>
<!-- //aside -->
</div>
<!-- //container -->
<!-- footer -->
<div id="footer">
<dl>
<dt><strong>bottom menu</strong></dt>
<dd><a href="#">About</a> -</dd>
<dd><a href="#">Services</a> -</dd>
<dd><a href="#">Portfolio</a> -</dd>
<dd><a href="#">Contact Us</a> -</dd>
<dd><a href="#">Terms of Trade</a></dd>
</dl>
<p>
Copyright © Enlighten Designs <br>
Powered by <a href="#">Enlighten Hosting</a> and <a href="#">Vadmin 3.0 CMS</a>
</p>
</div>
<!-- //footer -->
</div>
</body>
</html>위 코딩이 적용된 웹화면
즐겁게 배우고 꾸준히 블로깅하는 개발자입니다 ;>