본문 바로가기

Tailwind CSS10

[JS] 코딩테스트 문제 : 섬나라 아일랜드 [BFS] 문제 : 섬나라 아일랜드(BFS 활용)문제 설명N*N의 섬나라 아일랜드의 지도가 격자판의 정보로 주어집니다. 각 섬은 1로 표시되어 상하좌우와 대각선으로 연결되어 있으며, 0은 바다입니다. 섬나라 아일랜드에 몇 개의 섬이 있는지 구하는 프로그램을 작성하세요. 1 1 0 0 0 1 00 1 1 0 1 1 00 1 0 0 0 0 00 0 0 1 0 1 11 1 0 1 1 0 01 0 0 0 1 0 01 0 1 0 1 0 0 만약 위와 같다면 ▣ 입력설명첫 번째 줄에 자연수 N(3두 번째 줄부터 격자판 정보가 주어진다. ▣ 출력설명첫 번째 줄에 섬의 개수를 출력한다. ▣ 입력예제 17 1 1 0 0 0 1 00 1 1 .. 2024. 5. 17.
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.

티스토리툴바