TIL - 2023.11.07

2023. 11. 13. 12:58· 👨‍💻 TIL
목차
  1. CSS - 변수
  2. @supports
  3. @media
  4. SCSS

CSS - 변수

  • :root라는 가상 클래스 선택자에 변수를 전역 등록할 수 있다.
--변수명 : 값;
속성 : var(--변수명);
속성 : var(--변수명, 요소); /* 변수명에 해당하는 값이 없으면 요소 값이 지정 */

@supports

@supports 규칙

  • 기능 쿼리
  • 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공
/* 기본 구조 */
@supports ( 기능1 ) {}
@supports not( 기능1 ) {} /* 지원하지 않는 경우 */

/* 여러개 */
@supports ( 기능1 ) and ( 기능2 ) {}
@supports ( 기능1 ) or ( 기능2 ) {}
not(@supports ( 기능1 ) or ( 기능2 )) {} /* 지원하지 않는 경우 */

위의 코드에서 기능이라고 명시한 것은 해당하는 '기능'이 사용가능한지 확인하는 것이다. (조건문과 비슷한 느낌..??)

  • selector() : 선택자들이 특정 브라우저에서 동작하는지 확인하기 위해 사용한다
@supports (selector(.container)){} 
/* 클래스 선택자를 브라우저에서 지원하는지 확인 */

@supports (selector(:dir(ltr))){
	.container:dir(rtl){
    		color: red;
        	font-size: 50px;
	}
}
/* 글자 방향이 right to left인 요소의 색을 빨갛게 하고 font-size를 바꾼다 */

@media

미디어 쿼리, 반응형 웹을 만들 때 사용

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

@media screen and (max-width : 700px){
	.box{
		width: 200px;
        	background-color: royalblue;
	}
}
/* 넓이가 700px 이하일때 적용*/

미디어 타입

  • all(기본값)
  • screen
  • print: 현재 화면을 인쇄할때 스타일 지정한다
  • tv

기능

  • and 연산자: 추가되는 기능을 명시한다.
  • not 연산자: 반대되는 값 지정한다, 미디어 타입이 꼭 명시되어야 한다
  • orientation: portrait 는 세로 너비 > 가로 너비
  • orientation: landscape 는 가로 너비 > 세로 너비
@media (max-width : 700px) and (min-width: 400px) {}
	/* 넓이가 400px < 넓이 < 700px 일때 적용 */


@media not all and (max-width : 700px) and (min-width: 400px) {}
	/* 넓이가 최소 400px ~ 최대 700px 일때 적용 */

미디어 쿼리가 여러개인 경우 쉼표(,)로 구분해준다

@media
	not all and (max-width : 700px) and (min-width: 400px),
	tv and (display-mode: fullscreen) {}

SCSS

문서링크

 

Sass: Syntactically Awesome Style Sheets

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

sass-lang.com

주석

  • /* 내용 */ 와 //내용이 주석으로 사용가능한데 //내용 주석은 컴파일 결과에 나타나지 않는다

  • 여러줄 주석을 작성할때에는 주석이 되는 코드 라인을 잘 맞춰야 한다.

중첩

  • 괄호 안에서 선택자 중첩이 가능하다
  • & : 상위 선택자를 참조한다

  • $: 선언된 스코프 안에서 변수를 할당할 수 있다

  • @at-root: 상위 선택자를 제거하고 유효 범위를 유지하여 변수 값만 할당 받는다

  • 반복되는 키워드는 범위로 만들 수 있다

  • 다중 선택자
    • 사용한 다중 선택자 갯수만큼 다중 선택자가 만들어진다
    • 여러 선택자의 값을 한번에 제어할 수 있다

변수

  • 변수 선언 방법
$변수명: 값;
/* ex */
$size: 100;
$color-blue: royalblue;
  • 변수를 선언할 때 유효범위를 고려해야 한다.

  • !global 플래그
    • 선언된 변수의 유효 범위를 전역으로 만들어 준다
    • 주의할 점: 이미 전역으로 선언된 변수를 덮어쓸 수 있다. 그래서 다른 코드에 영향을 미칠 수 있다

  • !default 플래그
    • 같이 이름의 할당된 변수의 값이 존재하면 기존의 할당 값을 사용한다.

  • 보간법(Interpolation)
    • #{변수}으로 표기한다. 삽입된 문자나 변수를 문자 그대로 적용시켜 연산이 되지 않게 한다.
    • 문자 데이터 뿐만 아니라 선택자에서도 적용가능 하다

데이터

  • Numbers
$number1: 1;
$number2: .82;
$number3: 20px;
$number4: 2fr;
  • Strings
$string1: bold;
$string2: absolute;
$string3: "assets/images/";
  • Colors
$color1: blue;
$color2: yellowgreen;
$color3: rgba(255,0,0,.5);
$color4: #ffff00;
  • Booleans
$boolean1: true;
$boolean2: false;
  • Null: null을 가진 값은 컴파일되지 않는다
$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 );

 

연산자

산술 연산자 

  • +, -, *, /, %

  • 단축속성을 사용할 때 각각의 속성을 구분하기 위해 /를 사용한다
/* background: background-position / background-size */
background: 10px 10px / 10px 10px;

/* font : font-size / line-height / font-family(필수) */
font : 16px / 32px serif;
  • 소괄호 묶기, 변수 사용, 다른 연산자와 혼합하기를 사용하여 나머지 연산을 할 수 있다
top: (20px / 2);
$value: 20px;
top: $a / 2;
top: 20px / 2 + 1px;
  • calc()
    • SCSS에서 단위가 다른 경우에는 연산할 수 없는데 calc()함수를 사용하면 연산을 할 수 있다
left: calc(100% - 50px);
  • 비교 연산자
    • ==, !=, <, >, <=, >=

  • 논리 연산자
    • and, or, not

'👨‍💻 TIL' 카테고리의 다른 글

TIL- 2023.11.06  (2) 2023.11.09
TIL - 2023.11.03  (0) 2023.11.08
TIL15 - 2023.10.12  (1) 2023.10.15
TIL14 - 2023.10.10  (0) 2023.10.10
TIL13 - 2023.10.09  (0) 2023.10.10
  1. CSS - 변수
  2. @supports
  3. @media
  4. SCSS
'👨‍💻 TIL' 카테고리의 다른 글
  • TIL- 2023.11.06
  • TIL - 2023.11.03
  • TIL15 - 2023.10.12
  • TIL14 - 2023.10.10
zunwon
zunwon
zunwon
준원의 개발일지
zunwon
전체
오늘
어제
  • 분류 전체보기
    • 📒 JavaScript
    • 📘 TypeScript
    • React.js
    • 📗 Vue.js
    • 💻 알고리즘
      • 프로그래머스
      • 백준
    • ✏ 회고
      • 후기
    • 👨‍💻 TIL
    • 📋 오픈소스
    • 기타

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 자료구조
  • udemy
  • 함수형자바스크립트
  • mil
  • 미래내일일경험
  • 함수형 자바스크립트
  • 인사이드아웃
  • JavaScript
  • css
  • 데브코스
  • 스나이퍼팩토리
  • next.js
  • 코딩부트캠프
  • TypeScript
  • 오픈소스컨트리뷰션
  • 프로그래머스 데브코스
  • Vue.js
  • 알고리즘
  • fontend
  • githru
  • 프로젝트캠프
  • 회고
  • vercel
  • Vue
  • 프론트엔드
  • 프로그래머스
  • frontend
  • 국비지원교육
  • 부스트캠프
  • til

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.1
zunwon
TIL - 2023.11.07
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.