수니리즘

기존 XHTML의 코딩 시절에는 특정 사각형 박스의 모서리를 둥글게 하기 위해서 일일이 포토샵으로 배경 이미지를 제작해야 했습니다. 하지만 CSS3에서 새롭게 추가된 border-radius라는 속성을 이용하면 포토샵의 도움 없이 순수 CSS 기술만으로도 간단하게 사각형의 모서리를 둥글게 하거나 원 형태의 모양으로 변형할 수 있습니다. (1) border-radius : 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래; 다음의 예제를 통해 border-radius의 기본 개념을 숙지해 보겠습니다. 2개의 태그를 생성합니다. 태그에 넓이와 높이를 각각 300px로 동일하게 적용한 후, nth-child를 이용해 첫 번째 에는 네 모서리의 곡률을 각기 다르게 설정하고 두 번째 에는 네 모서리에 공통으로 해당 넓이의 절반..

기존에는 같은 형식의 HTML 태그가 쭉 나열된 경우 특정 태그만 선택하여 CSS로 꾸며주기 위해서는 해당 태그에 일일이 아이디나 클래스명을 부여해야 했습니다. 예를 들어 100개의 태그가 있고 해당 태그에 총 100개의 클래스명을 일일이 부여해야 하는 번거로움이 있었습니다. 하지만 CSS3에서 제공하는 nth-child 선택자를 이용하면 반복되는 일련의 태그 중 원하는 순서의 태그만 선택할 수 있어 불필요한 클래스를 추가할 필요가 없어졌으며 보다 깔끔한 HTML 문서를 관리할 수 있게 되었습니다. nth-child()의 사용법은 다음과 같습니다. (1) 태그명 : nth-child(순서 값) { css } 다음의 예제를 통해 nth-child의 사용법을 알아보겠습니다. 리스트1 리스트2 리스트3 리스트4