본문 바로가기

전체 글195

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.
Git Commit 메시지 제대로 작성하기 Git Commit Message Convention 커밋 메시지를 작성할 때 사용자 간 원활한 소통을 위해 일관된 형식 커밋 메시지 형식 제목 type: Subject 본문 body 꼬리말 footer 기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다. Commit Type type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다. feat : 새로운 기능 추가 fix : 버그 수정 docs : 문서 내용 변경 style : 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 등 refactor : 코드 리팩토링 test : 테스트 코드 작성 chore : 빌드 수정, 패키지 매니저 설정, 운영 코드 변경이 없는 경우 등 Subject (제목) 제목은 50글자 이내로 작성한다. 첫글자는 .. 2024. 4. 24.
[JS] 코딩테스트 문제 : 섬나라 아일랜드 [DFS] 문제 : 섬나라 아일랜드(DFS 활용) 문제 설명 N*N 의 섬나라 아일랜드의 지도가 격자판의 정보로 주어집니다. 각 섬은 1로 표시되어 상하좌우와 대각선으로 연결되어 있으며, 0은 바다입니다. 섬나라 아일랜드에 몇 개의 섬이 있는지 구하는 프로그램을 작성하세요. 1 1 0 0 0 1 0 0 1 1 0 1 1 0 0 1 0 0 0 0 0 0 0 0 1 0 1 1 1 1 0 1 1 0 0 1 0 0 0 1 0 0 1 0 1 0 1 0 0 만약 위와 같다면 ▣ 입력설명 첫 번째 줄에 자연수 N(3= 0 && X < board.length) { // 이동할 좌표에이어진 섬이 있는 경우 이동한 위치좌표를 기준으로 추가 탐색을 위해 함수를 재귀적으로 호출 if (board[Y][X] === 1) { console.. 2024. 4. 23.
[JS] 코딩 테스트 문제 : 송아지 찾기 [BFS : 상태트리탐색] 문제 : 송아지 찾기(BFS : 상태트리탐색) 문제 설명 현수는 송아지를 잃어버렸다. 다행히 송아지에는 위치추적기가 달려 있다. 현수의 위치와 송아지의 위치가 수직선상의 좌표 점으로 주어지면 현수는 현재 위치에서 송아지의 위치까지 다음과 같은 방법으로 이동한다. 송아지는 움직이지 않고 제자리에 있다. 현수는 스카이 콩콩을 타고 가는데 한 번의 점프로 앞으로 1, 뒤로 1, 앞으로 5를 이동할 수 있다. 최소 몇 번의 점프로 현수가 송아지의 위치까지 갈 수 있는지 구하는 프로그램을 작성하세요. ▣ 입력설명 첫 번째 줄에 현수의 위치 S와 송아지의 위치 E가 주어진다. 직선의 좌표 점은 1부터 10,000 까지이다. ▣ 출력설명 점프의 최소횟수를 구한다. 답은 1이상입니다. ▣ 입력예제 1 5 14 ▣ 출력.. 2024. 4. 23.
[JS] 코딩 테스트 문제 : 이진트리 넓이 우선 탐색 [BFS] 문제 : 이진트리 넓이 우선 탐색(BFS) 문제 설명 아래 그림과 같은 이진트리를 넓이 우선 탐색해보세요. 넓이 우선 탐색 : 1 2 3 4 5 6 7 넓이 우선 탐색 (BFS) 설명 트리나 그래프를 순회할 때 레벨 순서대로 탐색하는 알고리즘입니다. BFS를 구현할 때는 큐(queue)를 사용하여 각 노드를 탐색 순서대로 저장하고 처리합니다. 상태 트리 탐색, 최단 거리 계산 등에 활용 할 수 있다. 내코드 function solution() { let answer = ""; // 탐색한 노드들의 순서를 문자열로 저장할 정답 변수 // 너비 우선 탐색을 처리할 재귀함수 // num : 현재 레벨의 가장 낮은 수를 의미하는 인자 // lever : 현재 트리에서 탐색할 노드의 레벨을 의미하는 인자 func.. 2024. 4. 5.
[JS] 코딩 테스트 문제 : 미로탐색 [DFS] 문제 : 미로탐색(DFS) 문제 설명 7*7 격자판 미로를 탈출하는 경로의 가지수를 출력하는 프로그램을 작성하세요. 출발점은 격자의 (1, 1) 좌표이고, 탈출 도착점은 (7, 7)좌표이다. 격자판의 1은 벽이고, 0은 통로이다. 격자판의 움직임은 상하좌우로만 움직인다. 미로가 다음과 같다면 출발 0 0 0 0 0 0 0 1 1 1 1 1 0 0 0 0 1 0 0 0 1 1 0 1 0 1 1 1 1 0 0 0 0 1 1 1 0 1 1 0 0 1 0 0 0 0 0 도착 위의 지도에서 출발점에서 도착점까지 갈 수 있는 방법의 수는 8가지이다. ▣ 입력설명 7*7 격자판의 정보가 주어집니다. ▣ 출력설명 첫 번째 줄에 경로의 가지수를 출력한다. ▣ 입력예제 1 0 0 0 0 0 0 0 0 1 1 1 1 1 0.. 2024. 4. 2.

티스토리툴바