tailwind css 반응형으로 디자인하기

Tailwind CSS 반응형 디자인Tailwind CSS는 모든 유틸리티 클래스에 반응형 버전을 제공하여 특정 중단점에서 조건부로 적용할 수 있다. 이를 통해 HTML 코드 내에서 다양한 화면 크기에 적합한 레이아웃을 구성할 수 있다. Tailwind CSS 공식 문서의 예시를 먼저 살펴보자. 1. HTML 문서의 에 다음 뷰포트 메타 태그를 추가하여 기기 화면에 맞게 반응하도록 설정한다. 2. Tailwind의 유틸리티 클래스 앞에 중단점 접두사를 붙여 특정 화면 크기에서만 적용되도록 한다. 위의 예시에서는 md와 lg중단점을 사용하고 있다. 중단점은 Tailwind CSS에서 기본적으로 5가지 중단점을 제공한다고 한다.이 중단점들은 모든 유틸리티 클래스에 사용할 수 있어 특정 조건에 맞춰 문자 간격..

• format_list_bulleted Frontend/CSS
• · 2024. 11. 11.
• textsms

clsx - 클래스를 조건부로 적용해보자

clsx란 무엇인가?clsx는 조건에 따라 여러 CSS 클래스를 조합하여 하나의 문자열로 반환해주는 유틸리티 라이브러리이다. 주로 컴포넌트의 상태에 따라 동적으로 클래스명을 변경해야 하는 상황에서 유용하게 사용된다. clsx의 주요 기능조건부 클래스 적용객체 형태로 조건과 클래스를 전달하여 조건에 따라 클래스가 적용되도록 할 수 있다.여러 클래스의 결합clsx는 문자열, 객체, 배열 등 다양한 형태의 인수를 받아서 하나의 클래스로 결합해준다.중복 클래스 제거동일한 클래스가 중복으로 전달되더라도 clsx는 하나로 처리하여 불필요한 중복을 제거해준다. clsx는 CSS 클래스를 조건에 맞게 효율적으로 구성해주는 유틸리티로 특히 React 개발에서 자주 사용된다. classnames 라이브러리의 대체제로도 많..

• format_list_bulleted Frontend/CSS
• · 2024. 11. 11.
• textsms

[CSS] CSS의 개념 - 선언방식과 선택자

CSS 개념CSS (Cascading Style Sheets)는 웹 페이지를 꾸미려고 작성하는 코드로 HTML이 텍스트나 이미지 등 구성 요소를 웹 문서에 만든다면 CSS는 색상, 크기 위치 등의 디자인 요소를 담당하는 코드이다.  CSS 구조기본적으로 CSS는 선택자 {속성 : 값;} 의 형태로 이루어져 있다.💡예시 div { color : red; }.btn {  color : blue;  margin-left : 30px;          }  CSS 선언 방식내장방식태그의 내용으로 스타일을 작성하는 방식이다. 링크방식html 파일 헤더 부분에 css파일 링크를 연결하여 사용하는 방식이다. import 방식 CSS문서 안에서 또 다른 CSS문서를 가져와 연결..

• format_list_bulleted Frontend/CSS
• · 2024. 3. 6.
• textsms