수니리즘

text-shadow와 box-shadow를 이용하여 요소에 그림자를 추가해 주는 기능입니다. 포토샵에서의 drop-shadow와 비슷한 기능이라고 이해하면 될 것 같습니다. (1) text-shadow : 텍스트에 그림자 추가하기 text-shadow : 가로축거리 세로축거리 퍼짐도 색상; 다음의 예제를 통해 text-shadow의 사용법을 알아보겠습니다. TEST1 TEST2 2개의 태그를 이용하여 텍스트를 입력합니다. 태그에 공통으로 글자의 모양을 설정해 준 뒤, nth-child를 이용하여 text-shadow에 각기 다른 속성 값을 입력합니다. 첫 번째 태그에는 그림자의 가로축과 세로축 거리를 플러스 값으로, 두 번째 태그에는 마이너스 값으로 설정한 뒤, 퍼짐도 의 수치를 2배 정도 증가시킵니다..

(1) nth-child :nth-child(1) = 첫번째 선택 span p span p span p p p p p :nth-child(2n) = 두번째 마다 선택 span p span p span p p p p p :nth-child(2n+1) = 첫번째 요소부터 2번째 마다 선택 span p span p span p p p p p :nth-child(2n+5) = 다섯번째 부터 2개 마다 선택 span p span p span p p p p p :nth-child(-2n+5) = 첫번째 요소부터 5번째 요소까지 2개 마다 선택 span p span p span p p p p p :nth-child(n+5) = 5번째 부터 모두 선택 span p span p span p p p p p :nth-chi..

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