[CSS] position 과 overflow를 활용한 웹 위의 모바일 화면 만들기

기타 2022. 7. 24. 22:20

어느날 특이한 요구사항을 받았다.

웹페이지에 모바일 화면 크기로 스크롤되는 화면을 만들어주세요. html과 css만 사용해야 합니다.

나름 프론트엔드 개발자로 일을 하고 있었지만, 리액트와 tailwind의 편리함에 젖어 html이나 css에 대해 공부를 제대로 해본 적이 없는 것 같다. 더군다나 지금 회사는 퍼블리셔까지 있어서 게으름이 정점에 달해 있었다. 이번에 화면을 만들며 여러번 시행착오를 했었는데, 지금 적지 않으면 까먹을 것 같아 내용을 짧게 정리해보았다. 구체적인 css에 대한 설명보다는 이런식으로 구현했다 위주로 글을 썼다.

1. 상태바와 네비게이션바 고정시키기 (position)

처음에 생각한 부분은 상태바와 네비게이션바가 스크롤 할때 고정되어 있어야 한다는 점이었다.

고정은 position fixed만 잘 넣어주면 된다고 생각했다. 맨 처음 작성한 코드는 아래와 같았다.

<!-- index.html의 body 부분 -->

<body>
    <nav>
      <img id="status-bar" src="images/statusbar.png" />
    </nav>
    <section>
      <div>안에 들어갈 내용</div>
    </section>
    <footer>
      <img id="nav-bar" src="images/navbar.png" />
    </footer>
 </body>

/* index.css 
*  중복되는 부분은 생략
*  임의로 360px X 740px 크기의 폰이라 가정 */

html,
body {
  width: 360px;
  height: 740px;
}

img {
  width: 360px;
}

section {
  width: 100%;
  height: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: bisque;
}

#status-bar {
  position: fixed;
  top: 0;
}

#nav-bar {
  position: fixed;
  bottom: 0;
}

status-bar 와 nav-bar 를 각각 position에 fixed를 준 이후, top 과 bottom을 이용해 위 아래로 고정시켰다.

처음에는 Device Mode 를 켠 채로 보고선 괜찮겠다고 생각했다. 하지만 Device Mode를 끄자 내가 만든 화면은 창의 크기만큼 쭉 늘어났다.

2. 고정된 높이로 스크롤 되는 화면 만들기 (overflow)

처음엔 body에 높이를 740px로 줬기 때문에 그 이상으론 nav-bar가 내려가지 않을거라고 생각했다. 하지만 예상과는 달리 웹 창에 따라 바닥으로 쭉 내려가는 모습을 볼 수 있었다. 원하는 창의 크기를 벗어나지 못하게 하려면 overflow 속성을 통해 조절이 필요했다.

overflow는 기본값이 visible인데. 이는 넘친 컨텐츠가 상자 바깥까지 보인다는 의미이다. 따라서 우리가 지정한 높이를 넘는 부분은 스크롤로 조절하도록 overflow-y: scroll을 추가하였다. 이러면 이제 높이를 넘어가는 부분은 스크롤을 해야 볼 수 있다.

/* index.css 에서 html과 body에 overflow 관련 속성 추가*/

html,
body {
  width: 360px;
  height: 740px;
  overflow-y: scroll;
}

문제는 여전히 nav bar가 바닥에 붙어있다는 점이다.

3. 고정된 위치에 네비게이션 바 고정시키기

내가 원하던건 저 740px크기의 상자 바닥에 네비게이션바를 붙이는 거였다.

이걸 위해선 전체 body를 relative로 잡고, absolute인 상자를 만들어서 body의 바닥에 고정시키고, 그 고정된 박스 안에 fixed를 넣어주면 된다.

다시 설명하자면 전체 body가 기준(position: relative)이 되어 footer를 맨 밑에 고정(position: absolute; bottom: 0) 시키는 작업을 먼저 한다. 그리고 그 footer안에서 위치를 고정(position: fixed)시키면 화면의 맨 밑에 네비게이션 바를 고정시킬 수 있다.

<!-- footer 쪽에 div로 이미지를 감쌈 -->
<footer>
  <div class="fixed-wrapper">
    <img id="nav-bar" src="images/navbar.png" />
  </div>
</footer>

html,
body {
  width: 360px;
  height: 740px;
  overflow-y: scroll;
  position: relative;
}

footer {
    position: absolute;
    width: 100%;
    height: 48px;
    bottom: 0;
  }

/* 이걸 써주면서 #nav-bar 부분은 삭제*/
.fixed-wrapper {
  position: fixed;
}

4. 웹 페이지의 중앙에 화면이 보이도록 정렬

마지막으로 웹 페이지의 중앙으로 이 화면을 이제 옮겨야했다. 정렬할때 항상 등장하는 우리의 친구(?) flex를 통해 정렬해주면 된다. 기존에 붙여 쓴 html과 body를 분리하고, html에는 width와 height를 100%로 주자.

이렇게 되면 기존에 만들었던 status-bar도 top에 혼자 둥둥 남기때문에, nav-bar와 마찬가지로 fixed-wrapper로 감싸주어야한다.

<body>
    <header>
      <div class="fixed-wrapper">
        <img src="images/statusbar.png" />
      </div>
    </header>
    <section>
      <div>안에 들어갈 내용</div>
    </section>
    <footer>
      <div class="fixed-wrapper">
        <img src="images/navbar.png" />
      </div>
    </footer>
 </body>

html {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  width: 360px;
  height: 740px;
  overflow-y: scroll;
  position: relative;
  border: 1px solid black;
}

header {
  position: absolute;
  width: 100%;
  top: 0;
}

footer {
  position: absolute;
  width: 100%;
  height: 48px;
  bottom: 0;
}

section {
  width: 100%;
  height: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: bisque;
}

.fixed-wrapper {
  position: fixed;
}

img {
  width: 360px;
}

정리

position relative, absolute, fixed 와 overflow를 활용해서 고정된 크기의 모바일 화면을 만들어보았다.

좀 특이한 조건이었어서 이 예시가 누구에게 도움이 될 수 있을지는 모르겠다. 하지만 덕분에 스스로 position에 대해 이해할 수 있는 계기가 되었다.

추가

이 글을 보고 글또 7기 윤병인님이 html과 body는 순수하게 유지하는편이 좋다고 피드백과 코드를 함께 남겨주셨다. (감사합니다 😊 )

See the Pen positoin mobile by airman5573 (@airman5573) on CodePen.

'기타' 카테고리의 다른 글

video src의 썸네일을 추출할 때 canvas의 CORS 이슈(SecurityError) 우회하는 방법 (0)	2022.04.20
깃허브 페이지와 한글 도메인 연결하기 (feat.내도메인.한국) (1)	2021.12.19

ABOUT ME

작은 성공 모으기 작은 성공 모으기

1. 상태바와 네비게이션바 고정시키기 (position)

2. 고정된 높이로 스크롤 되는 화면 만들기 (overflow)

3. 고정된 위치에 네비게이션 바 고정시키기

4. 웹 페이지의 중앙에 화면이 보이도록 정렬

정리

추가

'기타' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. 상태바와 네비게이션바 고정시키기 (position)

2. 고정된 높이로 스크롤 되는 화면 만들기 (overflow)

3. 고정된 위치에 네비게이션 바 고정시키기

4. 웹 페이지의 중앙에 화면이 보이도록 정렬

정리

추가

'기타' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바