프론트 003

HTML의 핵심

• 태그의 특징 - Inline / Block
• 종속 태그
• HTML 문서 구조

웹 페이지는 HTML ,CSS, JavaScript로 이루어져 있고
HTML은 태그로 이루어져있음
태그는 약속된 명령어 - 고유한 기능을 가지고있고, 속성과 값으로 부가적인 기능을 부여할 수 있다.

---

태그의 특징

태그는 사이즈에 있어서 크게 두가지로 나눌 수 있음.

가로를 전부 차지하는 태그를 block 요소
자기 너비 만큼만 차지하는 태그를 inline 요소 라고함

가끔 옆으로 붙도록 만들고 싶은데 계속해서 새로운 줄로 만들어진다는것은 block 태그를 사용해서 그런것.

---

종속 태그

혼자서는 아무것도 못하고 서로가 있어야 작동하는 태그.

선택박스, 목록, 표 태그등..

선택 박스

<select>
  <optgroup label = "첫번째 옵션 그룹">
    <option>1-1번</option>
    <option>1-2번</option>
    <option>1-3번</option>
    <option>1-4번</option>
    <option>1-5번</option>
  </optgroup>
  <optgroup label = "두번째 옵션 그룹">
    <option>2-1번</option>
    <option>2-2번</option>
    <option>2-3번</option>
    <option>2-4번</option>
    <option>2-5번</option>
  </optgroup>
</select>

1-1번 1-2번 1-3번 1-4번 1-5번 2-1번 2-2번 2-3번 2-4번 2-5번

select 태그만 사용하거나 option 태그만 사용하거나
단독으로 사용하면 제대로 동작하지 않음.

목록 태그

<ol>
  <li>li태그를 ol태그로 감싸면</li>
  <li>번호가 생김</li>
  <li>따로 넘버링을 안해도</li>
  <li>자동으로 번호가 붙음</li>
</ol>

1. li태그를 ol태그로 감싸면
2. 번호가 생김
3. 따로 넘버링을 안해도
4. 자동으로 번호가 붙음

<ul>
  <li>li태그를 ul 태그로 감싸면</li>
  <li>번호가 아닌 기호가 생김</li>
  <li>목록 태그에는
    <ul>
      <li>ol</li>		
      <li>ul</li>
      <li>dl</li>
    </ul>
    과 같은 태그들이 있는데</li>
  <li>위와 같이 중첩해서 사용이 가능함</li>
</ul>

• li태그를 ul 태그로 감싸면
• 번호가 아닌 기호가 생김
• 목록 태그에는
  • ol
  • ul
  • dl
  과 같은 태그들이 있는데
• 위와 같이 중첩해서 사용이 가능함

---

HTML 문서 구조

크게 Head 태그와 Body 태그로 나누어짐

---

head 태그에 들어가는 내용

<title> : 브라우저 상탄 탭에 뜨는 이름
<meta> : 인터넷에서 검색시 뜨는 사이트의 설명

이런식으로 카카오톡에 표시되는 내용도 설정이 가능함.

---

body 태그에 들어가는 내용

페이지 위쪽에 있는 header
어디로 갈지 정하는 네비게이션 nav
실제 컨텐츠 내역인 section

예전에는 모두 div 태그를 사용하였음
동작은 문제없이 가능하지만 코드를 보며 어떤 기능을하는지 파악하기가 불편하기에 협업등을 위하여 분류하는게 좋음

이름만 이렇기에
footer를 맨위에 쓰거나 전부 div로 사용해도 문제없이 동작함