목록퍼블리싱 (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
[HTML] small 태그

인강을 듣다가 알게 된 small 태그 기록용으로 남겨본다. small 태그란? 이전에는 단순히 기존 텍스트보다 작은 글씨로 표기되는 용도였으나, HTML5에서부터는 저작권이나 연락처, 법률 등을 표시할 때 사용되기 시작했습니다. FAQ with faded secondary text No FAQ Title Category Date Hit 1 FAQ 제목 들어가는 자리 이용안내 2023.01.01 84 실제로 적용해보았을 때 css에도 자동으로 font-size:smaller; 이 적용됨을 확인할 수 있습니다.
퍼블리싱/html 2023. 6. 27. 16:46
[퍼블리싱] iOS에서 숫자가 전화번호로 자동 인식되는 문제 해결 방법

퍼블리싱을 마치고 접근성 관련 회사 동료에게 피드백을 받았다. 피드백 중 iOS에서 숫자는 자동으로 전화번호로 인식하여 숫자를 눌렀을 때 전화가 걸리도록 설정되어 있으니, 의도한 것인지 아닌지를 물어보셨다. 의도한 것은 아니었기 때문에 순간 이러한 기능을 삭제하려면 어떻게 해야하나 고민했는데, 메타 태그에 한줄만 추가하면 된다는 얘기에 구글링 해보았다. 1. 전화번호 자동 링크 없앨 경우 2. 전화, 주소, 이메일 자동 링크 없앨 경우 경우에 따라 head에 meta 태그를 추가해 주면 된다! EZ~
퍼블리싱/Feedback Archive 2023. 5. 22. 09:40
[웹 성능 최적화] 이미지 파일 압축 - tiny png 사용하기

이미지 파일은 해당 파일 정보를 메타 데이터(meta data)에 포함해 저장한다. 여기서 메타데이터란 어떤 카메라로 촬영했는지, 해상도가 무엇인지 등이 메타 데이터의 대표적인 내용이다. 메타 데이터는 사람의 눈에 실제 이미지로써 보이지 않으므로, 불필요한 부분을 제거하면 크기를 상당히 줄일 수 있다고 한다. tiny png의 온라인 서비스를 이용하면 손실 압축 방식으로 이미지 파일을 압축할 수 있다. https://tinypng.com/ TinyPNG – Compress WebP, PNG and JPEG images intelligently Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG imag..
퍼블리싱/웹 성능 최적화 2023. 3. 17. 17:30
Prev 1 Next