CSS

Tailwind CSSTailwind CSS는 유틸리티-퍼스트(utility-first) CSS 프레임워크로, 재사용 가능한 유틸리티 클래스를 통해 스타일링을 간편하게 하고, 디자인 시스템을 빠르게 구축할 수 있게 도와준다. Tailwind CSS는 전통적인 CSS 클래스나 컴포넌트 기반의 스타일링 방식과는 다르게, HTML 요소에 직접 유틸리티 클래스를 추가하여 스타일링을 수행한다. * 유틸리티-퍼스트 CSS 프레임워크: 스타일링 접근 방식 중 하나로, 사전 정의된 작은 유틸리티 클래스를 사용하여 빠르게 UI를 구성할 수 있도록 한다.주요 특징1. 유틸리티 퍼스트 Tailwind CSS는 다양한 유틸리티 클래스를 제공하여 HTML 요소에 클래스를 직접 추가함으로써 스타일을 정의한다.Hello, Tail..

Styled Componentsstyled components는 JavaScript 파일 내에서 CSS를 작성할 수 있게 해주는 CSS-in-JS 라이브러리로, React와 같은 JavaScript 라이브러리(프레임워크)와 함께 사용되며 컴포넌트 기반 스타일링을 쉽게 구현할 수 있다. Styled Components를 사용하면 스타일을 컴포넌트와 함께 캡슐화하여 유지보수성을 높이고 스타일링의 범위를 컴포넌트 단위로 제한할 수 있다. 주요 특징1. 컴포넌트 기반 스타일링CSS를 컴포넌트 안에 작성하여, 스타일과 로직을 하나의 파일에 캡슐화할 수 있다.2. 동적 스타일링props를 사용해 동적으로 스타일을 변경할 수 있다.3. 네임스페이스 충돌 방지고유한 클래스명을 생성하여 CSS 클래스 네임 충돌을 방지한..

스크롤바 숨기기 .box { overflow: scroll; overflow-x: scroll; /* 가로축만 스크롤 */ overflow-y:scroll; /* 세로축만 스크롤 */ } overflow: scroll 기능을 이용하면 스크롤 바를 이용해 보이지 않는 컨텐츠를 보여줄 수 있다. 그런데 미관상 이 스크롤 바를 숨기고 싶을 수도 있는데, 이럴 때는 아래와 같은 코드를 추가해주면 된다. .box { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}.box::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/}..

BEM의 카테고리가 많이 고민되기는 했지만 CSS를 적용하는 것에 사용하기도 하고, 구글에 BEM을 검색하면 CSS 얘기만 나와서 CSS로 분류하기로 했다. BEM은 Block Element Modifier의 줄임말로, 변수명이나 클래스명, 아이디명을 짓는 것에 주로 사용한다. XX__YY 형식: underscore가 2개 있는 것으로, 요소의 일부분임을 알릴 때 사용한다. COFFEEXX--YY형식 : hyphen을 2개 사용한 것으로 요소의 상태를 표시한다.  꼭 사용해야 하는 건 아니고 이런 걸 사용하면 변수명을 고민안해도 되기도 하고 복잡할 때 꼬이게 될 일도 없어서 권장하는 정도인 듯하다.