CSS4 Tailwind CSS 4.0 설정 문제 해결하기: PostCSS 플러그인 오류부터 Vite 설정까지 안녕하세요 웹 YB 신지수입니다 !이번 3주차 과제에서 Tailwind CSS를 사용하려 했지만, 버전 4.0에서 발생한 PostCSS 플러그인 오류로 인해 어려움을 겪었습니다. 이 글에서는 이 문제의 원인과 해결 방법을 공유하려고 합니다 🤓 먼저 Tailwind CSS가 무엇인지, 그리고 어떤 장점이 있는지 간단히 소개한 후 문제 해결 과정을 설명하겠습니다 ! 🎨 Tailwind CSSTailwind CSS란 ?Tailwind CSS는 유틸리티 기반 CSS 프레임워크로, 미리 정의된 클래스들을 HTML 요소에 직접 적용하여 스타일링하는 방식입니다. 기존의 Bootstrap이나 Foundation과 같은 프레임워크가 미리 디자인된 컴포넌트를 제공하는 것과 달리, Tailwind는 작은 단위의 유틸리티.. 2025. 5. 2. JS없이 HTML과 CSS로 만들 수 있는 것들 웹에서 흔히 인터랙션이나 애니메이션을 구현할 때 JavaScript를 떠올리곤 합니다.저는 이번 개인 블로그 만들기 과제 중 무한 배너를 구현하면서 JS 없이도 다양한 기능을 구현할 수 있다는 점이 흥미로웠는데요.그래서 JS 없이 HTML와 CSS로만으로도 할 수 있는 몇 가지 웹 인터랙션과 애니메이션에 대해 조사해 보았습니다. HTML으로 만드는 인터랙션 요소들 ✨ 와 : 클릭으로 내용 토글하기HTML5에서 제공되는 이 태그로 클릭하면 내용을 열고 닫을 수 있도록 구현할 수 있습니다.이는 드롭다운 메뉴, FAQ 섹션 등에서 활용할 수 있습니다. See the Pen Untitled by 박소이 (@kousbpll-the-decoder) on CodePen.">See the Pen Untit.. 2025. 4. 11. BEM으로 시작하는 CSS 방법론 1주차에 HTML/CSS로 개인 블로그 만들기 과제를 하면서 정말 많은 태그들에 클래스명을 붙여야 했는데요 . .그때마다 어떤 클래스명으로 이름을 지을지 고민이 되더라고요 ! 그래서 어떻게 하면 통일성 있고 의미 있게 네이밍을 할 수 있을지 고민하다가 CSS 방법론을 접하게 되었습니다.CSS 방법론CSS를 어떤 방법으로 구성하면 더 효율적으로 구성할 수 있는가에 대한 방법론 저는 여러 방법론 중에서도 직관적인 BEM에 대해 정리하려고 합니다. BEM (Block Element Modifier)블록(Block), 요소(Element), 수정자(Modifier)의 세 가지 개념을 사용하여 클래스 네이밍을 작성하는 방법론 중요한 점은 BEM을 사용할 때 ID 셀렉터나 요소 셀렉터를 사용하면 안 됨 🙅🏻.. 2025. 4. 11. HTML/CSS로 구현하는 반응형 웹의 기본 구조 반응형 웹 과제 정리 작성자: 36기 YB 웹파트 최서희 😀 HTML/CSS 과제로 개인 블로그 만들기를 진행하며 모바일에서도 잘 보이는 반응형 웹 구조를 직접 구현했습니다. 요구사항이었던 반응형 레이아웃을 공부하며 기초 개념부터 실습 예제까지 정리해 공유합니다. 🔍 반응형 웹 디자인이란? 기기 화면 크기에 따라 콘텐츠 배치와 스타일이 자동으로 조정되는 웹 구조입니다. 하나의 코드로 데스크탑·태블릿·모바일에 대응할 수 있어 관리 효율성과 사용자 경험이 좋아집니다. 🧩 핵심 구성 요소 3가지 1️⃣ 유동적인 레이아웃 (Fluid Layout) .. 2025. 4. 11. 이전 1 다음
