FrontEnd/HTML, CSS 썸네일형 리스트형 Tailwind CSS vs SCSS (Sass) Tailwind CSSUtility-First Framework: Tailwind CSS는 utility-first CSS 프레임워크로, 클래스 이름이 특정 스타일을 의미한다. 예를 들어, bg-blue-500, text-center, p-4와 같은 클래스들이 있다.설정 및 커스터마이징: Tailwind는 설정 파일을 통해 쉽게 커스터마이징할 수 있다. 테마, 색상, 여백 등을 설정 파일에서 정의하여 재사용할 수 있다.재사용 가능한 클래스: 스타일을 클래스 단위로 재사용할 수 있어서, 동일한 스타일을 여러 요소에 적용할 때 편리하다.디자인 일관성: 디자인 시스템을 구현하기 쉽다. 미리 정의된 클래스들을 사용하여 일관된 디자인을 유지할 수 있다.JSX와의 호환성: React와 같은 프레임워크와 잘 통합되어.. CSS LineArrow body { background-color: #282828; } div.arrow { width: 6vmin; height: 6vmin; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: rotate(45deg); &::before { content: ''; width: 100%; height: 100%; border-width: .8vmin .8vmin 0 0; border-style: solid; border-color: #fafafa; transition: .2s ease; display: block; transform-origin: 100% 0; } &:after { content: ''; float: left;.. [Compass / 컴퍼스] Create compass project compass 프로젝트 생성 [터미널, 생성하고 싶은 위치에서] compass create projectFolderName 해당 디렉터리에 config.rb 파일과 .sass-cache, sass, stylesheets 폴더가 생성 됨 기존 프로젝트에 compass 임포팅 compass install compass 완료시 아래 메시지가 출력됨 To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage: 2.메시지가 시키는대로 HTML 헤드에 복붙 3.생성된 sass파일 -> sass 폴더로 4.sass와 같은 이름의 css 파일을 만들고 -> stylesheets 폴더로 5.sass 파일 최상단.. [Compass] Sass, Compass, ruby install rbenv install with homebrew brew update //homebrew update brew install rbenv ruby-buildruby install rbenv install 2.x.x //install 2.x.x version rbenv rehash //start new version of rubyruby -v(version check) ruby -vruby setiing rbenv global 2.x.x //set global ruby version rbenv local 2.x.x //set local ruby version Homebrew: https://brew.sh/index_ko Sass install gem install sassCompass install gem.. 이전 1 다음
