CSS/SASS (4) 썸네일형 리스트형 build tool gulp 1. gulp란 코드에서 반복적이고 자주 사용되는 일은 자동화해주는 빌드 툴생산성에 큰 도움이 되므로 프로젝트 진행시 많이 사용 2. gulp 설치 1 node.js를 설치2 터미널(cmd) 실행3Window npm install -g npm npm 최신 버전으로 업그레이드 npm install -g gulp-cli vue-cli 설치macOS sudo npm install -g npm npm 최신 버전으로 업그레이드 sudo npm install -g gulp-cli vue-cli 설치4 gulp init package.json 생성5 npm install --save-dev gulp gulp 모듈 설치6 npm install --save-dev gulp-(플러그인이름) 플러그인 설치 3. gulpfi.. SASS 코드 종류 2 (재활용, 함수, 연산자, 조건문, 반복문, 내장함수) 1. 코드의 종류 인수 인수설정 인수의 기본값 설정 가변 인수 재활용 @mixin 재활용 @include 불러오기 @content 속성 등 추가 함수 @function, @return 함수 연산 == 동등 != 부등 보다 큰 = 보다 크거나 같은 and 그리고 or 또는 not 부정 조건문 if 3항연산자 @if if문 @else if if문 반복문 @for $i from 1 through 3 for문 @each $list in $lists for in 문 @while while문 2. 코드 예시문 1. 인수 함수의 인자를 생각하면 쉽다. 인수설정 - $변수명12345678910111213@mixin test($color) { background: $color;}header { width: 100%; u.. SASS 코드 종류 1 (중첩, 변수, 가져오기, 연산자) 1. 코드의 종류 중첩 & 상위 선택자 선택 @at-root 중첩 벗어나기 속성 중첩하기 @extend확장하기 변수 $ 변수 설정 {} 변수 유효범위 설정 변수 재설정 !global 전역 변수 설정 !default 초깃값 설정 #{} 문자사이에 변수넣기 가져오기 @import 가져오기 , 여러 파일 가져오기 Partials 파일 분할 연산 + 더하기 - 빼기 * 곱하기 / 나누기 % 나머지 2. 코드 예시문 1. 중첩 중첩 - {}※ {} 안에 태그를 불러올수 있다.123456789header { width: 100%; ul { width: 50%; li { float: left; } }}cs123456789header { width: 100%;}header ul { width: 50%;}header u.. SASS의 정의, 사용방법 1. SASS 란 SASS (Syntactically Awesome Style Sheets) CSS의 코드를 재활용성과 가독성을 높여 효율적이게 해준다. 2. SCSS 란 SCSS - SASS의 3버전 부터 등장하여 CSS의 문법을 따라가 CSS를 하던 개발자라면 쉽게 코딩 할 수 있게 만들었다. 3. SASS 사용 방법 SASS 코드 작성 -> SASS 파일을 CSS파일로 컴파일 -> CSS 변환 4. 컴파일 방법 (1) 웹페이지 실시간 변환 (2) node-sass (3) 개발도구 확장 프로그램 웹페이지 실시간 변환 웹페이지 접속 > 왼쪽 코드 입력 > 오른쪽 반환 node-sass node.js 설치 npm install -g node-sass $ node-sass [옵션] [scss파일] [반환c.. 이전 1 다음