728x90 css4 Tailwind CSS 🪮 스타일 토큰 자체인 클래스를 조합하여 UI를 만드는 CSS 프레임워크이다. 빠르게 스타일링할 수 있으면서 디자인 시스템만큼 일관된 디자인을 가능하게 해주고, 빌드 시에 사용한 클래스만 추려 아주 작은 CSS로 만들어준다.요즘 React + Tailwind CSS 조합으로 많이 사용하는 것 같다. Tailwind CSS의 철학은 Utility-First 컨셉이다. Utility-First란 작은 기능 단위(Utility Class)를 조합하여 UI를 만드는 접근 방식이다. 즉, 쉽게 말해 클래스 이름 자체가 곧 스타일 속성을 의미하는 것이다.저장/* CSS */.btn-primary { padding: 0.5rem 1rem; background: #2563eb; color: white; borde.. 2025. 9. 3. all: inherit; 속성 🤰🏻 해당 요소의 모든 css 속성을 부모 요소로부터 상속받게 하는 역할을 한다.상속받는 속성은 다음과 같다.bordermargin, paddingcolor, font, line-heightbackgroundbox-shadow이외에도 거의 모든 속성 예를 들어, 부모 속성에 border: 1px solid red; box-shadow: box-shadow: 10px 5px 5px red; 라는 속성이 있다면 자식은 border와 box-shadow 모두 속성을 상속받아 자연스레 동일하게 적용된다. 자식 요소에서 사용하고 싶지 않을 때에는 상속받은 특정 속성을 명시적으로 초기화시키면 된다.border: none;box-shadow: none; 오랜만에 접하게 되면 "이게 뭐지" 싶다.되짚음 용으로 끄적여봤다. .. 2025. 8. 12. CSS에서 사용되는 단위들 CSS에서 사용되는 다양한 단위들이 있다.emremchexvhvwvminvmax천천히 알아보겠다.em이란?부모 요소의 font-size를 기준으로 한 상대 단위.parent { font-size: 16px;}.child { font-size: 1.5em; /* 부모의 font-size 16px * 1.5 = 24px */} rem이란?최상위 루트 요소(html)의 폰트 크기를 기준으로 한 상대 단위 (전체 사이트에서 일관된 크기로 설정하기 유용)r은 root(최상위)를 뜻한다.html { font-size: 16px;}.container { font-size: 2rem; /* 16px * 2 = 32px */}em과 rem의 다른점? Inner Divs html { .. 2025. 5. 28. content-visibility 속성 웹 개발에서 성능 최적화는 사용자 경험을 좌우하는 중요한 요소 중 하나다.특히 복잡한 레이아웃이나 방대한 콘텐츠가 있는 페이지에서는 렌더링 비용을 줄이는 것이 핵심 과제인데 이러한 문제를 해결하기 위해 CSS에서는 content-visibility라는 강력한 속성이 있다. content-visibility 속성이란?- 브라우저가 Element의 콘텐츠를 언제 렌더링할지 제어할 수 있도록 도와주는 CSS 속성- 기본적으로 DOM에 있는 요소들은 뷰포트에 보이지 않아도 레이아웃 계산(Layout), 스타일 계산(Paint), 렌더링(Rendering)을 수행. 이 과정은 특히 복잡한 DOM 구조일 경우 성능 병목을 일으킬 수 있음속성 값- visible (기본값): 원래 기존 동작대로 동작- hidden: .. 2025. 5. 22. 이전 1 다음 728x90
