웹사이트에서 레이아웃(layout)이란 단순하게 화면 구성(구조)을 뜻합니다.
어떤 웹사이트는 매우 현란하고 멋있게 구성이 되어 있으며 어떤 웹사이트는 아주 단순하게 구성되어 있어보이지만 사실 대부분의 웹사이트는 구조만 놓고 보자면 전혀 다양하지 않습니다. 대부분은 비슷한 구조로 되었있죠
집을 지을때를 생각 보겠습니다. 먼저 어디를 방으로 할지 어디를 화장실로 할지 어디를 창으로 할지 등 구조를 결정한뒤 뼈대를 만들고 내부를 만들고 그뒤에 최종적으로 도배와 장판을 진행합니다.
웹사이트도 이것과 비슷해서 먼저 구조를 결정하고 만든후 상세 디자인 작업을 진행하게 됩니다.
흔히 볼수 있는 웹사이트 레이아웃은 이러한 구조 입니다. 상단에 웹사이트명이 있으며 그아래로 컨텐츠를 연결할 메뉴들이 구성 되고 좌측 영역에 하부 메뉴로 연결될 링크 모음 영역으로, 그 우측 가장 큰 영역에 본문 내용을 채워 넣습니다.
마지막으로 주소와 연락처 등이 표시되고 카피라이트를 표시하는 형태입니다.
시멘틱(Semantic)은 '의미의', '의미론적인' 이라는 의미를 가지고 있습니다. 즉 레이아웃 시멘틱 태그란 위와 같은 구조를 의미있는 형태의 구조로 배치 한다는 것입니다.
시멘틱 태그 사용 전에는 위의 모든 요소들은 영역을 구분하는 역할을 함으로 div 태그로 구분하였고 의미를 담기 위해 각 div 요소들 마다 마크업해서 다음과 같이 사용하였습니다.
사실 현재도 위와 같이 구분하는 웹사이트들은 많이 있습니다. 마크업으로 의미 부여하고 디자인하는 것도 무리가 없기 때문입니다. 그러면
로고/웹사이트는 header 영역 = 머리말 영역
메뉴들은 nav 역역 = navigation 영역(각 컨텐츠를 연결하는 역할을 하는 영역)
좌측 서브메뉴는 leftside 영역 = 서브메뉴 링크 영역
하단 주소/연락처/이메일, copyright 는 footer 영역 = 꼬리말 영역
의 구조를 갖는 웹문서 레이아웃이 됩니다.
자 그럼 의미를 부여한 시멘틱 태그로 바꾸면
위와 같은 구조로 바꿀수 있습니다. div태그를 많이 사용하는것 보다 오히려 단순화 되면서 그 의미가 명확히 부여되게 된는 것이죠. 그리고 컨텐츠 영역인 section은 div 방식처럼 마크업처럼 하는 편이 좋습니다. header, nav, aside, footer의 경우는 페이지가 이동되더라도 영역이 변하지는 않을 테지만 section 영역은 그 내용이 페이지 마다 변할테니까요.
<body>
<header>로고/웹사이트명</header>
<nav>
<a href="./hello.html">메뉴1</a>
<a href="./h1h6.html">메뉴2</a>
<a href="./p.html">메뉴3</a>
</nav>
<aside>
<a href="./iframe.html">서브 메뉴1</a>
<a href="./list.html">서브 메뉴2</a>
<a href="./table.html">서브 메뉴3</a>
</aside>
<section id="conts">
contents
</section>
<footer>
주소 / 연락처 / 이메일
<div>copyright</div>
</footer>
</body>위의 section 요소는 id="conts"라고 마크업 했습니다.
그리고 웹페이지를 확인하면
위 그림처럼 확인 하실 수 있습니다.
css로 각각의 요소에 사이즈를 정하지 않은 상태이기 때문에 주르륵 각 요소가 나오게 됩니다.
이렇게 의미부여한 요소를 구조적으로 정리한 것 까지가 html의 역할이고 나머지는 css가 담당하게 됩니다.
레이아웃은 div방식으로 구분 가능했으니 위 태그들은 모두 div태그 처럼 기본사이즈가 블록속성입니다. 의미만 가지고 있고 형태는 div와 같다라고 생각하시면 되겠습니다.
'강좌 및 설정 > HTML 기본강좌' 카테고리의 다른 글
| 시멘틱 태그 article과 section (0) | 2022.11.29 |
|---|---|
| 분할 태그 div (0) | 2022.11.28 |
| HTML Entities (1) | 2022.11.24 |
| 문자 태그(strong, em, ins, del, blockquote, small, sub, sup, mark)와 span 태그 (0) | 2022.11.24 |
| 표 태그 table 세번째 (scope 속성) (0) | 2022.11.24 |