HTML 요소 정리

1) 블록(상자)요소

div(division) : 특별한 의미 없이 영역을 구분하기 위한 요소

H(heading): 제목 의미하는 요소[목차], 숫자가 작을 수록 더 중요한 제목을 정
p(paragraph):문장을 의미하는 요소

ul(unorderd list)>li(list item)

 

2) 인라인요소

span: 특별한 의미 없는 구분 요

img + 필수속 src alt (iamge): 이미지 태그

a href + target (anchor): 경로, 하이퍼링크 지정하는 요소

br(break): 줄바꿈 요소

 

3) 인라인 블록 요소

input+ type + value: 사용자가 데이터를 입력하는 요소

type 위치

ㄴtext

ㄴcheckbox : 미리체크 시 checked /

ㄴradio: 무조건 1개만 입력 + name=그룹

 

value 위치

ㄴ미리 입력될 데이터를 입력 value

ㄴ힌트를 넣을 땐 placeholder

ㄴ입력 요소 비활성화 disabled

 

4) 테이블 요소

tr : table-row(행을 지정하는 요소) > tr(table row):행 > td(table data):셀, 열

구조를 만드는 역할이기 때문에 구조를 만든다라는 정도로 이해할 것.

 

5) 전역 속성

<태그 title = "설명"> 요소의 설명이나 정보 지정

<태그 class ="이름></태그> 요소를 지칭하는 중복 가능한 이름

<태그 id = "이름"></태그> 요소를 지칭하는 고유한 이름

ㄴex: #abc

<태그 data-이름 = "데이터"></태그> 요소에 데이터를 지정

 

cf)

js

const els = document.querySelectorAll('div')

els.forEach(el => {

    console.log(el.dataset.fruitName)})