7일. HTML(6) - 테이블 만들어주는법, 1/5, 1-5 페이지 만들어주는법, inline vs block

1. html 내 컨텐츠는 5가지! (제목, 목록, 문장, 표, 입력폼)

  그런데 맨 초반에 작성해봐서 알지만, 이렇게만 구분해서 만들면 구분이 안가서 힘들기에 블록화를 한다. 

 

2. 문서의 필수 블록 - header, main, footer (컨텐츠 블록 감싸는 블록)

   블록들의 아웃라인 계층을 h1 ~ h6 잡는데 넘버링 불편하니 -> section 등장

 

3. section, articel, aside, nav 

   section 태그를 쓰면 -> 반드시 제목이 있어야 한다. 

 

 

 

이제 남은 부분을 만들어주는데, 표 부분 <table>

제목 달고 -> 제목 써줬으니 section도 달아줘야 하고.

 

 

 

Q. 이 부분은 어떻게 해줘야 할까! 

cf) 내가 한 거

 

"코드에 답은 없다."

- 욕먹지 않을 정도로 작성하면 된다. 

  ex) section에 <h1> 이름을 안적어준다거나. 

 

현직에 있는 개발자들 실력이 어느정도일 것 같나요? 

- 여러분 다음 달에도 취업 가능해요. 현직에 있다고 잘하는게 아닙니다.  

- 기업 강의할 때 기억을 떠올려보면 ... 놀랍습니다. 

- 취업할 때 '못하면 어떡하지' 이런 생각 가지지 마세요. 

  회사에서는 1) 잘 견딜 수 있을까 (인성) 2) 견뎌낼 정도의 인내심, 호감을 가지고 있는지가 중요하다. 

- 틀려도 돌아가면 됐지! 정도로 우선 편하게, 즐겁게. 

 

"답을 찾으려 하지 마세요. 돌아가게끔만"

 

 

---

아래 선생님이 하신 코드 有

 

 

 

*첫번째 그림

- 왜 1/2페이지를 section으로 감싸주면 안되는거지? '이도저도 아닌걸 div'로 감싸라는게 헷갈린다 @_@

<section> tag는 논리적으로 관계 있는 문서 혹은 요소를 분리할 때 사용한다. <div> 요소간 논리적 관계와는 상관없이 요소를 나눠야 할 필요가 있을 경우 사용한다. 출처 : developern.tistory.com/entry/how-to-article-section-div-tag

(질문하고 해결받음)

-> section으로 감싸준다고 쳐보자. 

    <section>

       <h1>작은 page<h1>

        1/2 page

    <section> 

-> Q. 1/2 page는 뭐로 감싸줬나요? 

        - 안감싸줬습니다. 

    Q. 안됩니다. 

-> 결국 이도저도 아닌 (알맞은 태그가 없는) 거는 <div>로 감싸주게 되면

   <section>

    <h1>현재 페이지 정보</h1>

      <div>

      1/2 page

      </div>

    </section> 

 

 

*두번째 그림

- 우선 ul>li*5 만들어주고

- 이전, 다음은 이도 저도 아니니 <div>로 감싸주고

- 각각 제목을 달아줄까 하다가... 다 연관은 있는 것 같아서 <h1> 제목 하나로 해주고 - <section> 으로 감싸주기

---

선생님이 하신거

 

KTH님이 하신거

---

main 있느냐 / header, footer 까지 나누고 / aside (이건 여러 번 사용 가능)

 

section vs aside 

              여러 개를 aside를 표현하면 ... 알맞지 않다. 

 

header 안에는 컨텐츠 블럭이 많이 존재. 

- 이 안에거를 aside로 다 감싸면 aside가 될 수도

 

제일 말단 : 컨텐츠 블록 (제목, 목록...) 

< 각각 제목 달릴테고, section으로 감쌀 것

 

aside 는 section보다는 한 단계라도 더 큰걸 묶는다고 생각

 

현재 문서의 main과 부합되지 않는 영역 = aside

홈페이지 내에서 만약 구글 광고가 떠다니면, main과 연관이 없으니 그 광고를 감싸는 컨텐츠는 aside

 

만약 article이 있는데, 옆에 저작자 정보를 띄우면 '별첨'같은 느낌 

- 얘도 aside가 맞다. 

 

나는 위에 공지사항도 'aside'라고 봤는데, 저것도 컨텐츠와 관련된 내용이지~ 크게 보면!

 

 

 

• f12 : 개발자도구 (우클릭해서 '검사' 하면 element에 저절로 표시됨)
• ctrl + k + f : 들여쓰기 자동정렬 됨 (그런데 원치 않는 모양으로 될 수도 있으니 최소 사용하는게 좋다는것 같음)  

 

 

블럭은 -> 너비와 높이를 가진다.

영역을 갖지 않는 태그 (just 컨텐츠 꾸미고 설명) - '인라인태그'

 

mdn 검색

developer.mozilla.org/ko/

MDN Web Docs

"언어는 처음 배우는 것만 어렵지.

 자바 배우면 자바스크립트는 오전 수업으로만 3일만에 끝납니다.

 플랫폼 내에서의 '어휘' 부분이 문제일뿐. mdn은 어휘 사전"

- 구글에서 ex) html inline mdn 치는게 빠르다. 

 

firefox 설치

---

inline -> 정말 컨텐츠를 설명하는 것에 포커스!

- block 태그는 너비를 다 차지하고, 내려쓰기가 된다. 

- inline은 그냥 가로로 쭉 써짐

블록 태그

자기 크기가 아니라 컨텐츠 크기

- 그래서 <a>에 css 너비를 아무리 넣어도 안 먹는다. (인라인태그에는 css 적용이 x) 

인라인 태그