20210226 10일차 반응형웹_미디어쿼리

오늘 한일

데스크탑/태블릿/모바일 사이즈 별 반응형 웹 구현 .

 

<모바일 사이즈 웹 디자인>

아직못한것

그림일기장 메인페이지(로그인페이지)에서 소샬 로그인 버튼이 제대로 나오지 않는 것과 클릭했을때 모달창의 위치가 잘못된 점.

그리고 햄버거 메뉴바를 추가해주어야 하는데, 이를 추가함에 따라 많은 수정사항이 발생될 것으로 예상된다.

그림판을 적용해야한다.

깍두기칸 구현해야한다...

깨달은것

미디어쿼리를 이용하여 구현했는데, 생각했던 것보다 구현이 어렵지 않았다.

styled component 에 아래와 같이 미디어 쿼리문(?) 을 사용하면 된다.

화면 사이즈별로 한땀한땀 구현해주어야 하는 것 같다.

	const InputBox = styled.label`
		/* border: 1px solid blue; */
		width: 100%;
		font-size: 1rem;
		display: flex;
		/* flex-direction: row; */
		flex-wrap: wrap;
		align-items: center;
		margin-top: 0.5rem;
		@media only screen and (max-width: 770px) {
			width: 90%;
			margin-left: -1rem;
		}
		@media only screen and (max-width: 480px) {
			width: 90%;
			margin-left: -2rem;
		}
	`;

그리고,,, CSS 작업 도중에 flex-grow 가 안 먹히는 경우가 있는데, 걱정할 것이 없다. 해당 컴포넌트를 포함하고 있는 박스크기 자체가 작은 경우일 것이다...! 또한 rem과 같은 절대적(다소)인 단위를 사용하면 화면을 줄였을 때 박스 밖으로 글자 또는 포함된 박스가 벗어나는 현상이 발생할 수 있다.

% 단위를 사용하는 것이 아직까진 좋은 방법인 것 같다.

다만, 더 알아보아야 할 내용이 있는데, viewport 단위인 vw, vh 를 반응형 웹 구현에 많이 사용한다고 하는데, 구체적으로 잘 알지 못한다. 리서치를 해봐야겠다.