Layout History
1. 단순한 텍스트의 나열
최초의 웹사이트- 레이아웃 도구가 아예 없던 시절에는 텍스트의 정렬만 가능하였습니다.
2. 테이블로 레이아웃 구성
-
table표 데이터의 본 목적과는 다르게 배치를 위해 테이블을 사용하였습니다. -
여백을 투명한 gif로 만들어 넣던 시기.
-
의미, 접근성에 대한 개념이 전혀 없던 시기입니다.
- 1996년 Bob Dole 상원의원의 대통령 선거 캠페인 웹 사이트.
😮 아직도 테이블로 레이아웃 구성을 하는 곳이 있다???? 바로 뉴스레터입니다!
3. 프레임으로 레이아웃 구성
- 여러 HTML 페이지를
frame을 사용하여 한 페이지에 결합하여 레이아웃을 만들었습니다.
4. div div div div div ....
- Box Model, float, position 등을 이용하여 레이아웃을 만들었습니다.
- 여러 브라우저별 표준이 정의되지 않아 여러 기법이 난무했던 시기입니다. (익스플로러….)
5. 시맨틱 마크업, flex, grid
- 다양한 웹 기술의 발전, 검색엔진최적화, 접근성, 다양한 글로벌 웹사이트 제작, 반응형 등의 이유로 생겨난 레이아웃 기법입니다.
💡 시맨틱 마크업 꼭 써야 할까요?
- SEO(검색엔진 최적화)
- 장애가 있는 사용자에게 페이지를 탐색할 때 하나의 푯말 역할
- 태그의 가독성 및 유지보수 용이
익스플로러의 서비스 지원 종료 및 대부분 브라우저가 웹 표준을 따르고 있으므로, 시맨틱 마크업을 필수로 사용하는 것이 좋습니다. 하지만, 제공되는 서비스의 환경이 이전 구 브라우저 지원을 해야 하거나, 다른 프로그램 등과의 호환을 고려해야 한다면 시맨틱 마크업을 사용하지 않을 수도 있습니다!