11. 웹페이지 조종하기 (DOM 조작)/11.2 요소 조작하기

11.2.2 스타일 바꾸기 - 웹페이지에 옷을 입혀주기

thejavascript4kids 2025. 7. 15. 03:07

📘 11.2.2 스타일 바꾸기 - 웹페이지에 옷을 입혀주기

웹페이지의 요소들을 찾는 법을 배웠으니, 이제는 그들에게 아름다운 옷을 입혀드릴 시간입니다. 마치 계절이 바뀔 때마다 우리가 옷장에서 다른 옷을 꺼내 입듯이, 웹페이지의 요소들도 코드 한 줄로 순식간에 새로운 모습으로 변할 수 있답니다.

화면 속 글자들이 갑자기 붉은색으로 물들거나, 버튼이 파란 하늘색으로 변하는 순간을 상상해보세요. 그런 변화가 여러분의 손끝에서 시작되어 화면 위로 스며드는 것입니다.

🧠 새로운 단어들과 친해지기

스타일의 세계로 들어가기 전에, 함께 걸어갈 단어들을 만나보겠습니다.

단어 쉬운 설명
style HTML 요소의 모양, 색깔, 크기를 바꾸는 도구예요.
color 글자의 색깔을 정해주는 특별한 명령어예요.
backgroundColor 요소의 배경색을 칠해주는 명령어예요.
display 요소를 보이게 하거나 숨겨주는 특별한 명령어예요.

style이라는 단어는 우리가 일상에서도 자주 사용하지요. "네 스타일이 멋지다"라고 말할 때처럼, 웹페이지에서도 각 요소만의 독특한 스타일을 만들어줄 수 있습니다.

✨ 스타일 바꾸기의 핵심 개념

처음 태어난 웹페이지는 하얀 도화지 위에 검은 글씨로만 이루어진 소박한 모습입니다. 하지만 자바스크립트의 style 속성을 통해, 우리는 이 단조로운 세상에 색채를 불어넣을 수 있습니다.

글자의 색을 바꾸고, 배경에 다른 색을 칠하고, 때로는 요소를 잠시 숨겨두었다가 다시 나타나게 하는 일들이 모두 가능합니다. 사용자가 마우스를 움직이거나 버튼을 누르는 순간, 화면은 살아있는 듯 반응하며 변화합니다.

가장 놀라운 것은 이 모든 변화가 실시간으로 일어난다는 점입니다. 코드를 실행하는 순간, 즉시 우리 눈앞에서 변화가 펼쳐지는 것이지요.

재미있는 비유: 미술시간의 색칠 도구

어린 시절 미술시간을 떠올려보세요. 처음에는 연필로 그린 윤곽선만 있는 그림이었지만, 색연필과 물감을 사용하면서 그림에 생명이 깃들었습니다.

"이 장미꽃을 빨간색으로 칠해볼까요?" 하고 빨간 색연필을 집어들면, 그 순간 장미는 빨간 꽃잎을 얻게 됩니다. "하늘은 파란색이 어울리겠네요." 하고 파란 물감을 붓에 묻히면, 하늘이 맑은 파란색으로 변합니다.

자바스크립트의 style도 그런 색칠 도구와 같습니다. 코드로 "이 글자를 빨간색으로 만들어주세요"라고 요청하면, 웹페이지의 글자가 즉시 빨간색으로 변합니다. "이 버튼을 노란색으로 칠해주세요"라고 하면, 버튼이 따뜻한 노란색을 입게 됩니다.

🎯 스타일 바꾸기를 배우는 이유

만약 웹페이지가 모두 검은 글씨와 하얀 배경으로만 이루어져 있다면, 얼마나 삭막할까요? 스타일 바꾸기를 익히면, 여러분의 웹페이지가 생동감 넘치는 공간으로 변할 수 있습니다.

중요한 정보는 눈에 띄는 색으로 강조하여 사용자의 시선을 자연스럽게 이끌고, 버튼들은 아름다운 색채로 꾸며 클릭하고 싶은 마음이 들게 만들 수 있습니다. 또한 상황에 따라 정보를 잠시 숨겨두었다가 필요한 순간에만 보여주는 것도 가능합니다.

무엇보다 사용자가 웹페이지와 상호작용할 때마다 색깔과 모양이 변하는 살아있는 경험을 선사할 수 있습니다. 마치 터치할 때마다 반응하는 스마트폰 화면처럼, 웹페이지도 그런 반응형 인터페이스로 만들 수 있는 것입니다.

⚙️ 기본 문법 살펴보기

스타일을 바꾸는 문법은 의외로 간단합니다. 먼저 바꾸고 싶은 요소를 찾고, 그 요소의 style 속성에 원하는 변화를 적어주면 됩니다.

// 기본 구조
찾은요소.style.스타일이름 = "새로운값";

자주 사용하는 스타일들:

// 글자색 바꾸기
요소.style.color = "red";

// 배경색 바꾸기  
요소.style.backgroundColor = "yellow";

// 요소 숨기기
요소.style.display = "none";

// 요소 다시 보이기
요소.style.display = "block";

여기서 하나 기억해둘 것이 있습니다. CSS에서는 background-color처럼 하이픈을 사용하지만, 자바스크립트에서는 backgroundColor처럼 낙타 등 모양으로 써야 합니다. 낙타의 등처럼 올록볼록하다고 해서 붙여진 이름이지요.

🧪 직접 해보면서 배우기

이제 구체적인 예시를 통해 스타일 바꾸기가 어떻게 동작하는지 살펴보겠습니다.

🔹 첫 번째 예시: 제목의 색깔 바꾸기

웹페이지의 제목을 찾아서 색깔을 바꿔보는 첫 번째 시도입니다.

// ID가 "pageTitle"인 제목 요소를 찾아요
let titleElement = document.getElementById("pageTitle");

// 제목의 글자색을 빨간색으로 바꿔요
titleElement.style.color = "red";

// 제목의 배경색을 노란색으로 바꿔요
titleElement.style.backgroundColor = "yellow";

// 완료 메시지를 콘솔에 출력해요
console.log("제목이 빨간 글씨에 노란 배경으로 바뀌었어요!");

이 코드를 실행하면, 제목이 마치 형광펜으로 표시한 것처럼 눈에 띄게 변합니다. 먼저 요소를 찾고, 글자색을 설정하고, 배경색을 칠하는 과정이 차례로 진행됩니다. 마지막에는 작업이 완료되었음을 알리는 메시지도 출력하지요.

🔹 두 번째 예시: 메시지 숨기기와 다시 보이기

이번에는 메시지를 마술처럼 사라지게 했다가 다시 나타나게 해보겠습니다.

// ID가 "message"인 메시지 요소를 찾아요
let messageElement = document.getElementById("message");

// 메시지를 숨겨요 (마치 투명 망토를 입는 것처럼!)
messageElement.style.display = "none";
console.log("메시지가 사라졌어요! 🫥");

// 다시 보이게 해요
messageElement.style.display = "block";
console.log("메시지가 다시 나타났어요! ✨");

display 속성을 "none"으로 설정하면 요소가 완전히 사라지고, "block"으로 바꾸면 다시 나타납니다. 마치 숨바꼭질을 하는 것 같지요? 이런 기능은 사용자에게 필요한 정보만 골라서 보여줄 때 매우 유용합니다.

🔹 세 번째 예시: 버튼을 예쁘게 꾸미기

마지막으로 평범한 버튼을 사용자가 클릭하고 싶어할 만큼 매력적으로 꾸며보겠습니다.

// ID가 "myButton"인 버튼 요소를 찾아요
let buttonElement = document.getElementById("myButton");

// 버튼을 멋지게 꾸며봐요!
buttonElement.style.color = "white";           // 글자는 흰색으로
buttonElement.style.backgroundColor = "blue";  // 배경은 파란색으로
buttonElement.style.fontSize = "20px";         // 글자 크기는 크게

// 어떻게 바뀌었는지 확인해 봐요
console.log("버튼이 멋지게 변신했어요!");
console.log("- 글자색: 흰색 ⚪");
console.log("- 배경색: 파란색 🔵");
console.log("- 글자크기: 20px 📏");

여러 스타일을 동시에 적용하면 평범한 버튼이 전문적이고 세련된 모습으로 변신합니다. 흰색 글자에 파란 배경, 그리고 큰 글자 크기가 조화를 이루어 사용자의 눈길을 사로잡는 버튼이 완성됩니다.

🔄 스타일 바꾸기 과정 정리

지금까지 배운 내용을 차분히 정리해보겠습니다.

첫 번째 단계는 요소 찾기입니다. getElementById나 다른 방법으로 꾸미고 싶은 요소를 찾아 변수에 담아둡니다. 두 번째 단계는 스타일 계획 세우기입니다. 어떤 색으로, 어떤 크기로 바꿀지 미리 생각해보는 시간이지요.

세 번째 단계는 스타일 적용하기입니다. .style.속성이름 = "값" 형태로 원하는 스타일을 실제로 적용하는 과정입니다. 네 번째 단계는 결과 확인하기입니다. 웹페이지에서 실제로 변화가 일어났는지 확인하고, 필요하다면 console.log로 완료 메시지도 남깁니다.

마지막 단계는 세부 조정입니다. 첫 번째 시도가 만족스럽지 않다면, 다른 색이나 크기로 바꿔가며 가장 아름다운 모습을 찾아가는 과정입니다.

🧚‍♀️ 이야기로 다시 배우기: 학교 미술시간의 변신 프로젝트

배운 내용을 하나의 이야기로 되짚어보겠습니다.

어느 날 미술시간에 선생님이 모든 학생들에게 똑같이 생긴 하얀 종이 인형을 나누어주었습니다. 모든 인형은 검은 선으로만 그려져 있어 구별하기 어려웠습니다.

"이제 여러분만의 특별한 색칠로 인형을 꾸며보세요."라고 선생님이 말씀하셨습니다.

한 학생은 빨간 색연필로 인형의 옷을 칠했습니다. 다른 학생은 노란 물감으로 인형 주변의 배경을 칠했습니다. 또 다른 학생은 지우개로 인형을 잠깐 숨겼다가 다시 나타나게 하는 신기한 기법을 보여주었습니다.

그런데 한 학생이 특별한 스마트 붓을 가져왔습니다. 이 붓은 "빨간색으로 칠해줘"라고 말하기만 하면 자동으로 빨간색으로 칠해주고, "숨겨줘"라고 하면 그림을 잠깐 보이지 않게 만드는 놀라운 도구였습니다.

웹페이지의 스타일 바꾸기도 바로 이런 스마트 붓과 같습니다. 코드로 명령만 내리면 요소들이 즉시 원하는 색깔과 모양으로 변신하는 것이지요.

🧠 자주 하는 실수와 주의할 점

스타일을 바꿀 때 쉽게 실수할 수 있는 부분들을 미리 알아두면 더욱 안전하게 코딩할 수 있습니다.

❌ 실수 1: CSS 이름과 자바스크립트 이름 헷갈리기

// 잘못된 방법 - CSS 이름을 그대로 사용
element.style.background-color = "red"; // 에러가 발생해요!

// 올바른 방법 - 낙타 등 모양으로 변경
element.style.backgroundColor = "red";

CSS에서는 단어를 하이픈(-)으로 연결하지만, 자바스크립트에서는 하이픈 대신 낙타 등 모양을 사용합니다. background-color는 backgroundColor로, font-size는 fontSize로 바뀐다는 점을 기억해주세요.

❌ 실수 2: 스타일 값에 따옴표 깜빡하기

// 잘못된 방법 - 따옴표 없음
element.style.color = red; // red가 뭔지 모르겠다는 에러!

// 올바른 방법 - 따옴표로 감싸기
element.style.color = "red";

자바스크립트에서 색깔 이름이나 크기는 모두 문자열이므로 반드시 따옴표로 감싸야 합니다. 그렇지 않으면 컴퓨터가 변수 이름으로 오해하여 혼란스러워합니다.

❌ 실수 3: 존재하지 않는 요소에 스타일 적용하려고 하기

// 위험한 방법 - 요소가 없을 수도 있어요
let element = document.getElementById("notExist");
element.style.color = "red"; // 요소가 없으면 에러!

// 안전한 방법 - 먼저 확인하기
let element = document.getElementById("myElement");
if (element) {
    element.style.color = "red";
} else {
    console.log("요소를 찾을 수 없어요!");
}

가끔 잘못된 ID를 사용하거나 요소가 아직 생성되지 않았을 때 이런 오류가 발생합니다. 항상 요소가 존재하는지 먼저 확인하는 습관을 기르는 것이 중요합니다.

✏️ 연습문제로 개념 다지기

하늘을 나는 새가 날개짓을 통해 비행을 익히듯, 우리도 연습을 통해 스타일 바꾸기를 체득해보겠습니다.

Ex1) 경고 메시지를 빨간색으로 강조해 보자

// ID가 "warning"인 경고 메시지를 찾아요.
let warningElement = document.getElementById("warning");

// 경고 메시지의 글자색을 빨간색으로 바꿔요
warningElement.style.color = "red";

// 작업 완료 메시지를 출력해요
console.log("경고 메시지가 빨간색으로 바뀌었어요!");

이 연습을 통해 기본적인 글자색 변경 방법을 자연스럽게 익힐 수 있습니다.

Ex2) 버튼을 파란 배경에 흰 글씨로 멋지게 꾸며보자

// ID가 "myButton"인 버튼을 찾아요
let buttonElement = document.getElementById("myButton");

// 버튼의 배경색을 파란색으로 바꿔요
buttonElement.style.backgroundColor = "blue";

// 버튼의 글자색을 흰색으로 바꿔요
buttonElement.style.color = "white";

// 작업 완료 메시지를 출력해요
console.log("버튼이 파란 배경에 흰 글씨로 변했어요!");

이 연습문제는 여러 스타일을 동시에 적용하는 방법을 익히는 데 도움이 됩니다.

Ex3) 메시지를 숨겼다가 다시 보이게 해보자

// ID가 "message"인 메시지를 찾아요
let messageElement = document.getElementById("message");

// 먼저 메시지를 숨겨요
messageElement.style.display = "none";
console.log("메시지가 숨었어요!");

// 다시 보이게 해요
messageElement.style.display = "block";
console.log("메시지가 다시 나타났어요!");

이 연습을 통해 요소의 표시와 숨김 기능을 자유자재로 다룰 수 있게 됩니다.

🤔 조금 더 어려운 문제로 실력 확인하기

기본 연습을 마쳤으니, 이제 조금 더 깊이 있는 문제들을 통해 스타일 바꾸기에 대한 이해를 점검해보겠습니다.

Q1. CSS의 background-color가 자바스크립트에서는 왜 backgroundColor가 되는지 초등학생도 이해할 수 있게 설명해보세요.

정답: 자바스크립트에서는 변수나 속성 이름에 하이픈(-)을 사용할 수 없기 때문입니다.

해설: 우리가 이름을 지을 때 특수문자를 쓸 수 없는 것처럼, 자바스크립트도 하이픈을 변수 이름에 사용할 수 없습니다. 그래서 background-color를 backgroundColor처럼 첫 글자는 소문자로, 나머지 단어의 첫 글자는 대문자로 쓰는 '낙타 등 모양' 방식을 사용합니다. 낙타의 등처럼 올록볼록해서 이런 이름이 붙었답니다.

Q2. 다음 코드에서 잘못된 부분 2곳을 찾고 올바르게 수정해보세요.

let element = document.getElementById("myDiv");
element.style.background-color = yellow;

정답: 두 곳에 문제가 있습니다.

해설: 첫 번째 문제는 background-color가 올바르지 않은 형태라는 것입니다. 자바스크립트에서는 backgroundColor로 써야 합니다. 두 번째 문제는 yellow에 따옴표가 없다는 것입니다. 색깔 이름은 문자열이므로 "yellow"로 써야 합니다.

올바른 코드:

let element = document.getElementById("myDiv");
element.style.backgroundColor = "yellow";

🔄 이전 단원 복습 - 함께 기억해요!

새로운 내용을 배우는 것도 중요하지만, 이전에 배운 내용들도 잊지 않도록 함께 되새겨보겠습니다.

🔁 복습 문제 1: DOM 요소 찾기 복습 (11.1단원 복습)

11.1단원에서 배운 요소 찾기 방법들을 활용해서 여러 요소의 스타일을 한 번에 바꿔보겠습니다.

// 11.1단원에서 배운 요소 찾기 방법들 복습하기
function changeMultipleStyles() {
    // getElementById로 특정 요소 찾기
    let title = document.getElementById("mainTitle");
    if (title) {
        title.style.color = "blue";
        title.style.fontSize = "24px";
        console.log("제목 스타일 변경 완료");
    }

    // getElementsByClassName으로 같은 클래스 요소들 찾기
    let buttons = document.getElementsByClassName("action-btn");
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].style.backgroundColor = "green";
        buttons[i].style.color = "white";
        console.log((i + 1) + "번째 버튼 스타일 변경");
    }

    // querySelector로 첫 번째 단락 찾기
    let firstParagraph = document.querySelector("p");
    if (firstParagraph) {
        firstParagraph.style.backgroundColor = "lightgray";
        console.log("첫 번째 단락 배경색 변경");
    }

    console.log("모든 스타일 변경 완료!");
}

// 스타일 변경 함수 실행하기
changeMultipleStyles();

해답 설명: 이전에 배운 세 가지 요소 찾기 방법을 모두 사용해서 각각 다른 스타일을 적용했습니다. 이렇게 하면 요소 찾기와 스타일 변경을 동시에 연습할 수 있습니다.

🔁 복습 문제 2: 조건문과 함께 사용하기 (3단원 복습)

3단원에서 배운 조건문을 활용해서 상황에 따라 다른 스타일을 적용해보겠습니다.

// 3단원에서 배운 조건문과 스타일 변경 결합하기
function applyConditionalStyles() {
    let number = 5;  // 간단한 숫자 비교
    let bodyElement = document.querySelector("body");

    if (number > 10) {
        // 10보다 클 때
        bodyElement.style.backgroundColor = "lightgreen";
        console.log("숫자가 10보다 크네요! 초록색 테마를 적용했어요.");
    } else if (number > 5) {
        // 5보다 크고 10보다 작거나 같을 때
        bodyElement.style.backgroundColor = "lightblue";
        console.log("숫자가 5보다 크네요! 파란색 테마를 적용했어요.");
    } else {
        // 5보다 작거나 같을 때
        bodyElement.style.backgroundColor = "lightgray";
        console.log("숫자가 5보다 작거나 같네요! 회색 테마를 적용했어요.");
    }

    // 메시지 요소에도 같은 조건 적용
    let message = document.getElementById("numberMessage");
    if (message) {
        if (number > 10) {
            message.textContent = "큰 숫자예요!";
            message.style.color = "green";
        } else if (number > 5) {
            message.textContent = "중간 숫자예요!";
            message.style.color = "blue";
        } else {
            message.textContent = "작은 숫자예요!";
            message.style.color = "gray";
        }
    }
}

// 조건에 따른 스타일 적용하기
applyConditionalStyles();

해답 설명: if...else if...else 조건문을 사용해서 숫자 값에 따라 다른 배경색과 메시지를 표시했습니다. 이렇게 하면 조건문과 스타일 변경을 함께 활용하는 방법을 익힐 수 있습니다.

웹페이지에 색채를 입혀주는 스타일 바꾸기의 세계를 모두 탐험해보았습니다. 이제 여러분도 웹페이지를 살아있는 듯 생동감 넘치게 꾸밀 수 있는 디자이너가 되었습니다. 다음 시간에는 요소의 속성을 바꾸는 또 다른 방법을 배워보겠습니다.

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용 이해했나요?
style 속성의 기본 개념 ✅
기본 사용법과 문법 ✅
주요 특징과 차이점 ✅
자주 하는 실수들 ✅
실전 예제 이해 ✅

🎯 추가 연습 문제들

더 많은 연습을 원하는 여러분을 위한 추가 문제들입니다.

추가 문제 1. ID가 "warning"인 요소의 글자색을 빨간색으로 바꿔보세요.

// 답:
let warningElement = document.getElementById("warning");
warningElement.style.color = "red";
console.log("경고 글자색을 빨간색으로 변경했어요");

추가 문제 2. 버튼의 배경색을 파란색으로, 글자색을 흰색으로 바꿔보세요.

// 답:
let buttonElement = document.getElementById("myButton");
buttonElement.style.backgroundColor = "blue";
buttonElement.style.color = "white";
console.log("버튼 스타일 변경 완료");

추가 문제 3. 메시지를 숨겼다가 다시 보이게 해보세요.

// 답:
let messageElement = document.getElementById("message");
messageElement.style.display = "none";
console.log("메시지 숨김");

messageElement.style.display = "block";
console.log("메시지 다시 보임");

추가 문제 4. CSS의 background-color가 JavaScript에서는 왜 backgroundColor가 되나요?

답: JavaScript에서는 하이픈(-)을 변수명에 사용할 수 없기 때문에 카멜케이스(camelCase)를 사용합니다. background-color는 backgroundColor로, font-size는 fontSize로 바뀝니다.

추가 문제 5. 다음 코드에서 잘못된 부분을 찾고 수정해보세요.

let element = document.getElementById("myDiv");
element.style.background-color = yellow;

답: 두 가지 문제가 있습니다. 올바른 코드:

let element = document.getElementById("myDiv");
element.style.backgroundColor = "yellow";

(background-color → backgroundColor, yellow → "yellow")

🔄 단계별 진행 과정 정리

지금까지 배운 내용을 단계별로 다시 한번 정리해보겠습니다.

1단계 과정: 요소 찾기 → 글자색 변경 → 배경색 변경 → 완료 확인

2단계 과정: 요소 찾기 → 숨기기 → 다시 보이기

3단계 과정: 요소 찾기 → 글자색 변경 → 배경색 변경 → 글자크기 변경 → 완료 확인

📂 마무리 정보

오늘 배운 11.2.2 내용이 여러분의 자바스크립트 지식 상자에 소중히 보관되었나요? 다음 시간에는 더욱 흥미로운 내용으로 찾아뵙겠습니다.

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.


🚀 더 체계적인 JavaScript 학습을 원하신다면?
이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼
📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작