HTML은 web에서 사용되는 마크업 언어로 사이트의 뼈대가 되는 부분입니다. 기본적인 골격을 만들기 위해 html 언어를 사용하게 됩니다. 여기서는 기본적인 영역을 구분하는 레이아웃에 대해서 알아보도록 합니다.
HTML 레이아웃(Layout) 도움이 되는 사이트 모음
다양한 학습법 중 실습이 중요한 분야들이 있습니다. Web도 그런 분야 중 하나라고 할 수 있습니다. 많은 시행착오를 거치면서 실력이 발전할 수 있죠. 중간에 막히는 부분을 시원하게 뚫어주고 개념을 잡아 줄 수 있는 사이트입니다.
① TCP SHCOOL(바로가기)
- 다양한 코딩에 관련된 개념을 정리하고 학습할 수 있는 사이트입니다. HTML도 체계적으로 다루고 있기 때문에 도움이 될 수 있습니다.
② MDN(바로가기)
- mozilla하면 떠오르는 것이 있겠죠. web의 html에 관련된 내용들을 자세하게 알아볼 수 있는 사이트입니다. 그 밖에도 CSS, javascript등 다양한 정보를 확인할 수 있습니다.
③ w3schools(바로가기)
- html, css, javascript, sql, python등 다양한 코딩 언어들에 대한 정보를 확인할 수 있습니다. 여기 내용만 숙지해도 충분히 좋은 결과물을 만들 수 있을 것 같네요.
④ 생활코딩(바로가기)
- 생활코딩은 유명한 사이트입니다. 많은 사람들이 web을 비롯한 인공지능 ai 기술까지의 기초를 다지는데 도움을 받는 사이트이기도 합니다. 또한, 코딩야학이라는 프로그램도 진행되고 있습니다. 참고하면 도움이 될 수 있겠죠.
HTML 레이아웃 이해하기
우리가 사용하게 되는 web은 그 영역이 나뉘어져 있습니다. 당연하겠죠. 텍스트 영역과 이미지 영역등으로 나눌 수 있습니다. 이보다 더 크게 영역을 구분하면 3가지로 나눌 수 있습니다. header / body / footer로 구분할 수 있습니다.
일반적으로 메뉴바가 존재하는 영역이 header입니다. 여기서는 사이트 로고, 사이트 이름등의 내용을 포함하게 됩니다. 다음 body영역이 있습니다. 여기에는 사이드바 / 콘텐츠 영역으로 구분할 수 있습니다. 마지막으로 footer영역이 있는데요. 사이트의 간략한 소개, 사이트맵, 관리자 내용등이 포함될 수 있습니다.
HTML5, semantic 요소
위에서 이용한 코드는 <div></div>태그를 이용한 레이아웃의 구분입니다. 반면, 레이아웃만을 위한 별도의 태그들이 있습니다. 이런 태그를 semantic 요소라고 하는데요. HTML5에서 사용됩니다.
각 영역의 태그들은 <head>, <nav>, <article>, <section>, <footer>등이 존재합니다.
| 의미 요소 | 설명 |
|---|---|
| <header> | HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함. |
| <nav> | HTML 문서의 탐색 링크를 정의함. |
| <section> | HTML 문서에서 섹션(section) 부분을 정의함. |
| <article> | HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함. |
| <aside> | HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함. |
| <footer> | HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함. |
