퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
제대로 배워보는 html과 css, 그리고 웹표준 4.각종 html요소 알아보기
4.1 그룹화와 섹셔닝
xhtml은 수치문자 참조를 쓰는 게 권장 사항이다. 각각 문자 실제 참조, 수치 문자 참조형.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | English Designs</title>
</head>
<body>
<dl class="skip-nav">
<dt><strong>skip navaigation</strong></dt>
<dd><a href="#contents">Skip to content</a></dd>
</dl>
<hr>
<div id="wrap">
<!-- header -->
<div id="header">
<h1>Enlighten Designs</h1>
<h2>Main menu</h2>
<ul>
</ul>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- contents-->
<div id="contents">
<h2>About</h2>
<h2>Contact us</h2>
</div>
<!-- aside -->
<div id="aside">
<h2></h2>
</div>
</div>
<!-- //container -->
<!-- footer -->
<div id="footer">
</div>
<!-- footer -->
</div>
</body>
</html>
html5에서 sectioning tag가 추가되었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | English Designs</title>
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<dl class="skip-nav">
<dt><strong>skip navaigation</strong></dt>
<dd><a href="#contents">Skip to content</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>
<!-- aside -->
<aside id="aside">
<h2></h2>
</aside>
</div>
<!-- //container -->
<!-- footer -->
<footer id="footer">
</footer>
<!-- footer -->
</div>
</body>
</html>맨 위는 div로만 쭉 작업을 했고
아래는 sectioning 요소를 씀. div 태그가 아닌 각 영역 별로 특별한 태그를 쓸 수 있게 한 것.
html5shiv -->html5 요소를 지원하지 않는 브라우저에서도 html5를 표현할 수 있게끔 해주는 프로그램
4.2 웹 페이지 제작(Markup) 실습 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | English Designs</title>
</head>
<body>
<dl class="skip-nav">
<dt><strong>skip navaigation</strong></dt>
<dd><a href="#contents">Skip to content</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="#">Service</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
</address>
<p><a href="#">More contact information...</a></p>
</div>
<!-- aside -->
<div id="aside">
<h2>Aside</h2>
<p>Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati enim iusto illo similique debitis unde ipsam quia totam error magni recusandae, animi dolor quisquam dolore deleniti fuga ipsa ea. Perferendis.</p>
</div>
</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="#">Terms of Trade</a> -<dd>
<dd><a href="#"></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>
참고 카페 : cafe.naver.com/wepub
참고 사이트 : www.subcide.com/examples/creating-a-css-layout-from-scratch/
CompanyName - PageName
Enlighten Designs 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. We are currently undergoing a 'face lift', so if you have any questions or would like
www.subcide.com
'개발 공부 > html & css' 카테고리의 다른 글
| 제대로 배워보는 html과 css, 그리고 웹표준 7. 테이블~8. 배치 스타일 (0) | 2020.09.11 |
|---|---|
| 제대로 배워보는 html과 css, 그리고 웹표준 5. 폰트~6. 배경 스타일 (0) | 2020.09.10 |
| 제대로 배워보는 html과 css, 그리고 웹표준 5.css기초 (0) | 2020.09.09 |
| 제대로 배워보는 html과 css, 그리고 웹표준 3.각종 html요소 알아보기 (0) | 2020.09.09 |
| (New) 퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준 1. 설치~2.html작성기초 (0) | 2020.07.09 |
