💡 Keyword
- 부모, 자식, 상위(조상), 하위(후손) 요소
- 인라인 요소와 블록 요소
- 핵심 요소
- 전역 속성
1. 부모와 자식 관계
<태그> // 1번
<태그> // 2번
<태그>내용</태그> // 3번
</태그>
</태그>- 부모 요소(바로 위)
- 2번 요소 기준 1번 요소는 부모 요소
- 3번 요소 기준 2번 요소는 부모 요소
- 자식 요소(바로 아래)
- 1번 요소 기준 2번 요소
- 2번 요소 기준 3번 요소
- 상위(조상) 요소(위으로 모두)
- 3번 요소 기준 1번 요소와 2번 요소
- 하위(후손) 요소(아래로 모두)
- 1번 요소 기준 2번 요소와 3번 요소
- 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를 추가한다.
🙋♀️