상세 컨텐츠

본문 제목

6일. HTML(5) - section, article, aside, nav

수업 일지/HTML, CSS, Flex, Grid

by NayC 2021. 2. 25. 14:29

본문

728x90

기획하고 > 페이지 만들고(폴더) > 컨텐츠 만들기 

- 아웃라인 잡기 (제목+내용. 이거 하나로 감싸주기!) 

- 제목과 내용을 감싼 블록이 제대로 되었는지 확인 

 

어떤 문서를 만들든 header, main. footer는 필수

- id는 변수명과도 같아서, 만드는 사람 마음 (어떤 사람은 head, body, copyright라고 쓰기도 하고. 어떤 사람은 top, content, bottom이라고 쓰기도 하고. head, main, owner라고도 하고)

- 웹에서 '크롤링'이라는게 등장

  그런데 위에처럼 규칙이 정해져있지 않다보니까... 통일감이 없음 (크롤링 하려는데 난감난감;;)

  -> 통일감을 부여주기 위해 header, main, footer는 div로 id로 이름을 부여하지 않고 (그럼 제각각 쓰니까) 그냥 태그로서! 쓴다. 

- <div id="header">라고 썼던 걸 -> <header id="header">라고 바꿔주기 (main, footer도) 

     

*HTML5의 섹션 태그 

- 넘버링에 대한 스트레스

- 원래는 h1, h2, h3 다 구별해서 해야했는데... !

 

- 지역화가 가능해서 1번으로 다시 시작할 수 있다는 것

  section 태그를 활용해서 감싸기만 하면 된다는! (선생님도 이게 옳다고 바라보시는 듯)

- 책의 목차가 있다고 할 때, 계속 1로도 표현할 수 있는 것이니

  1. 한글은

     1. 자음인 ㄱ,ㄴ,ㄷ이 있고

         1. ㄱ으로 시작되는건 ... 

- 과거 방식으로 쓰든, 이거로 쓰든 통일해서 쓰는게 좋다~ 

왜 헤더를 넣어줬지? 싶었는데, 뉴렉처 아래 제목을 큼지막하게 두 개로 나누려고.
큼지막한 제목을 어떻게 넣었는지... 익숙해지기!!!

- 단톡방과 비교하기 ㅠㅠ -> Done

 

- aside 부분도 ㅠㅠㅠㅠ -> Done

 

- section : 컨텐츠를 가지고 있는 부분

  그런데 컨텐츠를 가지고 있지 않을 때도 있다. / 중요한 컨텐츠 아닐 때도 있고. 

  -> section을 세분화해서 의미 부여

- 링크만 가지고 있는거 <nav/> 

  본문과 거리가 있는거 <aside/> - 헤더, 메인, 푸터도 아닌 것

  본문 <article> - 본문의 '내용'(문장)이 나오는 걸 감쌀 때 

- 이도저도 아닌 건 <section> 쓰면 된다. 

- nav보다 더 큰 개념이 aside 

 

이거 단톡방에 주심. 이것도 실습해야해. -> Done

- 카톡방에 있는거 안 보고 쓸 수 있을때만큼!!! 


* 우리가 배운 태그들 "외우셔야 합니다" 

- 시멘트 태그 (의미 주는 태그) : header / footer / main 

- 섹션태그 (제목을 감싸는 태그)  : section / article / aside / nav 

- 모든 섹션은 section으로만 해도 된다? O

  article, aside, nav는 시멘틱한 (의미를 주는) 섹션 태그다. 

 

// 블록태그

- 다음은 인라인태그, 꾸미는거, 그리고 반응형

 

 

 

이해 위주 x

만들 수 있어야 합니다. 이해만 하는 건 아~~무 의미 없습니다. 결과물을 만들어야 합니다.

결과물을 위한!!! 이해. (이해를 위한 건 하~~등 쓸모 없다.)

 

728x90
반응형

관련글 더보기