클라이언트/CSS (25) 리스트형 [CSS] Prettier로 TailwindCSS 정렬하기 (웹스톰) Prettier를 사용하면 코드를 자동으로 포맷팅해주는데, tailwind css를 사용할 때 className까지도 포맷팅 해줄 수 있다.▪ Prettier 설치npm install --save-dev prettier전역으로 설치해줘도 되는데, 난 거의 프로젝트에 devDependencies로 추가하는 편이다.▪ Prettier - Tailwind CSS 플러그인 설치npm install --save-dev prettier-plugin-tailwindcss▪ . prettierrc 파일 설정{ "plugins": ["prettier-plugin-tailwindcss"]}▪ 웹스톰 설정나는 여기에 html이랑 json까지 추가하는 편이다.※ 나의 prittier 설정{ "trailingComma": .. [CSS] 테일윈드 CSS(Tailwind CSS) // 테일윈드 CSS, Tailwind CSS - 유틸리티 우선 방식의 CSS 프레임워크 - html 요소에 클래스를 추가함으로써 스타일을 단계적으로 적용하여 전체 컴포넌트를 스타일링한다. - 컴포넌트 기반의 접근 방식을 취하지 않고, 빌딩 블록(building block) 스타일의 클래스를 제공한다. - pt-2 와 같은 사전에 정의된 css 규칙을 사용할 수 있다. - 공식 문서: https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.. [SCSS] 웹스톰(Webstorm) SCSS 컴파일 SCSS 파일을 CSS 파일로 변환하기 위해서는 여러 가지 방법이 존재한다. sass-loader를 사용할 수도 있고, CLI에 명령어를 입력할 수도 있고, IDE에서 제공하는 기능을 사용할 수도 있다. 나는 웹스톰을 사랑하기 때문에.. 웹스톰의 File Watchers를 설정해서 컴파일했다. File Watcher를 사용하면 SCSS 파일이 변경될 때마다 자동으로 CSS 파일로 컴파일하도록 설정할 수 있어서 매우 편리하다. 1. sass를 설치한다. 나는 전역으로 설치했지만, 필요에 따라 프로젝트에 설치해도 된다. npm i -g sass 2. Settings > Tools > File Watchers에 들어가서 SCSS Template을 추가한다. 3. 컴파일 상세 설정을 해준다. 주로 설정해야 할 .. Reset CSS // Reset CSS - 브라우저마다 기본 패딩이나 여백, 헤딩 글꼴 크기 등이 다르기 때문에 그러한 css를 모두 초기화시켜 주는 작업이다. - 참고: https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you.. 미디어 쿼리 // 반응형 웹, Responsive Web - 반응형 레이아웃 - 웹 소비 장치 > 다양화 - 이전: PC(다양한 해상도) - 이후: PC, 태블릿, 스마트폰 등(훨씬 다양한 해상도) - 웹 페이지의 크기 1. 페이지 각각 생성 - PC > PC 해상도에 맞는 페이지 제작 - Mobile > Mobile 해상도에 맞는 페이지 제작 2. 페이지 1회 생성 > 반응형 레이아웃 > CSS 미디어 쿼리 - PC > PC 해상도에 맞게 출력 - Mobile > Mobile 해상도에 맞게 출력 //미디어 쿼리, Media Queries - 각 미디어 매체에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것 - 반응형 웹 사이트 제작에 필수적임. @media mediaqueries { /* style rules .. CSS 변수 // 변수, variable --변수명: 값; ~ 값 1. 열거형(색상) 2. 열거형(left, center, solid ... ) 3. 수치(단위 포함) - 변수 사용(호출): var(--변수명) Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi, ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui ad, libero, voluptatum repudiandae, harum provident sit eligendi necessitatibus atque ut debitis. Doloribus illum dolorum dolores aliquid quasi sit repell.. CSS 속성 - 변형(Transform) // 변형, Transform - 위치, 크기, 회전, 왜곡 등 ~ transform: translate(): 위치 변형(이동) ~ transform: scale(): 크기, 배율 변형(확대/축소) - 단지 크기만 키우는 것이 아님! 그 안의 모든 것이 늘어나고 줄어든다. ~ transform: rotate(): 회전 변형 ~ transform: skew(): 왜곡 변형(비틀기) ~ transform: matrix(): 위의 4개 포함. 사용자 정의형 > 행렬 - translate() 상자1 상자2 상자3 - scale() 상자1 상자2 상자3 - rotate() 상자1 상자2 상자3 - skew() 상자1 상자2 상자3 상자1 상자2 상자3 고양이 CSS 속성 - 전환(Transition) // 전환, transition - 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 속성 - 수치형 속성에만 적용 가능(숫자, 색상) transition-property: 트랜지션을 적용할 속성 ※ all : 모든 속성 transition-duration: 트랜지션이 적용되는 시간 transition-timing-function: 트랜지션 가속도 ~ linear / ease / ease-in ease-out / ease-in-out - ease: 기본값 상자 상자 - transition-timing-function linear ease(default) ease-in ease-out ease-in-out - transition-delay linear ease(default) ease-in .. < 1 2 3 4 >
