[JavaScript] 실습 프로젝트 모음(2): 스타일 제어 및 이미지 다루기

하영(Emma)·2025년 4월 23일

JavaScript

목록 보기

7/8

15. 스타일 제어

JavaScript를 통해 HTML 요소의 스타일을 동적으로 변경할 수 있다.
이는 프론트엔드 인터랙션의 핵심 요소로, 사용자 경험을 향상시키는 데 중요한 역할을 한다.

스타일 제어 방법

CSS 스타일을 JavaScript로 수정할 수 있다.
방식: 요소.style.속성명 = "값" 또는 요소.style.cssText = "속성: 값; ...".
인라인 방식으로 적용되며 유지보수는 어렵지만 빠르게 적용 가능하다.

예제: 버튼 클릭 시 텍스트 색상과 크기 변경

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>스타일 제어</title>
</head>
<body>
  <span id="text">나의 스타일을 변경해줘!!</span>
  <button id="btn">스타일 변경하기!</button>

  <script>
    const change = () => {
      document.getElementById("text").style.cssText = "color: pink; font-size: 50px";
    };

    document.getElementById("btn").addEventListener("click", change);
  </script>
</body>
</html>

실습 포인트

속성 접근은 .style.속성명 또는 .style.cssText
단순 스타일 제어 시는 인라인 방식도 유효
유지보수 관점에서는 클래스 제어를 추천 (classList.add/remove)

16. 이미지 다루기 (Image)

HTML에서 이미지를 삽입하거나 JavaScript로 동적으로 제어할 수 있다.

기본 이미지 삽입 (HTML 태그)

<img src="이미지경로.jpg" alt="대체텍스트" width="300">

속성	설명
`src`	이미지 경로
`alt`	대체 텍스트 (이미지 실패 시)
`width`	너비 지정

예시:

<img src="https://via.placeholder.com/300x200" alt="예시 이미지" width="300">

JS로 이미지 속성 변경

<img id="myImg" src="cat.jpg" alt="고양이" width="200">
<button onclick="changeImage()">이미지 변경</button>

<script>
  function changeImage() {
    document.getElementById("myImg").src = "dog.jpg";
  }
</script>

버튼 클릭 시 이미지가 변경된다 (src 속성 수정).

JS로 이미지 생성 및 삽입

<button onclick="addImage()">이미지 추가</button>
<div id="container"></div>

<script>
  function addImage() {
    const img = document.createElement("img");
    img.src = "https://via.placeholder.com/150";
    img.alt = "동적으로 생성된 이미지";
    img.width = 150;

    document.getElementById("container").appendChild(img);
  }
</script>