프로그래밍/CSS
-
[CSS] 미디어 쿼리와 문제점프로그래밍/CSS 2024. 6. 8. 13:25
개요1. 미디어 쿼리2. 다양한 CSS 기술3. 컨테이너 쿼리 최근 몇년간 출시된 많은 CSS의 기능들은 특정 조건에서 적용되도록하는 모습을 보이고 있으며 이러한 상당수는 반응형 디자인과 직접적인 관계가 많은 것들이 있다. 이러한 부분에서 미디어 쿼리는 반응형 레이아웃에서 중요하게 여겨지지만 이러한 새롭게 출시된 CSS와 함께 사용함으로써 더욱 효과적으로 반응형 디자인을 할 수 있다고 한다. ✅ 미디어 쿼리 (Media Query) 📦 미디어 쿼리(Media Query)란?CSS의 일부 기능으로 미디어 유형 혹은 특정 장치의 특성에 따라 스타일을 조건부로 적용하는 기능을 뜻한다. 이를통해 다양한 미디어 유형과 다양한 장치에 맞춤으로 스타일과 레이아웃을 조정할 수 있고 이러한 반응형 디자인은 더 나은 ..
-
[CSS] Float, Flex, Grid프로그래밍/CSS 2023. 12. 1. 17:14
Float CSS의 정렬을 위해 사용되는 속성으로 float을 이용해 띄워지면(정렬되면) 텍스트 및 인라인 요소가 그 주위를 감싸며 흐르듯 배치되기 때문에 이름이 붙여진 것을 보임 절대위치 요소는 float 속성을 무시한다 자주 사용되는 Value left : 블록의 좌측으로 이동 후 부동 right : 블록의 우측으로 이동 후 부동 none : 기본값으로 기본속성 그대로 유지 inline-start : 시작쪽에 위치하고 주변에 인라인 및 텍스트 요소가 감싸짐 inline-end : 끝쪽에 위치하고 주변에 인라인 및 텍스트 요소가 감싸짐 Flex-box CSS3에서 처음 소개된 한방향 레이아웃 모델로써 HTML 요소 정렬에 사용되며 float 더 적은 코드와 읽기 쉬운방법으로 float을 대체하고 사용 ..
-
[Jest] Vite + Typescript + pnpm 환경에서 Jest프로그래밍/CSS 2023. 11. 30. 21:36
개요 설치하기 자주사용하는 Matcher 1. 설치하기 Jest 패키지 설치) pnpm add -D @types/jest ts-node ts-node ts-jest @testing-library/react identity-obj-proxy jest-environment-jsdom @testing-library/jest-dom jest-svg-transformer package.json 수정) "scripts":{ ... "test": "jest" } 실행문구임 이거 추가해줘서 터미널에서 쳐야함 Jest 설정파일 추가) // jest.config.ts export default { testEnvironment: "jsdom", transform: { "^.+\\.tsx?$": "ts-jest", }, mo..
-
[TailwindCSS] TailwindCSS사용 5가지의 모범사례프로그래밍/CSS 2023. 11. 21. 19:34
개요 프로젝트에 디자인 시스템이 있어야 한다. 컴포넌트 기반 접근 방식을 사용하고 있어야 한다. 유틸리티 클래스 수를 줄여라 디자인토큰을 그룹화하고 의미적으로 이름 짓기 클래스 순서를 유지해라 사용하지 않는 클래스는 빌드에서 제외해봐라 스타일 덮어쓰기 및 확장 시 불일치 방지 1. 2. 재사용가능하게 컴포넌트 만들어서 거기다가 CSS설정해서 반복하는 걸 최대한 줄여라 3. 유틸리티 클래스 수를 줄여라 ex) pt-4 pb-4 => py-4 4. 명확한 변수명과 코드 명확성을 위한 규칙은 클린 코딩습관에 좋다 ex) bright-red와 같은 이름보다 error와 같이 간결하게 일관성을 높여라 5. 클래스 순서를 정렬해서 보기 편하게 만들어라 Doc (tailwindCSS 공식 prettier) 6. ta..