본문 바로가기
반응형

전체298

Tailwind CSS : 디자이너가 좋아할 수밖에 없는 이유! 디자이너 분들, CSS 때문에 매번 골치 아프시죠? 원하는 디자인을 맞추려다 보면 시간도 오래 걸리고, CSS 코드도 길어지고… 그렇다고 CSS 다 외울 수도 없고요. 😅 Tailwind CSS는 그런 고민을 확 줄여줄 마법 같은 도구입니다! 🎨Tailwind CSS가 뭐냐면?Utility-First라는 개념이에요. 쉽게 말해 CSS 속성들이 미리 클래스 형태로 준비되어 있어서, HTML에서 필요한 속성들을 바로 클래스 하나로 해결할 수 있죠. 디자이너에게는 정말 직관적이고 빠르게 스타일링을 적용할 수 있는 최고의 도구!디자이너가 알아두면 좋은 포인트!디자인 시스템에 딱 맞게 사용 가능Tailwind는 기본적으로 클래스 조합만으로 디자인을 완성할 수 있어요. 그래서 CSS 코드를 따로 짜지 않고도, .. 2024. 10. 2.
iOS에서 하단 메뉴 화면 잘림 방지하는 꿀팁! 안전 영역(Safe Area) 완벽 적용하기 iOS Safari에서 Safe Area 챙기는 꿀팁!요즘 스마트폰 보면, 화면 끝까지 꽉 찬 디자인이 대세죠? 그런데 이럴 때 웹사이트 디자인할 때 꼭 신경 써야 할 게 있어요. 바로 **안전 영역(Safe Area)**인데요! 특히 iOS Safari에서 홈 버튼이나 노치 때문에 화면 하단이 잘리면 안 되니까, 이걸 잘 챙겨줘야 합니다. 근데 걱정 마세요, CSS 코드 한 줄이면 해결 끝! 🙌 🎯 안전 영역을 위한 CSS 코드.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom);}​ 👀 코드 한 줄 설명env(safe-area-inset-bottom)은 iOS 기기에서 하단의 홈 버튼이나 노치를 감지해서, 그만큼 여백을 자동으로 추가.. 2024. 10. 2.
반응형

티스토리툴바