CSS30 css n 번째 요소 선택해서 효과 주기 - nth-of-type html 요소에 :nth of type 가상 클래스 선택자를 사용해서 n 번째 요소를 선택해서 효과를 줄 수 있습니다. n 번째 요소를 선택할 때 하나의 요소를 선택하거나 n 배수의 요소들을 선택할 수 있습니다. n 번째 요소 선택 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia ex sapiente minima quisquam, tenetur eos aliquid unde tempora ratione aliquam reiciendis nobis magni rem! Velit, in! Quos at quaerat nihil! Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus.. 2023. 3. 17. css 체크했을 때 효과 주기 - checked CSS에서 checked 가상 클래스는 HTML 폼 요소 중에서 사용자에 의해 선택된 상태를 스타일링하기 위해 사용됩니다. 주로 체크박스, 라디오 버튼 등과 함께 사용되며, 선택된 요소에 대한 스타일을 지정할 수 있습니다. checked 가상 클래스의 사용 예시 아래는 HTML 체크박스와 함께 checked 가상 클래스를 사용한 CSS 예시입니다. 체크박스 input[type="checkbox"]:checked + label { color: red; } 위 예시에서는 input 요소의 type 속성이 "checkbox"인 경우에만 checked 가상 클래스가 적용됩니다. checked 가상 클래스를 사용하여 선택된 체크박스에 대한 스타일을 변경하고 있습니다. 위 예시에서는 선택된 체크박스의 라벨 텍스트를.. 2023. 3. 17. css 마우스 클릭 효과 - active CSS에서는 요소를 마우스로 클릭할 때 시각적인 효과를 적용할 수 있습니다. CSS의 Active 효과에 대해 알아보고, 실제 예시를 통해 설명하겠습니다. Active 효과란? Active 효과는 사용자가 요소를 마우스로 클릭하는 동안 적용되는 스타일을 의미합니다. 클릭된 요소에 특정 스타일을 적용함으로써 사용자에게 시각적인 피드백을 제공할 수 있습니다. Active 효과 적용 방법 Active 효과를 적용하기 위해서는 다음과 같은 CSS 선택자와 속성을 사용할 수 있습니다. 선택자:active { /* 스타일 속성 */ } 위 코드에서 선택자 부분은 클릭되는 요소를 선택하는 CSS 선택자입니다. :active는 클릭된 상태일 때 적용될 스타일을 지정하는 의사 클래스입니다. Active 효과 예시 아래는.. 2023. 3. 16. css 마우스 오버 시 효과 주는 방법 - hover html 요소에 :hover 가상 클래스 선택자를 사용하면 마우스 오버 시 효과를 줄 수 있습니다. 사용법 link 2023. 3. 16. css 속성 선택자 사용하는 방법 CSS 속성 선택자는 HTML 요소의 속성 값에 따라 스타일을 지정할 수 있는 선택자입니다. 이 선택자를 사용하면 HTML 요소의 속성 값이 특정한 값으로 일치하는 경우에만 스타일을 지정할 수 있습니다. CSS 속성 선택자의 사용법에 대해서 자세히 살펴보겠습니다. 사용법 먼저, CSS 속성 선택자의 구문은 다음과 같습니다. [속성명=값] { /* 스타일 규칙 */ } 여기서 속성명은 HTML 요소의 속성 이름을 의미하며, 값은 해당 속성 값의 일치 여부를 검사하는 데 사용됩니다. 속성명=값 형식으로 작성하면, HTML 요소의 속성 값이 지정한 값과 정확히 일치하는 경우에만 스타일을 적용할 수 있습니다. 예를 들어, class 속성 값이 btn인 모든 요소에 적용되는 스타일을 지정하고 싶다면 다음과 같이 .. 2023. 3. 16. css 자손 선택자 css 자손 선택자는 부모 요소에 포함되어 있는 자손들을 선택해서 style을 적용시킬 수 있는 방법입니다. 두 가지 방법이 있는데 첫 번째 방법은 자손 요소들의 레벨에 상관없이 적용이 되고 두 번째 방법은 자손 요소가 한 단계 아래 레벨일 때 적용이 됩니다. 첫 번째 방법 기준 자손{ style } link1 link2 link3 두 번째 방법 기준 > 자손{ style } link1 link2 link3 2023. 3. 15. css 인접 선택자 css 인접 선택자는 부모 자식 관계가 아닌 동일한 레벨의 요소 중에서 인접한 요소에 style을 적용시킬 수 있는 방법입니다. + 기호를 사용해서 기준 요소 + 인접 요소의 형식으로 사용할 수 있습니다. 사용법 기준요소 + 인접요소{ style } title text1 text2 2023. 3. 15. css class 선택자 css class 선택자는 html 요소들을 하나의 그룹으로 묶어서 css를 적용하고 싶을 때 사용하는 방법입니다. 같은 종류의 요소가 아니라도 class를 부여하면 공통된 스타일을 적용시킬 수 있습니다. 사용법 .class{ style } Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium ullam voluptatibus, repellat excepturi rem suscipit quo repellendus odio voluptas saepe voluptates alias quis laboriosam eaque! Natus distinctio sapiente ipsa aspernatur! Lorem ipsum dolor sit am.. 2023. 3. 15. 이전 1 2 3 4 다음
