[HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS3)

IBM에서 제공하는 강좌를 보고 정리한 내용입니다.
IBM - HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기

글순서
1.자주쓰는 태그 정리
[HTML5] 1-1. 문서에서 자주쓰이는 태그 정리
[HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS)
[HTML5] 2. 동영상 재생
[HTML5] 3. 기존 컨트롤들의 새기능과 새 스타일 적용
[HTML5] 4. 캔버스를 이용하여 이미지그리기

HTML코드는 이전글을 참고 하세요.
샘플코드를 실행하면 다음과 같이 표시 됩니다.

1.전체 선택자(Universal selector)

문서의 전체를 나타네는 별(*)입니다.
(참고 : W3C - 6.2. Universal selector)

* {
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

당연한 이야기지만 젠처 선택자는 우선순위가 가장 낮습니다.
다른 스타일이 모두 적용된후 적용되는 스타일입니다.
그말은 다른 스타일을 지정하지 않는 경우 전채 선택자로 생성된 CSS가 적용된다는 의미입니다.

2.본문(body)

이전부터 있던것이니 따로 설명은 하지 않겠습니다. 

body {
    width: 480px; margin: 0px auto;
}

샘플코드를 보시면 마진(margin)을 0px에 auto로 했는데 이렇게 하면 자동적으로 중앙정렬이 됩니다.
(마진을 양쪽에서 공평하게 가져가기 때문입니다.)
바디에 들어가있는 스타일이므로 본문에 중앙에 표시되는 효과가 있죠.

3.헤더(header)

이전부터 있던것이니 따로 설명은 하지 않겠습니다. 

header h1 {
    font-size: 36px; margin: 0px;
}

header h2 {
    font-size: 18px; margin: 0px; color: #888;
    font-style: italic;
}

이전글에서 헤더(header)는 보통 섹션(section)의 머리 역활을 한다고 했습니다.
이런 해더에 h1,h2 같은 소주제는 h1은 제목, h2는 소제목으로 일괄성있게 문서를 보일수 있도록 스타일을 적용합니다.

 

4.네비게이션(nav)

네비게이션 스타일은 블록테그(ul, ol, li)를 포함할수 있습니다.

nav ul {
    list-style: none; padding: 0px; display: block;
    clear: right; background-color: #666;
    padding-left: 4px; height: 24px;
}

nav ul li {
    display: inline; padding: 0px 20px 5px 10px;
    height: 24px; border-right: 1px solid #ccc;
}

nav ul li a {
    color: #EFD3D3; text-decoration: none;
    font-size: 13px; font-weight: bold;
}

nav ul li a:hover {
    color: #fff;
}

블록태그에 맞는 스타일은 모두 적용이 가능합니다.

5.아티클(article)

ibm의 샘플에 아티클에는 눈여겨 봐야 할것이 두가지 있는데 그림자 효과와 날짜 표시 입니다.

article > header time {
    font-size: 14px; display: block; width: 26px;
    padding: 2px; text-align: center; background-color: #993333;
    color: #fff; font-weight: bold; -moz-border-radius: 6px;
    -webkit-border-radius: 6px; border-radius: 6px; float: left;
    margin-bottom: 10px;
}

article > header time span {
    font-size: 10px; font-weight: normal;
    text-transform: uppercase;
}

article > header h1 {
    font-size: 20px; float: left;
    margin-left: 14px; text-shadow: 2px 2px 5px #333;
}

article > header h1 a {
    color: #993333;
}

article > section header h1 {
    font-size: 16px;
}

article p {
    clear: both;
}

일단 그림자 효과를 보시면
text-shadow: 2px 2px 5px #333;
이렇게 하여 그림자의 크기 방향 색등을 지정할수 있습니다.
(참고 : W3C - 10.3. Text Shadows: the ‘text-shadow’ property)

날짜표시에 보면 border-radius를 이용해 모서리를 곡선으로 처리한 것을 볼수 있습니다.
(참고 : W3C - 3.3 The 'border-radius' properties, CSS3 module: Border)

6.푸터(footer)

푸터도 다른 스타일과 같으므로 별다른 내용은 없습니다.

footer p {
    text-align: center; font-size: 12px;
    color: #888; margin-top: 24px;
}

보통 푸터는 맨마지막에 저작권 정보같은 것을 표시하게 되므로 본문과 차별되게 보이게 하죠.