혼자 정리를... 해보는... 레이아웃의 진화
처음 배울 때 머가 먼지 몰라서 무조건 fixed 갈겨보면서 페이지를 만들었던게 떠오른다 ㅋㅋㅋㅋㅋ 미친 페이지를 만들었었내 아주...
💡 Fixed (aka Static)
- 현재는 잘 사용하지 않는 레이아웃
- 가장 기본이 되기 때문에 다른 타입의 레이아웃과 어떻게 다른지 비교하기에 좋다 ㅋㅋㅋ
픽셀로 고정된 레이아웃 (a fixed width in pixels)
✔️ 웹사이트의 컨테이너가 움직이지 않도록 프로그래밍 되어있다
→ 'static'이라는 이름이 붙은 이유
✔️ 스크린 사이즈나 해상도와 관계없이 독립적으로 width를 유지한다
✔️ fixed-layout 웹사이트에서는 960px이 가장 널리 사용된다
🥲 이러한 레이아웃은 작은 화면으로 볼 때 흉측한 수평 스크롤이 나타나고 사용성이 떨어진다
🥲 인터페이스를 완벽하게 통제할 수 있다는 장점보다 단점이 크기 때문에 새로 만들어지는 웹사이트에서는 잘 사용되지 않는다!
💡 Fluid
픽셀이 아니라 백분율 단위(%)로 사이즈를 명시한 것 (specify size not in pixels, but in percentages)
➡️ 스크린 사이즈가 변화해도 요소들의 비율은 그대로
✔️ fixed 보다 유연한 배치 (하지만 '비교적' 낫다는 것이지 가장 좋은 선택지라고 할 수는 없음)
🥲 작은 화면에서는 열이 매우 좁아질 수 있다
🥲 큰 화면에서는 너무 비어있을 수 있다
🥲 고정된 크기를 유지해야 하는 이미지나 비디오를 넣을 때 생기는 문제점이 있다
💡 Adaptive
뷰어 화면 크기 기준으로 여러 버전의 레이아웃을 가진 것 (several versions of the layout)
✔️ 사용자에게 좀 더 최적화 된 환경
✔️ 속도가 빠르다
→ 요소의 크기와 위치를 조정하는 작업이 많지 않기 때문에 로드해야 하는 내용을 서버에서 정확히 전송
🥲 모든 레이아웃을 신경써서 만들어야 함... 시간과 노력이 많이 필요
💡 Responsive 💡
Fluid와 Adaptive의 장점을 합쳐놓은 것!
breakpoints➡️ 화면 크기를 범위로 나누는 기준이 몇 가지 존재- 인터페이스는 화면 크기에 따라서 레이아웃이 약간 다르다
- 화면 크기에 따라서 요소가 늘어나거나 축소된다
- 화면 크기에 따라 사용자 지정 환경을 제공
✔️ 오늘날 가장 많이 쓰임! 왜냐면 가장 많은 기대에 부응한다(expectation) → 모바일은 잘린다거나 하는 문제점... 근데 요즘에도 가~끔 모바일에선 확인 버튼이 안 보인다거나 하는일이 있는 것 같다 나는 그런 페이지를 만들지 않아야 할텐데...
✔️ 모바일, 데스크톱 가리지 않고 같은 경험(experience)를 얻을 수 있다
🥲 Adaptive보다 더 많은 설계와 테스트 작업이 필요하다
