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