Web
HTML

HTML의 기본 (2)

19 Aug 2021

My 21th Post

HTML의 기본 (2)

by Enterprise Kim.T.H

const html_semanticTag = (tag) => {
  console.log("Semantic 구조가 무엇이고 어떻게 구성되어 있는지 알아봅시다!");
};

1. HTML의 시맨틱 구조는 무엇이고, 어디에 쓰일까?

HTML에는 기본적인 레이아웃 구조들이 있습니다.

우리가 보는 모든 웹사이트들의 레이아웃은 모두 HTML로 이루어져 있다고 할 수 있습니다.

물론 React.js등의 JSX컴포넌트를 사용하기도 하지만 이 방법 또한 HTML의 확장형이라고 할 수 있습니다.

~~뭐래는 거야~~

React.js, JSX등의 모르는 부분은 . . . 후에 더 배우다 보면 자연스럽게 알게 될 것입니다.

다시 본론으로 돌아와서 HTML의 시맨틱 구조는 레이아웃 디자인을 보다 쉽고, 다른 사람이 봐도 쉽게 이해할 수 있도록

가독성을 높이기 위해서 사용합니다. 마치 회사에서 미리 약속된 회사의 일처리 과정을 통해서 새로 입사한 사원이라도

빠르게 일하는 방법을 배우고, 진행할 수 있도록 업무를 구조화 하는 것과 비슷하다고 할 수 있습니다.

2. 시맨틱 구조의 기본 구성

<!DOCTYPE html>
<html>
  <head></head>
  <title>여기는 제목</title>
  <body>
    <header>여기는 머리</header>
    <nav>여기는 Navigation 메뉴</nav>
    <aside>여기는 왼쪽 세부 메뉴</aside>
    <section>
      여기는 메인 내용이 나오는 곳
      <article>여기는 메인 내용이 바뀌는 곳</article>
    </section>
    <footer>여기는 발</footer>
  </body>
</html>

시맨틱 구조는 위와 같은 구성이 가장 기본적으로 사용됩니다.

저번시간에 보았던 <body>태그 안에 각 요소들이 작성되는 것을 볼 수 있습니다.

실제 화면에 표현 되는 내용의 대부분이(거의 100%) <body>태그안에 작성한다고 저번시간에 알아보았습니다.

먼저 <header>태그 ‘여기는 머리’부분을 알아보겠습니다.

우리가 흔히 보는 네이버에서 큰글씨로 ‘NAVER’라고 작성되어 있는 흔히 메인 홈페이지로 가는 글씨 부분입니다.

다음으로 <nav>부분은 네이버 메인 화면에서 지식in, 영화, 뉴스 등 검색창의 바로 밑에있는 세부 메뉴들 입니다.

여기서 nav는 navigation의 약자이며, navigation의 의미와 같이 페이지의 각 경로로가는 역할을 합니다.

다음으로 <aside>는 왼쪽이나 오른쪽에 세부 메뉴 또는 배너를 작성할 때 사용합니다.

네이버 카페에서 보면 왼쪽에 사용자 정보 및 게시판 정보등이 나오는 부분입니다.

중요한 <section>부분은 메인 내용이 표시되는 부분이라고 할 수 있고,

그 안에 작성되는 <article>은 메인 내용을 담고 있는 태그 입니다.

즉, section안에 작성되는 article를 통해서 메인 내용을 볼 수 있는 것입니다.

마지막으로 <footer>부분은 우리가 흔히 페이지의 맨 밑에서 볼 수 있는

이렇게 기본적인 시맨틱 태그의 사용에 대해서 알아보았습니다.

이제 여기서 부터는 조금씩 복잡해지기 시작하는데,

막상 실습을 해보면 아주 쉽다고 느낄 수 있을 것이니 너무 걱정마세요 !

~~뭔소리야 쉽다니~~

또한 시맨틱태그만으로 페이지의 레이아웃을 디자인 하는 것은 어렵기 때문에,

CSS를 추가로 작성하여 레이아웃과 배경, 박스 사이즈 등을 알맞게 꾸밀 수 있습니다.

현재 아주 쉽게, 빠르게, 간단하게 배웠던 내용들만 정확하게 숙지했다면,

HTML의 기본적인 내용을 안다고 할 수 있습니다.

다음시간에는 . . . 배우고 싶거나, 만들고 싶은 내용을 톡으로 알려주세요 !

~~배우고 싶은게 없는데 이런~~

그럼 안녕 !

ps. 예쁘고 읽기 편한 폰트추천 받습니다.

Good Bye ~