HTML의 Section 분할

5353 단어 HTML미래 전자

개시하다


점 설치라는 프로그래밍 학습 사이트를 이용해 HTML을 배웠기 때문에 메모 대신 이 기사를 썼다.그래서 틀렸을지도 몰라요. 그래서 참고만 해주면 좋겠어요.더 자세히 알고 싶어요!이런 분들은 볼 수 있습니다여기..이번에는 HTML 부분을 설명한 뒤 알기 쉬운 예를 통해 HTML의'부분'을 이해할 수 있기를 바랍니다.

HTML 영역


우선 본론으로 들어가기 전에 HTML의 기본 구조를 먼저 보고 싶습니다.
HTML 파일을 만들 때 뼈 파일이 아래에 실렸다.
<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="utf8">
      <title>はじめてのHTML</title>
   </head>
   <body>
      <p>こんにちは!</p>
   </body> 
</html>
이것에 대한 상세한 내용저번 보도은 잘 모르시는 분들은 참고하시기 바랍니다.
이번에는 그중에 <바디>에 둘러싸인 부분에 대한 이야기입니다.
로 묶은 부분은 간단하게 말하면 홈페이지에 우리가 본 글을 실제로 기록한 곳이다.
그리고 홈페이지의 본문은 크게 다음과 같은 몇 가지 영역으로 나눌 수 있다.
(각 영역은 화살표 끝으로 표시)
  • header →

  • footer →

  • nav →
  • article →

  • aside →
  • section →

  • 그렇다면 상대방의 말만 들으면 알아듣지 못할 것 같아서 하나하나 상대방을 보러 가자는 뜻이죠.
    header
    그건 다른 사람이 말하지 않아도 알 수 있다고 생각하는 사람도 있을 거예요.가 홈 페이지의 상부 공간에 있는지 모르겠습니다. 어느 페이지가 열리든 일반적인 디스플레이 부분입니다.
    footer
    footer는 메인 페이지의 하부 공간에 반대로 위치하고 어느 페이지가 열리든 공통된 부분이다.어떤 것은 회사의 개요이고, 어떤 것은 저작권 정보이다.
    nav
    nav는'navigation'의 약칭이다.따라서 홈페이지 내 디렉터리와 메뉴 등이 나브 영역으로 쓰여 있죠.
    aside
    이것은 웹 페이지 내용과 직접적인 관계가 없고 부차적인 내용을 포함하는 영역이다.
    article
    내용이 단일하게 완결되었을 때article 영역이라고 할 수 있다.
    section
    위에서 열거한 영역으로는 설명할 수 없지만
    구역이 통일되었을 때 그 영역은 섹션 영역이라고 할 수 있다.
    어떤 제목의 한 조각을 붙이고 싶다고 할 수도 있다.
    지금까지 배워서 섹션 영역과 아티클 영역의 차이를 잘 모르겠어요... 뭔가 다르다고 생각하면 역시 이해하기 어려운 사람들이 많죠
    누군가가 이런 총결산을 →HTML5의 학습
    매우 진지하게 총결하였다.음.. 그래도 이해가 안 돼..
    이것은 틀림없이 경험을 쌓으면 알게 될 것이기 때문에 보류한다.(
    언제 알았으면 좋겠어요.

    분류의 예를 봅시다!


    더 구체적인 것을 보지 않으면 알 수 없을 것 같으니 마지막으로 실제 존재하는 사이트의 분류를 살펴보자.
    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <title>はじめてのHTML</title>
        <meta charset="utf8">
        <link rel="stylesheet" href="mystyles.css ">
      </head>
      <body>
          <header>
            <h1>おいしいごはん</h1>
            <nav>
                ―ホーム
                ―このサイトについて
                ―プロフィール
            <nav>
          </header>
    
          <section>
            <h1>今月の美味しいごはん</h1>
            <article>
              <h1>美味しいごはん#12</h1>
              <p>卵かけごはん美味しすぎる!</p>
            </article>
          </section>
    
          <aside>
           <h1>おすすめレシピ本</h1>
           ―BOOK 1
           ―BOOK 2
           ―BOOK 3
          </aside>
    
          <footer>
            このサイトは@taguchiによって運営されています。
          </footer>
      </body>
    
    
    </html>
    
    
    모호한 설명보다 이해하기 쉽잖아?
    설명은 건너뛰었지만

    사이에 낀 글은'제목'이라는 뜻이다.따라서 홈페이지에는 일반적인 본문보다 더욱 눈에 띈다.
    이번에는 출전하지 않았습니다. 다른 것은

    ,

    이 있습니다...등, 숫자가 클수록 제목의 크기도 작아진다.크기는 홈페이지를 만드는 사람들의 가치관에 따라 자유롭게 결정할 수 있다.

    끝맺다


    결론적으로 HTML에서는 자신이 쓰고 싶은 내용을 구조적으로 정리·정돈해야 하는 것 같다.쓰기 시작하면 많이 알겠지?
    그러니 초보자들 모두 파이팅!

    좋은 웹페이지 즐겨찾기