5일. HTML(4) - header, main, footer + aside // 고전적인 방법

* 지난 시간 복습

- 웹 퍼블리싱 = 웹 문서 만들기 (html, css)

- 문서 구성 요소 : 컨텐츠, 구조(html), 스타일(css)

- html의 역할은 구조를 만드는 것

  이 구조는 <tag>로 만들 수 있다. 

- 컨텐츠 블록 5가지 : 제목, 목록, 문장, 표, 입력폼 

- 컨텐츠들이 구분되어 블록화되면, 이 블록들에는 제목이 있어야 함

  제목달기 = 아웃라인 잡기

  제목 태그 <h1> ~ <h6> 

- html outliner를 이용해 제목을 확인

  <h1> : 문서 내에서 한 개만 존재 가능 (표지에 해당하는 큰 제목 개념) 

 

* 컨텐츠의 일반적인 영역 구성

- main 컨텐츠

- main 컨텐츠 외의 것들은 : 다른 곳으로 이동할 수 있도록 하는 거라고 한당 

footer는 저작권 정보를 가지고 있는 영역 (밑에 있다는 뜻이 아니라. 그래서 위로 올릴 수도 있는 것)

 나머지는 뭐가 되는거지? 

Others. 이것까지 크게 4개 영역이라고 생각하면 된다. 

header의 제목은 <h1>

- 이 안에서 전체 페이지가 아니라! header를 대표하는 제목이 있다면 <h2>  

main, footer 은 <h2>

aside 내에서 <h2>보다 더 작은게 있으면 <h3>

 

h3!

- header 부분의 제목은 <h1> 

  여기서는 저 맨 왼쪽의 New Lecture를 말하는거지.

  이건 header의 제목이 아니라! 여기 전체 홈페이지 내에서의 제목을 의미함

- 그래서 header '내에서의' 제목은 h2가 되는데, 저 파란 동그라미 친 부분이 여기 header 내에서의 제목은 아니지? 

  -> 그러니 우선 비워두고! <h3>이 된다. 

 

 

- 범용적으로 <div>로 감싸서 나눠준다. 

- div 는 id를 붙여서, 명시해줄 수 있다. 

- id 뒤에 붙인 이름은, 이 영역을 찾아갈 때 / 페이지 내에서 특정한 위치를 찾아갈 수 있게 해준다. 

  open server에서 .... 주소 url 뒤에 id 뒤의 이름을 검색하면(#header, #aside ...) 그것만 보여줌 (이거 결과 안뜸ㅠㅠ) 

 

 

- 우리가 어느 홈페이지에 들어가면 index 페이지부터 들어가게 된다 ex) 네이버 메인 페이지

  여기서 메인 영역은 어디인가?

-> (나도 검색창 아래 글들이 메인이라고 생각했는데... 땡!) 

    모든 사이트는 트리 모양으로 생겼다. 그럼 실제 컨텐츠를 가지고 있는 부분은 어디냐하면, main은 컨텐츠를 가지고 있는 블럭을 의미함. 

- 구글에서는 메인이 어디인가? 구글에서 java를 검색한 다음 페이지에서의 메인은? 

-> 상위 계층의 페이지에는 메인이 없다고 보는게 가장 편하다. (보통 메인은 가장 tree-가장 끝단에 위치한다.)

- 우리가 메인, 메인 하지만... 메인이 없는 페이지도 존재. 그런데 그때도 header, footer는 가지고 있다. (요지는 box를 잘 잡아주면 된다~는 것 같음) 

 

 

작년에 어떻게 쓰는지 모르고 마구잡이로 썼었구나... 이제 이해갔다 ㅠㅠㅠㅠ

- 하다보면 1) 넘버링이 헷갈리게 된다. 2) 컨텐츠와 제목이 한 몸인데, 지금 우리가 만든건 분리되어 있는 느낌.

  -> 컨텐츠를 만들 때 '아웃라인잡기'는 제목을 잡는거지만, 제목 + 컨텐츠 (알맹이)를 하나로 묶어두기 !!! 

      컨텐츠 만들기 > 컨텐츠 제목 달기 > <div>로 감싸서 다 아우르는 블럭 만들기. 만능이다 <div>는  

      지금 습관을 잡지 않으면 나중에 UI 난리가 난다. 

 

참고

 

// 위에는 고전적인 방법

 

요즘 새로운 방법이 생겼다. (제목 달기의 새로운 방법을 또 알아보잣!)

- 이건 내일!