[데브코스] TIL-116 CSS, CSS변수, @suppoerts, @media

CSS 변수

1. 사용법

  —변수명을 선언하고 var(—변수명)을 속성 값으로 넣어주면 사용할 수 있다. 변수는 변수를 선언한 요소의 하위 요소로 상속이 된다.

/* 최상위에 전역으로 변수를 선언 */
: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);
}

2. 변수 재할당

  변수를 사용하는 곳에서 값을 다시 넣어주면 변수 값이 변경된다.

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

3. 변수 초기값 설정

  변수의 초기값을 두번째 인수로 받아 사용된다. 변수에 값이 없을 때만 적용된다.

.success {
  background-color: var(--color-success, orange);
}

 

---

@supports 규칙

  주어진 css 기능이 브라우저가 지원하는지에 따라 다른 스타일을 선언할 수 있다. 이는 기능 쿼리(feature query)라고 부른다.

1. 사용법

  괄호 안에 작성한 스타일 속성을 지원하느냐 지원하지 않느냐에 따라 스타일을 지정할 수 있게 된다.

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

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

/* 자주 사용하는 패턴 */
@supports (기능1) and (기능2) and (기능3) {
	...
}

@supports not ((기능1) and (기능2) and (기능3)) {
	...
}

@supports (기능1) or (기능2) or (기능3) {
	...
}

@supports not ((기능1) or (기능2) or (기능3)) {
	...
}

2. selector()

  선택자를 지원하는지 체크하기 위해 해당 함수를 사용할 수 있다.

@supports (selector(:hover)) {
	...
}

 

---

@media 규칙

  보통 반응형 웹을 디자인하기 위해 자주 사용하는 규칙이다.

1. 사용법

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

• 타입의 기본값은 all이며, 생략 가능하다.
• 기능은 and로 연결하여 여러 기능을 조건으로 넣을 수 있다.
• not으로 반대 경우를 나타낼 때, 미디어 타입이 기본 값이어도 직접 명시를 해주어야 한다.

참고

orientation: portrait

세로 너비가 가로 너비보다 긴 상황 - 모바일 원래대로 볼 때

orientation: landscape

가로 너비가 세로 너비보다 긴 상황 - 모바일 가로로 볼 때

 

 

오늘을 마무리 하며

 

  오늘은 CSS의 기본적인 내용보다는 조금 더 실용적인 기능들에 대해서 공부했다. CSS의 변수의 경우에는 변수를 사전에 선언해놓고 이를 바탕으로 CSS 코드를 작성해 나가면 일관성있는 CSS를 적용할 수 있을거라는 생각이 들었고, 또 CSS의 변경이 필요한 경우 해당 변수를 수정하면 일괄적으로 관리할 수 있어 편리하겠다는 생각이 들었다. @supports의 경우에는 브라우저의 기능 지원여부에 따라 스타일을 다르게 적용할 수 있는데 물론 잘 활용한다면 좋은 기능이 될 수 있겠지만 @supports에 따라 CSS를 적용하는것보다는 브라우저에서 공통적으로 지원하는 CSS 속성들을 적용하는게 더 맞는 판단이 아닌가라는 생각이 들었다. 왜냐하면 @supports구문을 통해 코드를 적용했을때 한 사람만이 유지보수 기능을 담당한다면 전혀 문제될 것이 없겠지만 여러 사람들에 의해서 유지보수가 이뤄져야 한다면 가독성을 많이 떨어트릴것이고, 이는 유지보수를 어렵게 만들것이라는 생각이기 때문이다. 그리고 이미 모든 브라우저에서 공통적으로 지원하고 있는 CSS 속성을 통해서도 충분히 구현이 가능한 내용들이 대부분일 것이기 때문이다. 또한 특정 CSS의 기능이 유용하고 계속 사용된다면 모든 브라우저에서 지원하는 시간이 도래할 것이고 그때 유지보수를 통해서 해당 CSS를 적용해도 충분할 것이라고 생각이 들었다.