반응형 CSS10 [CSS3] border-radius : 사각형의 모서리를 둥글게 하기 기존 XHTML의 코딩 시절에는 특정 사각형 박스의 모서리를 둥글게 하기 위해서 일일이 포토샵으로 배경 이미지를 제작해야 했습니다. 하지만 CSS3에서 새롭게 추가된 border-radius라는 속성을 이용하면 포토샵의 도움 없이 순수 CSS 기술만으로도 간단하게 사각형의 모서리를 둥글게 하거나 원 형태의 모양으로 변형할 수 있습니다. (1) border-radius : 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래; 다음의 예제를 통해 border-radius의 기본 개념을 숙지해 보겠습니다. 2개의 태그를 생성합니다. 태그에 넓이와 높이를 각각 300px로 동일하게 적용한 후, nth-child를 이용해 첫 번째 에는 네 모서리의 곡률을 각기 다르게 설정하고 두 번째 에는 네 모서리에 공통으로 해당 넓이의 절반.. 2023. 4. 19. [CSS3] text-shadow, box-shadow 글자와 박스에 그림자 생성하기 text-shadow와 box-shadow를 이용하여 요소에 그림자를 추가해 주는 기능입니다. 포토샵에서의 drop-shadow와 비슷한 기능이라고 이해하면 될 것 같습니다. (1) text-shadow : 텍스트에 그림자 추가하기 text-shadow : 가로축거리 세로축거리 퍼짐도 색상; 다음의 예제를 통해 text-shadow의 사용법을 알아보겠습니다. TEST1 TEST2 2개의 태그를 이용하여 텍스트를 입력합니다. 태그에 공통으로 글자의 모양을 설정해 준 뒤, nth-child를 이용하여 text-shadow에 각기 다른 속성 값을 입력합니다. 첫 번째 태그에는 그림자의 가로축과 세로축 거리를 플러스 값으로, 두 번째 태그에는 마이너스 값으로 설정한 뒤, 퍼짐도 의 수치를 2배 정도 증가시킵니다.. 2023. 4. 17. [CSS3] CSS가상 선택자 정리 및 비교 (first-child, last-child, nth-child, nth-of-type, ) (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.. 2023. 4. 12. [CSS3] nth-child():원하는 순서 값에 해당하는 태그를 선택하는 CSS선택자 기존에는 같은 형식의 HTML 태그가 쭉 나열된 경우 특정 태그만 선택하여 CSS로 꾸며주기 위해서는 해당 태그에 일일이 아이디나 클래스명을 부여해야 했습니다. 예를 들어 100개의 태그가 있고 해당 태그에 총 100개의 클래스명을 일일이 부여해야 하는 번거로움이 있었습니다. 하지만 CSS3에서 제공하는 nth-child 선택자를 이용하면 반복되는 일련의 태그 중 원하는 순서의 태그만 선택할 수 있어 불필요한 클래스를 추가할 필요가 없어졌으며 보다 깔끔한 HTML 문서를 관리할 수 있게 되었습니다. nth-child()의 사용법은 다음과 같습니다. (1) 태그명 : nth-child(순서 값) { css } 다음의 예제를 통해 nth-child의 사용법을 알아보겠습니다. 리스트1 리스트2 리스트3 리스트4 2023. 4. 11. 이전 1 2 다음 반응형
