728x90 > 메모/CSS22 [CSS] 반응형 폰트 크기 지정하기 반응형 폰트 크기: 뷰포트 크기에 따라 폰트 크기를 조절하고 싶다면vw를 사용하거나 clamp()를 활용하여 최소 및 최대 크기를 설정body { font-size: clamp(1rem, 2vw, 2rem);}1rem: 최소 폰트 크기2vw: 뷰포트 너비의 2%에 해당하는 기본 폰트 크기2rem: 최대 폰트 크기이렇게 설정하면 뷰포트 크기에 따라 폰트 크기가 조절되지만, 최소 크기와 최대 크기를 설정하여 폰트가 너무 작아지거나 커지는 것을 방지할 수 있습니다. 2024. 8. 1. .overlay-wrap:hover .overlay-black { } 의 의미 .overlay-wrap:hover .overlay-black { margin-top: 50%;} .overlay-wrap 클래스의 요소에 마우스가 호버되었을 때,그 자식 요소 중 .overlay-black 클래스를 가진 요소의 margin-top 속성을 50%로 변경하라는 의미 .overlay-wrap:hover: .overlay-wrap 클래스를 가진 요소에 마우스가 호버되어 있는 상태를 의미합니다..overlay-black: .overlay-wrap 요소의 자식 요소 중 .overlay-black 클래스를 가진 요소를 선택합니다.margin-top: 50%;: .overlay-black 요소의 margin-top 속성을 50%로 설정합니다. 2024. 7. 15. [CSS] Shadow DOM 설명 ( pseudo-element ) Shadow DOMpseudo 셀렉터의 사용개발자모드에서 shadow Dom 을 켜준다.input 태그 버튼같은 특정요소 클릭해서 검사해보면#shadow-root 확인할 수 있다.pseudo 속성 확인 해서 각각 스타일링 가능= pseudo-element 를 사용해준다.= -webkit-input-placeholder이런 식으로 사용해서 스타일링 가능 pseudo 셀렉터가 없을 경우= user agent stylesheet 을 확인 input type ="range" 스타일링 예시.shadow dom 깐 상태손잡이는 pseudo 셀렉터가 없어서 스타일링을 할 수 가 없다. user agent stylesheet 을 확인해보기손잡이(thumb) 부분을 클릭한 후user agent stylesheet 부분을.. 2024. 7. 1. [CSS] Pseudo-element 설명과 Pseudo-class 와 차이 Pseudo-element 특정 HTML 요소의 안쪽 일부만 스타일을 주고 싶을 때 Pseudo-element 셀렉터를 이용4내 안에 있는 특정 부분만 스타일링 하고싶을 때 사용Pseudo-class 와 차이 pseudo-element와 pseudo-class는CSS에서 특정 요소의 부분이나 상태를 선택하고 스타일을 적용하는 데 사용됩니다Pseudo-class (가상 클래스)Pseudo-class는 HTML 요소의 특정 상태나 상황을 선택하는 데 사용됩니다.예를 들어, 마우스를 올렸을 때, 방문한 링크,또는 첫 번째 자식 요소 등 특정 상황에서 스타일을 적용할 수 있습니다.예시::hover: 요소에 마우스를 올렸을 때:focus: 요소가 포커스를 받았을 때 (주로 입력 필드나 버튼):nth-child(n.. 2024. 6. 30. [CSS] keyframes 속성 사용 @keyframes CSS에서 복잡한 애니메이션을 만들기 위해 사용된다.@keyframes animation-name { from { /* 초기 상태 */ } to { /* 최종 상태 */ }}/* 또는 */@keyframes animation-name { 0% { /* 초기 상태 */ } 100% { /* 최종 상태 */ }} @keyframes 규칙은 애니메이션의 이름과 함께 정의되며,각 단계는 애니메이션의 진행 비율(0%부터 100%까지) 또는 키워드(from, to)를 사용하여 정의할 수 있습니다.애니메이션 속성들 애니메이션을 적용하기 위해 다음과 같은 CSS 속성을 사용합니다..element { animation-name: animation-name; an.. 2024. 6. 30. [CSS] transition 속성 종류 Transition 사용법 속성 값이 변할 때 부드럽게 전환할 수 있도록 도와주는 것transition 속성은 요소가 새 스타일로 바뀌는 속도, 시간 및 방법을 제어 transition-property: 어떤 속성을 애니메이션할 것인지를 지정합니다.transition-duration: 애니메이션이 걸리는 시간을 설정합니다.transition-timing-function: 애니메이션 속도를 제어하는 함수입니다. 애니메이션이 진행되는 동안의 속도 변화를 정의합니다.transition-delay: 애니메이션이 시작되기 전의 지연 시간을 설정합니다. 1. transition-property .box { transition-property: background-color, width;}transition-pro.. 2024. 6. 30. 이전 1 2 3 4 다음 728x90