CSS (8) 썸네일형 리스트형 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.. transform & transition 1. 사용 용도 Element(html 정보)를 다채롭게 만들기 위함 2. transform & transition(transform) Element(html 정보)의 모양이나 위치를 변형하는 속성 (transition) Element(html 정보)에 변형 효과를 주는 속성 3. 속성 실습1. Element(html 정보)를 넣어준다.12345 abc cs 2. css 정보를 넣어준다.123456789 #background { background : #000fff; } #main { font-size : 100px; background : #fff000; }cs 3. 결과 4. CSS 정보 변경12345678910111213 #background { background : #000fff; } #main.. display : inline & block 1. display Element(html 정보)의 어떤 형식으로 전시할지 정의하는 속성 2. inline & block(display:inline) Element(html 정보)를 inline 요소로 정의함 (대표적 inline 배치 tag : a, span) (display:block) Element(html 정보)를 block 요소로 정의함 (대표적 block 배치 tag : div, p) (display:inline-block) Element(html 정보)를 inline-block 요소로 정의함 3. 속성 실습1. Element(html 정보)를 넣어준다.123456789 abc def ghi jkl mno pqrColored by Color Scriptercs 2. css 정보를 넣어준다.12.. :link :visited :hover :active 속성 1. 사용 용도 정보의 알아보기 쉽게 정보에 효과를 주는 속성 2. 정의(:link :visited) a teg 에서 사용 가능:link = 방문 전 변화 상태:visited = 방문 후 변화 상태 (:hover :active) :hover = 마우스를 올려놨을 시 상태 변화:active = click 시 상태 변화 3. :link :visited :hover :active 속성 실습 1. 정보를 넣어준다.123456 코딩분해 Colored by Color Scriptercs 2. css 정보를 넣어준다. 1234567 a:link {background:yellow;} a:visited {background:black;} div {width:100px; height:100px; border:1px sol.. 960 Grid System 1. Grid System 요소 (Container, Column, Gutter) Container : 몇 개의 Column을 사용하는 Grid System 인지 정하는 것이다. Column : 실제 정보가 들어가는 부분이다. Gutter : Column의 양쪽에 들어가며 Column과 Column 간격에 을 주기 위함이다. 2. 960 Grid System (12 Column Grid) 한줄당 총 960px을 사용하며, 그림과 같이 Gutter는 Column의 양쪽에 위치하며 폭은 10px이다. Column의 폭은 Class name grid_1은 60px grid_2는 140px grid_12는 940px이다. (16 Column Grid) 한줄당 총 960px을 사용하며, 그림과 같이 Gutter는.. 이전 1 다음
