HTML

20. 문서의 아웃라인 잡기

과거에는 html로 블럭을 만들고 어떻게 보면 예쁘게 보일가 고민을했다.
2000년 초반을 넘기며 아웃라인을 잡아달라고 했다. 제목을 잡아달라는 것임.
목차를 잡아달라. 문서라는 것이 인간을 벗어나려하니 문제가 생기는 것임.
설명을 붙여달라고 한다.
메인메뉴, 과정검색 폼, 회원메뉴, 자용하는 메뉴 등

시각적으로 나오면 안된다면 스타일을 줄때 안보이게 하면된다.
에이전트가 뭔지 봣을때 어떤것인지 알게 만들어주자.
사람만을 위한 문서아아닌 에이전트가 보는 문서를 만드는게 좋다.

제목만 한눈에 보고싶다? 그런 도구가 잇다.
아웃라인을 잡아주는 프로그램 도구가 잇다.
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo/related?hl=ko
HTML5 Outliner 크롬의 확장 도구임. 계층구조가 된 제목들이 보인다.

21. 아웃라인 영역 구분하기

묶을 수잇다. 문서에서 가장 중요한 부분은 main이다. 모든 문서가 가지고 있는 것은 전체사이트 이름 페이지 이동 중심점 header이다.
저작권자 소유권자 알려주는 곳 footer 옆메뉴들 애매해서 곁다리 aside
권고안이 있는 것은 아니고 하다보니 이렇게 관습이 되어간다.

그러면 이제 구성에 맞는 설명이 아웃라인으로 포함되야하지 않을까? 하는 것임.
제목으로 묶기에는 어디서 어디까지가 header이고 그런지 알수가없다. 그래서 영역을 표시하는 마크업이 필요하다.
이도저도 아닌 것들은 div태그 이고 header태그 등을 넣을 수잇다.

div를 붙이고 들여쓰기를 함으로써 구분을 해주자. 귀찮더라도 가독성을 위해 해주는게 좋다.

  <div>
      <h2>header</h2>

      <div>
          <h3>메인메뉴</h3>
          <ul>
              <li>학습가이드</li>
              <li>강좌선택</li>
              <li>AnswerIs</li>
          </ul>
      </div>

      <div>
          <h3>강좌검색폼</h3>
          <form>
              <fieldset>
                  <legend>검색입력필드</legend>
                  <label>과정검색</label>
                  <input type="text">
                  <input type="submit" value="검색">
              </fieldset>
          </form>
      </div>

      <div>
          <h3>회원메뉴</h3>
          <ul>
              <li>HOME</li>
              <li>로그인</li>
              <li>회원가입</li>
          </ul>
      </div>

      <div>
          <h3>자주사용하는메뉴</h3>
          <ul>
              <li>마이페이지</li>
              <li>고객센터</li>
          </ul>
      </div>   
  </div>

이런식으로 하자.
다 묶어주면 이전보다 훨씬더 정리가 된 느낌이다. footer = 저작권자 정보 중요내용 main 반복되는내용 header로 변경해줫다.

22. 영역을 위한 시멘틱 태그

영역을 비효율적인 부분을 해결하기 위해 시맨틱 태그가 등장햇다.
HTML4까지는 필수구조를 설명하는 태그가 없었다. 단순하게 컨텐트 블럭밖에없엇다.
div id = "header"이런식으로 했다. 그런데 이런것조차 애매하다.
문서라는 컨텐츠에서 main같은 것을 이름을 주지 못하는 게 말이안된다. 제목은 제목으로서 구분을 가져야한다.
원래 이름을 돌려주자. 그래서 이름을 부여했는데 사람마다 다 다르게 사용하는 문제가 발생했다.
가장 많이 사용하는 것들이 표준화가 되었다. 이것을 태그로 만들었다.

과거에는 div로만들었을 때 이름을 각각 붙였다면 의미를 제공하게 되었다. 전세계사람들이 동일한 것을 사용하게 된 것이다.

<header>
    <h2>서두</h2>

    <div>
        <h3>메인메뉴</h3>
        <ul>
            <li>학습가이드</li>
            <li>강좌선택</li>
            <li>AnswerIs</li>
        </ul>
    </div>
</header>

div와 역할은 같지만 의미가 살아있는 것이라고 이해하면 된다.

23. HTML5의 섹션 태그

타이틀 아웃라인 잡는 법을 배웠고 시맨틱 태그를 사용했다.
아웃라인의 계층화를 했다. 계층에 따라 제목이 작아져야한다. 페이지가 커지면 div중첩이 많아지고 몇번째 중첩인지 몇번째 번호인지 알아야한다.
그런데 중첩하는 순간 그 자체가 순서가 되는게 어떤가?라는 고민이 나오게 되었다.
그래서 등장한게 섹션태그이다. 각각 자원블럭들을 div로 담았다. 제목을 알고있다면 블럭자체를 나눌수 있는게 아닐까?
<section>태그를 하면 다시 넘버링을 하겠다는 말이다.

header영역은 왜 section으로 안하나? 시맨틱태그로 어떤 부분인지 알려주는 것으로 없어지면 의미가 사라지는 것임.
그냥 넘버링을 낮추거나 section을 안쪽에 넣으면된다.

<header>
    <section>
        <h1>서두</h1>

        <section>
            <h1>메인메뉴</h1>
            <ul>
                <li>학습가이드</li>
                <li>강좌선택</li>
                <li>AnswerIs</li>
            </ul>
        </section>
    </section>    
</header>

section 아웃라인에 영역을 주는 것으로 단순히 제목 라벨링만 다시 처음부터 한다는 것일뿐 내용이 달라지는 것이 아니다.

24. 시멘틱 섹션 태그

제목 큰제목 작은제목 등을 섹션으로 나눠서 블럭자체가 제목시작으로 하기로했다.
섹션태그는 의미가 살아있는 섹션태그가 있다. 그 문서의 구조를 좀 더 잘 알 수 있게 된다.
인간이 보는 것을 넘어서서 에이전트가 본다라고 생각하면 소프트웨어 적으로 분석하면 의미가 살아있게 하면 좀 더 다양한 기능을 넣을 수 있다.
링크만 있는것은 nav 아티클이 담겨지면 article 그 외의것은 aside섹션으로 나눈다.

<nav>
    <h1>메인메뉴</h1>
    <ul>
        <li>학습가이드</li>
        <li>강좌선택</li>
        <li>AnswerIs</li>
    </ul>
</nav>

목록중에서 하이퍼링크로만 이루어진 것은 nav로 바꿔준다.
섹션태그는 제목을 나누는 태그이고 의미를 부여하는 시맨틱 태그를 배운 것이다.

25. 블록 태그와 인라인 태그

지금까지 설명한 태그들은 모두 콘텐츠의 영역(블록)을 위한 태그들이다.
body / div / h 등등 이 모든 것들은 블록이다. 인라인태그와의 차이점이 뭔지 알아보자.

25.1 블록태그의 기본스타일의 이해

index.html을 만들어서 내려쓰기로 그냥 text3개를 넣엇을때
을 해야 줄바꿈이 된다.
div에 넣는다면 영역을 가지고 그냥 수직으로 보인다. 너비는 브라우저 너비를 꽉채우는 형식으로 간다.
한층을 다쓰게 된다. 모든 블록태그들은 건물 한층을 쓴다.
제목은 위아래 마진을 가짐. 목록은 위아래 좌측에 마진을 가짐.
기본적으로는 한층을 꽉채운다.
너비를 줄엿다고해도 밑에있는애가 위로 가지 않는다.

25.2 인라인태그의 기본적이해

한칸에서 줄을 서서 칸을 먹고 생성된다.
인라인 태그의 크기는 자신이 감싸는 콘텐트와 밀접하며 콘텐트의 크기가 자신의 크기가 된다.
span, a, b, u, font, strong등이 있다.

26. 인라인 태그의 종류

인라인 태그는 어떤 역할을 하나?
1.문서내에서 그 자체로 컨텐트 역할을 하거나 2.컨텐트를 감싸서 그 컨텐트가 어떤 의미를 가지고 있는지를 설명한다.

현재는 font등 디자인은 거의 사라지고 의미를 가진 태그들만 남아있다.
감싸는 태그들도 있다. del(삭제될내용) dfn(정의) ins(추가될내용)
이런것들을 하나씩 다루는 것은 말이 안된다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
inline tag같이 검색을 해서 보자. 왠만하면 영문으로 보자.
안써도 되지만 쓰면 내용을 더 잘 살릴 수 있는 것들도 있다. 원하는 내용들만 가져다 사용하면 된다.

<nav>
    <h1>메인메뉴</h1>
    <ul>
        <li><a href="">학습가이드</a></li>
        <li><a href="">강좌선택</a></li>
        <li><a href="">AnswerIs</a></li>
    </ul>
</nav>

방향 1.다른 html페이지 만들기 2.css꾸며보고 가기
수업에서는 2번 방향으로 간다.