개인적으로 읽다 흥미가 생겨 글을 옮겨 보았습니다.
그분의 twiiter이고요 궁금 하신 분들은 한번 구경해보세요.
HTML5와 CSS3를 가지고 위의 이미지와 같은 블로그 페이지를 만들어 볼려고 한다.
구조는 Header에는 title, 수평네비게이션, content area에는 comments, form, sidebar
와 footer가 위치한다.
HTML5는 HTML의 새로운 버전이다. 페이지를 더욱 semantic하게 만들어준다.
search engines와 screenreders를 사용하는 것을 더욱 쉽게 해준다.
사용자들의 경험을 향상 시켜줄것이다. HTML5는 fancy APIs(screen에 다양한 그래픽을 표현,
offline에서 데이터 저장, dragging와 dropping등 많은 내용들을 포함하고 있다.
기본적인 구조.
다음과 같은 mark up을 설명할려고 한다.
<!doctype html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<header>
<h1>Page title</h1>
</header>
<nav>
<!-- Navigation -->
</nav>
<section id="intro">
<!-- Introduction -->
</section>
<section>
<!-- Main content area -->
</section>
<aside>
<!-- Sidebar -->
</aside>
<footer>
<!-- Footer -->
</footer>
</body>
</html>
보통 HTML markup와 같이 보이지만 몇가지 집고 넘어가야 할 부분이 있다.
HTML5에서 doctype은 하나입니다. 페이지의 시작부분에 <!doctype html>로 선언을 해준다.
이것은 HTML문서라는 것을 브라우져에게 알려줍니다.
- 이미 알려진 태그(h1)은 새로운 태그인 header가 감싸고 있다. (페이지 타이틀, logo등)
contents의 table 또는 search form등도 포함할 수 있다.
header는 일반적으로 h1~h6의 heading tag를 포함하고 있다.
header는 페이지의 전반적인 것을 소개하는데 사용되어 진다.
또한, section태그에서는 더 세부적인 내용을 소개 할 수 있다.
- nav-tag는 navigation element를 포함하는데 사용되어졌다(사이트의 메인 네비게이션 또는 next/previous 링크같은
특정화된 네비게이션들 같은 곳에)
- section-tag는 문서의 section 위치에 대해 사용되어 졌다. markup 같은 종류 그리고 multiple section들을
각각 안쪽에서 감싸고 있다.
- aside는 메인 컨텐츠와 관련된 컨텐츠(sidebar)를 감싸고 있다.
- footer-tag는 메인컨텐츠에 대한 추가적인 정보를 포함하고 있다. (copyright, 문서의 링크등)
우리가 만드는 페이지들의 다양한 컨텐츠들을 div를 사용하는 대신에 semantic적인 markup을 할 수 있다.
이렇게 함으로써 검색엔진, screenreder에서 우리의 페이지들을 쉽게 표현 할 수 있다.
1. 네비게이션의 마크업
네비게이션은 HTML4또는 XHTML처럼 작성할 수 있고, unorder list를 nav-tags들 안에 위치시키는
것이 중요하다.
<nav>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
<li class="subscribe"><a href="#">Subscribe via. RSS</a></li>
</ul>
</nav>
2. introduction 마크업
우리는 section tag를 문서에 사용하는것은 새로운 section을 정의하는 것이다.
<section id="intro">
<header>
<h2>Do you love flowers as much as we do?</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</section>
section태그에 id를 부여함으로써 후에 styling을 구분 할 수 있다.
우리는 h2태그를 감싸는 header태그를 사용할 수 있다.
게다가 이것은 문서의 전체를 표현하고 header-tag는 개별적인 section태그를 서술하는데 사용되어 진다.
3. Main content area 마크업
Main content area는 세개의 섹션으로 구성되어 있다. (블로그 포스트, comments와 comment form)
HTML5의 새로운 구조 태그를 사용하는 쉽다.
- Blog Post Mark up
<section>
<article class="blogPost">
<header>
<h2>This is the title of a blog post</h2>
<p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by
<a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus
eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies
elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra
dictum, laoreet id odio...</p>
</article>
</section>
새로운 섹션 태그와 article-tag로 blog post를 감싼다.
article-tag는 blog, discussion, encyclopedia 등 개별적인 목록의 위치에 사용되어 진다.
하나의 article태그를 가지고 single post의 내용을 보고 있지만 blog의 front page에서
article-tag를 각각의 post를 감쌀 수 있다.
header태그는 blog post의 metadata와 현재시간에 사용되어 졌다. 그럼으로써 작성자는 언제 섰는지
누가 썼는지 얼마나 많은 코멘트가 달렸는지를 알려줄 수 있다.
timestamp는 p태그로 감싸고 있다. 이 태그는 HTML5의 새로운 태그이고 시간을 나타내는 태그로
사용되어 졌다.'
datetime의 내용에 대한 속성은 다음과 같다.
2. 달도 똑같다.
3. 날짜
4. T는 내가 현재 있는 곳에 시간을 나타낸다.
5. 지역시간은 hh:mm:ss형태이다.
6. 시간은 GMT 기준이다.
- Comments 마크업
새로운 속성이나 새로운 태그가 사용되지는 않았다.
<section id="comments">
<header>
<h3>Comments</h3>
</header>
<article>
<header>
<a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">
June 29th 2009 at 23:35</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut.</p>
</article>
<article>
<header>
<a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">
June 29th 2009 at 23:40</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut.</p>
</article>
</section>
- Comment Form 마크업
HTML5에서는 forms태그에 관련된 향상된 여러가지들을 소개하고 있다.
client-side validation을 할 수 있다.(fields, emails 등)
브라우져에서 우리의 정보를 보호 해줄 수 있다.
<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for="name">Name</label>
<input name="name" id="name" type="text" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Website</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Comment</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p><input type="submit" value="Post comment" /></p>
</form>
input에 두개의 새로운 타입이 생겼다. email, url이다. email은 사용자가 email형식에 맞게 입력하는 것이고,
url은 website address에 맞는 형태로 입력하는 것이다.
속성으로 required를 쓴다면 사용자들은 빈필드로 submit할 수 없다.
required는 boolean 속성이다.
4. Sidebar와 Footer 마크업
- sidebar와 footer의 마크없은 간단하다. sections 태그로 몇몇 컨텐츠를 가지고 aisde-, footer-tag로 감싼다.
5. CSS3 Styling
- CSS3는 styles, selectors, cascade의 원리로 만들어졌다. 새로운 특징들을 추가 시켰고,
새로운 selectors와 pseudo-classes와 속성들을 포함하고있다. 이러한 특징들을 잘 사용하면
더욱 쉽게 layout을 나누고 설정할 수 있다.
6. 기본 셋팅
- 시작하기 앞서 typography, background-color등 기본적인 규칙들을 정의한다.
/* Makeshift CSS Reset */
{ margin: 0; padding: 0; }
/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article { display: block; }
body { margin: 0 auto; width: 940px; font: 13px/22px Helvetica, Arial, sans-serif; background: #f0f0f0; }
h2 { font-size: 28px; line-height: 44px; padding: 22px 0; }
h3 { font-size: 18px; line-height: 22px; padding: 11px 0; }
p { padding-bottom: 22px; }
먼저 margin과 padding을 설정한다.
새로운 HTML5태그들을 block으로 설정했다. 몇몇 브라우져들은 HTML5태그들을 제대로 인식하지 못한다.
Header는 추가적인 설정을 요구하지 않는다. 그렇기때문에 navigation 설정부터 시작할려고한다.
7. Navigation Styling
- Navigation bar는 window의 전체 너비가 필요하다. 그래서 몇가지 style을 추가했다.
nav { position: absolute; left: 0; width: 100%; background: url("nav_background"); }
nav-element를 absolutely로 position하고 위치를 left한 다음 너비를 100%로 맞춰주었다.
layout경계에 list태그를 써서 center정렬할려고 한다.
nav ul { margin: 0 auto; width: 940px; list-style: none; }
navigation items추가적인 설정을 하고 layout에 맞는 grid정렬을 할려고 한다.
nav ul li { float: left; }
nav ul li a {
display: block;
margin-right: 20px;
width: 140px;
font-size: 14px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: #777;
}
nav ul li a:hover { color: #fff; }
nav ul li.selected a { color: #fff; }
nav ul li.subscribe a {
margin-left: 22px;
padding-left: 33px;
text-align: left;
background: url("rss.png") left center no-repeat;
}
8. Introduction Styling
- introduction 마크업의 간단한 예이다.(heading과 텍스트문장의 section)
CSS3의 새로운 속성을 사영하여 훨씬 나은 모습을 보여줄것이다.
#intro { margin-top: 66px; padding: 44px; background: #467612 url("intro_background.png") repeat-x;
background-size: 100%; border-radius: 22px; }
첫번째 새로운 속성은 background-image의 size를 사용하게 해준다. 우리가 사용한 예제에서는
박스가 컨텐츠의 추가하는 만큼 유동적이라면, gradient background는 그만큼 커질 것이다.
22px만큼의 round코너를 설정하였다. 각각의 코너에 각기 다른값을 주어 설정 할 수 있다.
사용할 수 있습니다. background-size는 새로운 버전의 safari, opera, konqueror가 지원합니다.
background-radius는 새로운 버전의 safari, firefox에서 지원하고 있습니다.
#intro {
...
/* Background-size not implemented yet */
-webkit-background-size: 100%;
-o-background-size: 100%;
-khtml-background-size: 100%;
/* Border-radius not implemented yet */
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
}
background-color를 정의하면 firefox와 같은 브라우져에서는 background-size같은 속성을
지원하지 않지만 주요한 문제는 없다.
이제 heading과 text를 style하는게 필요하다.
#intro h2, #intro p {
width: 336px;
}
#intro h2 {
padding: 0 0 22px 0;
font-weight: normal
color: #fff;
}
#intro p {
padding: 0;
color: #d9f499;
}
CSS3의 지원으로 #intro에 두번째 background image를 쉽게 추가할 수 있다.
#intro {
...
background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
url("intro_flower.png") top rightright (653px 100%) no-repeat;
...
}
2개의 이미지를 background-images에서 면적을 너비를 명시했고, 이미지들은 겹치지 않도록 설정했다.
inline image와 positioning CSS를 이용하여 할 수 있다.
9. Content Area And Sidebar Stylying
- Content Area And Sidebar는 각기 다른위치에 정렬되어 있다. 기존에는 float을 사용하여
작업했지만 CSS3에서는 tables를 사용할 것이다.
table이라는 얘기에 당황을 하겠지만, 예전에도 table로 작업을 했었고 아직도 하고 있다.
우리는 table을 사용하여 layout을 만들지 않는다. 하지만 CSS3에서는 markup으로 table을
사용하지 않고 CSS속성으로 사용한다. 한번 시작해보자.
<div id="content">
<div id="mainContent">
<section>
<!-- Blog post -->
</section>
<section id="comments">
<!-- Comments -->
</section>
<form>
<!-- Comment form -->
</form>
</div>
<aside>
<!-- Sidebar -->
</aside>
</div>
semantic적으로 의미있게 만들고 그것을 styling할것이다. #content div태그를 table과 같이 사용할 것이다.
#mainContent를 table-cells로 설정할 것이다. CSS3로 하면 굉장히 쉽다.
display: table;
}
#mainContent {
display: table-cell;
width: 620px;
padding-right: 22px;
}
aside {
display: table-cell;
width: 300px;
}
더이상 float은 사용 안해도 된다. float을 해제시켜주지 않아도 된다는 것이다.
이 방법은 layout을 만드는데 더 쉽게 해준다.
- Blog Post Styling
Header부분은 multi-colum layout에서 참고하길 바란다.
Multiple columns
text의 Multiple columns는 텍스트를 자르는 방법없이는 불가능하다.
div를 여러번 감싸는 것으로 여러 문단으로 나누는 방법이 있지만, CSS3는 정말 쉽게 처리해준다.
<div>
<p>Lorem ipsum dolor sit amet...</p>
<p>Pellentesque ut sapien arcu...</p>
<p>Vivamus vitae nulla dolor...</p>
...
</div>
2가지 간단한 속성을 넣어 추가할 수 있다.
.blogPost div {
column-count: 2;
column-gap: 22px;
}
2개의 columns과 사이의 간격을 22px만큼 띄길 원한다. 추가적인 div가 필요하다.
현재는 하나 이상의 column을 span태그로 만드는방법을 지원하지 않기 때문이다.
그러나 앞으로는 column-span속성으로 해결 할 수 있다.
.blogPost {
column-count: 2;
column-gap: 22px;
}
.blogPost header {
column-span: all;
}
column-count, column-gap은 지원되는 브라우져가 많지 않다(safari,firefox)
하지만 브라우져를 명시하는 속성으로 사용할 수 있다.
.blogPost div {
/* Column-count not implemented yet */
-moz-column-count: 2;
-webkit-column-count: 2;
/* Column-gap not implemented yet */
-moz-column-gap: 22px;
-webkit-column-gap: 22px;
}
- Box shadow
밑의 blog post에서 images를 가깝게 보고자 하면 drop-shadow를 볼 수 있을것이다.
CSS3속성을 이용하여 box-shadow속성을 설정하였다.
.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}
한다. 마지막 7px은 border를 흐리게 표현한다. 0으로 설정하면 solid형태로 출력된다.
마지막은 그림자의 기초색을 설정한다. 이 색은 번지게 표현되며 그림자의 번짐을
더욱 표현해준다.
아직 브라우져에서는 적용이 되지않고 safari에서만 사용이 가능하다.
.blogPost img {
margin: 22px 0;
-webkit-box-shadow: 3px 3px 7px #777;
}
- comments에서의 zebra-stripting
zebra-striping(나열된 엘레멘트중 두번째 엘레멘트에 hilighting이 된것)는 기존엔 자바스크립트를 통한
엘레멘트 선택을 포함한다. 모든 엘레멘트에 대해서 반복문을 이용하여 홀수엘레멘트만 hilighting이
되도록 하였다. 하지만 CSS3의 pseudo-class(nth-child)를 사용하여 해결하는 방법을 얘기할려고 한다.
이 방법은 자바스크립트없이 간단하게 해결 가능하다.
section#comments article:nth-child(2n+1) {
padding: 21px;
background: #E3E3E3;
border: 1px solid #d7d7d7;
/* Border-radius not implemented yet */
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}
2n+1은 매우 간단하다.
- 2n selects는 두번째 아이템을 선택한다. 3n이라고 쓰면 3번째 아이템을, 4n이면 4번째 아이템이다.
- +1이란 모든 브라우져에서 엘레멘트1(두번째 엘레멘트)를 시작으로 인식한다.
programming에서 얘기하는 배열과 동일하게 array의 시작은 0이고 이것 또한 동일하다.
element1은 두번째 엘레멘트를 얘기하는 것이다.
다음과 같이 간단하게 쓸 수도 있다.
section#comments article:nth-child(odd) { ... }
두가지 속성이 있다. odd와 even
완료 페이지는 밑의 링크에서 확인 할 수 있다.
see the final design
http://nettuts.s3.amazonaws.com/373_html5/final.zip
HTML5, CSS3를 사용하여 layout을 위해 float을 사용하지 않아도 될 것이고
zebra-stripe table또는 background images 너비, 높이를 위해서 스크립트를 작성하는 시간을
줄일 수 있다.
IE6,7에서는 정상적으로 보이지는 않습니다. HTML5, CSS3를 지원하지 않고
있기 때문이고 CSS3의 지원은 IE8부터 되고 HTML5를 지원하는 방법은 제가 올린 글 중
HTML5 지원하지 않는 IE에서 HTML5 사용하는 방법
을 참고하시면 될 것 같습니다.
원본주소 : http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/
최근 덧글