crushed-taro 님의 블로그

[JS] JavaScript로 DOM 수정하기 | 노드 추가·삭제·변경 가이드

1. attribute(어트리뷰트)

1. attribute(어트리뷰트)

• Element.prototype.attributes 프로퍼티로 모든 어트리뷰트 노드를 취득할 수 있다.
• attributes 프로퍼티는 getter만 존재하는 읽기 전용 접근자 프로퍼티로 NameNodeMap 객체를 반환한다.

<label for="username">유저명</label>
<input type="text" id="username" value="user01"/>

const attributes = document.getElementById('username').attributes;

// NamedNodeMap 객체 반환
console.log(attributes);

// 어트리뷰트 값 취득
console.log(attributes.type.value);
console.log(attributes.id.value);
console.log(attributes.value.value);

• Element.prototype.getAttribute/setAttribute 메서드를 사용하면 attributes 프로퍼티를 통하지 않고 요소 노드에서 메서드를 통해 직접 HTML 어트리뷰트 값을 취득하거나 변경할 수 있어 편리하다.

const $input = document.getElementById('username');

// value 어트리뷰트 값 취득
const inputValue = $input.getAttribute('value');
console.log(inputValue);

// value 어트리뷰트 값 변경
$input.setAttribute('value', 'user02');

• Element.prototype.hasAttribute(attributeName) 메서드를 사용하면 특정 HTML 어트리뷰트가 존재하는지 확인할 수 있다.
• Element.prototype.removeAttribute(attributeName) 메서드를 사용하면 특정 HTML 어트리뷰트를 삭제할 수 있다.

<label for="nickname">닉네임</label>
<input type="text" id="nickname" value="JSMaster" />

const $nickname = document.getElementById('nickname');

// name 어트리뷰트를 가지고 있는지 확인
console.log($nickname.hasAttribute('name'));

// value 어트리뷰트를 가지고 있는지 확인
if ($nickname.hasAttribute('value')) {
    // value 어트리뷰트가 있으면 삭제
    $nickname.removeAttribute('value');
}

// value 어트리뷰트를 가지고 있는지 확인
console.log($nickname.hasAttribute('value'));

2. attribute and property(어트리뷰트와 프로퍼티)

• HTML 어트리뷰트 : HTML 요소의 초기 상태를 지정하며 변하지 않는다.
  • 어트리뷰트 노드에서 관리 되며 값을 얻거나 변경하려면 getAttribute/setAttribute 메서드를 사용한다.
• DOM 프로퍼티 : 사용자가 입력한 최신 상태를 관리한다.
  • 사용자의 입력에 의한 상태 변화에 반응하여 언제나 최신 상태를 유지한다.

<label for="username">유저명</label>
<input type="text" id="username" value="user01" />
<label for="nickname">닉네임</label>
<input type="text" id="nickname" value="JSBeginner" />

const $user = document.getElementById('username');

// 사용자가 input 요소의 입력 필드에 값을 입력할 때마다 동작하는 이벤트
$user.oninput = () => {
    console.log('value 프로퍼티 값', $user.value);
    console.log('value 어트리뷰트 값', $user.getAttribute('value'));
};

const $nickname = document.getElementById('nickname');

// DOM 프로퍼티에 값을 할당하여 HTML 요소의 최신 상태를 변경
$nickname.value = 'JSMaster';
console.log('value 프로퍼티 값', $nickname.value);
console.log('value 어트리뷰트 값', $nickname.getAttribute('value'));

// id는 사용자 입력에 의한 상태 변화와 관계 없는 어트리뷰트이므로
// id 어트리뷰트와 id 프로퍼티는 항상 동일한 값으로 연동
$nickname.id = 'nick';
console.log($nickname.id);
console.log($nickname.getAttribute('id'));

• getAttribute 메서드로 취득한 어트리뷰트 값은 언제나 문자열이다.
• 하지만 DOM 프로퍼티로 취득한 최신 상태 값은 문자열이 아닐 수 있다.
• checkbox 요소의 checked 어트리뷰트 값은 문자열이지만 checked 프로퍼티 값은 불리언 타입이다.

<label for="check">확인</label>
<input type="checkbox" id="check" checked>

const $checkbox = document.querySelector('input[type=checkbox]');

// getAttribute 메서드로 얻은 어트리뷰트 값은 문자열
console.log($checkbox.getAttribute('checked')); // ''

// DOM 프로퍼티로 얻은 최신 상태 값은 불리언
console.log($checkbox.checked); // true

3. data attribute dataset attribute(data 어트리뷰트, dataset 어트리뷰트)

• data 어트리뷰트와 dataset 프로퍼티로 HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트 간 데이터 교환이 가능하다.
• data 어트리뷰트는 data- 접두사 다음에 임의의 이름을 붙여 사용한다.
• HTMLElement.dataset 프로퍼티로 DOMStringMap 객체 반환 받으면 임의의 이름을 카멜 케이스로 변환한 프로퍼티를 가지고 있다.

<ul class="boardlist">
  <li data-board-id="13" data-category-id="1">망원 맛집 추천 부탁드려요!</li>
  <li data-board-id="15" data-category-id="2">한강 러닝 크루 구해요!</li>
  <li data-board-id="18" data-category-id="3">요즘 재태크 어떻게 하시나요?</li>
</ul>

const boardlist = Array.from(document.querySelector('.boardlist').children);

// DOMStringMap 객체 반환 출력
boardlist.forEach(board => console.log(board.dataset));

// categoryId가 '1'인 요소 노드를 취득한다.
const board = boardlist.find(board => board.dataset.categoryId === '1');

// categoryId를 '4'로 변경한다.
board.dataset.categoryId = '4';

// 새로운 data 어트리뷰트를 추가할 수도 있다.
// 카멜케이스(boardWriter) -> 케밥케이스(data-board-writer)로 자동 변경되어 추가
board.dataset.boardWriter = 'JS사랑해';

1. DOM (Document Object Model)

1. 브라우저 렌더링 (browser rendering)

• 브라우저는 HTML, CSS, 자바스크립트로 작성 된 텍스트 문서를 파싱하여 브라우저 렌더링한다.
  • 파싱(parsing) : 프로그래밍 언어의 문법에 맞게 작성 된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료 구조인 파스 트리(parse tree)를 생성하는 일련의 과정이다. 일반적으로 파싱 이후 파스 트리를 기반으로 중간 언어인 바이트 코드를 생성하고 실행한다.
  • 렌더링(rendering) : HTML, CSS, 자바스크립트로 작성 된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것이다.
    
    

2. DOM (Document Object Model)

• 브라우저 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료 구조인 DOM을 생성한다.

• DOM
  • HTML 문서를 파싱한 결과물로서 생성 된 DOM은 HTML 문서의 구조와 정보뿐만 아니라 HTML 요소와 스타일 등을 변경할 수 있는 프로그래밍 인터페이스로서 DOM API를 제공한다. 자바스크립트에서 DOM API를 사용하면 이미 생성 된 DOM을 동적으로 조작할 수 있다.
    
    
• 노드 (node)
  • HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환 된다.

• Node
  • HTML 요소 간에는 중첩 관계에 의해 계층적인 부자 관계가 형성 된다. 이러한 HTML 요소 간의 부자 관계를 반영하여 HTML 문서의 구성 요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다. 노드 객체들로 구성 된 트리 자료 구조를 DOM(Document Object Model)이라 한다. 이에 DOM 트리라는 명칭을 쓰기도 한다.
    
    

2. get element node (노드 취득)

1. use id (id 사용)

• Document.prototype.getElementById 메서드는 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환한다.
• 문서 내에 중복 된 id 값을 갖는 HTML 요소가 여러 개 존재하더라도 에러가 발생하지는 않지만 해당 id 값을 갖는 첫 번째 요소 노드만 반환한다.
• id 값을 갖는 HTML 요소가 존재하지 않는 경우 null을 반환한다.

<div id="area1" class="area">
  div 영역
  <p id="area2">p 영역</p>
</div>
<div id="area1" class="area">div 영역</div>

// 요소 노드 취득
const $elem = document.getElementById('area1');

// 요소의 스타일 속성을 이용하여 배경색 변경
$elem.style.backgroundColor = 'skyblue';
// => 해당 아이디를 가진 요소들 중 첫 번째 요소만 스타일 속성이 적용된다.

// 2) 하지만 id 값과 동일한 이름의 전역 변수가 있을 경우 이름 충돌이 있어 지양하는 것이 좋다.
// Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundColor')
// let area2 = 10; // 작성하여 위의 오류 확인 후 주석 처리

// 1) id 속성 값을 그대로 딴 전역 변수를 이용한 접근도 가능하다.
area2.style.backgroundColor = 'blue';

// id 값을 갖는 HTML 요소가 존재하지 않는 경우 null 반환
const $noElem = document.getElementById('area3');
console.log($noElem);

2. use tag name (태그명 사용)

• Document.prototype/Element.prototype.getElementsByTagName 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다.
• 메서드 이름의 Elements가 복수형인 것에서 알 수 있듯 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
• 해당 태그 이름을 갖는 요소가 존재하지 않을 경우 빈 HTMLCollection 객체 반환한다.

<ul id="food">
  <li>김치찌개</li>
  <li>된장찌개</li>
  <li>고등어구이</li>
</ul>
<ul id="drink">
  <li>커피</li>
  <li>콜라</li>
  <li>우유</li>
</ul>

// Document.prototype.getElementsByTagName
// DOM 전체에서 li 태그를 모두 탐색하여 반환
const $lists = document.getElementsByTagName("li");
console.log($lists);           // HTMLCollection - 유사 객체 배열, 이터러블
console.log($lists.length);    // length를 가지고 있다.

// 기본 반복문을 통한 배경색 변경 처리
let changeColor = 0;
for (let i = 0; i < $lists.length; i++) {
    $lists[i].style.backgroundColor = "rgb(130,220," + changeColor + ")";
    changeColor += 50;
}

// HTMLCollection 객체를 배열로 변환하여 순회하며 color 프로퍼티 값을 변경한다.
Array.from($lists).forEach(list => list.style.color = 'blue');

// Element.prototype.getElementsByTagName
// $drink의 자손 노드 중에서 li 태그 탐색
const $drink = document.getElementById('drink');
const $listsFromDrink = $drink.getElementsByTagName('li');
console.log($listsFromDrink);
Array.from($listsFromDrink).forEach(list => list.style.color = 'red');

// 해당 태그 이름을 갖는 요소가 존재하지 않을 경우 빈 HTMLCollection 객체 반환
const $noElem = $drink.getElementsByTagName('a');
console.log($noElem);

3. use class name (클래스명 사용)

• Document.prototype/Element.prototype.getElementsByClassName 메서드는 인수로 전달한 class 어트리뷰트 값을 갖는 모든 요소 노드들을 탐색하여 반환한다.
• 인수로 전달할 class 값은 공백으로 구분하여 여러 개의 class를 지정할 수 있다.
• 메서드 이름의 Elements가 복수형인 것에서 알 수 있듯 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
• 해당 class를 갖는 요소가 존재하지 않을 경우 빈 HTMLCollection 객체 반환한다.

<ul id="available">
  <li class="drink coffee">커피</li>
  <li class="drink coke">콜라</li>
  <li class="drink milk">우유</li>
</ul>
<ul id="unavailable">
  <li class="drink soju">소주</li>
  <li class="drink beer">맥주</li>
</ul>

// Document.prototype.getElementsByClassName
// DOM 전체에서 class 값이 "drink"인 요소 노드를 모두 탐색하여 반환
const $drinks = document.getElementsByClassName("drink");
console.log($drinks);           // HTMLCollection - 유사 객체 배열, 이터러블
console.log($drinks.length);    // length를 가지고 있다.
Array.from($drinks).forEach(drink => drink.style.color = 'red');

// DOM 전체에서 class 값이 "drink coffee"인 요소 노드를 모두 탐색하여 반환
const $coffee = document.getElementsByClassName('drink coffee');
console.log($coffee);

// Element.prototype.getElementsByClassName
// $available의 자식 노드들 중 class 값이 "drink"인 요소 노드를 모두 탐색하여 반환
const $available = document.getElementById('available');
const $availableDrinks = $available.getElementsByClassName('drink');
console.log($availableDrinks);
Array.from($availableDrinks).forEach(drink => drink.style.color = 'blue');

// 해당 class를 갖는 요소가 존재하지 않을 경우 빈 HTMLCollection 객체 반환
const $noElem = $available.getElementsByClassName('soju');
console.log($noElem);

4. use css (선택자 사용)

• Document.prototype/Element.prototype.querySelector 메서드는 인수로 전달한 CSS 선택자를 만족시키는 하나의 요소 노드를 탐색하여 반환한다.
• CSS 선택자를 만족시키는 요소 노드가 존재하지 않는 경우 null을 반환한다.

.area {
  width: 100px;
  height: 100px;
  border: 1px solid lightgray;
}

<div class="area"><p>first</p></div>
<div class="area"><p>second</p></div>

// Document.prototype.querySelector
// DOM 전체에서 class 어트리뷰트 값이 "area"인 첫 번째 요소 노드를 탐색하여 반환
const $area = document.querySelector(".area");
console.log($area);

// 취득한 요소 노드의 backgroundColor 프로퍼티 값 변경
$area.style.backgroundColor = 'gray';

// Element.prototype.querySelector
// $area의 자식 노드 중 p 태그인 첫 번째 요소 노드 탐색하여 반환
const $first = $area.querySelector('p');
console.log($first);
$first.style.color = 'white';

// CSS 선택자를 만족시키는 요소 노드가 존재하지 않는 경우 null 반환
const $noElem = document.querySelector(".noElem");
console.log($noElem);

• Document.prototype/Element.prototype.querySelectorAll 메서드는 인수로 전달한 CSS 선택자를 만족시키는 모든 요소 노드를 탐색하여 반환한다.
• 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 NodeList 객체를 반환한다.
• NodeList 객체는 forEach 메서드를 사용할 수 있다.
• CSS 선택자를 만족시키는 요소가 존재하지 않는 경우 빈 NodeList 객체를 반환한다.

<ul id="list">
  <li class="drink">커피</li>
  <li class="drink">콜라</li>
  <li class="food">김치찌개</li>
  <li class="food">된장찌개</li>
</ul>

// Document.prototype.querySelectorAll
// DOM 전체에서 ul 태그의 자손 li 태그들을 모두 NodeList로 반환
const $lists = document.querySelectorAll('ul > li');
console.log($lists);    // NodeList - 유사 객체 배열, 이터러블

// NodeList는 forEach 메소드 사용 가능
$lists.forEach(list => list.style.backgroundColor = 'gray');

// list 하위 요소 중 food 클래스를 가진 모든 요소를 NodeList로 반환
const $foodLists = document.getElementById('list').querySelectorAll('.food');
console.log($foodLists);
$foodLists.forEach(food => food.style.color = 'white');

// CSS 선택자를 만족시키는 요소가 존재하지 않는 경우 빈 NodeList 객체 반환
const $noElemList = document.querySelectorAll('.noElemList');
console.log($noElemList);

5. HTMLCollection과 NodeList

• HTMLCollection과 NodeList는 DOM API가 여러 개의 결과 값을 반환하기 위한 DOM 컬렉션 객체이다.
• HTMLCollection과 NodeList는 모두 유사 배열 객체면서 이터러블이다.
• 따라서 for…of 문으로 순회할 수 있으며 배열로 변환할 수 있다.
  
  
• HTMLCollection
  • getElementsByTagName, getElementsByClassName 메서드가 반환하는 객체이다.
  • 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는(live) DOM 컬렉션 객체이다.
  • HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영하여 요소를 제거할 수 있기 때문에 for문으로 순회하면서 노드 객체의 상태를 변경하는 경우 주의해야 한다.
    • 반복문 역방향 순회 혹은 while문 사용 등을 통해 회피할 수 있다.
    • 하지만 HTMLCollection 객체를 사용하지 않고 배열로 변환하는 것이 권장 된다.

.white {
  color: white;
}
.black {
  color: black;
}

<ul>
  <li class="white">착한 사람 눈에만 보이는 첫 번째 글</li>
  <li class="white">착한 사람 눈에만 보이는 두 번째 글</li>
  <li class="white">착한 사람 눈에만 보이는 세 번째 글</li>
</ul>

const $whiteList = document.getElementsByClassName('white');
console.log($whiteList);

/*
HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영하여 요소를 제거할 수 있기 때문에
첫 번째 반복문(i == 0)을 통해 "첫 번째 글" 노드가 제거 되어 length가 3 -> 2 로 줄었고
마지막 턴이 된 두 번째 반복문(i == 1)을 통해 접근한 1번 인덱스는 "세 번째 글"이 되어
"두 번째 글"은 className이 변경되지 않았다.
이처럼 for문으로 순회하면서 노드 객체의 상태를 변경하는 경우 주의해야 한다.
*/
for (let i = 0; i < $whiteList.length; i++) {
    $whiteList[i].className = 'black';
}

/* 반복문 역방향 순회 혹은 while문 사용 등을 통해 회피할 수 있다. */
for (let i = $whiteList.length - 1; i >= 0; i--) {
    $whiteList[i].className = 'black';
}

let i = 0;
while ($whiteList.length > 0) {
    $whiteList[i].className = 'black';
}

/* 하지만 HTMLCollection 객체를 사용하지 않고 배열로 변환하는 것이 권장된다. */
Array.from($whiteList).forEach(list => list.className = 'black');

• NodeList
  • querySelectorAll 메서드가 반환하는 객체이다.
  • 실시간으로 노드 객체의 상태를 변경하지 않기(non-live) 때문에 HTMLCollection의 부작용을 해결할 수 있다.
  • NodeList 객체는 NodeList.prototype.forEach 메서드를 상속 받아 사용할 수 있다.
  • NodeList.prototype은 forEach 외에도 item, entries, keys, values 메서드를 제공한다.
  • 대부분의 NodeList는 non-live 객체로 동작하지만 childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요하다.

.blue {
  color: blue;
}
.red {
  color: red;
}

<ul id="lists">
  <li class="red">빨간 휴지 줄까~ 파란 휴지 줄까~</li>
  <li class="red">빨간 휴지 줄까~ 파란 휴지 줄까~</li>
  <li class="red">빨간 휴지 줄까~ 파란 휴지 줄까~</li>
</ul>

const $redList = document.querySelectorAll('.red');

// NodeList 객체는 NodeList.prototype.forEach 메서드를 상속 받아 사용할 수 있다.
$redList.forEach(list => list.className = 'blue');

const $lists = document.getElementById('lists');
const { childNodes } = $lists; // const childNodes = $lists.childNodes;

console.log(childNodes); // 공백 텍스트 노드를 포함해 7개

for (let i = 0; i < childNodes.length; i++) {
    // removeChild 메서드가 호출될 때마다 NodeList 객체인
    // childNodes가 실시간으로 변경되어 1, 3, 5, 7 요소만 삭제된다.
    $lists.removeChild(childNodes[i]);
}

console.log(childNodes); // 1, 3, 5, 7 요소만 삭제되어 li 3개 남음

[CSS] CSS 개요 | 웹 스타일링의 기초부터 핵심 개념까지

1. CSS 선택자

1. 선택자의 종류

• 선택자별 문법 및 설명

2. 선택자별 적용 예시

• 전체 선택자
  • 모든 요소를 선택합니다. 문서 전체에 CSS 스타일을 적용

* {
  margin: 0;
  padding: 0;
}

• 태그 선택자
  • 특정 태그 요소를 선택

p {
  color: red;
}

• 클래스 선택자
  • 특정 클래스를 가진 요소를 선택합니다. 여러 요소에서 동시에 사용 가능

.some-class {
  font-size: 1.2em;
}

• ID 선택자
  • 특정 ID를 가진 요소를 선택합니다. 한 페이지에서 하나의 요소에만 적용 가능

#some-id {
  border: 1px solid black;
}

• 자식 선택자
  • 부모 요소 바로 아래 자식 요소를 선택

.parent > .child {
  color: blue;
}

• 후손(하위) 선택자
  • 조상 요소의 하위 자손 요소를 선택

.ancestor .descendant {
  font-weight: bold;
}

• 인접 형제 선택자
  • 요소1 바로 뒤에 나오는 요소2를 선택

h2 + p {
  font-style: italic;
}

• 일반 형제 선택자
  • 요소1 다음에 나오는 요소2를 선택

h2 ~ p {
  font-size: 1.2em;
}

3. 선택자1

• 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* css 주석(//와 같은 단일행 주석도 적용 안됨) */

        /* 모든 선택자는 '*'기호를 사용한다. */
        /*
        * {
            color: red;
        }
        */

        /* 태그 선택자 테스트 */
        p, li {
            color: blue;
        }

        /* 아이디 선택자 테스트 */
        #id2 {
            background: yellow;
            color: green;
        }

        /* 클래스 선택자 테스트 */
        .class1 {
            background: grey;
            color: purple;
        }

        .class2{
            color:orangered;
        }
    </style>
    <title>CSS3 기본 선택자</title>
</head>
<body>
    <h1>CSS 기본 선택자</h1>
    <p>선택자(selector)란?<br>
       특정한 HTML 태그를 선택할 때 사용하는 기능으로, 태그를 선택하여 원하는 스타일과 기능을
       적용할 수 있다.
    </p>
    <hr>
    <h2>모든 선택자</h2>
    <p>HTML 문서 안의 모든 태그를 선택할 때 전체 선택자를 사용할 수 있다.</p>
    <ul>
        <li>테스트1</li>
        <li>테스트2</li>
        <li>테스트3</li>
    </ul>
    <hr>
    <h2>태그 선택자</h2>
    <p>HTML 문서 내에 같은 태그를 모두 선택할 때 사용한다.</p>
    <p>- p{color: red;}와 같은 형태로 사용된다.</p>
    <hr>
    <h2>아이디 선택자</h2>
    <p>HTML 문서 내에 해당하는 아이디 속성의 값을 가진 태그만 선택할 때 사용한다.</p>
    <p>- #아이디명{color: orange;}와 같은 형태로 사용된다.</p>
    <ol>
        <li id="id1">아이디 선택자 테스트1</li>
        <li id="id2">아이디 선택자 테스트2</li>
        <li id="id3">아이디 선택자 테스트3</li>
        <li id="id4">아이디 선택자 테스트4</li>
        <li id="id5">아이디 선택자 테스트5</li>
    </ol>
    <hr>
    <h2>클래스 선택자</h2>
    <p>HTML 문서 내에 여러 개의 태그를 동일한 클래스명으로 지정하여 선택할 때 사용한다.</p>
    <p>- .클래스명{color: purple;}과 같은 형태로 사용된다.</p>
    <ul>
        <li class="class1" id="id2">클래스 선택자 테스트1</li> <!-- id선택자로 css 적용한 것이 우선순위가 높다.(1-4번 예제에서 다룰 예정) -->
        <li class="class2">클래스 선택자 테스트2</li>
        <li class="class1">클래스 선택자 테스트3</li>
        <li class="class2">클래스 선택자 테스트4</li>
        <li class="class1">클래스 선택자 테스트5</li>
    </ul>

    <button>클릭!</button>

    <!-- 나중에 javascript를 배우면 선택자의 개념을 자주 사용하게 되니 잘 배워 두자. -->
    <script type="text/javascript">
        let btn = document.querySelector('button');

        btn.onclick = () => {
            let testli = document.querySelectorAll('ul>li.class2');

            for(let li = 0; li < testli.length; li++){
                testli[li].style.backgroundColor = 'red';
            }
        }

        window.onload = function(){
            let idTag = document.getElementById('id2');
            console.log(idTag);
        }
    </script>
</body>
</html>

• 결과 화면

4. 선택자 2

• 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 내부 스타일 시트 방식 -->
    <style>

        /* 속성값과 일치하는 객체(태그, 요소) 선택 */
        div[name=name2] {
            background: orangered;
        }

        /* 속성 안의 값이 특정 값을 단어(띄어쓰기 단위)로써 포함하는 객체 선택 */
        div[name~=name1] {
            background: yellow;
        }

        /* 속성 값이 특정 값과 일치하거나 '-'문자가 곧바로 해당 값 뒤에 따라붙는 객체 선택 */
        div[class|=class] {      /* class 또는 class- */
            background: cyan;
        }

        /* 속성 값을 가지고 있으며, 접두사로 특정 값이 포함되어 있는 객체 선택 */
        div[name^=name] {
            background: blue;
        }

        /* 속성 안의 값이 특정 값으로 끝나는(접미사) 객체 선택 */
        div[class$=class] {
            color: white;
        }

        /* 속성 안의 값이 특정 값을 포함하는 객체 선택 */
        div[class*=div] {
            background: yellow;
            color: red;
        }

        /* 자손 선택자 */
        #test1>h4 {
            background:hotpink;
        }

        #test1>div>ul>li {
            background:cyan;
        }

        /* 후손 선택자 */
        #test1 ul {
            background: yellow;
        }

        /* 동일한 선택자를 또 사용해도 문제 없다. */
        #test1 ul {
            color: red;
        }

        /* 형제관계 선택자(동위 선택자) */
        #div-test1 {
            background: red;
        }

        /* 해당 요소 바로 다음에 특정 타입의 요소를 모두 선택 */
        #div-test1 + div {
            background: yellow;
        }

        /* 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택 */
        /* 아래 css에 영향을 주기 때문에 주석
        #div-test2 ~ div {
            background: purple;
            color: white;
        }
        */

        #active-test, #hover-test {
            width:150px;
            height:150px;
            background:orangered;
        }

        /* css에서 제공하는 이벤트 관련 pseudo(수두) 선택자. */
        #active-test:active {
            background: yellow;
            color: white;
        }

        #hover-test:hover {
            cursor: pointer;
            background: cyan;
            color: purple;
            font: 40px bold;
        }

        input[type=checkbox]:checked {
            width: 20px;
            height: 20px;
        }

        #userId:focus, #userPwd:focus {
            background: green;
        }

        option:disabled {
            background: red;
            color: white;
        }

        option:enabled {
            background: yellowgreen;
        }

        input:disabled {
            background: blue;
        }
    </style>

    <!-- 
        css를 적용한 style 태그 내부의 내용을 외부 파일(외부 리소스)로 빼내서 불러올 수도 있다.
        하지만 외부파일을 불러오는 방식을 할 경우 때때로 웹 브라우저가 캐시로 이미 저장해준
        화면을 그대로 변화없이 그려주게 되는 경우가 있고 그 때마다 캐시를 지워서 다시 적용해
        주어야 하기 때문에 수업에서는 style태그를 활용하는 내부 스타일 시트 방식으로 진행한다.
    -->
    <!-- 외부 스타일시트 방식 -->
    <!--<link rel="stylesheet" href="selector2.css">-->
    <title>CSS3 선택자2</title>
</head>
<body>
    <h2>기본 속성 선택자</h2>
    <p>기본 선택자 뒤에 []를 사용하여 속성과 속성값을 사용한다.
       (주로 id나 class 속성 아닌 것들에 적용)
    </p>
    <pre> 선택자[속성=속성값] {설정내용}의 형식으로 사용된다.</pre>
    <div name="name1 name5 name6" class="div-class">div 1</div>
    <div name="name2" class="div-class">div 2</div>
    <div name="name3" class="div-class">div 3</div>
    <div name="name4" class="class-div">div 4</div>

    <hr>
    <h2>후손 선택자와 자손 선택자</h2>
    <p>자손 선택자: 바로 아래의 요소, 후손 선택자: 하위 요소 전부</p>
    <pre>자손 선택자: 선택자>자손선택자{설정내용}의 형식으로 사용,
         후손 선택자: 선택자 후손선택자{설정내용}의 형식으로 사용
    </pre>
    <div id="test1">
        <h4>자손입니다.</h4>
        <h4>나도 자손입니다.</h4>
        <div>
            <ul id="testul">리스트
                <li>나는 ul의 자손이면서 동시에 div의 후손입니다.</li>
                <li>나도 ul의 자손이면서 동시에 div의 후손입니다.</li>
            </ul>
        </div>
    </div>

    <hr>
    <h2>동위 선택자</h2>
    <p>동위 관계(형제 관계)에서 뒤에 위치한 태그를 선택할 때 사용한다.</p>
    <pre>바로 뒤의 요소 선택 시 : 선택자a + 선택자b {설정내용}으로 사용하며,
         뒤에 있는 모두를 선택할 때는 선택자a ~ 선택자b {설정내용}으로 사용된다.
    </pre>
    <div id="div-test1">div test1</div>
    <div id="div-test2">div test2</div>
    <div id="div-test3">div test3</div>
    <div id="div-test4">div test4</div>
    <div id="div-test5">div test5</div>
    
    <script type="text/javascript">
        
        /* 나중에 javascript에서 다룰 때는 태그가 객체(object)의 개념이 된다. */
        window.onload = function(){
            let secondDiv = document.querySelector('div[name=name2]');
            console.log(typeof secondDiv);
        }
    </script>

    <hr>
    <h2>반응 선택자</h2>
    <p>사용자의 움직임에 따라 달라지는 선택자</p>
    <pre>사용자가 클릭한 태그: 선택자:active{설정내용}, 
사용자의 마우스가 올라가 있는 태그: 선택자:hover{설정내용}으로 사용된다.</pre>
    <div id="active-test">active 테스트</div>
    <div id="hover-test">hover 테스트</div>

    <hr>
    <h2>상태 선택자</h2>
    <p>입력 양식의 상태에 따라 선택되는 선택자</p>
    <pre>체크 상태의 input태그 선택: input태그:checked{설정내용}</pre>
    <!-- input[type="checkbox" name="fruits" value="사과"]#apple+label[for="apple"]{사과} -->
    <input type="checkbox" name="fruits" value="사과" id="apple">
    <label for="apple">사과</label>
    <input type="checkbox" name="fruits" value="바나나" id="banana">
    <label for="banana">바나나</label>
    <input type="checkbox" name="fruits" value="복숭아" id="peach">
    <label for="peach">복숭아</label>

    <hr>
    <p>초점이 맞추어진 input태그 선택</p>
    <label for="userId">아이디: </label>
    <input type="text" id="userId" placeholder="아이디를 입력하세요"><br>
    <label for="userPwd">패스워드: </label>
    <input type="password" id="userPwd" placeholder="비밀번호를 입력하세요"><br>
    
    <p>사용 가능한 input태그선택</p>
    <pre>태그:enabled{설정내용}, 태그:disabled{설정내용}</pre>
    <h3>당신의 연령대는?</h3>
    <select>
        <option value="10" disabled>10대</option>
        <option value="20">20대</option>
        <option value="30">30대</option>
        <option value="40">40대</option>
        <option value="50">50대</option>
        <option value="60" disabled>60대</option>
    </select>

    <input type="text" disabled>
    <button disabled>버튼</button>
</body>
</html>

• 결과 화면

5. 선택자 3

• 관련 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        /* 형제 탐색 선택자들(traversing siblings) */
        /* 형제 관계 관련 pseudo선택자들은 한칸 띄워 쓰자 */
        /* 형제 관계 태그 중 첫 번째 태그 선택 */
        #test1 :first-child {
            background: red;
            color: white;
        }

        /* 형제 관계 태그 중 막지막 태그 선택 */
        #test1 :last-child {
            background: orange;
            color: white;
        }

        /* 형제 관계 태그 중 앞에서 수열번 째 태그 선택(서순 체계(1부터)) */
        #test1 :nth-child(2n) {
            background: skyblue;
            color: white;
        }
        
        /* 형제 관계 중 뒤에서 수열번 째 태그 선택 */
        #test1 :nth-last-child(4) {
            background: yellowgreen;
            color: white;
        }

        /* 형제 관계 태그 중 첫 번째 태그 선택 */
        #test2 :first-of-type {
            background: red;
            color: white;
        }

        /* 형제 관계 태그 중 마지막 번째 태그 선택 */
        #test2 :last-of-type {
            background: orange;
            color: white;
        }

        /* 형제 관계 태그 중 앞에서 수열번 째 태그 선택 */
        #test2 p:nth-of-type(2n) {
            background: yellowgreen;
            color: white;
        }
        
        /* 형제 관계 태그 중 뒤에서 수열번 째 태그 선택 */
        #test2 p:nth-last-of-type(3) {
            background: skyblue;
            color: white;
        }

        /* 부정 선택자 */
        #test3 p:not(:nth-child(2n-1)) {
            background: orange;
        }

        /* 첫 번째 글자 선택 */
        #test4 p:first-letter {
            font-size: 2em;
        }

        /* 첫 번째 줄 선택 */
        #test4 p:first-line {
            background: coral;
        }

        /* 태그 뒤에 위치하는 공간을 선택 */
        #test4 p:after {
            content: "@@@ 태그 뒤에 추가 @@@"
        }

        /* 사용자가 드래그한 글자 선택*/
        #test4 p::selection {
            background: red;
            color: white;
        }

        /* 태그별로 자동 번호를 매겨주는 속성 */
        #test4 p:before {
		    content: counter(rint) ". ";
	    }

    </style>
    <title>CSS3 선택자3</title>
</head>
<body>
    <h2>일반 구조 선택자</h2>
    <p>특정한 위치에 있는 태그 선택(위치로 구분)</p>
    <!-- div#test1>(p{테스트$}*5+pre{테스트$@6}*1) -->
    <div id="test1">
        <p>테스트1</p>
        <p>테스트2</p>
        <p>테스트3</p>
        <p>테스트4</p>
        <p>테스트5</p>
        <pre>테스트6</pre>
    </div>

    <hr>
    <h2>형태 구조 선택자(태그 별로 구분)</h2>
    <p>특정한 위치에 있는 태그 선택(태그 별로 구분)</p>
    <div id="test2">
        <p>테스트1</p>
        <p>테스트2</p>
        <p>테스트3</p>
        <p>테스트4</p>
        <p>테스트5</p>
        <pre>테스트6</pre>
    </div>

    <hr>
    <h2>부정 선택자</h2>
    <p>지금까지의 선택자에 대해 반대로 적용하는 선택자</p>
    <div id="test3">
        <p>테스트1</p>
        <p>테스트2</p>
        <p>테스트3</p>
        <p>테스트4</p>
        <p>테스트5</p>
        <pre>테스트6</pre>
    </div>

    <hr>
    <h2>문자 선택자</h2>
    <p>태그 내부에서 특정 조건의 문자를 선택하는 선택자</p>
    <div id="test4">
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
    </div>

</body>
</html>

• 결과 화면

6. 선택자 우선순위

• CSS의 선택자를 통해 원하는 요소에 CSS를 적용함에 있어 어떤 방법으로 CSS를 적용하는가에 따라 우선순위가 나뉘게 된다.
• 결과적으로 온전히 지금 적용하고자 하는 CSS가 선택자를 통해 적용되게 하기 위해서는 !important를 활용할 수 있다.
  • 아래와 같이 작성 했을 시 우선 순위 상으로는 CSS파일 작성 순서와 관계없이 id 선택자를 활용한 red가 글꼴색으로 적용되어야 하지만 userid 클래스를 가진 요소에 있는 !important로 인해 클래스 선택자를 활용한 CSS 설정이 적용되게 된다.

#userid {
		color: red;
}

.userid {
		color: blue !important;
}

• 관련 코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .test1 {
            background: yellow;
            color: black;
        }

        div {
            width: 300px;
            height: 300px;
            background: darkviolet;
        }

        #test2 {
            background: plum;
            color: darkblue;
        }

        .test2 {
            background: blue !important;
            color: white !important;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <h1>선택자 우선순위</h1>

    <p>기본적으로 css 속성은 위에서부터 아래로 적용이 되지만, 같은 태그에 여러 개의 css속성이
        설정된 경우에는 우선순위에 따라 스타일이 적용된다.
    </p>
    <pre>
        (우선순위 낮음)
         ┃
         ┃ 태그 선택자
         ┃      ∨
         ┃ 클래스 선택자
         ┃      ∨
         ┃ 아이디 선택자
         ┃      ∨
         ┃ 인라인 선택자
         ┃      ∨
         ┃ !important 
         ↓
        (우선순위 높음)
        순서로 우선순위를 가진다.
    </pre>

    <hr>

    <h2>선택자 우선순위 테스트</h2>
    <!-- div#test1.test1{우선순위 테스트1} -->
    <div id="test1" class="test1">우선순위 테스트1</div>
    <!-- p#test2.test2[style="background: yellowgreen"]{우선순위 테스트 2} -->
    <p id="test2" class="test2" style="background: yellowgreen;">우선순위 테스트 2</p>
</body>

</html>

• 결과 화면

1. CSS란

1. 개요

• CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 디자인을 정의하는 스타일시트 언어이다. HTML은 웹 페이지의 구조와 컨텐츠를 정의하는데 사용되는 반면, CSS는 컨텐츠의 레이아웃, 색상, 글꼴, 간격 등의 시각적 표현을 제어한다.
• CSS를 사용하면 웹 페이지의 여러가지 스타일을 중앙 집중식으로 관리할 수 있어 효율적이며, 유지 관리가 쉬워진다.

2. 사용법

• CSS는 선택자(Selector)를 사용하여 HTML 요소를 대상으로 지정하고, 대상에 적용 할 스타일 속성을 정의한다. 적용 방식에 따라 아래와 같이 세 가지로 나눌 수 있다.
  1. 내부 스타일 시트 방식
     1. HTML 문서의 <head>태그 안의 <style> 태그 내에 작성 된 CSS 코드를 적용
  2. 외부 스타일 시트 방식
     1. <link rel="stylesheet" href="css 외부 파일 경로">를 통해 CSS 파일(CSS 확장자를 가짐)에 작성된 CSS 코드를 적용
  3. 인라인 방식
     1. HTML 요소의 style 속성(attribute)에 CSS 코드를 적용

3. style과 stylesheet

• style
  • HTML 태그의 style 속성(attribute)에 CSS 코드를 작성한 것이다. 해당 태그에만 스타일이 적용된다.
• stylesheet
  • HTML 문서에서는 CSS 파일을 외부 파일로 분리하여 사용할 수 있다. 이렇게 분리한 CSS 파일을 스타일 시트라고 부르며, 이를 HTML 문서에 연결하여 사용한다.
  • 스타일 시트는 HTML 문서에서 스타일을 관리하기 쉽고, 중복 스타일을 제거할 수 있어 보다 효율적이다.
  • 스타일 시트에는 다양한 선택자를 사용하여 스타일을 적용할 수 있다.
  • 스타일 시트는 내부 스타일 시트 방식과 외부 스타일 시트 방식으로 작성할 수 있다.
• 내부 스타일시트
  • CSS 코드를 HTML 문서 내부에 포함하여 작성하는 방식이다.
  • 이 방식에서는 HTML 문서의 head 태그 안에 style 태그를 사용하여 CSS 코드를 작성한다.
  • 이렇게 작성한 CSS 코드는 해당 HTML 문서의 모든 요소에 대해 적용된다.
  • 이 방식의 장점은 CSS 코드와 HTML 코드가 같은 파일에 있으므로 파일 관리가 용이하다는 것이다.
  • 또한, 다른 사람이 HTML 코드를 수정하지 않더라도 CSS 코드만 수정하여 디자인을 변경할 수 있다는 것이다.
  • 내부 스타일시트 예시

<!DOCTYPE html>
<html>
<head>
  <title>내부 스타일시트</title>
  <style>
    h1 {
      color: blue;
    }
    p {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is an example of internal style sheet.</p>
</body>
</html>

• 외부 스타일시트
  
  • CSS 코드를 HTML 문서에서 분리하여 작성하는 방식이다.
  • 이 방식에서는 HTML 문서의 head 태그 안에서 CSS 파일을 연결하여 사용한다.
  • 이렇게 분리한 CSS 파일을 스타일 시트라고 하며, 이를 HTML 문서에 연결하여 사용한다.
    • 스타일 시트는 HTML 문서에서 스타일을 관리하기 쉽고, 중복 스타일을 제거할 수 있어 보다 효율적이다.
    • 스타일 시트에는 다양한 선택자를 사용하여 스타일을 적용할 수 있다.
  • 스타일 시트는 내부 스타일 시트 방식과 외부 스타일 시트 방식으로 작성할 수 있다.

4. 외부 스타일 시트 방식 예제

• style.css 파일을 작성한다.

h1 {
    color: red;
}

p {
    color: blue;
}

• HTML 문서의 head 태그 안에서 link 태그를 사용하여 style.css 파일을 연결한다.

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to my website!</h1>
    <p>This is some example text.</p>
</body>
</html>

※

이렇게 하면 HTML 문서에서h1 태그에 대한 스타일은 빨간색으로, p 태그에 대한 스타일은 파란색으로 적용된다.

5. 인라인

• 인라인 방식은 HTML 요소의 style 속성(attribute)을 사용하여 CSS 코드를 적용하는 방식이다.
• 이 방식은 하나의 HTML 요소에만 스타일을 적용하므로, 다른 HTML 요소에는 동일한 스타일이 적용되지 않는다.
• 일반적으로 인라인 방식은 내용이 많지 않은 작은 요소에 대해서만 사용하는 것이 좋다.
• 인라인 방식 예시

<p style="font-size: 24px; color: red;">인라인 방식 예시</p>

      ※ 위 예시에서는p 요소에 직접 style속성을 추가하여 글자 크기와 색상을 지정하고 있다. 

[HTML] 렌더링 엔진의 동작 과정 완벽 정리 – 브라우저가 웹페이지를 표시하는 법

1. HTML(HyperText Markup Language)이란

1. 개요

• HTML은 웹 페이지를 작성하는데 사용되는 표준 마크업 언어이다.
• 웹 페이지의 구조와 컨텐츠를 정의하며, 웹 브라우저는 HTML 문서를 해석하여 사용자에게 시각적으로 표시한다.
• HTML은 요소(element)라고 불리는 태그(tag)를 사용하여 텍스트, 이미지, 링크, 리스트, 테이블 등 다양한 종류의 컨텐츠를 구성할 수 있다.

2. HTML 구성요소

3. HTML 구조

• HTML 문서의 기본 구조는 다음과 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
</head>
<body>

    <!-- 웹 페이지의 컨텐츠 내용을 이곳에 작성 -->

</body>
</html>

• <!DOCTYPE html> : 문서가 HTML5임을 선언
• <html> : 문서의 시작과 끝
• <head> : 문서의 메타데이터, 제목, 외부 스크립트 및 스타일 시트와 같은 정보를 포함
• <body> : 웹 페이지의 실제 컨텐츠를 포함

4. HTML 주의사항

• 태그는 대소문자를 구분하지 않으며, 소문자를 권장한다.
• 시작 태그로 시작하면 반드시 종료 태그로 종료를 한다.
• 파일 확장자는 반드시 html, htm으로 설정할 것
• 문자의 공백은 한 개만 인식을 하고, 공백을 추가하기 위해서는 **특수기호(&nbsp;)**를 이용해야 한다.

[CSS] CSS란? 웹 스타일링의 기초 개념과 기본 문법 정리

브라우저

1. 브라우저 동작
   1. User Interface : 사용자가 사용하는 브라우저의 주소표시줄, 홈버튼, 북마크 등의 페이지 이외의 모든 영역
   2. Browser Process : User Interface와 Rendering Process 사이의 동작은 제어하는 영역
   3. Networking : HTTP/HTTPS의 네트워크 요청 및 인터넷 통신과 관련되 보안 문제를 처리하는 영역
   4. JavaScript Interpreter : JavaScript 코드를 구문 분석하고 실행하는 역할을 하는 영역
   5. UI Backend : 기본 운영체제의 사용자 인터페이스를 사용(주로 기본위젯 등을 그리는데 주로 사용)
   6. Data Persistence : 영속적 계층이며, 웹 브라우저의 쿠키와 같은 다양한 유형의 데이터를 로컬에 저장을 하는 영역

HTML Parsing

• 브라우저가 HTML 파일을 해석하여 문서의 문자열을 토큰으로 분해하고 해당 토큰에 문법적인 의미와 구조를 반영하여 DOM(Document Object Model)을 생성

CSS Parsing

• HTML Parsing 중에 CSS가 있으면 CSSOM(CSS Object Model) Tree 생성 또한 같이 생성

Render

• 생성된 DOM Tree와 CSSOM Tree를 매칭하여 Render Tree를 구성하고 실제로 화면에 그려질 Tree

Layout

• 생성한 Render Tree를 화면에 배치할지에 대해서 위치와 크기를 계산

Paint

• Layout 단계에서 계산된 크기와 값을 이용해서 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환

HTML(HyperText Markup Language) 개요

• HTML은 웹 페이지를 작성하는데 사용되는 표준 마크업 언어.
• 웹 페이지의 구조와 컨텐츠를 정의하며, 웹 브라우저는 HTML 문서를 해석하여 사용자에게 시각적으로 표시함.
• HTML은 요소(element)라고 불리는 태그(tag)를 사용하여 텍스트, 이미지, 링크, 리스트, 테이블 등 다양한 종류의 컨텐츠를 구성할 수 있음.

HTML 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
</head>
<body>

    <!-- 웹 페이지의 컨텐츠 내용을 이곳에 작성 -->

</body>
</html>

• <!DOCTYPE html> : 문서가 HTML5임을 선언함.
• <html> : 문서의 시작과 끝.
• <head> : 문서의 메타데이터, 제목, 외부 스크립트 및 스타일 시트와 같은 정보를 포함.
• <body> : 웹 페이지의 실제 컨텐츠를 포함.

HTML 주의사항

• 태그는 대소문자를 구분하기 않으며, 소문자를 권장.
• 시작 태그로 시작하면 반드시 종료 태드로 종료를 함.
• 파일 확장자는 반드시 html으로 설정할 것.
• 문자의 공백은 한 개만 인식을 하고, 공백을 추가하기 위해서는 특수기호(&nbsp;)를 이용해야 함.