1. 단순한 텍스트의 나열

최초의 웹사이트

레이아웃 도구가 아예 없던 시절에는 텍스트의 정렬만 가능하였습니다.

2. 테이블로 레이아웃 구성

<table> 태그를 표 데이터의 본 목적과는 다르게 배치를 위해 사용하였습니다. 여백을 투명한 gif로 만들어 넣던 시기이며, 의미나 접근성에 대한 개념이 전혀 없던 시기입니다.

1996년 Bob Dole 상원의원의 대통령 선거 캠페인 웹 사이트

아직도 테이블로 레이아웃 구성을 하는 곳이 있는데요,바로 뉴스레터입니다!

3. 프레임으로 레이아웃 구성

여러 HTML 페이지를 <frame>을 사용하여 한 페이지에 결합하여 레이아웃을 만들었습니다.

4. div로 레이아웃 구성

Box Model, float, position 등을 이용하여 레이아웃을 만들었습니다. 여러 브라우저별 표준이 정의되지 않아 여러 기법이 난무했던 시기입니다. (예: 익스플로러)

5. 시맨틱 마크업, Flex, Grid

다양한 웹 기술의 발전, 검색엔진 최적화, 접근성, 글로벌 웹사이트 제작, 반응형 등의 이유로 생겨난 현대적인 레이아웃 기법입니다.

💡 시맨틱 마크업 꼭 써야 할까요?

SEO(검색엔진 최적화)
장애가 있는 사용자에게 페이지를 탐색할 때 하나의 푯말 역할
태그의 가독성 및 유지보수 용이

익스플로러의 서비스 지원 종료 및 대부분 브라우저가 웹 표준을 따르고 있으므로, 시맨틱 마크업을 필수로 사용하는 것이 좋습니다. 하지만, 제공되는 서비스의 환경이 이전 구 브라우저 지원을 해야 하거나, 다른 프로그램 등과의 호환을 고려해야 한다면 시맨틱 마크업을 사용하지 않을 수도 있습니다!

HTML/CSS 에센셜

Layout History