<태그> // 1번
<태그> // 2번
<태그>내용</태그> // 3번
</태그>
</태그>
요소가 화면에 출력되는 특성으로 크게 2가지로 구분된다.
<span>
은 대표적인 인라인 요소이다.
<div>
는 대표적인 블록 요소이다.
👉 블록 요소에 비해 인라인 요소는 제약사항이 많다.
<div>
: Division
<h1>~<h6>
: Heading
<p>
: Paragraph
<img>
: Image
src
, alt
속성<ul>
, <li>
: Unordered List, List Item
<a>
: Anchor
href
, target
속성<span>
<br>
<input>
<table>
<tr>
(table row): 행<td>
(table data): 열🤔 Wrapping(래핑): 요소(텍스트)를 어떤 요소로 묶어주는(감싸는) 행위를 뜻한다.
title="설명"
style="스타일"
class="이름"
id="이름"
data-이름="데이터"
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>
// div라는 태그를 모두 찾는다.
// 찾은 요소들을 els에 담아뒀다가 각각 반복해서 하나씩 찾은 부분을
// fruitName에 담겨있는 것들을 출력한다.
const els = document.querySelectorAll('div')
els.forEach(el => {
console.log(el.dataset.fruitName)
})
🤔
defer
속성
html
구조가 준비된 후(문서 분석 이후)에js
를 해석하겠다는 의미가 있다.- 위의 예제 코드를
VSCode
에서 실행하면 제대로 실행되지 않는데,<div>
가 나오기 전js
를 해석해서<div>
를 찾기 못했기 때문이다. 따라서<script>
에 속성으로defer
를 추가한다.