문제 정의

1. 문제 1
   
   내가 제작한 하단 네비게이션 바의 형태는 이렇다. 이 네비게이션 바를 어떠한 뷰포트에서든 항상 하단부에 고정하고 싶었다.
   
   
2. 문제 2
   
   오른쪽에 글쓰기 버튼을 fixed로 설정하고 bottom, right을 적절히 주었는데, 가로가 넓은 뷰포트에서는 메인 영역 바깥 맨 오른쪽에 버튼이 위치되었다. 이를 메인 영역 내부 오른쪽에 위치시키고 싶었다.

position

position: fixed

fixed 속성은 요소를 뷰포트(브라우저 창)에 상대적으로 고정시킨다.
스크롤을 해도 요소의 위치는 변하지 않는다.
fixed 요소는 일반적인 문서 흐름에서 제거되며, 다른 요소들은 fixed 요소가 존재하지 않는 것처럼 동작한다.

position: sticky

sticky 속성은 스크롤 위치에 따라 relative와 fixed 위치 지정 속성 사이를 전환한다.
스크롤이 특정 위치에 도달하기 전에는 relative처럼 동작하고, 스크롤이 특정 위치에 도달하면 fixed처럼 동작한다.
따라서, 스크롤에 따라 특정 영역 내에서 고정되거나 움직이게 할 수 있다.

네비게이션 바 하단에 고정시키기

<div>
  <Contents>
  <Navbar>
</div>

프로젝트의 구조는 대략적으로 위와 같다.

우선 네비게이션 바를 고정시키기 위해 bottom: 0px 속성을 설정해서 항상 맨 밑에 위치시켰다. 하지만 이는 문서의 가장 하단부에 위치만 시킨 것이지, 뷰포트의 하단부에 위치시킨 것이 아니다. 이때 fixed나 sticky 속성을 부여해야 한다.
fixed는 문서 흐름에서 완전히 제거되기 때문에, fixed로 설정된 요소는 다른 요소들에게 영향을 주지 않게 되며, 마치 다른 요소들 위에 떠있는 것처럼 보이게 된다. 따라서 네비게이션바 위에 콘텐츠 영역이 네비게이션 바 밑으로 숨게 된다.
sticky는 원래의 문서 흐름을 유지하므로, 다른 요소들이 그 위를 덮을 수 없다. 이로써 하단부에 고정이 되었고, 위에 콘텐츠 영역도 밑에 숨지 않게 되었다.

그러나 이번엔 다른 문제에 맞닥뜨렸다. 콘텐츠의 세로 높이가 적절히 크지 않으면 밑에 고정이 되지 않는다. 나는 항상 뷰포트에서 가장 하단 부분에 고정시키고 싶었다.

이때 콘텐츠의 영역을 뷰포트 크기로 지정해주면 된다.

.contents {
	min-height: 100vh;
}

콘텐츠영역의 높이가 부족해도 네비게이션 바는 항상 뷰포트의 하단 부분에 고정되어있는 것을 확인할 수 있다.

글쓰기 버튼 오른쪽 고정시키기

.button {
	position: fixed;
    bottom: 100px;
    right: 15px;
}

글쓰기 버튼의 대략적인 css는 위와 같다. 모바일 뷰포트에서는 메인 영역의 오른쪽에 제대로 위치해있지만, 데스크톱 뷰포트에서는 메인 영역을 벗어나 위치하게 된다.
그래서 미디어 쿼리를 이용해 데스크톱 뷰포트에 대해서 따로 처리해주기로 하였다.

@media screen and (min-width: 393px) {
	right: calc(50%-12rem);
}

이런식으로 393px이상일 때 right 속성을 다르게 부여해주었다.

데스크톱 뷰포트에서도 메인 영역 오른쪽에 제대로 위치시킬 수 있었다.