민둥 개발자의 계발 블로그

[HTML#8] HTML5 레이아웃(Layout) 태그 본문

Study/HTML

[HTML#8] HTML5 레이아웃(Layout) 태그

민둥산의 민둥이 2022. 5. 23. 12:37

 안녕하세요, 민둥산의 민둥이입니다. 이제 거의 기본적인 HTML 태그는 거의 다 공부한 것 같네요. 사실 태그들은 굉장히 많고 각 태그의 속성들을 포함하면 훨씬 더 디테일 적으로 웹을 구성할 수 있겠지만 사람들마다 사용하는 선호하는 태그들이 다르고 만들고 싶은 웹문서의 구조가 다르기에 기초적으로만 알고 나머지는 개개인이 필요할 때마다 찾아서 쓰는 게 좋지 않을까 싶습니다.

 

 이제 다음부터는 HTML 포스팅은 없고 CSS 포스팅이 되겠네요^^ CSS 포스팅을 시작하기전에 문서 디자인에 유용한 Layout을 나누는 태그 마지막으로 설명하고 마치겠습니다. 참고로 오늘은 예제가 없습니다. 왜냐하면 Layout 태그들은 단순히 구간을 나누는 용도로 사용하기에 CSS 속성을 적용하기 편리한 것이지 그 자체만으로는 아무런 특징이 없기 때문입니다.

 

 일단, 레이아웃(Layout) 이란 웹 문서의 구조를 말합니다. 지금 보시는 제 블로그만 봐도 위의 상단에는 제목이 하단에는 광고와 댓글을 쓸 수 있는 칸이 따로 만들어져 있죠? 또한 왼쪽의 사이드바에서는 목록을 볼 수도 있고 각각의 영역마다 글자의 크기나 색상 등을 다르게 적용시킬 수 있습니다. 예전에는 이런 레이아웃을 나누는 태그를 <div> 태그로 전부 묶어주었다고 하는데요, 요즘은 편리상 각 영역별로 따로 태그가 만들어졌다네요. 보기 쉽게 표로 정리해보겠습니다.

 

태그이름 의미/ 영역의 위치
header  상단영역. 로고나 로그인, 주메뉴 등이 주로 위치
nav  메뉴영역
article  독립형, 완성형의 컨텐츠영역
section  주제 등으로 구별하는(나눠가는) 컨텐츠영역
aside  현재 페이지의 주된 주제와 무관한 컨텐츠영역
footer  하단영역

 

사용법은 간단해요. 묶어주고 싶은 텍스트를 태그로 감싸주면 됩니다. 

예시

<header>여긴는 제목을 쓸거야!</header>
<nav> 목록, html, css, javascript, database</nav>
<footer> 여기는 주로 회사 정보, 전화번호 길찾기 등이 들어가요^^</footer>

※주의! html의 정보를 담고 있는 <head> 태그와 <header>태그는 다른 태그입니다!

 

그럼 이제 HTML 기본은 거의 다 한 것 같네요. 나중에 다른 공부들이 끝나고(아마 최소한 5개월은 걸릴 거예요..) 심심할 때 더 다양한 태그들을 알아보고 더 알려드릴 수 있도록 생각해보겠습니다^^

반응형
저작자표시 (새창열림)

'Study > HTML' 카테고리의 다른 글

[HTML#7] 아이프레임 <iframe> 태그 !  (1) 2022.05.15
[HTML#6] 링크태그!  (3) 2022.05.13
HTML 연습! HTML 로그인 페이지 만들기 수정본!!  (0) 2022.04.25
HTML 연습! HTML 로그인 페이지 만들기!  (4) 2022.04.24
HTML 연습! 클론 코딩으로 지뢰찾기 화면 UI 만들기  (4) 2022.04.21
'Study/HTML' Related Articles more
Comments