티스토리

방과후 개발&계발노트
검색하기

블로그 홈

방과후 개발&계발노트

devlog.czenhe.me/m

방과후 공부, 독서, IT노트 //////// 도쿄거주중인 프론트엔드 개발자

구독자
11
방명록 방문하기
공지 [티스토리] 구독과 댓글이 안되는 분⋯ 모두보기
반응형

주요 글 목록

  • 디자인 시스템이 무너질 때, Tailwind로 유연하게 대응하는 법 // tailwind.config.jstheme: { extend: { colors: { campaign: { primary: '#ff3c00', secondary: '#ffe8e0', } } }}Tailwind CSS를 쓰다 보면 “와, 이거 진짜 빠르고 편하다!” 싶을 때가 많죠.디자인 시스템 기반으로 클래스만 조합하면 바로 UI가 완성되고,CSS 파일 따로 안 만들고도 컴포넌트 개발을 뚝딱 해낼 수 있으니까요.그런데 실무에서는 꼭 이런 상황이 생깁니다:브랜드 캠페인이나 이벤트 페이지강한 브랜딩이 필요한 프로모션 섹션특정 시즌이나 트렌드에 맞춘 비주얼 요구이럴 때는 기존의 디자인 시스템을 벗어난 스타일이 요구되고,“어… 이건 시스템으로는 커버가.. 공감수 1 댓글수 0 2025. 4. 8.
  • Tailwind가 불편했던 나에게 – 왜 인기 있고, 어떻게 잘 써야 할까? 프론트엔드를 하다 보면 CSS를 어떻게 관리할지에 대한 고민이 끝이 없다.그 중 하나가 바로 Tailwind CSS. 최근엔 거의 “프론트엔드의 표준”처럼 쓰이지만, 나는 처음엔 Tailwind가 너무 불편하게 느껴졌다.🙅‍♀️ Tailwind, 처음엔 진짜 보기 힘들었다Tailwind를 처음 접했을 때의 느낌은 이랬다🤯 “이걸 어떻게 읽지?”🤯 “로직과 스타일이 왜 이렇게 섞여있지?”🤯 “이 상태에서 버튼 스타일 바꾸려면 어디를 건드려야 하지?” Tailwind를 쓰다 보면 HTML과 로직 안에 스타일 클래스가 범벅돼서가독성도 떨어지고,UI 버그 추적도 어려워지고,컴포넌트 재사용도 안 되고,결국 유지보수 지옥이 되기 쉽다.📈 그런데 왜 이렇게 인기일까?이렇게 불편한 면이 있는데도, Tailwi.. 공감수 1 댓글수 0 2025. 4. 7.
  • [CSS] 창사이즈에 맞춰서 height를 유연성있게 변경해야 할 경우 flex-grow, calc infinite scroll을 사용한다던지 디자인에 맞춰 높이를 창사이즈에 맞춰 조절해야 할 때 CSS를 사용하여 조절이 가능합니다 예를 들어 이하의 구조가 있다고 하면 .content의 높이 = container의 높이 - header의 높이가 되게 하는 경우의 높이 설정방법입니다 방법 1 flex-grow .container { display: flex; flex-direction: column; height: 100%; .header { height: 96px; // 높이가 정해져있을 경우 설정 } .content { flex-grow: 1; // 단말브라우저에 맞춰 높이를 조절 overflow-y: scroll; } } ( 브라우저 호환성 ) 방법2 calc(100% - xxx) .containe.. 공감수 9 댓글수 0 2021. 10. 27.
    반응형
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.