멋쟁이사자처럼 프론트엔드 스쿨에서 진행한 실습에서 미디어쿼리를 쓰기 전 레이아웃을 설정할 때 반응형을 고려하여 레이아웃을 설정하는 방법들을 몇 개 배웠고, 디자인에 따라서 변형될 가능성이 무궁무진하기 때문에 일정 예시라도 까먹지 않게 기록하려고 한다.
예시 1
main에 3개의 section이 중앙에 위치하는 디자인이다.
평소의 나라면 width, height 값을 고정 값으로 두고 css 작성을 했겠지만 반응형을 고려할 땐 아주 안 좋은 습관인 것 같다.
section 1,2,3는 grid로 레이아웃을 만들었기 때문에 main에 왼쪽, 오른쪽 두개의 section이 있는 것으로 가정해보자.
이때 화면 중앙에 main을 위치 시키며, main width값 이하로 브라우저가 줄어들었을 때, (미디어 쿼리를 사용하여 flex: column 으로 section들을 위아래 위치시킨 후) 각 section의 크기가 브라우저 width에 맞춰서 반응하려면 어떻게 main의 css를 작성해야 할까?
말이 어렵지만 결국
미디어 쿼리로 지정한 일정 width 기준으로 이렇게 브라우저 width에 맞춰 section 크기가 반응하도록 만든다는 의미이다.
section 요소의 배열 및 크기에 따라 방법이 달라진다.
/*
1번 방법 - section의 요소를 다 채워도 디자인으로 지정된 section의 크기에 미치지 못 할 때
(좌우 여백의 크기도 정해져 있다면 max-width: calc(100% - 고정값px) 로 여백을 만들어주면 된다.)
*/
main {
width: 고정값px;
max-width: 100%;
margin: 0 auto;
}
/*
2번 방법 - section의 요소를 다 채우면 디자인으로 지정된 section의 크기를 만족할 때
*/
main
{
width: 100%;
max-width: 고정값px;
margin: 0 auto;
}이렇게 main layout을 잡아주면 되고,
당연히 각 section의 요소들은 width값을 고정으로 주면 위 사진처럼 크기에 맞춰 요소들이 반응하지 않는다.
그럼 height는요?
height는 요소들이 colum 방향으로 쌓이는게 보통이다보니, 브라우저의 height에 따라 요소들의 height도 반응해서 줄어드는게 아닌, 스크롤이 생기도록 해야한다.
스크롤이 생기게하는 것도 중요하지만 브라우저의 height을 아무리 줄여도 스크롤을 해서 보면 모든 요소가 다 보이게 하는 것이 제일 중요하다.
그러기 위해선
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}body에 min-height: 100vh 를 선언해주면 브라우저의 height을 줄여도 요소들이 view port에 잘리지 않은 채 꽉 차서 보이고 스크롤이 생기게 된다!
당연한거 아니야?
캡스톤 디자인 당시에 웹 페이지를 반응형으로 제작을 했었는데, 그땐 이 악물고 전부 고정 width를 미디어쿼리로 노가다 작업을 해서 만들었었다.
전공 수업에선 이렇게 레이아웃 짜는 방법 안 알려준다 ^^..
예시 2
먼저 코드를 보면
/* 전체 layout */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}- main을 view port 전체에 보여주기 위해 body에 min-height: 100vh 을 설정했다.
.max-width {
width: 1224px;
max-width: calc(100% - 60px);
margin: auto;
}- header와 main에 max-width 클래스를 추가했다. 디자인상 header와 main이 좌우로 일정한 여백이 존재하기 때문에 max-width를 100%가 아닌 calc(100% - 60px) 를 사용했다. width와 max-width를 바꿔써도 똑같이 반응한다.
앞으로도 미디어 쿼리로 노가다 하지 말고 제대로 반응형을 고려해서 레이아웃을 만들도록 하자!
(디자인 출처: 멋쟁이사자처럼 프론트엔드 스쿨 수업 교안)
