HTML5 Elements, CSS3 Properties 문서 업데이트 안내

안녕하세요. 

웹표준을 다루다! Darum 담당자입니다.

HTML5 Elements와 CSS3 Properties의 문서 내용이 업데이트되어 알려드립니다.
(각 메뉴명이 CSS Attribute → CSS Properties, CSS3 Attribute → CSS3 Properties 로 변경되었습니다.)

▶ HTML5 Elements 바로가기 : http://darum.daum.net/convention/html/html5_elements

▶ CSS3 Properties 바로가기 : http://darum.daum.net/convention/css/css3_properties

◈ HTML5 Elements 업데이트 사항

☞ 아래와 같이 HTML5 New Element 에 main 내용 추가 및 문서 하단에 HTML5 Changed Elements 와 HTML5 Obsolete Elements 내용이 추가되었습니다.

main

Category

Flow Content

의미

• 문서나 애플리케이션의 body 영역의 주요 콘텐츠 영역
• 접근성을 향상시키며, 검색엔진에서의 콘텐츠 가중치를 향상시킨다.

사용

• 문서의 고유한 내용으로 페이지 내에서 단일 적용한다. (사이트 네비게이션 링크, 저작권 정보, 사이트의 로고 및 배너 등은 제외)
• article, aside, footer, header, nav 의 하위 요소로 사용할 수 없다.

HTML5 Changed Elements

address, b, cite, dl, hr, i, label, noscript, s, small, strong, u, a, menu

HTML5 Obsolete Elements

시각적인 표현으로서 CSS로 처리할 수 있는 요소, 사용성과 접근성을 저해하는 요소, 지금까지 거의 사용되지 않았던 요소

◈ CSS3 Properties 업데이트 사항

☞ CSS3 브라우저 지원현황과 아래와 같이 CSS3 속성별로 구분하여 타이틀이 제공되었습니다.

        - Borders

      - Backgrounds

      - Gradients

      - Text Effect

      - Fonts, Transitions

      - Transforms

      - Animations

      - Multiple Columns

      - User Interface

☞ 각 CSS3 속성에 1. Summary 2. Syntax 3. Example 로 정리되어 이전보다 가독성이 높아졌습니다.

예시)

box-shadow

1. Summary

박스모델의 그림자 효과를 주는 속성

2. Syntax

box-shadow: (가로 오프셋 거리) (세로 오프셋 거리) (blur radius) (그림자 색상);

• 가로 오프셋 거리 : 그림자가 가로로 얼마나 떨어져 있는지 지정. (양수:오른쪽, 음수:왼쪽)
• 세로 오프셋 거리 : 그림자가 세로로 얼마나 떨어져 있는지 지정.
• blur radius : 그림자의 번지는 정도(0:그림자 효과 X)

3. Example

box-shadow:10px 10px 5px #888;

 - 업데이트된 문서의 자세한 사항은 HTML5 Elements 와 CSS3 Properties 에서 확인하실 수 있습니다.

감사합니다.