기본 콘텐츠로 건너뛰기

Part03 CSS - 04

 Sass(SCSS)

Sass - 웹은 css만 동작하기에 전처리기(Less, Sass(SCSS), Stylus)라고 부름(컴파일하면 css로 나옴)

Sass와 SCSS는 차이점 - Sass(Syntactically Awesome Stylus Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합, SCSS는 CSS와 거의 같은 문접으로 Sass 기능을 지원한다는 뜻, 가장 간단한 차이는 {}와 ;의 유무(Sass는 안씀, SCSS는 사용), Sass는 mixins 기능을 =,+로 사용하고 SCSS는 @mixin, @include로 사용


주석 - 컴파일되지 않는 주석(//)은 css로 변환되지 않음, 기본 주석(/* */)은 css로 변환이 됨

// 컴파일되지 않는 주석
/* 컴파일되는 주석 */
//Sass *줄이 잘 맞아야함 - SCSS상관 없음
/* 컴파일되는
 * 여러 줄
 * 주석 */

데이터 종류 - null이 사용되면 컴파일하지 않음, Maps는 ()를 꼭 붙여야 함

중첩(Nesting) - 중첩 기능을 통하여 상위 선택자의 반복을 피하고 복잡한 구조를 편리하게 작성 가능

& Ampersand(상위 선택자 참조) - 중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}
//&.active의 의미는
.btn.active{
  color: red;
}

@at-root(중첩 벗어나기) - 중첩안에서 생성하되 중첩 밖에서 사용해야 할 경우

.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}
//@at-root의 의미는
.list li {
  width: 100px;
  height: 50px;
}
.box {
  width: 100px;
  height: 50px;
}

중첩된 속성 - font-, margin- 등과 같이 동일한 네임스페이스를 속성들을 편하게 작성 가능

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}
.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-bottom: 40px;
  padding-right: 30px;
}

변수 - 변수 이름 앞에 $를 붙임($변수이름: 속성값)

!global(전역 설정) - 플래그를 사용하여 변수의 유효범위를 전역으로 설정함

$color: #111 !global;

!default(초깃값 설정) - 할당되지 않은 변수의 초깃값 설정이므로 할당되어 있는 변수가 있으면 기존 할당 값 사용됨, '혹시 기존 변수가 있을 경우 현재 설정하는 변수의 값은 사용하지 않겠다'는 의미

$color-primary: blue !default;

#{}(문자 보간) - 코드에 변수 값을 넣을 때 사용

//unquote()는 문자에서 따옴표를 제거
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
//결과는
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

가져오기(import) - @import로 가져올 수 있음, 여러 파일 가져올 때는 파일 이름을 ,로 구분

//CSS 규칙으로 컴파일되는 상활들
//파일 확장자가 .css일 때
@import "hello.css";
//파일 이름이 http://로 시작
@import "http://hello.com/hello";
//url()이 붙었을 경우
@import url(hello);
//미디어쿼리가 있는 경우
@import "hello" screen;
@import "header", "footer";

파일 분할(Partials) - header나 side-menu 같이 각 기능과 부분으로 나눌때는 파일 이름 앞에 _를 붙이면 컴파일시 각각 생기지 않고 임포트되는 css만 생성이 됨

연산 - *(곱하기) 사용시 하나 이상의 값이 반드시 숫자여야 하고 /(나누기) 사용시 오른쪽 값이 반드시 숫자여야 함

숫자 

            상대적 단위 연산 - 상대적 단위(%, em, vw등)의 연산의 경우 CSS(calc())로 연산

        width: calc(50% - 20px);

            나누기 연산의 주의사항 - 속성 값의 숫자를 분리하는 방법으로 /를 허용하기 때문에 /가 나누기 연산으로 사용되지 않을 수 있음

        div {
          $x: 100px;
          width: $x / 2;  // 변수에 저장된 값을 나누기
          height: (100px / 2);  // 괄호로 묶어서 나누기
          font-size: 10px + 12px / 3;  // 더하기 연산과 같이 사용
        }

문자(String) - 문자 연산의 결과는 첫 번째 피연산자를 기준으로 함, 첫 번째 피연산자에 따옴표가 붙어있다면 연산 결과를 따옴표로 묶고 첫 번째 피연산자에 따옴표가 붙어있지 않다면 연산 결과도 따옴표를 처리하지 않음

논리(Boolean) - @if 조건문에서 사용되는 논리 연산에는 and, or, not이 있음

재활용(Mixins) - 재사용 할 css 선언 그룹을 정의하는 기능, 만들어서 선언(@mixin)하고 사용(@include)함

//:하고 값을 지정하면 값이 안들어올때의 default값(인수의 기본값)
@mixin size($w: 100px, $h: 100px){
    width:$w;
    height: $h;
}

.box1{
    @include size;
}
.box2{
    @include size(200px, 100px);
}
//키워드 인수
.box3{
    @include size($h:300px);
}
//컴파일 하면
.box1 {
  width: 100px;
  height: 100px;
}

.box2 {
  width: 200px;
  height: 100px;
}

.box3 {
  width: 100px;
  height: 300px;
}

@mixin - SCSS와 Sass는 조금 다름, &도 사용 가능

//SCSS
@mixin name{
  style;
}
//Sass
=name
  style

@include - 선언된 Mixin을 사용

//SCSS
@include name;
//Sass
+name

인수(Arguments) - 함수처럼 인수를 가질 수 있고, 기본값 설정과 키워드 인수, 가변인수(...)를 설정할 수 있음

//가변인수 ...
@mixin var($w, $h, $bg...){
  width: $w;
  height: $h;
  background: $bg;
}
.box{
  @include var(100px, 200px, url("image/a.png") no-repeat 10px 2px);
}
//컴파일하면
.box {
  width: 100px;
  height: 200px;
  background: url("image/a.png") no-repeat 10px 2px;
}
//가변인수를 전달할 때
@mixin font(
  $style: normal,
  $weight: normal,
  $size: 16px,
  $family: sans-serif
) {
  font: {
    style: $style;
    weight: $weight;
    size: $size;
    family: $family;
  }
}
div {
  // 매개변수 순서와 개수에 맞게 전달
  $font-values: italic, bold, 16px, sans-serif;
  @include font($font-values...);
}
span {
  // 필요한 값만 키워드 인수로 변수에 담아 전달
  $font-values: (style: italic, size: 22px);
  @include font($font-values...);
}
a {
  // 필요한 값만 키워드 인수로 전달
  @include font((weight: 900, family: monospace)...);
}
//컴파일하면
div {
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  font-family: sans-serif;
}
span {
  font-style: italic;
  font-weight: normal;
  font-size: 22px;
  font-family: sans-serif;
}
a {
  font-style: normal;
  font-weight: 900;
  font-size: 16px;
  font-family: monospace;
}

@content - 원하는 스타일 블록을 전달

@mixin icon ($url){
    &::after{
        content: $url;
        @content;
    }
}
.box1{
    @include icon("image/icon.png");
}
.box2{
    @include icon("image/icon.png"){
        display: block;
        position: absolute;
        width: 100px;
        height: 100px;
    };
}
//컴파일하면
.box1::after {
  content: "image/icon.png";
}

.box2::after {
  content: "image/icon.png";
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
}

확장(Extend) - 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우(권장하지 않음 Mixin을 추천)

.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  @extend .btn;
  background: red;
}
//컴파일 하면 ,는 다중 선택자라서 둘다의 의미임
.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  background: red;
}
//원치 않는 CSS가 생성됨
.container {
    width: 300px;
    height: 300px;
    background: red;
    .item{
        width: 200px;
        height: 200px;
        background: blue;
        .icon{
            width: 100px;
            height: 100px;
            background: green;
        }
    }
}

.new-icon{
    @extend .icon;
}
//컴파일하면
.container {
  width: 300px;
  height: 300px;
  background: red;
}
.container .item {
  width: 200px;
  height: 200px;
  background: blue;
}
//원하지 않는 부분까지 생김
.container .item .icon, .container .item .new-icon {
  width: 100px;
  height: 100px;
  background: green;
}

함수(Functions) - Mixin은 지정한 스타일을 반환하는 반면, 함수는 보통 연산된 특정 값을 @return 지시어를 통해 반환, 내장 함수와의 충돌주의

@function 함수이름($매개변수){
  @return 값
}
// Functions 사용
함수이름(인수);
//Mixins와 비슷하게 사용
@function columns($number: 1, $columns: 12, $width: 1200px){
    @return $width * ($number / $columns);
}

.container{
    $width: 1800px;
    width: $width;
    .item:nth-child(){
        width: columns();
    }
    .item:nth-child(2){
        width: columns(8);
    }
    .item:nth-child(3){
        width: columns(3, $width: $width);
    }
}
//컴파일 결과
.container {
  width: 1800px;
}
.container .item:nth-child() {
  width: 100px;
}
.container .item:nth-child(2) {
  width: 800px;
}
.container .item:nth-child(3) {
  width: 450px;
}

조건과 반복 

if(함수) - 조건의 값이 true이면 표현식1을, false이면 표현식2를 실행(삼항 연산자와 비슷)

if(조건, 표현식1, 표현식2)

@if(지시어) - 조건에 따른 분기 처리가 가능하며, 같이 사용할 수 있는 지시어는 @else, @else if가 있음, 조건에 ()는 생략 가능

@for - 반복위해서 

//그 숫자까지(1~3)
@for $index from 1 through 3 {
    .through:nth-child(#{$index}){
        width: 20px * $index;
    }
}
//그 숫자 직전까지(1~2)
@for $index from 1 through 3 {
    .through:nth-child(#{$index}){
        width: 20px * $index;
    }
}

@each - List와 Map데이터를 반복할 때 for in문과 유사

@each $변수 in 데이터 {
  // 반복 내용
}
//List
$fruits: apple, orange, banana, mango;
.fruits{
    @each $fruit in $fruits{
        //index 내장 함수
        $index: index($fruits, $fruit);
        li:nth-child(#{$index}){
            left: 50px * $index;
            background: url("/images/#{$fruit}.png");
        }
    }
}
//컴파일 후
.fruits li:nth-child(1) {
  left: 50px;
  background: url("/images/apple.png");
}
.fruits li:nth-child(2) {
  left: 100px;
  background: url("/images/orange.png");
}
.fruits li:nth-child(3) {
  left: 150px;
  background: url("/images/banana.png");
}
.fruits li:nth-child(4) {
  left: 200px;
  background: url("/images/mango.png");
}
//Map
$fruits-data: (
    apple: korea,
    orange: china,
    banana: japan
);
@each $fruit, $country in $fruits-data{
    //인덱스를 파악하기 위해서 Map데이터를 List로 바꿔야함
    //map-keys($fruits-data) => (apple, orange, banana)
    //map-values($fruits-data) => (korea, china, japan)
    $fruits-data-key-list : map-keys($fruits-data);
    $index: index($fruits-data-key-list, $fruit);
    .box-#{$fruit} {
        width: 100px * $index;
        background: url("/images/#{$country}.png");
    }
}

@while - 조건이 false로 평가될 때까지 내용을 반복 잘못된 조건으로 인해 무한루프에 빠질 수 있으므로 사용 자제

@while 조건 {
  // 반복 내용
}

내장 함수 - []는 선택 가능한 인수, Zero-based numbering(0부터 시작)을 사용 안함(https://sass-lang.com/documentation/modules)

색상(RGB / HSL / Opacity) 함수 

    mix($color1, $color2) : 두 개의 색을 섞습니다.

    lighten($color, $amount) : 더 밝은색을 만듭니다.

    darken($color, $amount) : 더 어두운색을 만듭니다.

    saturate($color, $amount) : 색상의 채도를 올립니다.

    desaturate($color, $amount) : 색상의 채도를 낮춥니다.

    grayscale($color) : 색상을 회색으로 변환합니다.

    invert($color) : 색상을 반전시킵니다.

    rgba($color, $alpha) : 색상의 투명도를 변경합니다. css내장 함수보다 더 간편해서 자주씀!!! 

    opacify($color, $amount) / fade-in($color, $amount) : 색상을 더 불투명하게 만듭니다.

    transparentize($color, $amount) / fade-out($color, $amount) : 색상을 더 투명하게 만듭니다.

문자(String) 함수

    unquote($string) : 문자에서 따옴표를 제거합니다.

    quote($string) : 문자에 따옴표를 추가합니다.

    str-insert($string, $insert, $index) : 문자의 index번째에 특정 문자를 삽입합니다.

    str-index($string, $substring) : 문자에서 특정 문자의 첫 index를 반환합니다.

    str-slice($string, $start-at, [$end-at]) : 문자에서 특정 문자(몇 번째 글자부터 몇 번째 글자까지)를 추출합니다.

    to-upper-case($string) : 문자를 대문자를 변환합니다.

    to-lower-case($string) : 문자를 소문자로 변환합니다.

숫자(Number) 함수 

    percentage($number) : 숫자(단위 무시)를 백분율로 변환합니다.

    round($number) : 정수로 반올림합니다.

    ceil($number) : 정수로 올림합니다.

    floor($number) : 정수로 내림(버림)합니다.

    abs($number) : 숫자의 절대 값을 반환합니다.

    min($numbers…) : 숫자 중 최소 값을 찾습니다.

    max($numbers…) : 숫자 중 최대 값을 찾습니다.

    random() : 0 부터 1 사이의 난수를 반환합니다.

List 함수 - 모든 List 내장 함수는 기존 List 데이터를 갱신하지 않고 새 List 데이터를 반환함, 모든 List 내장 함수는 Map 데이터에서도 사용 가능

    length($list) : List의 개수를 반환합니다.

    nth($list, $n) : List에서 n번째 값을 반환합니다.

    set-nth($list, $n, $value) : List에서 n번째 값을 다른 값으로 변경합니다.

    join($list1, $list2, [$separator]) : 두 개의 List를 하나로 결합합니다.

    zip($lists…) : 여러 List들을 하나의 다차원 List로 결합합니다.

    index($list, $value) : List에서 특정 값의 index를 반환합니다.

Map 함수 - 모든 Map 내장 함수는 기존 Map 데이터를 갱신하지 않고 새 Map 데이터를 반환

    map-get($map, $key) : Map에서 특정 key의 value를 반환합니다.

    map-merge($map1, $map2) : 두 개의 Map을 병합하여 새로운 Map를 만듭니다.

    map-keys($map) : Map에서 모든 key를 List로 반환합니다.

    map-values($map) : Map에서 모든 value를 List로 반환합니다.

관리(Introspection) 함수

    variable-exists(name) : 변수가 현재 범위에 존재하는지 여부를 반환합니다.(인수는 $없이 변수의 이름만 사용합니다.)

    unit($number) : 숫자의 단위를 반환합니다.

    unitless($number) : 숫자에 단위가 있는지 여부를 반환합니다.

    comparable($number1, $number2) : 두 개의 숫자가 연산 가능한지 여부를 반환합니다.

라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

mac 맥 맥북 Brew 완전 삭제

맥북에서 Brew 초기화 Brew를 써서 h2를 쓰려고 하는데 brew install h2가 안되서 이리 저리 알아보다가 완전 삭제 후 다시 설치 하니까 되서 그 방법을 남겨놈 1. 터미널에 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall.sh)" 입력후 y랑 뭐 비번.. 2. /usr/local 폴더에서 Homebrew 폴더 삭제 rm -rf Homebrew/ 권한설정으로 잘.....삭제하고 3. 다시 설치 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" 좀 오래걸리니까 기다려야한다는걸 배움... 출처.... https://discourse.brew.sh/t/error-no-formulae-found-in-taps/8331/9
댓글 쓰기
자세한 내용 보기

메이븐으로 라이브러리 인식

 간혹 퍼블릭 jar가 아닌 파일이 있는데 그럴때 쓰면 될듯 <dependency> <groupId> SimpleCryptLib </groupId> <artifactId> SimpleCryptLib </artifactId> <version> 1.1.0 </version> <scope> system </scope> <systemPath> ${basedir}/src/main/webapp/WEB-INF/lib/SimpleCryptLib-1.1.0.jar </systemPath> </dependency> version, scope, systemPath는 꼭 작성해야 한다 groupId, artifactId, version은 암거나 해도 되는거 같음 최근(2021.05.04)스프링 부트    < dependency > < groupId > NiceID </ groupId > < artifactId > NiceID </ artifactId > < version > 1.0 </ version > < scope > system </ scope > < systemPath > ${basedir}/src/main/resources/lib/NiceID.jar </ systemPath > </ dependency > 이걸 추가해주는것도 필요할지도..?? < build > < plugins > < plugin > < groupId > org.springframework.boot </ groupId > < artifactId > spring-bo...
댓글 쓰기
자세한 내용 보기

ORA-28000 계정이 잠금되었습니다 계정 잠길때

오라클 계정이 잠길때 해제방법 증상 t he account is locked 오류 발생 원인 Oracle 에서 t he account is locked  에러가 나는 원인은 ● 잘못된 패스워드로 설정횟수만큼 접속 시도시 Lock. ●  30일동안(Default) 해당 계정으로 로그인을 하지 않았을 경우 Lock. 등이 있다. 해결방법 command창에서 * 로컬일경우, sqlplus "/as sysdba"  또는  sqlplus /nolog  conn /as sysdba  * 로컬이 아닐 경우, sqlplus /nolog conn sys/password@<sid> 이름/패스워드@sid로 입력 로 접속 후 SELECT username, account_status, lock_date FROM dba_users; 으로 Lock이 된 사용자를 확인한 후 LOCKED<TIMED> 라고 되있으면, 패스워드 설정횟수 입력 오류로, 아래의 Unlock 명령만, EXPIRED & LOCKED 라고 되있으면, 패스워드 기간만료로, Unlock 후 비밀번호를 지정해줘야 한다. ALTER USER 사용자명 ACCOUNT UNLOCK; 로 Lock된 사용자를 Unl ock 시킨다 방금 말했다시피, 다시 Lock된 사용자 확인했는데,  Open되지 않고 EXPIRED되어 있다면, alter user 사용자명 identified by 바꿀패스워드;  로 패스워드를 변경하거나 또는 SQL*PLUS 를 재시작하여 Lock를 해제한 계정(사용자명/패스워드)로 로그인 하면 패스워드 변경 창이 뜬다. 추가로 패스워드 Lock 횟수 확인하는 방법은 SELECT U....
댓글 쓰기
자세한 내용 보기