방과후 개발&계발노트

// tailwind.config.jstheme: { extend: { colors: { campaign: { primary: '#ff3c00', secondary: '#ffe8e0', } } }}Tailwind CSS를 쓰다 보면 “와, 이거 진짜 빠르고 편하다!” 싶을 때가 많죠.디자인 시스템 기반으로 클래스만 조합하면 바로 UI가 완성되고,CSS 파일 따로 안 만들고도 컴포넌트 개발을 뚝딱 해낼 수 있으니까요.그런데 실무에서는 꼭 이런 상황이 생깁니다:브랜드 캠페인이나 이벤트 페이지강한 브랜딩이 필요한 프로모션 섹션특정 시즌이나 트렌드에 맞춘 비주얼 요구이럴 때는 기존의 디자인 시스템을 벗어난 스타일이 요구되고,“어… 이건 시스템으로는 커버가..

프론트엔드를 하다 보면 CSS를 어떻게 관리할지에 대한 고민이 끝이 없다.그 중 하나가 바로 Tailwind CSS. 최근엔 거의 “프론트엔드의 표준”처럼 쓰이지만, 나는 처음엔 Tailwind가 너무 불편하게 느껴졌다.🙅‍♀️ Tailwind, 처음엔 진짜 보기 힘들었다Tailwind를 처음 접했을 때의 느낌은 이랬다🤯 “이걸 어떻게 읽지?”🤯 “로직과 스타일이 왜 이렇게 섞여있지?”🤯 “이 상태에서 버튼 스타일 바꾸려면 어디를 건드려야 하지?” Tailwind를 쓰다 보면 HTML과 로직 안에 스타일 클래스가 범벅돼서가독성도 떨어지고,UI 버그 추적도 어려워지고,컴포넌트 재사용도 안 되고,결국 유지보수 지옥이 되기 쉽다.📈 그런데 왜 이렇게 인기일까?이렇게 불편한 면이 있는데도, Tailwi..

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..