<link rel="" />
<!-- rel: relationship -->

• html과 어떤 관계인지 명시하는 속성

index.html

• 반드시 root 경로, 최상위 경로에다가 배치해야함!!

상대경로, 절대경로

• ../ : 점 2개는 "상위폴더를 확인한다"는 의미

• ./ : 같은 경로내의 "주변폴더를 확인한다"는 의미
  => 생략가능!!

• / : 절대경로
  => http://localhost:5500이 생략되어 있다고 보면된다

tab, shift + tab

• tab: 오른쪽으로 여러칸
• shift + tab: 왼쪽으로 여러칸 === 들여쓰기

중요!! inline vs block

inline 태그 === 글자요소, block 태그 === 상자요소

inline

• 글자요소: width, height가 변경안됨
• 바깥 여백: 상하는 불가능, “좌우는 가능”
• inline안에 block넣기 불가능
• 수평으로 쌓임
• 부모 요소의 크기만큼 가로, 세로 둘다 자동으로 줄어드려는 성격 지님.
• inline 태그끼리 엔터로 구분하면, viewport에선 "띄어쓰기"로 간주됨.

block

• 상자요소: width, height 변경가능
• 바깥 여백: “상하좌우” 둘다 가능!
• block안에 inline, block모두 넣기 가능
• 수직으로 쌓임
• 부모 요소의 크기만큼 가로는 자동적으로 늘어나려고 함
• 세로는 자동적으로 줄어드려고 함

h1, img

• h1: 블럭, img: 인라인(글자요소)

label, input

<label> <input type="checkbox" /> Apple </label>

• label 태그로 묶어두면, check상자가 아닌 글자를 눌러도 check가 활성화됨!

전역 속성

title

• 태그 요소에 설명을 덧붙힘
• 커서 올려놓으면 설명 나옴

<태그 title="설명"></태그>

defer

• html 모두 준비된 상태에서 js 파일 가져오기

<script defer scr="./main.js"></script>

data-이름=“데이터”

• 요소에 데이터를 지정

<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>

const els = document.querySelectorAll('div')
els.forEach(el => {
  console.log(el.dataset.fruitName)
})
// 사과
// 바나나