📅 날짜: 2025-02-19
📚 학습 내용
🔹 1. HTML 요소 선택 및 스타일 변경
📌 개념 정리
HTML 문서에서 특정 요소를 선택하고 스타일을 변경하는 방법을 학습했다.
사용한 주요 메서드:
getElementById(): 특정id를 가진 요소 선택querySelector()/querySelectorAll(): CSS 선택자를 사용해 요소 선택getElementsByTagName(): 특정 태그를 가진 모든 요소 선택- HTMLCollection을
Array.from()으로 변환하여forEach()적용 - 선택한 요소에
.style속성을 이용해 스타일 변경
📌 코드 원본 (설명 포함)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 여러 개의 리스트 요소 (li) 포함 -->
<ul>
<li>LIST_1</li>
<li id="li-2">LIST_2</li> <!-- id를 가진 요소 -->
<li class="item">LIST_3</li> <!-- 클래스 "item"을 가진 요소 -->
<li>LIST_4</li>
<li id="li-5">LIST_5</li> <!-- 또 다른 id를 가진 요소 -->
<li>LIST_6</li>
<li class="item">LIST_7</li> <!-- 클래스 "item"을 가진 요소 -->
<li class="item">LIST_8</li> <!-- 클래스 "item"을 가진 요소 -->
</ul>
<script>
// ✅ 1. 특정 ID를 가진 요소 선택
// getElementById()는 문서 내에서 특정 id 값을 가진 요소를 선택함
const li2El = document.getElementById('li-2');
// 선택한 요소의 배경색 변경
li2El.style.backgroundColor = "orange";
// 선택한 요소의 글자 크기 변경
li2El.style.fontSize = "2rem";
//------------------------------------------------------------
// ✅ 2. 클래스 선택 (단일 요소)
// querySelector()는 선택한 클래스나 태그 중 첫 번째 요소 하나만 반환함
const itemEl = document.querySelector('.item');
// 선택한 요소의 텍스트 색상을 초록색으로 변경
itemEl.style.color = "green";
// 선택한 요소의 글자를 굵게 설정
itemEl.style.fontWeight = "900";
//------------------------------------------------------------
// ✅ 3. 클래스 선택 (모든 요소 선택)
// querySelectorAll()을 사용하면 해당 클래스를 가진 모든 요소를 선택할 수 있음 (NodeList 반환)
const itemEls = document.querySelectorAll('.item');
// 모든 선택된 요소에 스타일을 적용하기 위해 forEach() 사용
itemEls.forEach((item) => {
// 테두리를 추가하여 시각적으로 구분
item.style.border = "2px solid orange";
// 요소 간 간격 추가
item.style.margin = "20px 0";
});
//------------------------------------------------------------
// ✅ 4. 태그 선택 (li 태그 전체 선택)
// getElementsByTagName()을 사용하면 특정 태그를 가진 모든 요소를 선택할 수 있음 (HTMLCollection 반환)
const liEls = document.getElementsByTagName('li');
// 선택된 요소 출력
console.log(liEls); // HTMLCollection 반환
//------------------------------------------------------------
// ✅ 5. HTMLCollection을 배열로 변환 후 forEach 적용
// HTMLCollection은 유사 배열이므로 forEach()를 직접 사용할 수 없음
// Array.from()을 사용하여 배열로 변환한 후 forEach() 사용 가능
const liEls2 = Array.from(liEls);
// 변환된 배열을 순회하며 각 요소를 출력
liEls2.forEach((item) => {
console.log(item);
});
</script>
</body>
</html>📌 코드 실행 흐름 분석
1️⃣ 특정 id를 가진 요소 선택 (getElementById())
const li2El = document.getElementById('li-2');
li2El.style.backgroundColor = "orange";
li2El.style.fontSize = "2rem"; ✅ id="li-2"인 <li> 요소를 선택하고, 배경색을 주황색으로 변경하고 글자 크기를 키움
2️⃣ 클래스 선택 (querySelector())
const itemEl = document.querySelector('.item');
itemEl.style.color = "green";
itemEl.style.fontWeight = "900";✅ 클래스 .item을 가진 첫 번째 요소를 선택하여 글자 색상을 초록색, 굵게 변경
🚀 하지만 .item이 여러 개 있을 경우 첫 번째 요소만 선택됨!
3️⃣ 모든 .item 요소 선택 (querySelectorAll())
const itemEls = document.querySelectorAll('.item');
itemEls.forEach((item) => {
item.style.border = "2px solid orange";
item.style.margin = "20px 0";
});✅ 모든 .item 클래스를 선택하고 각각 테두리를 추가하고, 위아래 여백을 늘림
🚀 querySelectorAll()은 NodeList를 반환하므로, forEach() 사용 가능
4️⃣ 특정 태그 선택 (getElementsByTagName())
const liEls = document.getElementsByTagName('li');
console.log(liEls);✅ 모든 <li> 태그를 선택하여 HTMLCollection으로 반환
🚀 HTMLCollection은 forEach()를 직접 사용할 수 없음!
5️⃣ Array.from()을 사용하여 forEach() 적용
const liEls2 = Array.from(liEls);
liEls2.forEach((item) => {
console.log(item);
});✅ HTMLCollection을 배열로 변환하여 forEach()를 사용할 수 있도록 처리
🚀 배열 메서드(map(), filter() 등)도 사용할 수 있음
📌 최종 요약
| 학습 내용 | 주요 개념 |
|---|---|
| HTML 요소 선택 | getElementById(), querySelector(), querySelectorAll() |
| 클래스 요소 선택 | querySelector() → 첫 번째 요소만 선택, querySelectorAll() → 모든 요소 선택 |
| 태그 요소 선택 | getElementsByTagName()은 HTMLCollection 반환 (배열 아님) |
| 유사 배열 변환 | Array.from()을 사용하여 forEach() 적용 가능 |
Here, My Pale Blue.🌏