티스토리 뷰

코딩 공부방/JSP／HTML

반응형 레이아웃 화이트스페이스 해결방법

Digest 2020. 4. 19. 01:21

반응형 레이아웃

1. 최대 골칫거리

반응형 레이아웃을 설계하는 것은 너무 힘든 일인 것 같습니다. 여러 장치의 해상도를 고려해야 하고, 또 장치만 고려한다고 되는 것이 아니라 PC버전의 모든 브라우저별로 버전에 따라서도 똑같이 보이도록 만들어야 하기 때문에 한 치의 오차도 없어야 하기 때문이죠. 대부분의 포털 사이트의 퍼블리셔께 존경을 표하는 일이 바로 이 때문입니다. 개(...)떡같이 말하더라도 찰떡같이 알아듣는 현재 최신버전의 크롬과는 다르게 찰떡같이 말하더라도 개(...)떡같이조차 못알아먹는 인터넷 익스플로러 8을 위해 최적화시켜줘야 하는 일이 너무 힘든 것임을 알기 때문이죠. 그래도 예전 익스플로러 6 버전보다는 낫지 않을까 싶었지만, HTML5가 너무 비약적으로 발전하다 보니 오히려 지금은 익스플로러 6 버전보다도 8이 체감상 벅차단 느낌이 듭니다. 빌어먹을 익스플로러 8아! 젠장.. 나는 display:flex좀 써먹고 싶다고!!!!

그런데 최대의 골칫거리는 익스플로러뿐이 아닙니다. 반응형 레이아웃에서는 모든 해상도에서 깨지지 않고 레이아웃이 일정한 형태로 유지되어야 하니까요! 여러 가로 폭의 크기를 고려해서 어떻게 폼을 빼내야 할지를 구성해야 하기 때문에 이러한 것들을 일일이 설계하기가 좀 힘들 수 있겠다는 생각이 듭니다. 아무튼.. 이번에는 카카오스토리의 로그인페이지 레이아웃을 연구하고자 따라 만들어 보았는데, 반응형 레이아웃을 맞추느라 좀 힘들었습니다. 어떻게 이렇게 아름다운 페이지를 퍼블리싱 하신 건지 정말 존경합니다 ㅜㅜ

2. 반응형 레이아웃 벤치마킹

제가 반응형 레이아웃으로 벤치마킹한 로그인 페이지는 바로 '카카오스토리'였습니다. 카카오스토리의 로그인 페이지는 여느 포털 사이트의 로그인 페이지와 다르게 배경화면이 예쁘장하게 있고 뭔가 독창적이면서도 심미성이 돋보이는 디자인이어서 따라하게 되었습니다.

회원 로그인

ineggapps.github.io

3. 작성하면서 발견된 화이트 스페이스

솔직히 반응형 웹페이지를 작성해 본 경험이 그렇게 많지 않고, 최근 들어 개인적으로 웹페이지를 작성할 기회를 얻었던 적이 많지 않아서 손을 좀 놓게 된 것도 있습니다. 그래서 오랜만에 html5를 이용하여 작성하는 것도 꽤나 벅찬 일이었는데 모바일 반응형 레이아웃까지 고려해서 도전하게 되니 좀 더 멘붕이 오지 않았나 싶습니다. 개인적으로 멘붕이 온 시점은 웹브라우저의 가로폭을 줄이면서 발생했습니다. 도대체 왜 이런 현상이 일어나는 걸까요???

3.1. 해결방법

3.1.1. padding이 원인이었다!

일단은 padding이 원인이었습니다. 아래의 제시된 소스에서는 다음과 같이 구성되어 있었습니다. 저는 login_form의 좌우 padding값을 줘서 레이아웃을 맞췄는데, 대략적인 사이즈는 여백 포함하여 518px이고 내부 사이즈만 380px인데 브라우저 가로폭을 줄이면서 380px보다 줄어들게 되면 padding의 좌우값을 맞추느라 크롬 브라우저가 비율에 맞춰 세로에 화이트 스페이스를 추가하는 듯했습니다.

<body>
    <div id="login_wrap">
      <div id="login_header">중략...</div>
      <div id="login_content">
        <div id="login_form">중략...</div>
      </div>
      <div id="login_footer">중략...</div>
  </div>
</body>

그래서 화이트 스페이스를 줄이고자 다음과 같은 코드를 추가하게 되었습니다.

#login_form {
  /* background-color: darkcyan; */
  max-width: 380px;
  min-height: 435px;
  width: 100%;
  margin: 0 auto;
  padding: 59px 69px 49px; /*◀ TODO: 이 패딩 때문에 화면 가로 폭을 축소하면 레이아웃으 깨진다. 미디어 쿼리 사용해 보기!*/
}

/*중략 ...*/

@media (max-width: 519px) {
  #login_form {
    padding: 59px 0 49px; /*◀ TODO: 이 패딩 때문에 화면 가로 폭을 축소하면 레이아웃으 깨진다. 미디어 쿼리 사용해 보기!*/
  }
}

####

3.1.2. 레이아웃의 최소폭 지정

위와 같이 수정함에도 불구하고 가로폭을 쭉 줄여서 100픽셀 미만으로 만들면 레이아웃이 아작(?)날 수밖에 없습니다. 그런데도 불구하고 카카오스토리 로그인 페이지는 아작(?)나지 않고 오히려 가로 스크롤 페이지가 생기더라구요. 이는 전체 레이아웃의 최소 가로폭을 지정해 준 듯해 보였습니다.

#login_wrap {
  /* background-color: darkgray; */
  position: relative;
  width: 100%;
  min-height: 100%; /*이걸 해줘야 세로 크기가 줄어도 모양이 찌그러지지 않음*/
}
/*중략 ... */

/*레이아웃 깨짐 방지*/
@media (max-width: 295px) {
  #login_wrap {
    min-width: 295px;
  }
}

그래서 가로폭을 줄이더라도 최소 가로폭을 유지할 수 있도록 위와 같이 CSS를 지정해 주게 되었습니다.

3.1.3. 화이트 스페이스를 없애기 위한 CSS 속성 추가

참고로 위와 같은 화이트 스페이스 버그는 파이어폭스 브라우저에서는 발견되지 않았습니다.
그럼에도 불구하고 크롬의 반응형 모드에서는 버그가 발견되니까 수정해 주는 것이 좋겠죠?
아래의 코드를 작성한 이후에 파이어폭스 브라우저의 반응형 모드처럼 완벽하게 동작했습니다!

html,
body {
  /* white space bug fix in chrome */
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

참조:stackoverflow

물론 아직 갈 길은 멀고 퍼블리셔가 될 것은 아니지만.. 도전은 계속됩니다!!

저작자표시 비영리 변경금지

'코딩 공부방 > JSP／HTML' 카테고리의 다른 글

이클립스 다운로드 및 설치방법 안내 (0)	2020.04.14

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

다이제 공부방

티스토리 뷰