본문 바로가기

전체 글1013

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.
css id 선택자 CSS ID 선택자는 HTML 요소 중에서 특정 id 값을 가진 요소를 선택하여 스타일을 적용하는 방법입니다. ID 선택자는 "#"을 사용하여 표시하며, 해당 ID값을 지닌 요소를 찾아내서 스타일을 적용합니다. 사용법 예를 들어, 아래와 같은 HTML 코드가 있다고 가정해봅시다. Hello, World! 위 코드에서 "#my-element"은 ID 선택자로, id 속성 값이 "my-element"인 div 요소를 선택합니다. 따라서, 이 div 요소에 대해서 스타일을 적용하고자 할 때는 아래와 같은 CSS 코드를 작성할 수 있습니다. #my-element { color: red; font-size: 20px; } 위 코드는 ID 선택자를 사용하여 "my-element" ID 값을 가지는 div 요소에 대.. 2023. 3. 14.
css 요소 선택자 css 요소 선택자는 html 요소를 지정해서 css를 적용시킬 수 있습니다. 요소를 하나 지정하거나 콤마를 사용하여 여러 개를 지정할 수 있습니다. 사용법 html 요소 { style } Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos expedita illum perferendis aperiam omnis quidem alias at doloribus vero asperiores, odio quas accusamus, nulla pariatur esse reiciendis quod neque placeat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat la.. 2023. 3. 14.

티스토리툴바