HTML5와 CSS3에는 흥미로운 새 기능들이 많이 포함되어 있습니다. 안타깝지만, 이런 매력있는 기능들은 Firefox, Safari/Webkit, Opera 등의 일부 브라우저에만 구현되어있습니다. 이 글에서 여러분이 HTML5 & CSS3에 대한 팁과 통찰을 얻었으면 합니다. 시작합니다!

새로운 구조적 요소
HTML5에서는 새로운 구조적 요소가 추가되었습니다. 이런 요소들은 데이터를 보다 좋고, 간결하고, 명료한 방식으로 마크업할 수 있도록 도와줍니다. 검색 엔진은 header, nav, footer 등과 같은 요소를 인식함으로써 웹 페이지의 어느 부분이 컨텐트인지 보다 정밀하게 알 수 있습니다.

Webkit의 transform 속성
객체는 크기를 조절할 수 있고, 회전하거나 비틀 수도 있으며, 변형될 수 있습니다. 이 속성은 사용자와 상호 작용하는 객체에 애니메이션을 추가할 수 있도록 합니다. 사용자에게 인상을 심어줄 수도 있고, 슬라이드와 같은 제품에 사용할 수도 있을 것입니다.

새로운 CSS3 속성
CSS3에는 모서리 둥글게 다듬기(Border-radius), 여러개의 배경(Multiple Background), 텍스트 그림자(Text-shadow)와 박스 그림자(Box-shadow)와 같은 멋진 속성이 포함되어 있습니다.

Border-radius를 사용하면 패널이나 탭 모서리에 둥근 효과를 줄 수 있습니다. 이 속성은 상자의 꼭지점을 각각 나타내는 4개의 개별적인 값을 포함합니다.

Multiple Background는 하나의 요소에 여러 개의 이미지 배경을 사용할 수 있는 기능입니다. 이 기능을 사용하려면 배경 이미지들을 쉼표로 분리하면 됩니다.

Text-shadowBox-shadow는 지정한 이미지나 h1 요소 등에 그림자를 추가합니다. 이 기능 덕분에 포토샵의 필요성이 많이 줄었습니다.

CSS3의 border-radius, text-shadow, box-shadow를 사용하면 작은 버튼을 손쉽게 만들 수 있습니다. 예제는 링크를 참고하세요.

글자 크기의 픽셀
글자 크기에 em이나 % 단위 대신 픽셀(px) 단위를 사용하세요. 모든 주요 브라우저들이 HTML5와 CSS3의 구현을 완벽하게 끝내면 우리 모두는 텍스트 크기를 조절하는 대신 페이지 전체를 확대하거나 축소하게 될 것입니다.

드래그 & 드롭
장바구니에 상품을 던져 넣는 일은 멋지죠. HTML5는 드래그(drag)와 드롭(drop) 이벤트를 지원합니다. 이 기능은 최근에 Gmail에 추가되었습니다.

Web Forms 2.0
폼은 웹 전반에 걸쳐 사용되고 있습니다. 블로그에 댓글을 쓸 때, 사용자 계정으로 로그인할 때, 아니면 온라인으로 책을 구입할 때에 우리는 폼을 사용합니다. 현재는 자바스크립트를 사용해서 폼에 입력한 값을 검증하지만, HTML5에서 지원하는 required나 email과 같은 추가 속성이 앞으로는 그 역할을 대신할 것입니다. 이들 속성을 사용하면 사용자의 이름과 메일이 형식에 맞는지 체크해주고, 값을 입력했는지 확인해줍니다. 

리소스


TAG ,
Posted by 행복한고니 트랙백 1 : 댓글 0

댓글을 달아 주세요