우리가 보통 보는 페이지의 구조이다.

 

DBcut에서는 요새 트렌드를 잘 알 수 있다. 

 

현 시점을 기준으로는

DBcut사이트의 사이트 랭크

정형화된 페이지보다 이런식의 시각적이고 눈에 확들어오는 페이지들이 잘 나가는 것을 알 수 있다.

 

이러한 사이트들을 카피하기위해서는 그 구조들을 면밀히 관찰해야한다.

 

모양만 보고 구조화를 하게된다면 CSS에 속아 내용이 엉망이 된다.

 

내용을 잘 분석해서 구조화를 해야 한다.

 

오늘 배울 것은 바로 페이지의 구조화이다. 

구조화

HTML문서중에 제일 중요한 작업인 구조화는 HTML문서의 뼈대를 만드는 작업이다.

 

구조화에 쓰이는 태그

header: 제목이나 타이틀에 쓰이는 태그, nav를 포함시킬 수 있음, h1태그를 써야한다.

 

nav: 네비게이션 바에 쓰이는 태그, 사이트 내의 모든 페이지가 들어있어야한다.(보통 list태그들을 사용한다.)

 

main: 몸체가 되는 태그, 본문 태그이다. 보통 section을 감싸준다.

 

section: main안에서 쓰일 수 있고 header안으로는 쓰지 못함 하지만 section안에 header, article, footer의 구조를 만들 수 있다.

 

article: 독립적인 요소, section과 비슷하나 독립적이라는 차이가 있다. 예로는 블로그 포스트나 일반  댓글이 있다.

 

footer: 저작권이나 주소 전화번호 이메일 등을 나타내기위해 사용된다.(small태그와 address태그를 사용해준다.) 

 

aside: 광고, 빠른메뉴, 있어도 없어도 되는 태그이지만 있으면 좋다.(광고비 때문에 사실 제일 중요함)

 

종합해서 예시를 들어보자면 아래와 같다.

  <body>
 <!--머리부분-->
      <header>
        <h1>제목입니다.</h1>
      </header>
 <!--네비게이션부분 header로 넣을 수 있다.-->
      <nav>
        <h2>네비게이션 목록</h2>
        <ul>
          <li>목록1</li>
          <li>목록2</li>
          <li>목록3</li>
        </ul>
      </nav>
<!--몸통부분-->      
      <main>
      	<section>
        <h1>메인 몸통의 제목</h1>
        <section>
          <header>
            <h2>첫 번째 본문의 머리부분(제목)</h2>
            <p>첫 번째 본문의 대략적 설명</p>
          </header>
          <article>
            <h3>세부 내용의 제목</h3>
            <p>세부 내용의 설명</p>
          </article>
          <footer>
            <p>마무리 설명</p>
          </footer>
        </section>
        <section>
          <h2>두번째 본문</h2>
          <p>설명</p>
        </section>
        <section>
          <h2>세번째 본문</h2>
          <p>설명</p>
        </section>
        </section>
      </main>
<!--사이드부분-->
      <aside>
        <h2>광고/홍보, 퀵메뉴</h2>
        <p>광고,홍보등의 사이트와 무관한 내용이거나
          관련있더라도 없어도 무방한 내용</p>
      </aside>
<!--끝 부분-->
      <footer>
        <small>저작권 copyright &copy;</small>
      </footer>
  </body>

 

모든 태그들에는 heading태그로 묶어주는 제목이 필요하다.

 

왜냐하면 아웃라인을 잡을 때 기틀을 마련해야한다.

 

※main태그는 header의 하위태그가 아니기때문에 제목을 넣을 때 section을 한 번 입히고 heading태그(h1,h2...)로 제목을 넣어야한다.

 

아웃라인을 한눈에 검사할 수 있는 사이트는 https://gsnedders.html5.org/outliner/process.py이다.

 

위의 예시를 검사해보면 아래와 같은 구조가 나온다.

간과할 수 있는것이 구조화이지만 이렇게 구조화하는 것이 탄탄한 기반을 잡아주기 때문에 꼭 필요하다!!

 

 

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요) 

 

그럼~ 앙 제바

저작자표시 비영리 동일조건

'IT아카데미 > HTML' 카테고리의 다른 글

홈페이지 만들기 - HTML[5]  (0) 2020.05.01
홈페이지 만들기 - HTML[4]  (0) 2020.04.28
홈페이지 만들기 - HTML[3]  (0) 2020.04.28
홈페이지 만들기 - HTML[2]  (0) 2020.04.23
홈페이지 만들기 - HTML[1]  (0) 2020.04.22

+ Recent posts

티스토리툴바