기본 문법

요소 (Element)

앞 쪽에 있는 태그는 시작(열린)태그, 뒤 쪽에 있는 태그는 종료(닫힌)태그라고 한다.
태그 사이에 있는 내용은 요소의 내용(Contents)라고 부른다.
<태그>내용</태그>

부모와 자식 관계

처음 시작하는 태그의 내용을 부모 요소라고 하며, 부모 태그 안에 위치한 태그 내용을 자식 요소라고 부른다.

<부모태그>
  <자식태그>내용</자식태그>
</부모태그>

빈 태그

닫히는 태그(</태그>)가 없는 태그를 빈 태그라고 부른다.
빈 태그들은 내용을 채울 수가 없는 비어 있는 태그이기 때문에 거의 대부분 속성과 값을 입력하여 태그의 기능을 온전하게 사용하게 된다.

• <태그>: 편리함, HTML 1/2/3/4/5
• <태그 />: 안점함, XHTML/HTML5

예시

<img src="./cat.jpg" alt="고양이">와 같이 사용한다.
빈 태그는 속성이 없이 역할만 가지고 할 수 있는 일이 제한된다.
img라고 입력 후 탭키를 누르면 <img src="" alt="">와 같이 속성들이 같이 생성되는 것을 알 수 있다.

글자와 상자

요소가 화면에 출력되는 특성으로 크게 인라인 요소와 블록 요소 2가지로 구분한다.

인라인(Inline) 요소

• 글자를 만들기 위한 요소들
• 글자처럼 취급이 됨
• 요소가 수평으로 쌓임
• 포함한 콘텐츠 크기만큼 너비와 높이가 자동으로 줄어듦
• 글자를 취급하는 요소이므로 width, height 지정 불가
• margin, padding 좌우 지정 O / 상하 지정 X
• 자식 요소로 블록 요소 사용 X

1. span 요소

span 요소는 인라인 요소로 글자처럼 취급이 되기 때문에 한 줄에 하나씩 입력했을 때 띄어쓰기로 구분이 되고, 한 줄에 모두 입력했을 때 띄어쓰기없이 표현이 된다.

<span>Hello</span>
<span>World</span>

[출력 화면]
Hello World

<span>Hello</span><span>World</span>

[출력 화면]
HelloWorld

2. img

• 이미지를 삽입하는 요소
• src: 삽입할 이미지의 경로 (필수 속성)
• alt: 삽입할 이미지의 이름 (필수 속성)

<img src="https://images.unsplash.com/photo-1648737962083-056c3e4a437d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" alt="suface" />

3. a

• 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 (anchor)
• href: 링크 URL
• target: 링크 URL의 표시(브라우저 탭) 위치

<a href="https://www.naver.com">NAVER</a>
<a href="https://www.google.com" target="_blank">GOOGLE</a>

NAVER
GOOGLE

4. br

• 줄바꿈 요소 (break)

<p>동해물과 백두산이<br/>마르고 닳도록</p>

동해물과 백두산이
마르고 닳도록

블록(Block) 요소

• 상자(레이아웃)를 만들기 위한 요소들
• 요소가 수직으로 쌓임
• 가로 너비는 부모 요소의 크기만큼 자동으로 늘어남
• 세로 너비는 포함한 콘텐츠 크기만큼 자동으로 줄어듦
• width, height 지정 가능
• margin, padding 상하좌우 지정 O
• 자식 요소로 블록 요소, 인라인 요소 사용 O

1. div

• 특별한 의미가 없는 구분을 위한 요소

<div>
  <h1>오늘의 날씨</h1>
  <p>중부 집중호우, 남부는 열대야 ...</p>
</div>

오늘의 날씨

중부 집중호우, 남부는 열대야 ...

2. h1

• 제목을 의미하는 요소
• h1 ~ h6 까지 있으며 숫자가 작을수록 더 중요한 제목을 정의

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

제목1

제목2

제목3

제목4

제목5

제목6

3. p

• 문장을 의미하는 요소

  문장이긴 하지만 어떤 태그로 할까 고민이 될 때 굳이 p태그를 쓰지 않고 div태그를 써도 됨

<div>
  <h1>오늘의 날씨</h1>
  <p>중부 집중호우, 남부는 열대야 ...</p>
</div>

오늘의 날씨

중부 집중호우, 남부는 열대야 ...

4. ul & li

• ul과 li는 하나의 세트라고 볼 수 있음
• ul: 순서가 필요없는 목록의 집합을 의미 (unordered list)
• li: 목록 내 각 항목 (list item)

<ul>
  <li>아이템 1</li>
  <li>아이템 2</li>
  <li>아이템 3</li>
</ul>

• 아이템 1
• 아이템 2
• 아이템 3

5. table (테이블 요소)

• table: 표 요소 행(row)과 열(column)의 집합
• tr: 행(row)을 지정하는 요소
• td: 열(column)을 지정하는 요소 (table data)

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

A	B
C	D

인라인(Inline-block) 블록

• 베이스는 인라인 요소인데 특징은 블록 요소처럼 되어 있음
• 수평으로 쌓임
• 가로/세로 값 지정 가능
• 위아래 여백 지정 가능

1. input

• 사용자가 데이터를 입력하는 요소
• type: 입력받을 데이터의 타입
  • text: 사용자에게 텍스트 값을 입력 받음
  • checkbox: 사용자에게 체크 여부를 입력 받음
  • radio: 사용자에게 체크 여부를 그룹에서 1개만 입력받음
• value: 미리 입력된 값 데이터
• disabled: 입력 요소 비활성화
• checked: 체크박스 입력 요소 체크됨

<!-- type text -->
<input type="text" value="HELLO!" />
<input type="text" placeholder="이름을 입력하세요!" />
<input type="text" disabled />

<!-- type checkbox -->
<label>
  <input type="checkbox" /> Apple
</label>
<label>
  <input type="checkbox" checked /> Banana
</label>

Apple Banana

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

Apple Banana

전역 속성

title

• 요소의 정보나 설명을 지정
• 마우스를 해당 요소 위로 올렸을 때 설명이 보임

<a href="https://www.naver.com" title="네이버로 이동">NAVER</a>

NAVER

style

• 요소에 적용할 스타일(CSS)을 지정

<div>
  <p style="color:blue;">중부 집중호우, 남부는 열대야 ...</p>
</div>

중부 집중호우, 남부는 열대야 ...

class

• 요소를 지칭하는 중복 가능한 이름

<div class="container">
  <p>중부 집중호우, 남부는 열대야 ...</p>
</div>

id

• 요소를 지칭하는 고유한 이름

<div>
  <p id="paragraph">중부 집중호우, 남부는 열대야 ...</p>
</div>

data-

• 요소에 데이터를 지정
• 지정한 데이터를 주로 자바스크립트에서 사용할 수 있음

<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>

html에서 data속성으로 지정한 요소를 아래와 같이 자바스크립트에서 가져와 사용할 수 있다.

const els = document.querySelectorAll('div');
els.forEach(el => {
  console.log(el.dataset.fruitName);
});