모바일 가운데 정렬 (스크롤 없고 화면 가득)
PC와 모바일 모두에 대응하는 반응형 웹(Responsive Web) 앱을 만들면서 개발용 PC의 웹 브라우저 창 크기를 크게 또는 작게하거나, 개발자 도구를 열어 모바일 모드로 전환해서 테스트해 보지만... 실제로 모바일의 브라우저에서 접속해 보면 기대와 달리 예상치 못한 현상으로 골치를 썩는 경우가 간혹있는데, 이 가운데 정렬하는 작업이 딱 그 경우였습니다.
개발해야 하는 웹 페이지는 메인 콘텐츠를 감싸는 <div> 요소를 꼭 상하좌우 가운데에 정렬해야 할 필요가 있었습니다. 그리고 아래와 같은 목표를 설정하고 작업을 진행하였습니다.
[목표 설정]
레벨1. <div> 요소를 PC 브라우저에서 상하좌우 가운데(중앙) 정렬하기
레벨2. 모바일 브라우저에서도 가운데 정렬하기
레벨3. 모바일 브라우저 화면을 가득 채우면서 스크롤은 생기지 않게 하기
레벨4. 모바일 화면 회전으로 인한 브라우저 리사이즈에 대응하기
바로 위에서 설정한 목표를 구현하기 위한 코드를 작성해 보았습니다. 두가지 방법이 있고, 방법 1과 2의 테스트 결과는 비슷합니다. 그리고 본문의 샘플 소스 코드를 참고하세요.
방법 1. [CSS] -webkit-fill-available 사용
[소스 코드]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <!-- 모바일 대응을 위한 뷰포트 기본 설정 --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <style> | |
| html { | |
| height: -webkit-fill-available; | |
| } | |
| body { | |
| background-color: #b9f6ca; | |
| margin: 0px; /* 브라우저 자체 기본 margin 없애기 */ | |
| display: flex; | |
| justify-content: center; /* 자식 요소를 가로 가운데 정렬 */ | |
| align-items: center; /* 자식 요소를 세로 가운데 정렬 */ | |
| height: 100vh; /* '-webkit-fill-available'이 유효하지 않을 경우를 대비 */ | |
| height: -webkit-fill-available; | |
| } | |
| .intro { | |
| background-color: #00c853; | |
| width: 250px; | |
| padding: 15px 0px; | |
| text-align: center; | |
| color: #ffffff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="intro"> | |
| 저는 중앙 정렬된 div입니다. | |
| </div> | |
| </body> | |
| </html> |
[코드 설명]
기본적인 가운데 정렬하는 코드는 14~16행입니다. PC의 브라우저에서는 그 코드만으로도 충분하지만 모바일의 브라우저에서는 '-webkit-fill-available'이 필요합니다. '-webkit-fill-available'는 사용이 가능한 공간을 넘치지 않게 채우는 설정입니다. 주석 처리(무효화)하고 비교해 보면 차이를 알 수 있습니다.
브라우저 호환성 관련 정보는 여기↓↓↓
방법 2. [JavaScript] 부모 요소의 높이를 가변적으로 설정
[소스 코드]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <!-- 모바일 대응을 위한 뷰포트 기본 설정 --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <style> | |
| body { | |
| background-color: #b9f6ca; | |
| margin: 0px; /* 브라우저 자체 기본 margin 없애기 */ | |
| display: flex; | |
| justify-content: center; /* 자식 요소를 가로 가운데 정렬 */ | |
| align-items: center; /* 자식 요소를 세로 가운데 정렬 */ | |
| height: var(--h, 100vh); /* '--h'가 유효하지 않을 경우는 100vh */ | |
| } | |
| .intro { | |
| background-color: #00c853; | |
| width: 250px; | |
| padding: 15px 0px; | |
| text-align: center; | |
| color: #ffffff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="intro"> | |
| 저는 중앙 정렬된 div입니다. | |
| </div> | |
| <script> | |
| document.documentElement.style.setProperty('--h', window.innerHeight + 'px'); | |
| // 브라우저 리사이즈에 대응 | |
| window.addEventListener('resize', () => { | |
| document.documentElement.style.setProperty('--h', window.innerHeight + 'px'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
[코드 설명]
PC 브라우저는 11~13행만으로 자식 <div> 요소를 가운데에 정렬하는 것이 가능하지만, 모바일 브라우저는 코드를 좀더 넣아야 정확하게 구현할 수 있습니다.
30행에서 <html> 요소에 사용자 정의 스타일 속성 '--h'를 선언하고, '--h'의 값으로 'window.innerHeight'(브라우저 창의 뷰포트 높이)를 설정합니다. 이 속성을 부모(여기서는 <body>) 요소의 높이 값으로 사용(14행)함으로써 화면을 꽉 채우고 불필요한 스크롤이 생기지 않도록 합니다.
※뷰포트는 '기기의 화면에 보여지는 (웹 페이지의) 영역'이라고 생각하면 됩니다.
32행부터는 사용자의 'PC 브라우저 창 크기 조절', '모바일 화면 회전' 등으로 브라우저가 리사이즈(resize)될 경우에 대비한 코드입니다.
맺음말
PC·모바일 모두 완벽하게 상하좌우 가운데 정렬하는 것은 쉽지 않았습니다. 위의 샘플 소스 코드로 구현하더라도 iOS에서의 크롬 브라우저에서 링크를 타고 해당 페이지를 열 경우에, 초기 화면과 리사이즈 화면에서 약간의 버그가 있습니다.
모든 기기의 모든 브라우저에서 동일한 퍼포먼스를 낸다는 것은 불가능하므로 여기까지가 적절한 대응이라고 생각합니다.
현재로서는 CSS의 fill-available 값이 모든 브라우저에 좀더 완벽하게 정착되기를 기다리거나, JavaScript를 좀더 건드려 보는 방법이 최선인 것 같습니다.
댓글
댓글 쓰기