2019.06.16 모바일에 최적화 및 반응형에 최적화하기

CSS에 관한 내용

• 반응형에 최적화되도록 한다.
• 모바일상에서 보았을 때도 어느정도 크기를 유지하도록 한다.

width, max-width, min-width 설정하기

• 반응형웹 및 모바일에 최적화시키기 위해서는 width, max-width, min-width에 대해서 알고 있어야 한다. 처음 이것을 접했을 때는 max-width는 최대치를 이야기하고 min-width는 최소 넓이를 이야기하는 것으로 생각했다. 물론 반은 맞고 반은 틀린 말이다. 그럼 지금부터 하나씩 설명해보려고 한다.

width

• 반응형에서 width는 px로 설정하는 것보다는 %로 설정하는 것이 중요하다. 즉 width : 100%라고 하는 것은 div로 설정된 범위 내에서 가능한 최대한 넓이로 하겠다는 것이다. %로 설정하는 것이 중요한 것은 바로 화면의 크기가 변했을 때도 지속적으로 각 화면에서 그 넓이를 유지하기 위함이다. 따라서 width 를 %로 나타내주는 것이 반응형 웹에서의 기본이다.

max-width, min-width

• width : 100% 로 설정한 뒤에 max-width : 600px;로 적용해주면 지속적으로 늘어나되 600px 이후부터는 더 이상 늘어나지 않게 된다. 즉 화면이 지속적으로 커진다고 하여서 더 이상 늘어나지는 않는 것이다. 보통 모니터의 크기 및 창의 기본 크기에 따라 화면의 전체 넓이가 차이가 많이 나게 되는데 그 부분에 대해서 미리 방지할 수 있게 된다.

• 반대로 min-width는 최소한 유지해야되는 크기를 말한다. 따라서 화면이 지속적으로 줄어들게 되더라도 해당 크기 밑으로는 줄어들지 않도록 하는 것이다. 보통 네이버 화면 같은 경우 지속적으로 줄어들지 않고 특정 크기 밑에서는 더 이상 줄어들지 않게 하여, 화면이 깨지는 것을 방지한다.

추가사항

• form의 크기는 조절할 수 없다. 따라서 form을 둘러싸고 있는 div를 조정해주어서 form의 크기를 제한해 주어야 한다.
• 그리고 width : 100%를 주면 정렬하는데 어려움을 겪을 수도 있다. 왜냐하면 가능한 범위의 100%를 모두 쓰고 있어서 정렬이 불가능하게 되는 것이다. 이런 경우 항상 화면을 보면서 내가 현재 제공되는 넓이와 차지하고 있는 넓이들을 게속 보는 습관을 가져야 한다. margin을 중간으로 위치시키려면 자기가 그만큼 넓어지거나 움직일 수 있는 공간이 필요하다.
• margin-left:auto, margin-right:auto 를 주어서 중앙정렬을 시킬 수 있다.
• text-align : center를 통해 text를 중간으로 위치시킬 수 있다.