1. 핵심 요소 정리

div

• 특별한 의미가 없는 구분. Division

h tag

• h1 ~ h6
• 제목 의미
• h1 -> h6 으로 갈수록 작아짐 (하위제목)

p tag

• paragraph

img tag

• 인라인(글자) 요소
• src : 이미지경로
• alt : 대체텍스트

ul tag

• Unordered List
• ul 내에 <li> 포함. (List Item)

a tag

• href
• target : 링크 url을 어디에 열 것이냐.
  * target="_blank" : 새 탭에 링크를 염

span tag

• 일부 글자를 묶을 때.
• 글자 요소. (블록 요소 아님)

br tag

• break. 줄바꿈

input tag

• 글자요소인데 동시에 블록 요소. "인라인 블록" 요소.

type="text"

• value
• placeholder

type="checkbox"

• 아래와 같이 <label>로 감싸면 텍스트를 선택해도 checkbox에 체크가 작동함.

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

`type="radio

• name 속성을 같게 주는 것으로 button group 을 생성함. 즉, 이 그룹 내 라디오버튼들 중의 하나를 선택하게 함.

	<label>
    	<input type="radio" name="fruits" /> Apple
    </label>
    <label>
    	<input type="radio" name="fruits" /> Banana
    </label>

table tag

• 테이블 요소 (블록 요소의 일종)
• <tr>
• <td>

    <table>
  		<tr>
          <td>A</td><td>B</td>
  		</tr>
  	</table>

3. 주석

<!-- 주석내용 --> 이렇게 씀.

• ctrl + / (codepen, vscode 등의 에디터에서)

4. 전역 속성

title

• mouse hover 시 툴팁

style

class

• 중복이 가능함
• .css 에서 .classname 으로 선택.

id

• 중복이 가능하지 않음
• .css 에서 #idname 으로 선택.

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);
    })

• 요소에 어떤 data 를 저장해놨다가 추후 javascript 에서 쓰기 위함.
• <script defer src="main.js"></script> 처럼 defer 를 추가해줘야 html 전체를 읽어올 수 있음.