기획하고 > 페이지 만들고(폴더) > 컨텐츠 만들기
- 아웃라인 잡기 (제목+내용. 이거 하나로 감싸주기!)
- 제목과 내용을 감싼 블록이 제대로 되었는지 확인
어떤 문서를 만들든 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
만들 수 있어야 합니다. 이해만 하는 건 아~~무 의미 없습니다. 결과물을 만들어야 합니다.
결과물을 위한!!! 이해. (이해를 위한 건 하~~등 쓸모 없다.)
8일. HTML(7) - 여러태그들, 선택자들(태그, 아이디, 클래스) (0) | 2021.03.02 |
---|---|
7일. HTML(6) - 테이블 만들어주는법, 1/5, 1-5 페이지 만들어주는법, inline vs block (0) | 2021.02.26 |
5일. HTML(4) - header, main, footer + aside // 고전적인 방법 (0) | 2021.02.24 |
4일. HTML(3) - 상대경로, 절대경로, 컨텐츠 블록 태그 5개(제목, 목록, 문장, 표, 입력폼) (0) | 2021.02.23 |
3일. HTML(2) - HTML이란, 폴더 정리법 (1) | 2021.02.22 |