퍼블리싱 8

media query

.box{
  width:100px;
  height: 100px;
  background-color: orange;
}

/* 화면의 가로너비가 600px 이하일 때  */
@media screen and (max-width: 600px) {
  /* 600px 이하일 때 해당 속성을 적용 */
  .box{
    width: 300px;
    background-color: royalblue;
  }
}

@media screen and (min-width: 600px) {
  /* 600px 이상일 때 해당 속성을 적용 */
  .box{
    width: 300px;
    background-color: royalblue;
  }
}

screen은 media의 타입 중 하나다.
타입의 기본 값은 all이다.

css의 변수

/* 전역 css 변수는 html로 생성. :root도 사용 가능*/
html{
  --variable: royalblue;
}
/* group1 class 내에서만 유효한 변수를 생성*/
.group1{
  --primary: orange;
}

.box{
  width: 100px;
  height: 200px;
  background-color: var(--primary);
  border: 4px solid;
  margin: 20px;
}

css의 default parameter

.group1{
  --primary: orange;
  --danger: green;
}
.box{
  width:100px;
  height: 100px;
}


.box{
  width: 100px;
  height: 200px;
  /*2번째 인수로 default parameter로 전달할 수 있다.*/
  background-color: var(--danger,red);
  border: 4px solid;
  margin: 20px;
}