[p-p] 반응형 화면 CSS 구현과 미디어쿼리

쉐런·2022년 10월 28일

맞닥뜨린 문제들

rem -> %로 바꾸자

rem으로도 안되면 %로 다 바꿔야 한다고 해서 밤새 %로 다시 맞춰서 작업하였다.

기존에 있던 rem을 %로 바꾸면서 디자인을 전과 최대한 같게 만드느라 좀 힘들었다.
- rem으로 조정됐던게 %로는 안 되는 경우도 꽤 있었다. 그런 경우에는 부모 class를 찾아서 부모의 Width나 height를 조정하면 해결할 수 있다!

반응형 CSS 구현

%로 바꾸는 김에 다른 조에서도 반응형 화면을 한다고 해서 화면크기에 따라 반응형 CSS를 구현해보기로 했다.

반응형 CSS로 미디어 쿼리 배울 때
이렇게 screen (조건 길이)로 배워서 내 화면에도 잘 구동이 됐었으나..

--예제
@media screen (max-width: 400px) {
    body {
			color: red;
		}
}

git리파짓토리로 합쳐서 다른 사람 화면에 보니 Media 쿼리가 전혀 먹히질않았다!
너무 당황했었는데 나 말고 다른 분은 미디어쿼리가 잘 먹혔다..!
코드로 확인을 해보니

screen과 max-width: 600px 사이에 and를 붙인 형태도 있었는데
이렇게 써야만 적용이 됐다!

다시 and를 다 붙이니 잘 작동됐다! (휴우..)

@media screen and (width: 600px) {
	body {
		color : red;
	}
}

Next 버튼을 %로 width, height로 잡아놨더니 자꾸 화면 크기가 줄어들때마다 버튼도 줄어들어서 화면 크기 1300, 1100, 900 ... 마다 계속 %를 늘려줘야해서 뜻밖의 노동을 했다.

그것도 똑같은 버튼이 3개나 있어서 그걸 3번이나 바꾸는ㅋㅋㅋ 비효율적인 방식으로
조정했다.

근데 다음 날 일어나서 작업하다보니.. NextBtn말고 FilterBtn은 ?? 왜 반응형 구현을 안 해도 자동으로 줄어들고 늘어나지? 라는 생각이 번뜩 났다..

얘는 왜 알아서 반응형 구현이 되지?? 하고 찾아보니flex-basis:auto의 효과였다!
- 이 효과는 글자만큼 버튼 크기를 만들어주고 padding으로 그 크기를 조정하면 화면이 줄어들었다 커져도 알아서 바뀐다!!

그래서 Nextbtn도 @media screen을 지우고 flex-basis:auto 적용을 하니 알아서 반응형이 잘 구현이 됐다! (후우,,)

flex-basis를 해결하면서 또 생각난 게 굳이 3번이나 바꿀 필요 없이 겹치는 건 또 컴포넌트화 시켜서 그냥 그 자리에 컴포넌트를 넣어주는게 훨씬 효율적이라는게 생각났다..

그래서 따로 NextBtn.js를 만들어주고 버튼이 필요한 곳에 넣어주었다..!

이렇게 반복되는 코드들이 있으면 컴포넌트화 시키면 시간도 줄이고 동시에 쉽게 수정할 수 있다!!

개발자는 시간 줄이는 것이 곧 돈이니 이런 것들은 하나하나 치지 말고 컴포넌트화 시켜서 쉽게 관리하자!

How?

반응형 CSS 구현