CSS(2)
-
TailwindCSS
1. 개요 공식 사이트 링크 Tailwind CSS란? Utility-First CSS : 미리 설정된 유틸리티 클래스들을 조합하여 적용하는 방식 (예: Bootstrap) HTML 코드 안에 스타일 코드 작성 CSS 파일 별도로 관리할 필요 없음 클래스명때문에 고민할 필요 없음 로우 레벨의 스타일 제공 CSS 요소 수준의 유틸리티 클래스를 제공 세밀한 디자인 구현 가능 동일한 색상이나 사이즈, 간격등 일관된 디자인 적용 가능 2. 설치 및 설정 설치 설치 방법 tailwindcss CLI로 설치 PostCSS 플러그인으로 설치(권장) 설치 방법 PostCSS : JS플러그인을 통해 스타일 변형하는 도구 CRA에서도 사용 autoprefixer 기능 사용 가능 프레임워크에 추가 CDN 사용 설정 tail..
2023.02.02 -
SCSS
개요 SCSS란? Sassy CSS (Syntactically Awesome Style Sheets) CSS 에서 단순반복되는 부분이나 불편함을 해소시키기 위해 만든 언어 > SASS SASS 에는 Sass 와 SCSS 가 있음 (각각 확장자는 .sass, .scss) 기존 Sass 에서 들여쓰기와 줄바꿈에 의존하던 방식을, SCSS 에서는 중괄호를 사용하는 방식으로 사용 예제 .list width: 100px float: left li color: red background: url("./image.jpg") &:last-child margin-right: -10px .list { width: 100px; float: left; li { color: red; background: url("./image..
2023.02.01