💡 Keyword

• 부모, 자식, 상위(조상), 하위(후손) 요소
• 인라인 요소와 블록 요소
• 핵심 요소
• 전역 속성

1. 부모와 자식 관계

<태그>					// 1번
  <태그>					// 2번
    <태그>내용</태그>	 	// 3번
  </태그>
</태그>

• 부모 요소(바로 위)
  • 2번 요소 기준 1번 요소는 부모 요소
  • 3번 요소 기준 2번 요소는 부모 요소
• 자식 요소(바로 아래)
  • 1번 요소 기준 2번 요소
  • 2번 요소 기준 3번 요소
• 상위(조상) 요소(위으로 모두)
  • 3번 요소 기준 1번 요소와 2번 요소
• 하위(후손) 요소(아래로 모두)
  • 1번 요소 기준 2번 요소와 3번 요소
    
    

2. 글자와 상자

요소가 화면에 출력되는 특성으로 크게 2가지로 구분된다.

• 인라인(Inline) 요소: 글자를 만들기 위한 요소들
• 블록(Block) 요소: 상자(레이아웃)를 만들기 위한 요소들
  
  

인라인(Inline) 요소

• <span>은 대표적인 인라인 요소이다.
• 하나의 글자처럼 취급된다.
• 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도이다.
• 요소가 수평으로 쌓인다.
• 줄 바꿈이 띄어쓰기로 해석이 된다.
• 가로, 세로 모두 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
• 글자를 취급하는 요소이므로 가로, 세로 사이즈를 지정할 수 없다.
• 상하의 여백은 적용되지 않고, 좌우의 여백은 적용된다.
• 인라인 요소의 자식 요소로 블록 요소를 사용할 수 없다.

블록(Block) 요소

• <div>는 대표적인 블록 요소이다.
• 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도이다.
• 요소가 수직으로 쌓인다.
• 가로는 부모 요소의 크기만큼 자동으로 늘어나며, 세로는 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
• 가로, 세로 사이즈를 지정할 수 있다.
• 상하좌우 여백을 적용할 수 있다.
• 블록 요소의 자식 요소로 인라인 요소, 블록 요소를 모두 사용할 수 있다.

👉 블록 요소에 비해 인라인 요소는 제약사항이 많다.

3. 핵심 요소 정리

• <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(래핑): 요소(텍스트)를 어떤 요소로 묶어주는(감싸는) 행위를 뜻한다.

4. 전역 속성

• 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를 추가한다.