SASS에서 반응형 사용해보기
반응형에 대한 이야기가 wiki에 전혀 써있지 않다는 피드백을 받고 모바일 사이즈 프로토타입을 만들었다.
가장 먼저 해주어야 할 것은
HTML파일 내부의 <head> ...</head> 안에 다음과 같이 설정해 주어야 한다
<meta name="viewport" content="width=device-width, initial-scale=1>
모바일 브라우저의 뷰를 실제 크기인 1로 설정하는것을 의미 한다 써주지 않는다면
모바일 브라우저에서 나오는 글자가 매우 작게 표시되어서 읽을 수 없을 것이다.
반응형에 대해서 살펴보다가 이런 글을 보았는데 react의 index.html에 이미 저렇게 작성이 되어있었다.
친절한 리액트..(?)
변수 선언해주기
breakpoint를 변수로 만들어준다.
$md: 768px;
$lg: 1200px;mixin 사용하기
-
mixin 정의하기
@mixin md{ @media (min-width: #{$md}) { @content; } } -
mixin 사용하기
@mixin을 사용하면 그룹단위의 스타일을 변수처럼 적용할 수 있다. 즉 여러개의 스타일을 설정해두었다가 한번에 적용하는 것이 가능하다. 이때 설정에는@mixin을 그리고 사용할 때는@include를 사용하면 된다..logo { width: 20px; @include md { width: 40px; height: 50px; border: 1px solid red; } }
그 외
이미지를 상대경로로 입력해서 넣었는데, scss파일이 css로 컴파일 되는 과정에서 경로 문제가 일어나는 듯 하다. 그래서 tsx파일에 import해서 직접 이미지를 집어넣었다.
참고
DONE is better than PERFECT