본문 바로가기

Tailwind css10

[next 14 공식문서 부시기] 3.3 데이터 가져오기 패턴 서버에서 데이터 가져오기Server Components 를 사용하여 서버에서 데이터를 가져오는 것을 추천하며 다음과 같은 장점을 가지고 있습니다.백엔드 데이터 리소스(예: 데이터베이스)에 직접 액세스할 수 있습니다.액세스 토큰 및 API 키와 같은 민감한 정보가 클라이언트에 노출되는 것을 방지하여 애플리케이션을 더욱 안전하게 유지가능동일한 환경에서 data fetch 및 render 과정이 통합 되므로 클라이언트와 서버 간의 불필요한 통신은 줄고 물론 브라우저의 메인스레드 작업도 감소합니다.한 요청에 대한 다수클라이언트에서 여러 개별 요청을 수행하는 대신 단일 왕복으로 여러 데이터 가져오기를 수행합니다.Fetching data where it's needed 트리의 여러 components 에서 동일한 .. 2024. 5. 12.
9. Tailwind CSS 주요 클래스 내용과 문법(layout) Layout 관련Containercontainer 클래스는 현재 breakpoint 의 최소 너비와 일치하도록 요소의 최대 너비를 설정하는 클래스입니다.Breakpoint 에 따른 최대 너비Breakpoint (min-width)기존 css 속성Nonewidth: 100%;sm (640px)max-width: 640px;lg (1024px)max-width: 1024px;가운데 정렬 컨테이너Tailwind의 컨테이너는 자동으로 중앙에 위치하지 않습니다.mx-auto : margin-left: auto; margin-right: auto; Columns요소 내의 콘텐츠를 구분 하는 열 수를 설정tailwind 문법 및 실제 css 예시tailwind 클래스기존 css 속성columns-1column.. 2024. 5. 9.
8. Tailwind CSS 기본 설정과 옵션 - 2 설정 옵션presetspresets 섹션을 사용하면 Tailwind의 기본 설정을 사용하는 대신 사용자 정의 기본 설정을 지정할 수 있습니다.// tailwind.config.js/** @type {import('tailwindcss').Config} */module.exports = { presets: [ require('@acmecorp/base-tailwind-config') ], ...}prefixprefix 옵션을 사용하면 Tailwind에서 생성된 모든 유틸리티 클래스에 맞춤 접두사를 추가할 수 있습니다. 이는 이름 충돌이 발생할 수 있는 기존 CSS 위에 Tailwind를 계층화할 때 유용할 수 있습니다.※ 사용자 정의 클래스에는 접두사가 추가되지 않습니다./** @type {im.. 2024. 5. 8.
7. Tailwind CSS 기본 설정과 옵션 - 1 tailwind 기본 설정기본적으로 Tailwind는 프로젝트 루트에서 tailwind.config.js 파일에 내용을 참고해 사용자 정의된 내용을 적용합니다.기본 설치npx tailwindcss init기본 설정 파일(tailwind.config.js) 구조/* tailwind.config.js */module.exports = { content: [...], theme: { ... extend: { ... }, }, plugins: [...],}ESM 설정 및 설치기본적으로 설치 시 프로젝트가 ES 모듈인지 감지하여 올바른 구성 파일을 자동으로 생성합니다.다만 --esm 플래그를 사용하여 ESM 구성 파일을 명시적으로 생성할 수도 있습니다.npx tailwindcss .. 2024. 5. 6.
6. Tailwind CSS 커스텀 스타일과 관련 지시어 및 함수 임의의 값(Arbitrary values) 사용Tailwind의 대괄호 표기법을 사용하여 임의의 값으로 즉석에서 클래스를 생성할 수 있습니다. 배경색, 글꼴 크기, 의사 요소 콘텐츠 등을 포함하여 프레임워크의 모든 유틸리티 클래스에 적용할 수 있습니다. {#each items as item} {item} {/each} ......임의의 값 모호함 해결(Resolving ambiguities)Tailwind의 많은 유틸리티는 text-lg 와 text-black 와 같이 text- 네임스페이스를 공유하지만 하나는 글꼴 크기용이고 다른 하나는 색상용으로 구분되어 사용됩니다.임의의 값을 사용하는 경우 Tailwind는 일반적으로 전달한 값에.. 2024. 5. 4.
5. Tailwind CSS 다크모드 적용 사용자 정의 스타일 설명Tailwind에는 다크 모드가 활성화되었을 때 사이트를 다르게 스타일링할 수 있는 dark 키워드를 사용할 수 있습니다. 기본적으로는 Prefers-color-scheme CSS 미디어 기능을 사용하지만 selector 방식을 사용해 수동으로 전환 가능합니다.prefers-color-scheme CSS 미디어 쿼리사용자가 어떤 테마를 선호하는지 감지할 수 있는 CSS 기능입니다. 이 쿼리는 사용자가 시스템 설정에서 밝은(light) 또는 어두운(dark) 테마를 선택했는지 여부를 확인하여 스타일을 적용 할 수 있습니다./* 다크 테마에 대한 스타일 */@media (prefers-color-scheme: dark) { body { background-color: #000000; /* 어두운 .. 2024. 4. 30.
4. Tailwind CSS 반응형 디자인 설명반응형 utility class 를 사용하여 반응형 사용자 인터페이스를 구축할 수 있습니다. Tailwind의 모든 utility class는 다양한 breakpoint에서 조건부로 적용될 수 있으므로 복잡한 반응형 인터페이스를 쉽게 구축할 수 있습니다.Breakpoint 종류   중단점      최소 넓이   CSSsm640px@media (min-width: 640px){ ... }md768px@media (min-width: 768px){ ... }lg1024px@media (min-width: 1024px) { ... }xl1280px@media (min-width: 1280px) { ... }2xl1536px@media (min-width: 1536px) { ... }사용 예시mobile f.. 2024. 4. 29.
3. Tailwind CSS 의사 클래스(Pesudo classes), 의사 요소(Pesudo elements) Tailwind CSS 선택자 Tailwind CSS 의 모든 유틸리티 클래스는 대상으로 삼으려는 조건을 설명하는 선택자를 클래스 이름 시작 부분에 추가하여 조건부로 적용할 수 있습니다. 의사 클래스 (Pseudo-classes) - :hover, :focus, :first-child, :required, ...etc의사 요소 (Pseudo-elements) - ::before, ::after, ::placeholder, ::selection, ...etc미디어 및 기능 쿼리 (Media and feature queries) - responsive breakpoints, dark mode, prefers-reduced-motion, ...etc속성 선택자 (Attribute selectors) - [di.. 2024. 4. 28.
2. Tailwind CSS 이해와 의의 Tailwind CSS의 이해 Tailwind CSS 는 미리 생성된 클래스를 HTML에 요소의 스타일을 지정하는 방식으로, 제한된 기본 유틸리티 클래스들로 복잡한 컴포넌트를 구축합니다.일반적인 스타일 적용 방식 스타일을 적용하는 다양한 방식이 존재하지만 기본적인 CSS 를 사용하는 문법이나 구조를 크게 벗어나지 않는다. 맞춤형 디자인에 맞춤형 CSS 가 존재할 수 밖에 없는 상황이다.  ChitChat You have a new message! Tailwind CSS 스타일 적용 방식 Tailwind CSS를 사용하면 기존 클래스를 HTML에 직접 적용하여 요소의 스타일을 지정할 수 있습니다. CSS 를 작성하지 않고 유틸리티 클래스를 사용하여 맞춤형 디자인을 구축할 수 .. 2024. 4. 28.
1. Tailwind CSS 개념 및 초기 설정 Tailwind CSS Tailwind CSS는 클래스 기반의 CSS 프레임워크로, HTML 파일, JavaScript 컴포넌트 및 기타 템플릿 요소에 클래스를 적용하여 스타일을 지정합니다. 이후 빌드 과정을 통해 사용된 클래스들을 기반으로 최적화된 CSS 를 생성하여 재사용 가능하고 일관된 디자인을 쉽게 구현할 수 있습니다.설치 // tailwindcss 설치npm install -D tailwindcss// tailwind.config.js 파일 프로젝트의 루트 디렉토리에 생성npx tailwindcss initconfig 파일 설정 // tailwind.config.js/** @type {import('tailwindcss').Config} */module.exports = { // tailwin.. 2024. 4. 25.

티스토리툴바