plz_reply
135
2018-05-17 23:58:46 작성 2018-05-18 00:28:11 수정됨
4
258

화면 해상도에 영향을 받지 않는 레이아웃을 구성하는 방법?


안녕하세요.

예전에 학원에서 웹 프로젝트를 진행하면서 궁금했었던 점을 이제 와서 질문 드리게 되었네요...


먼저 저희 집 모니터의 화면 해상도는 1366 x 768이고,

학원 모니터의 화면 해상도는 정확히 기억은 안 나지만 아무튼 저희 집보다는 낮았었습니다.

그때 당시에 프로젝트를 진행하면서 불편했던 점이 분명 학원에서 프로젝트를 실행시켜

결과를 봤을 때는 원하던 대로 깔끔하게 잘 정렬되어 보이던 레이아웃(입력창, 버튼 등의 위치)들이

집에 와서 실행시켜보기만 하면 엉망진창으로 보이더라고요.

그래서 반응형 웹이라는 것을 이용해야 되나 싶어서 반응형 웹에 대해 알아보았는데

뭔가 제가 원하던 것과는 차이가 있더라고요.

반응형 웹은 브라우저 창의 크기에 따라 레이아웃을 재구성하는 뭐 그런 것 같았고,

제가 원하던 것은 브라우저 창의 크기는 같은데 서로 보이는 화면이 달라서

이것을 어떻게 해야 통일시킬 수 있나였습니다.

이 문제를 해결하려면 어떤 것에 대해 알아봐야 할까요?

0
0
  • 답변 4

  • isNotEmpty
    2k
    2018-05-18 00:18:01

    보통 사이즈를 정할때

    최소값을(픽셀, 절대값) 먼저 정하고, 퍼센트로 비율적으로(상대적) 정합니다.


    모든 브라우저마다 모든 기기마다 다 통일시키는 것은 현실적으로 불가능하죠.

    0
  • plz_reply
    135
    2018-05-18 00:33:11 작성 2018-05-18 00:36:45 수정됨

    답변 감사합니다!

    그런데 죄송하지만, 아직 이해가 잘 안 가서... 혹시 코드로 간단하게 비유 좀 해주실 수 있을까요...?

    0
  • jink6111
    122
    2018-05-18 00:34:41

    고민하시는 문제에는 아마

    미디어 쿼리 작업이 필요하실겁니다.

    0
  • cocacolar
    45
    2018-05-18 07:15:38

    1. 웹표준을 지켜서 코딩해주세요.

    2. 메타태그의 뷰포트를 설정해주세요.

    3. 해상도 별로 코딩을 원하시면 미디어 쿼리를 이용하세요.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.