웹/CSS 2

[error] ios 모바일 웹 textarea에서 한글 버벅임 문제

회사에서 Next.js로 웹서비스를 개발하고 있는데, ios 모바일 웹브라우저(사파리, 크롬)에서만 textarea에서 한글 입력시 버벅거리는 문제가 나타났다. 한글을 입력할 때 화면에 늦게 그려지면서 버벅거렸고, 글자가 여러번 입력되는 현상도 있었다. 안드로이드에서는 문제가 없어서 ios를 중심으로 찾아봤는데, 완벽하게 일치하는 사례를 찾지 못했다. ios의 buffer문제나, font display도 관련이 있는지 찾아봤는데, 해결 방법이 되지는 못했다. 한참 헤매다가 폰트가 문제가 아니냐는 팀원의 질문에 폰트를 다시 원래 사용하던 것으로 바꿔보니 문제가 해결되었다. 폰트는 이렇게 next font를 활요해서 사용하고 있었다. import { Roboto } from "next/font/google"..

웹/CSS 2023.11.15

[Tailwind CSS] 커스텀 색상 추가할 때 주의할 점

tailwind에서는 tailwind.config.js를 통해 원하는 색상, 폰트, 변수 등을 추가할 수 있다. 그런데 1. 기존에 tailwind에서 제공하는 색상을 사용하면서, 추가로 내가 지정한 색상을 변수로 추가하는 경우와 2. 내가 원하는 색상만 추가하여 사용하는 경우가 다르다. /** @type {import('tailwindcss').Config} */ module.exports = { theme: { colors: { //여기에 추가하면 기존 색상은 사용하지 않고, 여기에 추가한 colors만 사용할 수 있다. }, extend: { colors: { //여기에 추가하면 기존 + 추가로(extend) 사용할 수 있다. } }, }, } 이름을 잘 보면 기능을 유추할 수 있다. - theme..

웹/CSS 2023.08.29