[Tip]해상도와 상관없는 플로팅메뉴(내비게이션) - 2.위치지정 자세히 알아보기

[해상도와 상관없이 브라우져에 붙어있는 플로팅메뉴 두번째. 위치지정에 대해서 좀더 자세히 알아보기]
어제였죠? 플로팅메뉴에 대해 포스팅을 했었답니다.

[Tip]해상도와 상관없이 브라우저에 붙어있는 플로팅메뉴(내비게이션) 만들기

어제의 포스트에서는 개략적인 설명과 위치를 지정하는 소스에 대해 간단히 살펴봤는데요.
오늘은 원하는 위치에 적용하는 방법을 좀더 자세히 알아보겠습니다.

플로팅메뉴의 위치지정 소스

어제도 소개했었던 제 블로그에 적용된 플로팅메뉴의 태그소스입니다.
표시된 한줄이 메뉴의 위치를 지정하는 부분인데요.
세로위치, 가로위치 두가지 수치만 이용해서 메뉴의 위치를 지정할 수 있도록 아주 간략화했습니다.

메뉴의 형태를 고려한 위치지정

어제의 포스트([Tip]해상도와 상관없이 브라우저에 붙어있는 플로팅메뉴(내비게이션) 만들기)에서 보셨다시피 소개해드렸던 플로팅메뉴는 가로형이었습니다. 그러면 본문을 (되도록이면)가리지 않는 범위에서 최적의 위치는 어디일까요?

보시다시피 네가지 정도의 위치가 적당하다고 볼 수 있는데요.
1. 왼쪽 위, 2. 오른쪽 위, 3. 왼쪽 아래, 4. 오른쪽 아래

일반적인 위치지정에서는 top(위), bottom(아래), left(왼쪽), right(오른쪽)을 나타내며

퍼센트(%)를 이용한 방법으로 세로위치의 위쪽(top)을 기준으로 한다면

위의 그림과 같이 나타낼 수 있습니다.
top을 기준으로 100%라는 수치는 bottom 0%와 같은 뜻이 되기도 합니다.

역시 퍼센트를 이용하여 가로위치를 잡을 때 왼쪽(left)를 기준으로 하면

위와 같이 나타낼 수 있구요. 역시나 left를 기준으로 100%라는 수치는 right 0%와 같은 뜻이 됩니다.

하지만 여기서는 100%라는 수치를 쓰지 않고 각각의 위치에 맞게 bottom과 right로 사용합니다.
플로팅메뉴의 위치지정에서 위쪽, 혹은 왼쪽 기준으로 100%의 수치를 지정하면 아래와 오른쪽 끝에 위치하는 것이 아니라 무한정 스크롤이 되는 현상을 볼 수 있기 때문입니다.
이 부분에 대해서는 무한 스크롤을 막을 수 있는 방법이 있을 것도 같지만 제가 추구하는 방향은 simple이기 때문에...

그럼 어쩌라는건데?

그럼 이젠 위에서 보여드렸던 네곳의 위치를 직접 지정해보겠습니다.

1. top: 0%; left: 0%;
2. top: 0%; right: 0%;
3. bottom: 0%; left: 0%;
4. bottom: 0%; right: 0%;

조금 감이 잡히시나요?
만약 플로팅메뉴가 세로형이라고 해도 적절한 위치는 위와 크게 달라지지 않을 듯 하네요.

알기 쉽게 설명해야지!! 하면서 시작했는데 좀 정신없는 글이 되어버린 듯 합니다.
어제의 글과 이어서 보신다면 조금은 이해가 되지 않을까 싶은데요....
한동안 뜸했던 테이블에 대한 글도 슬슬 이어가볼까 합니다~!!