[HTML, CSS] 코코아톡 클론코딩 - (2) Meta tags, Input tags & IDs, Semantic tags

2021.09.25
HTML #2.5~#2.10

기본적인 부분은 기록을 생략했다.

#2.6 - Head

head 안의 요소들은 보이지 않는다.

1/ meta tags

  • 사이트의 정보를 브라우저에게 알려주는 용도
  • self-closing tag 다
  • charset="utf-8" 은 브라우저에게 text 를 그리는 방법을 알려주므로 매우 중요

2/ html lang

  • 구글, 네이버 같은 검색엔젠에게 사이트에서 사용되는 언어에 대해서 알려주는 것
<html lang="kr" or "en"></html>

#2.8~#2.9 - Input tags & IDs

1/ input tag (self-closing tag)

  • form tag 안에 포함되는 tag
<form><input/></form>
  • label tag 가 input 을 activate 하는 용도로 같이 쓰인다.
    형식은 아래와 같으며, "" 안에 들어가는 값은 동일해야 한다.
<label for=""></label>
<input for="" />

2/ id

  • body 안에 어떤 태그에든 넣을 수 있는 attribute
  • 이유는, id 는 unique identifier(고유식별자)이기 때문이다.
  • 즉, element 당 하나의 id만 가질 수 있는게 규칙이다.

#2.10 - Semantic HTML

되도록이면 이해하기 쉬은 html 문서를 만들자

1/ div tag

  • box 의 역할을 하며, 기본적으로 양옆에 서로 배치될 수 없음
  • non-semantic(의미가 없는) tag 임

2/ header tag

  • div tag 와 똑같이 box 의 역할을 하지만,
  • semantic(의미가 있는) tag 임
  • 즉, 이것만 봐도 웹사이트의 머릿말인걸 짐작 할 수 있다.

3/ main tag

  • div tag 와 똑같이 box 의 역할을 하지만,
  • semantic(의미가 있는) tag 임
  • 즉, 이것만 봐도 웹사이트의 메인인걸 짐작 할 수 있다.

4/ footer tag

  • div tag 와 똑같이 box 의 역할을 하지만,
  • semantic(의미가 있는) tag 임
  • 즉, 이것만 봐도 웹사이트의 꼬릿말인걸 짐작 할 수 있다.

좋은 웹페이지 즐겨찾기