231107 [Day36] CSS 심화(3)

CSS - 변수

 

--변수명: 값;

속성: var(--변수명);

 

변수를 선언할 때 특정한 선택자 내부에서 변수를 선언한다. 변수들은 선택자의 요소에 종속이 되고 요소의 후손으로 상속이 된다.

root 라는 가상클래스선택자는 html 태그 선택자와 동일하고 html태그 내부의 모든 요소에서는 선언된 변수들을 모두 사용할 수 있다.

 

변수가 선언된 요소에 유효범위를 가진다.

container안의 item에만 갈색이 적용된 것을 볼 수 있다.

 

 

변수의 재할당

변수의 초깃값 설정 => var(--color-success, orange); 

--color-success에 지정된 값이 없으면 두번째 인수에 들어있는 값을 사용하겠다는 의미

 

 

CSS - @supports

하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공

=> 기능 쿼리

 

브라우저가 display: grid 를 지원하는 경우 display: grid; 를 적용하라는 의미

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

 

브라우저가 display: grid 를 지원하지 않는 경우 float: right; 를 적용하라는 의미

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

 

 

 

파이어폭스 브라우저에서는 backdrop-filter가 지원되지 않으므로 2번째 코드가 적용된다.

 

 

기능을 여러개 적용할 수 있다.

@supports (disply : grid) and (display: flex) {

@supports not ((disply : grid) and (display: flex)) {

@supports (disply : grid) or (display: flex) {

 

 

변수를 사용할 수 있는지 확인 가능 (앞에 not을 써서 지원하지 않을 경우도 확인 가능)

=> color-primary라고 변수를 사용할 수 있는지만 확인 => var함수의 첫번째 인자는 빈값 => 기본값인 red가 적용되었다.

 

 

선택자 지원여부를 확인하려면 selector()함수를 이용

@supports (selector(.container)){

 

파이어폭스에서만 동작하는 :dir 가상클래스선택자 예시

=> 글자 방향이 right to left인 요소를 빨간색으로하고 글자크기를 50px로 한다.

 

 

CSS - @media

미디어 쿼리, 반응형에 사용한다.

 

@media 타입 and (기능) { 스타일 }

 

화면의 넓이가 최대 700px(=700px 이하)가 되면 넓이가 200px, 색이 royalblue로 바뀐다.

 

 

• 타입
  • all (기본값) ← 명시가 되어있지 않을 때 적용된다. (기능) {스타일}만 적용하고 and 없애야함.
  • screen
  • tv : tv에 출력될 때 스타일
  • print : 인쇄할 때 스타일

 

• 기능
  • and 연산자로 여러개 지정 가능
    • @media (max-width: 700px) and (min-width: 400px)
  • not 연산자로 부정할 수 있다. 미디어 타입 명시가 꼭 필요하다.(all이라서 생략가능할 경우에도!!)
    • @media not all and (max-width: 700px) and (min-width: 400px) 쿼리1개
    • @media not all and (max-width: 700px) and (min-width: 400px), tv and (display-mode: fullscreen) 쿼리2개
  • (orientation: portrait) : 세로 > 가로 => 일반적인 모바일 화면
  • (orientation: landscape) : 가로 > 세로 => 모바일 화면 눕혔을 때

 

명시방법 => 1) css 파일에 @media , 2) html 파일에 링크태그에 미디어 속성 사용 <link media="">

 

 

SCSS

SCSS와 Sass의 차이점은 중괄호와 세미콜론의 유무

 

*scss -> css 변환되는 것을 컴파일 된다라고 한다.

 

SCSS - 주석

• /* */, // 를 사용해서 주석 처리 가능하다. but, //를 사용하면 컴파일 시 주석내용이 나타나지 않는다.
• Sass를 사용할 때 들여쓰기 위치까지 맞춰줘야 여러줄을 주석처리 할 수 있다.

 

SCSS - 중첩

괄호 안에서 중첩이 가능하다. 

 

• & : 중첩 내부에서 상위 선택자를 참조한다.

 

• 변수 => $ 를 사용해서 변수를 할당할 수 있다.
  • 선언된 범위 안에서만 사용 가능

 

 

• $at-root .box => 상위 선택자가 없는 상태로 유효범위 내의 변수를 사용하고 싶을 때 (중첩을 벗어나서 선언된다)

 

 

• 반복되는 키워드를 범위로 만들어서 변수처럼 쓸 수 있다.

 

 

• 다중 선택자를 한 번에 제어할 수 있다.

 

 

SCSS - 변수

변수 선언 => $변수명: 값;

 

플래그

- !global => 변수의 범위는 지역이지만 !global을 이용함으로써 전역화 가능

- !default => ex) $content 변수에 (a)값이 이미 있다면 무시하고, (b)값이 없다면 작성한 값을 할당하라는 의미

 

보간

- #(샵) 특수문자와 {}(중괄호)를 사용하여 표기한다.  #{..}

- 삽입된 문자나 변수를 문자 그대로 적용시켜 연산이 되지 않게 한다.

- @mixin, @import, 일반적인 Sass 문법 등 변수나 문자를 통해 가변적인 값들을 적용해야하는 경우 사용한다.

 

 

SCSS - 데이터

• Numbers => 1, 0.82, .82, 20px, 2fr
• Strings : 값을 나타내는 모든 문자 데이터 => bold, absolute, “assets/images/”
• Colors : 색상의 이름들 => blue, yellowgreen, rgba(255,0,0,.5), #ffffff
• Boolean => true, false
• Null => null (null 값을 가진 요소는 컴파일 되지 않는다.)
• Lists : 소괄호 사용(생략가능), 쉼표 없이 나열 가능. 문자도 가능.
• => (10px, 20px, 30px), 10px 20px 30px , appple banana cherry
• Maps : 소괄호 사용(생략 불가능) => (key: value) / ( a : apple, b : banana, c: cherry)

 

SCSS - 연산자

산술연산자 : +, -, *, /, %

 

/ 나누기 연산자는 원하는 값이 나오지 않는다. 

 

=> 단축 속성을 사용할 때 속성을 구분하기 위해 / 를 사용한다.

 

나누기 연산자를 사용하는 방법

• 소괄호로 묶는다. => top: (20px / 2); 
• 변수에 값을 저장한다. => $a=20px, top: $a / 2; 
• 다른 연산자와 같이 사용한다. => top: 20px / 2 + 1px; =>11px

 

calc() : 단위가 다른 값들을 연산할 때 사용, 값이 계산되어 나오지는 않고 css에서 적용된다.

left: calc(100% - 50px) //calc(100% - 50px)

 

 

비교 연산자 : ==, !=, <, >, <=, >=

 

논리연산자 : and, or, not