[css,scss] 연습장

미디어쿼리 효과적적용(scss)

@mixin example {
  @media screen and (max-width: 768px) { 
   @content
  }
}

@include example(){
	font-size : 여기에 적으면 위에 미디어 쿼리 적용됨 content 자리에 들어간다고 생각하면됨
}

 

여기에 @if 문 까지 쓰면 아주 편리함

 

그라데이션+ 배경

linear-gradient(to right, rgb(90, 121, 90) 0%, green 100%)

background-blend-mode: multiply;

 

백그라운드 이미지 사이즈 조정

background-size: 100% 110vh; ( contain , cover)

 

그외

html {

  font-size: 62.5%;

}

 

em: 부모컴포넌트 글자크기로 알고 있었는데 그게 아니라 내 폰트사이즈 기준이야 근데 이제 그게 부모한테 상속받으니까 잘못알고 있었다.