html을 이용해 웹사이트를 구성하기 위해서는 <head></head>와 <body></body>의 개념이 필요합니다. 다음으로 <body></body>의 layout 구성을 생각해야 합니다.
👉 <head></head>와 <body></body>에 대한 이해.
만약, 당신이 집을 구매하거나 건물을 짓는다면 무엇을 생각할까요. 가장 먼저 예산을 생각할 것입니다. 너무나 현실적이기에 당연합니다.
다음으로 필요한 것은 집의 구조 입니다. 혼자 사는 사람이 많은 방이 있는 큰집은 사실상 필요 없을 수 있습니다. 반면, 많은 사람들이 같이 산다면 많은 방이 필요 합니다.
방의 개수가 정해지면, 다음으로 어떤 것을 생각할까요. 다음으로 중요한 것은 생활 공간에서 발생될 수 있는 생활동선입니다.
너무 어지럽지 않게, 짧고 간단하게 움직일 수 있는 생활 동선은 중요한 문제 입니다. 이런 생활 동선에 대해 판단할 수 있는 것이 집의 구조이자, 위치입니다.
적절하게 배치되고 구분되어 있는 공간들은 사용자들에게 편리함을 안겨줄 수 있습니다. 웹페이지도 이와 같다고 할 수 있습니다.
웹페이지의 경우는 사용자에게 보여지는 콘텐츠의 위치와 구성이 중요합니다. 또한, 클릭할 요소가 적절하게 배치되어 있어야 합니다.
사용자들의 행동과 반응을 유도할 수 있어야 비즈니스에서 좋은 성과를 거둘 수 있음은 당연한 이야기 입니다.
여기서 사용자의 반응과 행동을 유도할 수 있는 배치를 웹사이트 페이지의 layout이라 할 수 있습니다.
✔ 웹사이트 페이지 구성, 초보가 추천하는 layout 잡는 방법.
우리는 무수히 많은 웹사이트를 보게 됩니다. 가장 직관적으로 반응할 수 있는 것이 웹사이트를 구성하고 있는 디자인 요소라고 할 수 있습니다.
얼마나 이쁜지에 반응하는 사람들도 있습니다. 반대로, 너무 화려하기 보다는 단순하지만 정갈하고 깔끔한 모습에 반응하는 사람들도 있습니다.
또한, 적절한 폰트의 크기 색에 긍정적인 반응을 보이는 사람도 있습니다. 사람들은 저마다의 개성이 뚜렷하게 존재하기 때문에 반응하는 요소도 무수히 많은 차이를 가질 수 있습니다.
이런 세부적인 구성요소만큼 중요한 것이 layout, 다시 말해 공간의 구분이라 할 수 있습니다. 대표적인 예로 블로그 혹은 웹사이트의 사이드바(sidebar)가 있습니다.
이를 잘 이용한 것이 비즈니스에 활용하는 광고의 배치이며, 배너(banner)의 위치라고 할 수 있습니다. 대표적으로 포털사이트의 메인 페이지의 영역에 따른 가격의 차이가 예시라고 할 수 있습니다.
가장 좋은 자리는 당연히 비싸고, 가장 나쁜 자리는 비교적 저렴하게 책정될 수 있습니다. 여기서 좋은 자리와 나쁜 자리의 구분은 사용자가 반응하는 정도의 차이로 이야기할 수 있습니다.
✔ 웹사이트 영역 구분, layout을 구상하다.
웹사이트를 제작하기로 마음을 먹었다면 다양한 상상을 하게 됩니다. 어떤 내용을 담을지, 어떻게 담을지, 어떤 모습으로 보여줄지 등의 다양한 구상을 합니다.
이렇게 구상된 내용을 자신의 목적성에 맞게 잘 배치하게 되며, 이렇게 배치가 끝난 후, 디자인 요소들을 하나씩 적용하면 원하는 웹사이트가 완성되게 됩니다.
다시 말해, 우리는 <body></body>태그의 광활한 영역에 적절한 구분을 지어주게 됩니다.
✔ layout 기본 태그로 구성하기.
페이지의 특성에 따라 다양한 layout구성 방법이 존재합니다. 우리는 글을 작성할 때도 서론, 본론, 결론의 영역을 구분하게 됩니다.
해당되는 영역에 잘 어울리는 내용과 소제목을 활용한다면 좋은 글쓰기의 표본이라 할 수 있습니다.
여기에 추가로 특정 자료를 보여주게 되면, 또 하나의 영역을 구성합니다. 표, 그림, 동영상등의 영역이 추가되게 됩니다.
특히 표(table)의 경우에는 기본적으로 영역을 구분하고 있습니다. 그 속을 들여다 보면 이렇습니다.
캡션 부분에 표의 제목이 있으며, 헤더에 열의 제목이 있습니다. 행에도 각 행이 의미하는 제목이 존재합니다. 이렇게 그룹으로 지어준 만큼 각 칸에는 적당한 데이터 값이 들어가게 됩니다.
이를 잘 이용하면 하나의 페이지에서 반듯한 레이아웃을 형성할 수 있습니다. 아주 기본적인 <table>태그지만 사용하는 방법에 따라서는 화려하게 변신할 수 있습니다.
이런 변신을 위해서는 css 요소를 추가하시면 가능합니다. 동적인 변화는 javascript를 이용하면 원하는 기능을 구현할 수 있습니다.
✔ 더 넓은 영역, <body>전체에서 활용되는 layout 잡는 요소.
사실, 앞에서 언급한 <table>태그는 단순 실습, 간략한 페이지 혹은 특정 상황에서 활용할 수 있는 방법입니다. 또한, 잘 사용하는 방법은 아닙니다.
주로 html에서 layout을 구분하는 방법으로 <div>태그를 이용하게 됩니다. <div>태그는 행을 기준으로 한 영역 자체를 감싸는 역할을 하게 됩니다.
그 안에 다양한 요소를 넣어 페이지의 영역을 구분할 수 있습니다. html에는 기본적으로 영역이 구분되어 있지 않기 때문에 틀을 만들어 주는 것이 중요합니다.
그 밖에도 다양한 방법이 활용될 수 있습니다. <li>, 리스트 태그를 이용해 줄을 맞춰 자료를 정렬할 수도 있습니다. css를 이용해 레이아웃을 정렬할 수도 있습니다.
아무것도 정해져 있지 않다는 것은 그만큼 자유롭게 자신의 개성을 표현할 수 있다는 장점이 존재합니다. 다만, 초반에 너무 많은 것을 알고자 한다면 혼란이 가중될 수 있습니다.
개인적으로 이제 막 시작하는 초보의 입장이라면 <table>태그 요소와 <div>태그 요소를 적절히 활용하여 하나의 페이지를 완성해 볼 것을 추천합니다.
아주 작지만 결과는 상당히 큰 매력으로 다가올 수 있습니다. 간단하지만 매력적인 결과물은 앞으로의 학습에 원동력이 되어 줄 수 있을 것입니다.