Be ready to study forever - 개발자 꿈나무

4.14. 내장함수들 미리 정의된 함수들입니다. 정의된 모든 함수는 https://sass-lang.com/documentation/modules에서 확인 가능합니다. 설명의 [ ]안에 들어가는 인자는 기본값이 있으므로 적어 넣지 않으면 기본값이 작동합니다. 4.14.1. 색상 함수 mix($color1, $color2) : 두 개의 색을 섞습니다. lighten($color, $amount) : 더 밝은색을 만듭니다. darken($color, $amount) : 더 어두운색을 만듭니다. saturate($color, $amount) : 색상의 채도를 올립니다. desaturate($color, $amount) : 색상의 채도를 낮춥니다. grayscale($color) : 색상을 회색으로 변환합니다...

4.10. @if – if문 일반적인 프로그래밍 if문과 같습니다. // @if @if (조건) { /* 조건이 참일 때 구문 */ } // @if @else @if (조건) { /* 조건이 참일 때 구문 */ } @else { /* 조건이 거짓일 때 구문 */ } // @if @else if @if (조건1) { /* 조건1이 참일 때 구문 */ } @else if (조건2) { /* 조건2가 참일 때 구문 */ } @else { /* 모두 거짓일 때 구문 */ } 4.11.@for – for문 Sass의 for문은 Python의 for문과 유사합니다. @for사용법 // through // 종료 만큼 반복 @for $변수 from 시작 through 종료 { // 반복 내용 } // to // 종료 ..

4.9. @function – 함수 함수와 믹스인은 유사하지만 함수는 반환 값이 있다는 점에서 믹스인과 다릅니다. 함수와 믹스인 정의 예제 // Mixins 정의 @mixin 믹스인이름($매개변수) { 스타일; } // Functions의 정의 @function 함수이름($매개변수) { @return 값 } 함수와 믹스인 사용 예제 // Mixin의 사용 @include 믹스인이름(인수); // Functions 의 사용 함수이름(인수) SCSS예제 $max-width: 980px; @function columns($number: 1, $columns: 12) { @return $max-width * ($number / $columns) } .box_group { width: $max-width; .bo..

4.7. 재활용(Mixins) mixins는 스타일시트 전체에서 재사용할 CSS 선언 그룹을 정의하는 기능입니다. @mixin은 재사용할 내용을 선언하는 부분이며 @include는 @mixin에서 정의된 내용을 삽입,적용되는 부분입니다. 4.7.1. @mixin @mixin 사용법// SCSS문법과 Sass문법이 다릅니다. // SCSS문법 @mixin 믹스인이름 { 스타일; } // Sass문법 =믹스인이름 스타일 @mixin예제 // SCSS문법 @mixin large-text { font-size: 22px; font-weight: bold; font-family: sans-serif; color: orange; } // Sass문법 =large-text font-size: 22px font-wei..

4.6. 연산(Operation) 4.6.1. 연산자 종류 4.6.1.1. 산술연산자 종류 설명 주의사항 + 더하기 - 빼기 * 곱하기 하나의 값이 반드시 숫자 여야함 (10px * 10px 안됨) / 나누기 오른쪽 값이 반드시 숫자 여아함(10px / 10px 안됨) % 나머지 4.6.1.2. 비교연산자 종류 설명 == 이퀄 != 낫 이퀄 크다 = 크거나 같다 4.6.1.3. 논리연산자 종류 설명 and 그리고 or 또는 not 부정 4.6.2. 숫자연산 일반적으로는 px단위 연산을 하지만 상대적 단위(%, em, vw등)의 연산의 경우 calc() 함수를 사용한다. width: 50% - 20px; // 단위 모순 에러(Incompatible units error) width: calc(50% - 2..

4.4. 변수 4.4.1. 변수란? 저장한 특정 값을 재사용 할 수 있는 값. 변수 앞에는 항상 $사인이 붙습니다 ex) $변수이름: 속성값; SCSS예제 $color-primary: #e96900; $url-images: "/assets/images/"; $w: 200px; .box { width: $w; margin-left: $w; background: $color-primary url($url-images + "bg.jpg"); } CSS예제 .box { width: 200px; margin-left: 200px; background: #e96900 url("/assets/images/bg.jpg"); } 4.4.2. 변수의 유효범위 변수는 선언된 중괄호{ } 안에서만 적용이 가능합니다. 변수는 ..

4.1. 주석 SCSS의 주석은 두가지가 존재합니다. /* */ - 의 기존에 CSS에서 쓰는 주석으로 컴파일 후에도 CSS파일에 남는 주석입니다. // - 로 CSS에서는 쓰이지 않는 주석입니다. 컴파일하면 CSS파일에서는 제거됩니다. 4.2. 데이터 타입 데이터 설명 예시 Numbers 숫자 1, 0.2, 20px 2em Strings 문자열 bold, relateive, “/images.a.png” Colors 색상 red blue #ffffff Booleans 논리 true, false Nulls 비어있음 null Lists 공백이나 쉼표로 구분된 값의 목록 (apple, orange, banana), apple orange banana Maps Lists와 유사하나 값이 key : value 값..

1. Sass란? CSS Preprocessor로서 CSS전처리기입니다. 브라우저에서는 CSS만 작동하기 때문에 직접Sass를 동작 시킬 수는 없습니다. Sass는 CSS의 문법과 유사하지만 중첩이나 조건문 반복문 단위연산등이 가능한 프로그래밍 언어입니다. 단, 웹에서는 직접 작동하지 않으므로 CSS로 컴파일 후에 사용가능합니다. 2. Sass와 SCSS의 차이점 Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다.즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말입니다. 더 쉽고 간단한 차..

12. CSS grid - 2차원의 레이아웃 시스템 //CSS flex는 1차원의 레이아웃을 제공한다. *grid는 flex와 동일하게 container와 items의 개념으로 구분된다 container는 item의 부모요소이며 container 안에 items를 배치할 수 있다. 12.1. display – grid container의 자식요소는 자동으로 items가 된다. 그리드 선언 값 의미 grid block특성의 grid container를 정의 inline-grid inline 특성의 grid container를 정의 ex) .container{ display : grid; } 12.1.1. grid-template-rows – 맹시적 행의 크기를 정의,동시에 라인 이름도 정의할 수 있음. f..

11. CSS/ flex – 수직과 수평정렬 flex는 요소의 크기가 불분명하거나 동적인 경우에도 각 요소를 정렬할 수 있는 효율적인 방법이다. flex는 2개의 개념으로 나뉜다. l container – display, flex-flow, justify-content 등의 속성을 사용 l items – order, flex, align-self 의 속성을 사용 container는 items를 감싸는 부모요소이며 각 item을 정렬하기 위해선 container가 필수적이다. 주의할 부분은 container와 items에 적용하는 속성이 구분되어 있다는것이다. 11.1.1. flex container – 속성 속성 의미 display flex container를 정의 flex-flow flex-direct..