반응형 웹 레이아웃 만들기

반응형 웹 화면을 만들기 위해 bootstrap을 사용했지만, js 로 작성된 css 부분이 많아서

원하는 방향으로 css 를 작성하기 어려웠다.

 

그래서, 반응형 웹을 직접 만들기로 했고, 우선은 반응형 웹을 이해하기 위해 레이아웃을 먼저 작성했다

 

데스크탑에서 이용할 때

두 개의 요소가 가로로 배치된다.

 

모바일에서 이용할 때

모바일에서 볼 때는, flex로 배치되어 있던 요소들이 세로로 나타난다

 

 

		#contentsWrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}

		@media only screen and (min-width: 768px) {
			#contentsWrap {
				flex-direction: row;
			}
			#contentsWrap > div {
				width: 50%;
				height: 400px;
			}
		}

		@media only screen and (max-width: 767px) {
			#contentsWrap > div {
				width: 100%;
				height: 50%;
			}
		}

기본적으로 flex를 column으로 설정하고, 화면의 최소 넓이가 768px 이상일 경우,

flex row로 변경하고 div의 크기를 변경했다.

 

사실은 768px는 조금 큰 것 같고, 데스크탑 / 탭 / 핸드폰 으로 나눠서 레이아웃을 작성할 것이다.

 

** only screen 키워드는 현재 웹 사이트를 사용중인 디바이스의 screen에서만 미디어 쿼리가 적용되도록 하는 키워드이다

즉, 프린터 등과 같이 스크린이 아닌 다른 출력장치에서는 해당 스타일이 적용되지 않는다.

 

only 키워드 없이 screen만 사용한다면, 다른 출력장치에서도 해당 스타일이 적용된다.

 

인터넷 익스플로러 8 버전 이하와 같이 미디어 쿼리를 지원하지 않으면, 해당 css가 적용되지 않는다.