목록퍼블리싱/css (4)

성장가능성 200% 프론트엔드의 Dev 다이어리

[CSS] accent-color 폼 양식 컬러 셋팅하기

퍼블리싱을 하다보면 폼 요소에 각각 컬러를 지정하는게 너무 귀찮았는데, accent-color를 사용하면 폼 요소의 디자인 UI의 컬러를 한꺼번에 지정할 수 있어서 편리하다. 그치만 모든 폼 양식에 적용되는 것은 아니고 폼 양식 중, 에 적용할 수 있다. 체크1 체크2 체크3 라디오1 라디오2 레인지 진행률 @charset "utf-8"; :root { --form-color: pink; } input[type='checkbox'], input[type='radio'], input[type='range'], progress { accent-color: var(--form-color); }이처럼 메인 컬러로 pink를 사용하기로 하여, :root에 핑크 컬러를 변수로 선언해 두었다. 혹여나 프로젝트 중 메..
퍼블리싱/css 2023. 6. 29. 13:27
[CSS] input[type="number"] 증가,감소 화살표 없애기

input[type="number"]을 사용하면 아래 이미지처럼 마우스 오버 시 오른편에 증감 화살표 버튼이 저절로 생긴다. 요즘에는 이런 기본 버튼을 사용하는걸 사실 본 적이 없다. 필요하다면 본인들의 디자인 컨셉에 맞추어서 버튼까지 커스텀하는 게 대부분인 것 같다. 각설하고, 바로 없애보자. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance:none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance:textfield; } 위의 css를 적용하면 아래 이미지처럼 화살표가 ..
퍼블리싱/css 2023. 2. 14. 14:56
[css/웹 성능 개선] font-display:swap

요즘 웹 성능 개선 관련된 책을 읽기 시작했는데 책 초반에 google PageSpeed 사이트에서 웹 성능을 검출해 주는 서비스를 제공하고 있다는 사실을 알게 되었다. https://pagespeed.web.dev/ PageSpeed Insights 올바른 URL을 입력하세요. pagespeed.web.dev 궁금한 마음에 이전에 퍼블리싱했던 사이트 주소를 넣어보니 모바일에서 성능이 좋지 않게 나와ㅠㅠ 신경 쓰여 아래 추천 개선 사항들을 살펴보았다. 꽤나 진단 결과 및 추천 개선사항이 상세히 나와서 놀랐고 살펴보다가 알게 된 새로운 CSS 속성 font-display:swap! 구글 pageSpeed에서 제공하고 있는 설명을 가져와 보았다. 1. 보이지 않는 글꼴을 표시하는 방법 글꼴은 로드하는 데 시..
퍼블리싱/css 2023. 2. 12. 17:53
[CSS] select 화살표 디자인 적용하기

일단 select의 화살표는 너무 못생겼다. 그리고 브라우저별 디자인이 제각각이 되기 때문에 디자인을 적용하고 싶은 마음이 들 수밖에 없다. 그래서 background css를 적용해서 예쁘게 바꾸어준다. 생각보다 간단하므로 적용해보시길! [HTML] 사과 딸기 복숭아 [CSS] select { appearance:none; } 기존 default 화살표를 없애주는 css. 크로스브라우징으로 적용할 때에는 -moz-, -webkit-, -ms-를 자신의 프로젝트에 맞는 각각 한 번씩 더 적어주면 된다. 그리고 추가하고픈 화살표 디자인을 background로 넣어준다. [CSS] select{ appearance:none; background:url('../img/icon_select_arrow.png')..
퍼블리싱/css 2022. 1. 29. 23:25
Prev 1 Next