미디어 쿼리 적용 반응형 웹 사이트 만들기 와이드 모니터용

와이드 모니터 화면

 고해상도 와이드 모니터에 맞는 반응형 웹을 만들어 보려 합니다. 큰 와이드 모니터에선 네이버가 밑의 사진과 같이 나오는데

와이드 모니터 양쪽 여백

학습 겸 해서 반응형 웹으로 만들어 보려 합니다. 요즘 적응형 웹도 많은데 해상도에 맞춰 사진이나 내용 구성물이 달라지는 것이다 반응형 웹은 해상도에 맞춰 객체가 내려가거나 안 나오게 하는 등 미디어 쿼리를 이용하여 레이아웃의 위치를 바꿔 주는 식으로 진행할 예정입니다. 그리고 와이드 모니터에 맞게 나온 사이트도 찾아보지 못했고 넷플릭스 같은 경우 사진만 대빵 크게 나와서 좀 난감하긴 한대 그래도 영화 볼 땐 21:9 모니터 만한 게 없답니다.

와이드 모니터에서 네플릭스

 

미디어 쿼리 사용

 일단 적응형웹은 만들어 본 적도 없고 미디어 쿼리를 예전에 조금 써보았기에 3840*1600 해상도에 맞는 반응형 웹을 만들어 볼까 합니다. 메테리얼 디자인 3으로 템플릿을 구해서 후딱 끝내려 했으나 피그마를 학습해서 능수능란하고 화려하게 만들 시간도 모자라고 MD3 템플릿을 구하기도 힘들어 그냥 제가 미디어 쿼리를 써서 레이어를 나누고 그 안에 머티리얼 디자인 3을 적용한 컴포넌트를 넣어서 구현하는 식으로 진행하려 합니다. 미디어 쿼리를 이용한 라이브러리가 있을 거 같긴 하지만 그 또한 배워서 적용하는 데는 시간이 걸릴 듯하고 알고 있는 지식을 가지고 한번 도전해 보겠습니다. 최종 목표는 플러터와 스프링으로 파이어 베이스를 매개로 연동되어 돌아가는 앱을 만드는 것이기에 후딱후딱 넘어가겠습니다.

 

 우선 맨 위의 사진과 같이 최대 넓이로 열었을 때 꽉 채울 수 있지만 살짝 여백을 둬서 3520 이상에선 더 이상 div가 벌어지지 않도록 미디어 쿼리를 두었고 모바일 개발은 보통 320픽셀 정도로 한다기에 기본 사이즈를 320으로 하고 상황에 따라 콘텐츠에 따라 2배 3배 div가 커지는 형식으로 css를 만들 생각입니다. 

 

 body with, height 100%로를 주면 스크롤이 생긴다!!

body {
            margin: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            text-align: center;

        }

width, height만 100프로 주면 스크롤이 생겨 보기도 별로고 픽셀도 차지해서 마진을 0을 줘버리면 꽉 차서 아래쪽 스크롤이 사라집니다.

.w3520 {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        @media (  min-width: 3520px) {
            .w3520 {
                width: 3520px;
            }
        }

body 안에 top, middle, bottom div를 w3520클래스로 지정해 주고 보기엔 흉하지만 각 구역을 구분할 수 있도록 누가 어디 들어가 있는지 알 수 있도록 다양한 백그라운드 컬러를 지정해 줬습니다.

 w3520클래스는 평소에는 넓이가 100프로이지만 3520픽셀을 넘어가는 순간 더 이상 커지지 않게 미디어 쿼리로 설정해 두었고 그 이하에선 100프로 꽉 채우다가 저 구간에 들어가면 더이상 커지지 않습니다 그리고 가운데로 몰리게 해서 작은 화면이든 큰 화면이든 좌, 우로 치우치지 않게 하였습니다.

 

 

inline-block를 왼쪽이나 오른쪽으로 붙이는 방법

요즘은 FlexBox 이용

FlexBox test

 top 영역엔 3개의 div를 넣고 로고는 왼쪽 프로필 정보는 오른쪽으로 보내고 싶었는데 처음 배울 땐 복잡하게 했던 기억이 있는데 요즘엔 flexbox를 많이 쓴다고 하는군요 간단하게 display를 flex로 주고 기본 상태면 왼쪽으로 붙으니 프로파일 영역에만 margin-left:auto를 줘보리니 간단하게 끝나네요 좁아지면 어떻게 될지도 궁금하네요.

spring thymeleaf를 사용하였습니다. 그래소 th태그가 들어갑니다.

 

<div th:fragment="top" style="display: flex;background-color: beige;">
    <div style="display: inline-block;">Logo</div>
    <div style="display: inline-block;background-color: aquamarine">
        <a th:href="@{/actuator}">actuator</a>
        <a th:href="@{/actuator/metrics}">metrics</a>
        <a th:href="@{/actuator/mappings}">/actuator/mappings</a>
        <a th:href="@{/actuator/caches}">/actuator/caches</a>
    </div>
    <div style="display: inline-block;background-color: darkgrey;margin-left: auto;">Profile</div>
</div>

경쟁중인 링크들

화면을 좁히니 display:flex로 준 가운데 부분만 치열하게 경쟁을 하며 밀어내는 모습이 보이네요.

저 가운데 링크들만 아래쪽으로 내려 보내고 싶은데 고민해 봐야겠습니다.

위치 변경

 로고와 프로필의 위치를 변경해도 한 줄에 3칸이 그대로 유지되네요

로고와 프로필은 어느 정도의 지분은 유지를 하는 거 같습니다 최소 비율이 있는 거 같네요

경험이 많으면 원하는 대로 뚝딱 나오겠지만 html, css를 만져 본 지 오래라 깊게 파지도 않았고 최소 widht를 줘서 그 이상 부대낄 수 없으면 내려가는 방법을 찾아보겠습니다. 제가 원하는 건 로고는 왼쪽 프로파일은 오른쪽 링크는 최대한 왼쪽에

그리고 겹치면 로고 프로파일 링크 순으로 아래로 내려가면 좋겠습니다.

 

마진으로 뒤의 객체까지 영향을 받는다

프로파일에 마진 auto가 설정되어 밀수 있는 만큼 계산되어 뒤에 객체까지 밀어 버린다.

 

 

flexbox로 해결을 하려 했으나 도저히 안될 거 같아 기존의 방식대로 display:inline-bloc를 주고 로고와 프로필을 float로 좌우로 고정 시키고 실행해 보았다.

float 사용 예

 

inline-block 배치

상황에 맞춰 한쪽으로 쭉 배열해야 할 때는 flexbox가 편한 거 같고 각기 자리를 잡고 나머지는 밀어내야 하는 경우는 inline-bloc이 나은 거 같다. 상황에 맞게 쓰면 좋을 듯하다.

 

<div th:fragment="top" style="display: block;background-color: beige;">
    <div style="display: inline-block;background-color: darkkhaki;float: left">Logo</div>

    <div style="display: inline-block;background-color: darkgrey;margin-left: auto;float: right">Profile</div>

    <div style="display: inline-block;background-color: aquamarine">
        <a th:href="@{/actuator}">actuator</a>
        <a th:href="@{/actuator/metrics}">metrics</a>
        <a th:href="@{/actuator/mappings}">/actuator/mappings</a>
        <a th:href="@{/actuator/caches}">/actuator/caches</a>
    </div>

</div>

 

추가로 링크에

<div style="display: inline-block;background-color: aquamarine;float: left;">

를 줌으로써 로고 옆에 붙으면서 좁아지면 밑으로 내려가는 효과를 줄 수 있습니다.

 

 

 

.w320 {
            width: 320px;
        }
        .w2880{
            width: 100%;
        }

        @media (  min-width: 320px) {  }
        @media (  min-width: 640px) {  .w2880{   width: 320px;     }    }
        @media (  min-width: 960px) {  .w2880{   width: 320px;     }    }
        @media (  min-width: 1280px) {  .w2880{   width: 640px;     }    }
        @media (  min-width: 1600px) {  .w2880{   width: 960px;     }    }
        @media (  min-width: 1920px) {  .w2880{   width: 1280px;     }    }
        @media (  min-width: 2240px) {  .w2880{   width: 1600px;     }    }
        @media (  min-width: 2560px) {  .w2880{   width: 1920px;     }    }
        @media (  min-width: 2880px) {  .w2880{   width: 2240px;     }    }
        @media (  min-width: 3200px) {  .w2880{   width: 2560px;     }    }
        @media (  min-width: 3520px) {  .w3520 {   width: 3520px;     }    .w2880{       width: 2880px;      }  }

 

 

640px 이하

초록색 부분이 콘텐츠 영역이고 1과 2가 양쪽의 메뉴 모바일 에선 콘텐츠만 나오고 메뉴는 들어갔다 나왔다 하므로 콘텐츠의 위드가 100프로이고

최대 크기에선 좌우로 메뉴가 들어가므로 해서 해상도에 맞춰 width 수가 변경 되는 미디어 쿼리인데 좀 무식 하긴 하지만

특정 구역에 특정 클래스의 크기를 변경해 줌으로써 레고 조각 맞추듯이 밀려나고 드러나가고를 해줄 생각입니다.

 미디어 쿼리를 저렇게 무식하게 사용 안 하고 프로그램 방식으로 하는 방법도 있지만 그것 또한 배우는데 시간이 걸릴 것 같아 일단은 날것의 느낌이 나게 코딩해 주고 나중에 완성이 되면 새로운 방식으로 업그레이드시켜 보겠습니다.

 그러면 이제 다음 시간에 여기에 메테리얼 컴포넌트를 한씩 집어넣어 보도록 하겠습니다. 근데 이렇게 하는 게 맞겠죠? 좋은 방법을 알고 계시다면 알려주세요.