[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 41회차 미션

데이터 종류

Numbers, Strings, Colors, Booleans, Nulls, Lists, Map 가 있다.

Numbers

• 숫자에 대한 단위를 모두 포함하는 데이터 타입이다. 이러한 단위를 가지고 연산이 가능하다.
• 0 : 숫자는 1보다 작은 소수앞에는 0을 표기해야 한다. 뒤따르는 0은 절대 표기하지 않는다.

옳은 예

.foo{
    font-size: 1rem;
    opacity: 0.8;
}

나쁜 예

foo{
    font-size: 1.0rem;
    opacity: .8;
}

길이를 다룰 때, 0값은 절대 단위를 가져서는 안 된다.

옳은 예

$length : 0;

나쁜 예

$length: 0em;

Strings

문자열을 나타내는 Strings 는 CSS와 Sass에서 중요한 역할을 한다.

인코딩

문자 인코딩에 관련한 잠재적인 문제를 피하기 위해서는 메인 스타일 시트에서 지시어를 사용해서 UTF-8 인코딩을 강력하게 권장한다. 이 지시어가 스타일시트의 가장 첫 번째 요소이고 어떤 종류의 문자도 앞에 오지 않도록 한다.

@charset 'utf-8';

CSS에서 문자열은 따옴표로 감쌀 필요가 없다. 이 때문에 Sass 또한 따옴표로 감쌀 것을 요구하지 않는다. 추가로 따옴표로 감싼 문자열은 그렇지 않은 문자열과 동일하다.

그러나 Sass 에서 문자열은 언제나 작은 따옴표로 감싸야 한다.

Colors

색은 CSS 언어에서 중요한 위치를 차지한다. Sass 는 몇 가지의 강력한 함수를 제공하여 색 조작에 있어 편리한 역할을 한다.

Booleans

논리 : true, false

Nulls

속성 값으로 null이 사용되면 컴파일 하지 않음.

Lists

리스트는 Sass 에서 배열에 상당하는 개념으로 어떤 타입의 값이든 저장될 수 있게 의도된 평면적 데이터 구조임.

() 괄호 를 붙이거나 붙이지 않음.

Maps

Sass 3.3 부터 스타일시트 작성자는 맵을 정의할 수 있다. 이는 연관 배열, 해쉬 혹은 JS의 오브젝트에 해당하는 Sass 용어이다. Map은 키를 모든 유형의 값과 연결하는 자료구조임.

위의 내용은 https://sass-guidelin.es/ko/ 를 참고하여 작성하였음.

그리고 Sass 에 대한 내용임.

상세 내용은 해당 링크를 통해 알아보길 바람

중첩(Nesting)

중첩이란? 어떤 태그내의 특정한 태그를 찾기위해 후손 선택자나 자식선택자를 사용할 수 있다. 그런 것들을 작성할 때

CSS 에서는

.section{
    width: 100%;
}
.section .list{
    padding: 20px;
}
.section .list li {
    float: left;
} 

위와 같이 중복되는 요소들에 대해 계속해서 작성해야 한다.

하지만 SCSS 에서는 중첩 사용자에 대해

.section{
    width: 100%;
    .list{
        padding: 20px;
        li {
            float: left;
        }
    }
}

section 이라는 class를 가진 요소를 정의하고 그 안에 list라는 클래스를 가진 요소를 정의하고, 또 그안에 li 태그를 정의한다.

이렇게 어떤 범위내의 범위를 계속해서 설정해서 선택자를 만들 수 있고, 이 것이 위의 CSS처럼 컴파일이 되는 것이다. 이렇게 SCSS를 사용해서 선택자의 반복을 쉽게 피할 수 있다.

Ampersand ( 상위 선택자 참조 )

중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환한다.

.btn{
    position: absolute;
    &.active{
        color: red;
    }
}

SCSS에서 btn 클래스안에 &.active 의 의미는

btn이라는 클래스를 가진 요소에 active라는 클래스가 붙었을 때는 color:red 를 적용시킨다는 의미이다.

여기에서 .btn.active 로 작성하게 되면 btn이라는 클래스 안에 또 btn이라는 클래스가 생기게 된다. 따라서

&를 사용해서 btn 자기 자신을 추가적으로 정의할 수 있다.

위의 SCSS 코드는

/* CSS */
.btn{
    position: absolute;
}
.btn.active{
    color: red;
}

css 에서 이런식으로 컴파일 된다.

/* SCSS */
.list{
    li{
        &:last-child{
            margin-right: 0;
        }
    }
}

list라는 클래스는 li 태그를 후손으로 갖고 li 범위내에는 &:last-child , li의 마지막 요소 의 margin-right 를 0으로 설정한다.

위의 SCSS 코드는

/* CSS */
.btn{
    position: absolute;
}
.btn.active{
    color: red;
}
.list li:last-child{
    margin-right: 0;
}

이렇게 컴파일 될 것이다.

앞에서 &를 사용하지 않고 작성했던 예제를 살펴보면

.btn{
    width: 100px;
    height: 100px;
    .btn.active{
        color:red;
    }
}

.btn.active로 클래스로 btn이 정의된 요소에 active클래스가 추가되면 color:red 로 설정 되는 것이 아니라.

컴파일된 CSS파일을 보면

.btn {
  width: 100px;
  height: 100px;
}

.btn .btn.active {
  color: red;
}

이렇게 .btn 후손에 .btn이 하나 더 생기게 된다.

.fs{
    &-small{
        font-size: 14px;
    }
    &-medium{
        font-size: 16px;
    }
}

이런식으로 fs에 &-small , &-medium 이라는 클래스를 정의하게 되면

.fs-small {
  font-size: 14px;
}

.fs-medium {
  font-size: 16px;
}

위와 같이 &에 .fs가 들어가며 클래스가 정의 되게 된다.

 

 

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스