웹사이트를 만들기 위해서는 몇가지 지식을 필요로 합니다. 기본저긍로 html, css등의 코드에 대한 지식이 필요하며, 24시간 구동할 수 있는 서버를 관리하기 위한 백엔드에 관련된 지식도 필요로 합니다.
만약, 우선 순위를 따진다면 어떤 것이 먼저라는 이야기를 전하기는 어려울 수 있습니다. 필요한 경우, 적절하게 필요한 것을 활용하는 것이 중요하기 때문입니다. 다만, 개인적으로 웹사이트를 만드는 것에 접근하는 방법으로는 프론트엔드 분야인 HTML, CSS, JAVASCRIPT에 대한 지식을 우선으로 진행하는 것이 도움이 될 수 있을 것 같습니다.
페이지를 구성하는 요소는 다양하게 존재합니다. html의 경우 기본 골격이 되는 부분이 있습니다. <head>, <body>로 구분되며 우리가 보는 것이 바로 <body> 부분이라 할 수 있습니다.
<body> 태그로 이루어진 부분은 콘텐츠 영역이라 할 수 있습니다. 해당 영역에서는 사용자들에 어떤 내용을 전하는 것을 목표로 하게 됩니다. 과거에는 단순히 텍스트를 보여주는 형태를 이루고 있었다면 이제는 다양한 효과를 넣어 화려한 화면을 보여주게 됩니다.
시작은 단순한 텍스트의 문서 형태였다면 이제는 하나의 예술 작품이라 할 수 있을 정도인데요. 여러 효과가 영역별로 만들어진 모습을 볼 수 있습니다. 해당 영역들을 우리는 레이아웃이라 부르게 됩니다. 콘텐츠 영역과 사진 영역, 동영상 영역등으로 나뉘게 됩니다.
HTML 레이아웃에 대해 알아보는 방법.
웹 소스코드와 효과에 대한 정보는 인터넷을 통해 많이 공유되고 있습니다. 구글 검색을 통해 쉽게 찾을 수 있는 내용들이 있으며, 사이트 종류에 따라서는 학습이 가능하도록 잘 짜여진 문서들을 찾아볼 수 있습니다. 몇가지의 예시 사이트를 알아봅니다.
w3schools 홈페이지를 통해 html, css, javascript등의 정보를 찾아볼 수 있으며, 짜임새 있는 내용들을 따라하는 과정에서 충분히 학습에 도움이 될 수 있는 내용들을 확인할 수 있습니다. 본 게시글의 주제인 ‘레이아웃’을 검색하여 원하는 정보를 찾는데도 도움이 될 수 있습니다.
② 생활코딩
오픈튜토리얼의 생활코딩 사이트는 기본적인 내용들을 다루고 있습니다. 기본적인 인터넷의 원리에 대한 내용부터 시작할 수 있기 때문에 학습을 진행하는데 도움이 될 수 있습니다. 또한, 각 내용들을 카테고리별로 분류되어 있기 때문에 조각별로 학습하는데 도움이 될 수 있습니다.
developer.mozilla.org 사이트를 통해 html 학습을 시작할 수 있습니다. 기본적인 학습의 골격을 유지하며, 조금은 딱딱할 수 있는 문서이지만 유익한 내용들로 구성되어 있습니다.
HTML 레이아웃 잡는 방법 3가지
▶Table 요소를 이용한 레이아웃
우리가 흔히 볼 수 있는 표는 html에서 table이라는 태그로 이루어져 있습니다. 테이블을 이용한 대략적인 영역에 텍스트 혹은 사진, 동영상등의 콘텐츠를 넣을 수 있습니다. 또한, 테이블에 표시된 외곽선의 디자인을 수정하는 것으로 방문자에게 콘텐츠 영역을 구분하여 보여줄 수 있습니다.
▶ Semantic 요소 활용하기
<header>, <nav>, <main>, <artical>, <aside>, <figure>등의 태그를 이용하여 영역을 구분한 후, 콘텐츠를 게시하는 방법에 대한 내용입니다. html5부터는 이렇게 구조화된 문서에 대한 중요도가 높아지고 있습니다. 당연하지만 페이지 구조의 중요성에 대한 부분은 SEO와 관련성이 있다고 할 수 있습니다.
※ Semantic 요소 활용의 예시
<header><h2>Header 영역</h2></header>
<nav><h2>Nav 영역</h2></nav>
<section><p>Section 영역</p></section>
<footer><h2>Footer 영역</h2></footer>▶ ‘div’태그 id를 이용한 레이아웃 구분
기본적으로 콘텐츠 영역을 구분할 수 있는 태그로 div 태그를 사용하게 됩니다. 여기에 속성을 추가하여 원하는 레이아웃 형태를 만들 수 있는데요. css에 익숙하지 않은 경우라면 별도의 학습이 필요할 수 있습니다. css 레이아웃으로 대표될 수 있는 것이 바로 그리드 레이아웃이 있습니다. 그 밖에도 속성값을 설정하여 레이아웃을 구분하는 방법은 다양하게 있습니다.