목록CSS
말하는 감자의 성장 기록
"아이폰으로 확인해보니 피그마보다 글씨가 두꺼워요"개발을 완료하고 보니 iOS에서 글씨가 피그마보다 두껍게 보이는 것 같다는 피드백을 받았다.하지만 개발자 도구로 확인해보니 피그마와 폰트, 폰트 사이즈, 폰트 두께, 줄간격까지 똑같았다. 브라우저, 운영체제 차이찾아보니 각 브라우저 엔진이 자체적인 font renderer를 가지고 있고, 운영 체제별 알고리즘에도 영향을 받기 때문에, macOS와 ㅈWindows에서 폰트가 다르게 보일 수 있다는 것. 피그마는 사용자가 동일한 파일을 공유할 때 일관된 크로스 플랫폼 뷰를 제공하기 위해 자체 렌더링 엔진을 사용하기 때문에 다른 브라우저에서 확인하는 폰트와 일치하지 않을 수 있다는 것이다. 해결방법 결론은 모든 플랫폼에서 완전히 동일한 뷰를 얻는 것은 불가능..
CSS/Tailwind CSS
2025. 6. 19.
[styled components] select 태그 placeholder 색상 설정
색상 설정const SelectInput = styled.select` color: ${(props) => props.value === "default" ? "#8b8b8b" : "#000000"};`const StyledOption = styled.option` color: #000000;`styled-components 부분은 이렇게 정의하고, placeholder로 설정할 option의 색은 "#8b8b8b" 부분에 적어주면 된다.나머지 option은 Option 컴포넌트를 사용하면 된다. 숫자를 선택해주세요 1 2 3
CSS/Styled-Components
2024. 8. 4.