Blog 본문

공지사항

안녕하세요. 

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


HTML5 Elements CSS3 Properties의 문서 내용이 업데이트되어 알려드립니다.
(각 메뉴명이 CSS Attribute → CSS PropertiesCSS3 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

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


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

감사합니다.


Posted by darum

전체 댓글