기본 타입  - stringlet name: string = 'yang';  - numberlet age: number = 10;  - booleanlet isLogin: boolean = false;  - objectlet dog: object = { name: 'yang', age: 10 }  - Array     : 기본 자바스크립트와 달리 배열 요소의 타입을 지정할 수 있음// --- 단일 타입 배열// 문자열 배열let a: string[] = ['A', 'B', 'C'];// 숫자 배열let b: number[] = [1, 2, 3];// --- 혼합 타입 배열let c: (number | string | boolean)[] = [1, "Two", true];  - tuple     : 고정된..

TypeScript  - JavaScript에 Type을 부여한 언어  - 목표 : JavaScript에 정적 타입을 추가하여, 더 안정적이고 유지보수가 용이한 코드를 작성하도록 돕는 것  - 변수, 함수의 매개변수/반환값에 타입을 지정할 수 있음     → 컴파일 시 타입 오류를 미리 확인할 수 있음   - .ts 확장자를 가진 파일로 작성됨     → 컴파일 시 JavaScript로 변환되어 브라우저나 Node.js 환경에서 실행할 수 있음  변수 선언 및 초기화하기# 타입 명시하기  - Type Annotation (타입 주석)이라고 부름let a: any // 모든 타입 가능let b: number | undefined // number 타입 또는 undefined 타입 가능let c: "open..

레이아웃# display  - https://tailwindcss.com/docs/displayclassCSSblockdisplay: blockinline-blockdisplay: inline-blockflexdisplay: flextabledisplay: tablegriddisplay: gridhiddendisplay: none # object-fit  - 태그 내 이미지 크기 맞춤 설정  - https://tailwindcss.com/docs/object-fitclassCSSobject-containobject-fit: contain;object-coverobject-fit: cover;object-fillobject-fit: fill;object-noneobject-fit: none;object-..

※ 내에 viewport 메타 태그가 포함되어 있는지 확인미디어 쿼리 적용하기중단점 접두사최소 너비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) { ... } # 특정 범위를 설정해서 적용하기 ...ModifierCSSmax-sm@media not all and (min-width: 640px) { ... }max-md@media not all and (min-width: 768px) { ..

- 내장된 유틸리티 클래스 외에도 사용자가 직접 커스텀 유틸리티 클래스를 만들어 사용할 수 있음 테마 사용자 정의  - 색상, 크기 등의 항목을 재정의하거나 새로 생성할 수 있음  - tailwind.config.js  - https://tailwindcss.com/docs/thememodule.exports = { theme: { screens: { sm: '480px', md: '768px', lg: '976px', xl: '1440px', }, colors: { 'blue': '#1fb6ff', 'purple': '#7e5bef', 'pink': '#ff49db', 'orange': '#ff7849', ..