[Day 31] 변수, @supports, @media, SCSS (1)

변수

<div class="box primary"></div>
<div class="box danger"></div>
<div class="box success"></div>

:root {
  --color-primary: royalblue;
  --color-danger: red;
  --color-success: yellowgreen;
}
.box {
  width: 200px;
  height: 70px;
  border: 4px solid;
}
.primary {
  background-color: var(--color-primary);
}
.danger {
  background-color: var(--color-danger);
}
.success {
  background-color: var(--color-success);
}

 

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

css의 변수를 선언할 때는 전용 표기법에 따라 --[변수명]으로 작성하면 되며, var 함수를 사용하여 접근할 수 있다. 

 

변수를 선언할 때는 특정한 선택자 내부에서 선언하며, 선언된 변수는 선택자에 해당하는 요소에 종속된다.

그리고 이 종속된 변수의 값은 후손 요소로 상속된다.

 

[CSS] :root 가상 클래스로 CSS 변수 다루기

:root는 가상 클래스 선택자이다.

가상 클래스란 id나 class 선택자로 선택할 수 없는 요소들을 선택하는 선택자이다.

 

가상 클래스에는 웹 문서 구조에서 특정한 위치에 있는 요소를 선택하는 구조적 가상 클래스가 존재하는데 :root는 웹 문서 구조에서 가장 상위 요소를 선택할 때 사용하는 가상 클래스이다.

즉 html에서 :root 선택자는 항상 html을 가리킨다.

 

그렇다면 왜 html대신 :root을 사용하는 걸까?

차이점을 말하자면 css의 명시도 점수에서 차이가 있다.

태그 선택자는 명시도가 1이지만 가상 선택자는 명시도가 10점이다. 

따라서 스타일 적용 우선순위가 더 높은 태그 선택자를 사용하는 것이 좋다. 

위 코드에서 :root를 이용해 최상위 요소에 변수를 선언하였으므로 모든 요소에서는 해당 변수들을 사용할 수 있다.

 

<div class="container">
  <div class="item"></div>
</div>
<div class="list">
  <div class="item"></div>
</div>

.container {
  --color-container: brown;
}
.item {
  width: 100px;
  height: 100px;
  border: 4px solid;
  background-color: var(--color-container);
}

css 변수는 변수가 선언이 된 요소에서 유효 범위를 가진다 

즉, 위 코드에서 .container의 변수는 .list에서는 사용할 수 없다. 

 

상속 받은 변수는 재할당이 가능하다. 

.danger {
  --color-danger: hotpink;
  background-color: var(--color-danger);
}
.success {
  background-color: var(--color-danger);
}

이전 코드에서 :root에 --color-danger가 red라는 값을 가지고 있었는데 danger 클래스 선택자에서 해당 변수의 색상을 바꾸어 주었고 바뀐 색상이 잘 적용이 되는 것을 볼 수 있다.

하지만 hotpink 색상이 적용된 것은 어디까진 danger라는 클래스 선택자의 유효 범위 내에서의 일이고, 유효 범위 바깥인 success에 적용했을 때는 원래의 색상인 red가 적용이 되고 있다.

 

변수는 초기값 설정이 가능하다.

var(--color-success, orange)

var 함수의 첫 번째 인자로 들어온 변수에 지정된 값이 없다면 두 번째 인수로 들어간 값을 사용한다. 

만일 변수에 지정된 값이 있다면 그 값이 적용된다.

 

@supports

@supports는 브라우저 지원 여부에 따라 다른 스타일을 선언할 수 있으며 기능 쿼리라고 부른다.

@supports - CSS: Cascading Style Sheets | MDN

@supports (display: grid) {
  div {
    display: grid;
  }
}

코드가 동작하는 브라우저가 display: grid를 사용할 수 있을 때만 중괄호 범위의 css 내용을 사용할 수 있다. 

지원되지 않는 경우의 css를 설정하고 싶을 경우 not 키워드를 이용하여 다음과 같이 코드를 작성하여 대체 스타일을 적용한다. 

@supports not (display: grid) {
  div {
    float: right;
  }
}

 

소괄호 사이에 작성하는 기능은 and나 or를 이용해서 여러개 사용할 수 있다.

@supports (display: grid) and (display: flex) {
  .container {
    display: grid;
  }
  .container .item {
    display: flex;
  }
}
@supports not((display: grid) and (display: flex)) {
  .container {
    float: left;
  }
  .container .item {
    text-align: center;
    line-height: 100px;
  }
}
@supports (display: grid) or (display: flex) {
  .container {
    width: 500px;
  }
}
@supports (--color-primary: orange) {
  .container {
    border: 10px solid var(--color-primary, red);
  }
}
@supports not (--color-primary: orange) {
  .container {
    border: 10px solid #ff0000;
  }
}

 

selector 함수를 이용하여 브라우저에서 css 선택자의 지원 여부를 판단할 수 있다.

@supports (selector(:dir(ltr))) {
  .container:dir(rtl) {
    color: red;
    font-size: 50px;
  }
}
@supports not (selector(:dir(ltr))) {
  .container {
    color: red;
    font-size: 50px;
  }
}

※ :dir은 파이어 폭스 브라우저에서만 동작하는 선택자

 

@media

@media는 반응형 레이아웃을 만들 때 사용한다. 

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}
/* @media 타입 and (기능) { 스타일 } */
@media screen and (max-width: 700px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

화면의 가로 너비가 700px 이하일 경우 스타일 코드가 적용된다.

 

여러 미디어 타입이 존재하지만 대부분 사용하지 않는다. 

타입의 기본값은은 all로 모든 미디어 타입을 아울러서 해당하는 기능에 맞게 스타일을 적용한다. 

기본값이므로 생략이 가능하다.

 

@media (max-width: 700px) and (min-width: 400px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

기능은 and 연산자로 연결할 수 있다.

위 코드는 가로 너비 400px 이상 700px 이하일 때 스타일이 적용된다.

 

@media not all and (max-width: 700px) and (min-width: 400px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

not 연산자를 사용할 때는 미디어 타입이 명시적으로 작성되어 있어야 한다.

 

 

@media 
  not all and (max-width: 700px) and (min-width: 400px), 
  tv and (display-mode: fullscreen) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

미디어 쿼리는 쉼표로 구분해서 여러개를 작성할 수도 있다. 

위 코드는 하나의 미디어 규칙에 두 개의 미디어 쿼리가 추가된 상황이다.

쿼리라는 것은 한 줄의 특정한 조건 부분을 의미한다. 

 

@media (orientation: portrait) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

orientation 속성의 값을 portrait으로 주면 화면의 세로 너비가 가로 너비 보다 길 때 적용이 된다.

속성값 landscape는 가로 너비가 세로 너비보다 길 때 적용이 된다.

 

@media - CSS: Cascading Style Sheets | MDN

위 mdn 문서에서 어떤 기능들이 있는지 볼 수 있다.

 

미디어 쿼리는 @media로 사용하는 것 뿐만이 아니라 HTML의 link 태그의 media 속성을 이용해서도 적용이 가능하다. 

 

Sass(SCSS)

css 기본 문법 만으로는 복잡한 스타일 처리 상황들을 효율적으로 관리하기 어렵다. 

이럴 때 사용할 수 있는 것이 전처리 도구인 Sass(SCSS)이다.

 

참고로 웹 브라우저에서 표준 css를 제외하면 전처리 도구들은 직접 동작할 수 없다. 

Node.js를 통해 최종에는 css로의 변환 작업을 거쳐야 한다는 것이다.

 

SCSS는 중괄호로 범위를 지정하고 세미콜론을 사용하는 반면, Sass는 중괄호와 세미콜론을 사용하지 않기 때문에 들여쓰기 개념이 중요하다. 

 

SCSS는 css와의 호환성을 위해 Sass 문법을 매핑해서 출시되었다. 

따라서 css와 Sass 전처리 도구의 최적의 호환성을 고려한다면  Sass가 아니라 SCSS 문법으로 작성하는 것을 권장한다.

 

SassMeister | The Sass Playground!

SCSS를 작성하면 css로 변환된 모습을 볼 수 있는 사이트이다. 

작성한 내용이 css로 변환되는 과정을 컴파일이라고 한다.

 

주석

기존 css에서의 주석/* */은 컴파일 된 결과가 그대로 출력이 된다.

sass에서 제공하는 //주석은 컴파일 된 결과에 나타나지 않는다.

Sass의 경우 여러줄 주석을 사용할 때는 들여쓰기의 라인을 맞추는 것이 중요하다. 

SCSS의 경우 선택자의 스타일 범위를 중괄호로 감싸고 있기 때문에 들여쓰기의 라인을 맞추지 않아도 컴파일이 잘 된다.

 

중첩 

SCSS의 중첩 기능을 사용하면 상위 요소의 반복적인 작성을 방지할 수 있다.

&은 상위 선택자를 참조한다.

 

변수는 앞에 $가 붙고, 해당 변수가 선언된 중괄호가 변수의 유효 범위이다.

이 유효 범위 안에서 어떤 선택자를 정의할 때 상위 선택자가 앞에 붙는 것을 막고 싶다면 @at-root 규칙을 적용한다.

@at-root를 적용하면 변수의 유효 범위는 그대로 적용되지만 해당 선택자는 루트 경로로 이동해서 선언이 된다.

 

속성의 앞에 반복되는 키워드를 범위로 만들어서 반복 작성을 피할 수 있다.

 

다중 선택자를 사용하면 여러 선택자의 값을 한 번에 제어할 수 있다.

 

변수

$로 시작하는 변수를 사용할 수 있다.

h라는 변수는 자신이 선언된 블록 안에서만 유효하게 사용이 될 수 있다.

 

!global

이러한 유효 범위를 바꿔줄 수 있는 플래그가 존재하는데 바로 !global이다.

!로 추가하는 키워드를 플래그라고 한다.

!global을 사용하면 선언된 변수의 유효 범위를 전역화 시킨다. 

 

변수는 재할당이 가능하다. 

 

전역으로 선언된 변수가 있다면 !global 플래그를 사용했을 때 이 전역 변수를 덮어 쓸 수 있다.

이로 인해 의도치 않게 동일한 변수명을 사용하는 다른 코드에도 영향을 미칠 수 있다는 점에 유의해야 한다.

 

!default 

특정한 유효 범위 안에서 변수를 지정할 때 동일한 이름의 변수가 이미 존재하고 그 변수가 값을 가지고 있다면 그 값을 사용하고자 할 때 !default 플래그를 사용할 수 있다. 

 

보간

자바스크립트의 템플릿 리터럴의 보간처럼 SCSS도 보간을 사용할 수 있다.

 

데이터 종류

// Numbers (단위 존재 상관없이 전부 숫자 데이터)
$number1: 1;
$number2: .82;
$number2: 20px;
$number4: 2fr;

// Strings (따옴표 존재 상관없이 전부 문자 데이터)
$string1: bold;
$string2: absolute;
$string3: "assets/images/";

// Colors
$color1: blue;
$color1: rgba(255, 0, 0, .5);
$color1: #ffff00;

// Booleans
$boolean1: true;
$boolean2: false;

// Null (null 값을 가지고 있는 요소는 컴파일X)
$null: null;

// Lists (소괄호로 묶인 값들)
$list1: (10px, 20px, 30px);
$list2: 10px, 20px, 30px; // 소괄호 생략 가능
$list3: 10px 20px 30px; // 쉼표 생략 가능
$list4: apple banana cherry;

// Maps (소괄호 생략 불가능)
$map1: ( key : value );
$map2: ( a: apple, b: banana, c: cherry );

 

연산자

산술 연산자

순수한 css에서 단축 속성을 사용할 때 속성 구분자로 /를 사용하기 때문에 SCSS에서는 나누기 연산자를 그대로 사용할 수 없다.

 

나누기 연산자를 사용하기 위해서는 총 세 가지의 방법이 존재한다.

[ 방법 1 ]

나누기 연산자를 사용하는 부분을 소괄호로 묶는다.

[ 방법 2 ]

값을 변수에 담아 나누기 연산자를 사용한다. 

[ 방법 3 ]

나누기 연산자와 다른 연산자를 혼합해서 사용한다. 

 

SCSS는 연산하려고 하는 단위가 다르면 연산을 할 수 없는데 이럴 때는 css의 calc 함수를 사용할 수 있다.

100%에 해당하는 값에서 50px을 뺀 값이 left에 적용된다.

 

비교 연산자

 

논리 연산자

 

---

출처: 프로그래머스 프론트엔드 데브코스 

[Day 31] CSS 심화 (3)