# TIL - 2026.07.31
📌 오늘 학습한 주제
- JavaScript DOM 객체 조작 (
textContent,src속성 변경) if-else조건문을 활용한 텍스트 및 이미지 동적 토글(Toggle) 구현- CSS 미디어 쿼리 (Media Query) 개념 및 해상도별 분류 기법
💡 오늘 배운 것 — 나만의 언어로
① 오늘의 목표
- JavaScript로 DOM 요소를 탐색하고 속성을 동적으로 변경해 보는 실습을 진행하고, 미디어 쿼리의 해상도별 컴포넌트 재배치 개념 이해하기
② 학습할 내용
- DOM 요소 접근 및 속성 제어:
document.querySelector()를 사용해 원하는h1,img태그 및 버튼 요소를 가져온 뒤,textContent와src속성을 변경하는 법을 배웠다. - 동적 토글 버튼: 버튼 클릭 시 이벤트 객체(
e.target.textContent)를 확인하여 버튼, 제목, 이미지를Inspire Coffee와Lgcns Coffee간에 서로 번갈아가며 바꾸는 토글 기능을 구현했다. - 미디어 쿼리 (Media Query): 디바이스 해상도(Mobile, Tablet, Desktop)에 따라 웹 컴포넌트를 적절하게 재배치하기 위한 미디어 쿼리 기준점(Breakpoint) 개념을 파악했다.
💻 오늘 핵심 코드 1 — DOM 속성 변경 및 이미지/제목 토글 구현 (scriptProperty.html)
<div>
<h1>Inspire Coffee</h1>
<img src="../img/img/coffee-blue.jpg" width="200" height="200">
</div>
<div>
<button type="button" id="btn">헤딩과 이미지 속성을 변경</button>
</div>
<script>
document.querySelector('#btn').onclick = (e) => {
let h1 = document.querySelector('body > div > h1');
let img = document.querySelector('body > div > img');
// 버튼 텍스트 조건에 따라 제목, 이미지 경로, 버튼 캡션을 동적으로 변경
if (e.target.textContent === 'Inspire Coffee') {
h1.textContent = "Lgcns Coffee";
img.src = `../img/coffee-pink.jpg`;
e.target.textContent = "Lgcns Coffee";
} else {
h1.textContent = "Inspire Coffee";
img.src = `../img/coffee-blue.jpg`;
e.target.textContent = "Inspire Coffee";
}
};
</script>✨ 이해한 점
document.querySelector()에 CSS 선택자(body > div > h1)를 활용해 원하는 특정 DOM 태그를 정밀하게 선택할 수 있다.textContent속성을 조작하면 태그 내부의 텍스트를 손쉽게 바꿀 수 있고,img.src속성을 지정하면 실시간으로 출력되는 이미지 파일을 바꿀 수 있다.
💻 오늘 핵심 코드 2 — 미디어 쿼리(Media Query) 기본 연동 (mediaQuery.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query Practice</title>
<link href="../css/media.css" rel="stylesheet">
</head>
<body>
<div>
<h1>안녕하세요</h1>
</div>
</body>
</html>✨ 이해한 점
- 반응형 웹 구현을 위해 외부 미디어 쿼리 CSS 파일(
media.css)을 연결했다. - 해상도별 기준점(Breakpoint):
- Mobile:
320px ~ 430px ~ 767px - Tablet:
768px ~ 1023px - Desktop:
1024px ~
- Mobile:
🛠️ 실습 / 결과물 & 참고 자료
③ 실습 / 결과물
- 강의 실습코드: 버튼 클릭 시
h1제목 텍스트와 이미지(coffee-blue.jpg↔coffee-pink.jpg)가 동적으로 교체되는 상호작용 웹 페이지 제작 및 미디어 쿼리 외부 연동 실습.
④ 참고 자료
- w3schools: W3Schools JS HTML DOM Documents / CSS Media Queries 문서를 참고하며 복습.
🔍 문제와 해결
- 막힌 부분: DOM 요소 접근 시 특정 태그의 텍스트 및 이미지 속성이 바뀌지 않거나, 클릭 이벤트 판단 조건문의 문자열 비교에서 오타가 나는 부분 점검.
- 해결 방법:
e.target.textContent로 현재 버튼 텍스트 상태를 정확히 체크하고,querySelector()경로 선택자를 알맞게 지정하여 동적 교체 로직을 바르게 완성함.
🎯 다음에 할 일
-
@media (max-width: ...)구문을 활용하여 디바이스 크기별 배경색 및 폰트 변경 반응형 CSS 작성해보기 - JavaScript DOM 조작 로직에 CSS 클래스 추가/제거(
classList.toggle) 방식 적용해보기
성장중