amanda의 공간입니다

@media not all and (min-resolution:.001dpcm){ @supports (-webkit-appearance:none) { // css 내용 들어갈 자리 }} 하지만 safari 버전별로 다를 수 있음 !  *참고https://stackoverflow.com/questions/16348489/is-there-a-way-to-apply-styles-to-safari-only

font-size: clamp(최소사이즈, 기준점, 최대사이즈); clamp 속성은 부모 요소를 기준으로 상대 크기를 사용해 지정하므로px와 같은 절대 단위값은 사용 불가 /* font-size: clamp(최소사이즈, 기준점, 최대사이즈); */p{font-size: clamp(0.625rem, 1.9444vw, 1rem);}

웹에서 사용자가 드래그한 영역의 배경컬러 및 폰트컬러 바꾸는 방법 css 선택자 ::selection 사용하기 ::-moz-selection{ background-color: blue; color: #fff; } ::selection{ background-color: blue; color: #fff; }

좌측으로 흘러가는 텍스트 효과를 javaScript 없이 CSS transform으로 구현하기 이미지 형식 marquee가 좌측으로 무한 플로팅 디바이스 width를 2560px까지 맞춰야하므로 이미지 사이즈는 3000px 정도로 준비 HTML CSS .float_wrap{ overflow-x: hidden; position: relative; height: 120px; background-color: #37BF92; } .float_conbox{ position: absolute; white-space: nowrap; will-change: transform; animation: marquee 30s linear infinite; } .float_conbox img{ max-width: unset; }..

input[type="file"]을 시안에 따라 커스텀 했더니 개발 과정에서 이슈가 발생해 버튼만 커스텀이 가능한지 문의하셨다. 파일 input의 버튼만 커스텀하는 방법 선택자를 input[type=file]::file-selector-button 로 하면 가능

.list type decimal 출력 결과 : 1. 2. 3. .list_type_nodot 출력 결과 : 1 2 3 .list_type_circle 출력 결과 : ① ② ③ /* list type decimal */ .list_type_decimal{ counter-reset: type-decimal; } .list_type_decimal li{ display: block; } .list_type_decimal li:before{ margin-right: 4px; content: counter(type-decimal) "."; counter-increment: type-decimal; } /* list type decimal remove dot */ .list_type_nodot{ counter-re..

@font-face에서 unicode-range로 폰트를 변경하는 방법 영문과 숫자는 Roboto로 나머지 폰트는 Noto Sans KR로 적용 body {font-family:'Roboto' ,'Noto Sans KR', 'sans-serif';} @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('※'), url('../fonts/Roboto-Regular.eot'), url('../fonts/Roboto-Regular.eot#iefix') format('embedded-opentype') url('../fonts/Roboto-Regular.woff') format('woff'), url('../fo..

테이블 코딩한 cell의 폰트 사이즈가 특정 iOS 모바일 디바이스에서 들쭉날쭉 크게 보이는 현상이 있었다 iOS는 viewport가 변경되면 자동으로 font size를 조정하는데 그에 따른 현상이라고 한다 이때 필요한 text-size-adjust text-size-adjust는 비표준 속성이므로 벤더 프리픽스를 사용해야 한다 html, body{ -webkit-text-size-adjust : none; /* 크롬, 사파리, 오페라 신버전 */ -ms-text-size-adjust : none; /* IE */ -moz-text-size-adjust : none; /* 파이어폭스 */ -o-text-size-adjust : none; /* 오페라 구버전 */ } text-size-adjust: no..