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. [CSS] img 에 display: block 을 쓰는 이유 이미지의 위치가 이상할 때 display:block 적용또는 이미지 하단에 여백이 생길 때 사용 이미지 태그 ()는 기본적으로 인라인 요소처럼 동작display: block;을 사용하면 이미지를 블록 요소로 변환하여 이러한 여백을 제거할 수 있다.= 블록 요소는 자신만의 줄을 차지하므로, 이러한 여백이 제거.display: block;을 추가하면 여백이 사라지는 이유는 다음과 같습니다:인라인 요소의 기본 특성 때문에 여백이 발생합니다.display: block;을 사용하면 이미지가 블록 요소로 변환되어, 상하 여백이 제거됩니다.결과적으로 이미지가 상단에 정확히 맞게 배치됩니다.reset.css기본설정/* CSS - 기본 설정 */* { margin: 0; padding: 0; box-sizing: .. 2024. 6. 28. [CSS] transform의 사용 transform transform 속성은 요소를 2D 또는 3D 공간에서 변형하는 데 사용됨.transform 기능은 다음과 같습니다translate(): 요소를 이동시킵니다.rotate(): 요소를 회전시킵니다.scale(): 요소의 크기를 조절합니다.skew(): 요소를 기울입니다.matrix(): 위의 변형을 결합하여 변형합니다.사용 예시 transform: translateY(-50%);transform: translateY(-50%);는 요소를 수직으로 가운데 정렬하는 데 사용됨. 이를 위해 position: absolute; 또는 position: fixed;를 함께 사용하여 기준 위치를 설정한 후,top: 50%;와 함께 사용된다. 요소가 부모 요소의 높이의 50% 지점에 위치한 후,자기 .. 2024. 6. 27. [CSS] 자식 width 를 부모 width 와 동일하게 맞추기 HTML 상품검색창 JOIN MY PAGE // 이 부분 스타일링. ALL .. 2024. 6. 27. 이전 1 2 3 다음 728x90
