이벤트

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

1. 이벤트

자바스크립트에서 이벤트는 웹 페이지에서 발생하는 특정한 동작이나 사건을 의미합니다.

사용자의 마우스 클릭, 키보드 입력, 페이지 로딩 완료, AJAX 요청 완료 등과 같은 다양한 상황에서 이벤트가 발생할 수 있습니다. 웹브라우저나 사용자가 행하는 어떤 동작을 이벤트라 칭하며 웹 브라우저 내에 새로운 페이지를 불러오는것도 이벤트에 해당합니다. 웹문서 영역 내에서 이루어 지는 동작에 한해 이벤트라 하며 웹문서 영역을 벗어나 클릭하는 행위는 자바스크립트의 이벤트가 아닙니다.

1.1. 이벤트

:link:MDN

1.1.1. 마우스이벤트

이벤트 이름	설명
`click`	사용자가 요소를 클릭했을 때 발생합니다.
`dblclick`	사용자가 요소를 더블 클릭했을 때 발생합니다.
`mousedown`	사용자가 마우스 버튼을 눌렀을 때 발생합니다.
`mouseup`	사용자가 마우스 버튼을 놓았을 때 발생합니다.
`mousemove`	마우스 커서가 요소 위에서 움직일 때마다 발생합니다.
`mouseover`	마우스 커서가 요소 위로 이동하면 발생합니다. (하위 요소에 대해서도 반응)
`mouseenter`	마우스 커서가 요소 위로 이동하면 발생합니다. (하위 요소에 대해서는 반응하지 않음)
`mouseout`	마우스 커서가 요소 바깥으로 나갈 때 발생합니다. (하위 요소에 대해서도 반응)
`mouseleave`	마우스 커서가 요소 바깥으로 나갈 때 발생합니다.(하위 요소에 대해서는 반응하지 않음)

1.1.2. 키보드이벤트

이벤트 이름	설명
`keydown`	키보드의 키를 누르는 순간 발생합니다.
`keyup`	키보드의 키를 놓는 순간 발생합니다.
`keypress`	문자키가 눌렸을 때 발생합니다. ‘keydown’과 ’keyup’ 사이에서 발생하며, 특수키에는 반응하지 않습니다.

1.1.3. 문서로딩이벤트

이벤트 이름	설명
`DOMContentLoaded`	HTML 문서의 파싱이 완료되었고, DOM 트리가 완성되었을 때 발생합니다. 외부 리소스(images, stylesheets 등)의 로딩 상태와는 무관합니다.
`load`	페이지와 모든 관련 리소스(images, stylesheets 등)가 완전히 로드되었을 때 window 객체에서 발생합니다.
`beforeunload`	사용자가 페이지를 벗어나려 할 때 window 객체에서 발생합니다. 이를 활용하여 사용자에게 페이지를 벗어나지 않도록 경고할 수 있습니다.
`unload`	사용자가 페이지를 벗어났을 때 window 객체에서 발생합니다.
`resize`	문서 화면 크기가 바뀌었을때 이벤트가 발생합니다.
`scroll`	문서 화면이 스크롤 되었을때 이벤트가 발생합니다.

1.1.4. 폼이벤트

이벤트 이름	설명
`submit`	폼 데이터가 서버로 제출되기 전에 발생합니다. 이 이벤트의 기본 동작은 페이지를 새로고침하는 것이지만, preventDefault 메소드를 사용하여 중단할 수 있습니다.
`reset`	폼의 리셋 버튼이 클릭되었을 때 발생합니다.
`focus`	요소가 포커스를 받았을 때 발생합니다.
`blur`	요소가 포커스를 잃었을 때 발생합니다.
`change`	사용자가 입력 필드의 값을 변경하고 포커스를 잃었을 때 발생합니다.
`input`	사용자가 입력 필드에 값을 입력할 때마다 발생합니다.

1.2. 이벤트처리기

이벤트 처리기(event handler) 또는 이벤트 리스너(event listener)는 특정 이벤트가 발생했을 때 실행되는 함수를 말합니다.

웹 페이지에서 사용자의 상호작용(마우스 클릭, 키보드 입력 등) 또는 브라우저의 특정 동작(페이지 로딩, 이미지 로딩 완료 등)과 같은 이벤트가 발생하면, 그에 따른 반응을 처리하기 위해 이벤트 처리기를 사용합니다.

Info: 💡 이벤트 실행의 3가지 기본문법

html 속성으로 설정 ⇒ event handler
dom 프로퍼티로 설정 ⇒ event handler
addEventListener 메서드로 설정 ⇒event listener

Event Handler VS Event Listener

Event Handler ⇒ 이벤트가 발생했을 때 실행되는 함수
Event Listene r⇒ 이벤트를 "듣는" 역할을 하며, 해당 이벤트가 발생하면 지정된 핸들러 함수를 호출. addEventListener() 메서드를 사용해 추가 되며 하나의 요소에 여러개 추가 가능

1.2.1.HTML 속성으로 설정

<button onclick="console.log('Button clicked!')">Click me</button>

1.2.2.DOM 프로퍼티로 설정

document.querySelector("button").onclick = function () {
  console.log("Button clicked!");
};

1.2.3.메서드로 설정

addEventListener 메서드 사용 (추천) 여러 개의 이벤트 리스너를 동일한 요소와 이벤트에 대해 추가할 수 있습니다.

document.querySelector("button").addEventListener("click", function () {
  console.log("Button clicked!");
});

1.2.4. 버튼 클릭시 알림창표시하기

HTML 속성으로 작성하기 ▶️ 실행화면

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>자바스크립트 이벤트</title>
    <link rel="stylesheet" href="css/function.css" />
  </head>
  <body>
    <ul>
      <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
      <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
      <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>
    </ul>
    <div id="result"></div>
  </body>
</html>

css

a:link,
a:visited {
  color: black;
  text-decoration: none;
}
ul {
  list-style: none;
  width: 500px;
  margin: 10px auto;
  padding: 0;
}
li {
  display: inline-block;
  width: 120px;
  border: 1px solid #ccc;
  padding: 10px 15px;
  font-size: 16px;
  text-align: center;
}
#result {
  width: 500px;
  height: 300px;
  margin: 30px auto;
  border: 2px solid #ccc;
  border-radius: 15px;
}
p {
  width: 80%;
  padding: 10px;
  line-height: 2em;
}

1.2.5. 버튼 클릭시 배경변경

Dom Property 로 작성하기 ▶️ 실행화면

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>자바스크립트 이벤트</title>
    <link rel="stylesheet" href="css/function.css" />
  </head>
  <body>
    <ul>
      <li><a href="#" onclick="changeBg('green')">Green</a></li>
      <li><a href="#" onclick="changeBg('orange')">Orange</a></li>
      <li><a href="#" onclick="changeBg('purple')">Purple</a></li>
    </ul>
    <div id="result"></div>
    <script>
      
    </script>
  </body>
</html>

css

a:link,
a:visited {
  color: black;
  text-decoration: none;
}
ul {
  list-style: none;
  width: 500px;
  margin: 10px auto;
  padding: 0;
}
li {
  display: inline-block;
  width: 120px;
  border: 1px solid #ccc;
  padding: 10px 15px;
  font-size: 16px;
  text-align: center;
}
#result {
  width: 500px;
  height: 300px;
  margin: 30px auto;
  border: 2px solid #ccc;
  border-radius: 15px;
}
p {
  width: 80%;
  padding: 10px;
  line-height: 2em;
}

function changeBg(color) {
  const result = document.querySelector("#result");
  result.style.backgroundColor = color;
}

1.2.6. 버튼 클릭시 상세설명 표시

EventListenter Method 로 작성하기 ▶️ 시작화면 아래의 코드를 복사하여 시작하겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>자바스크립트 이벤트</title>
    <link rel="stylesheet" href="css/event.css" />
  </head>

  <body>
    <div id="item">
      <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />
      <button class="over" id="open">상세 설명 보기</button>
      <div id="desc" class="detail">
        <h4>이벤트 처리기(event handler)</h4>
        <p>
          이벤트 처리기(event handler) 또는 이벤트 리스너(event listener)는 특정
          이벤트가 발생했을 때 실행되는 함수를 말합니다. 웹 페이지에서 사용자의
          상호작용(마우스 클릭, 키보드 입력 등) 또는 브라우저의 특정 동작(페이지
          로딩, 이미지 로딩 완료 등)과 같은 이벤트가 발생하면, 그에 따른 반응을
          처리하기 위해 이벤트 처리기를 사용합니다.
        </p>
        <button id="close">상세 설명 닫기</button>
      </div>
    </div>
    <script>
      //스크립트 작성
    </script>
  </body>
</html>

#item {
  position: relative;
  width: 500px;
  height: auto;
  padding: 15px 20px;
  margin: auto;
}
button {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 5px;
  border: 1px solid #ccc;
  font-size: 0.8em;
}
.over {
  position: absolute;
  left: 30px;
  bottom: 30px;
}
.detail {
  width: 400px;
  text-align: left;
  line-height: 1.8;
  display: none;
}

▶️ 실행화면

script

function showDetail() {
  document.querySelector("#desc").style.display = "block"; // 상세 설명 부분을 화면에 표시
  document.querySelector("#open").style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤
}

function hideDetail() {
  document.querySelector("#desc").style.display = "none"; // 상세 설명 부분을 화면에서 감춤
  document.querySelector("#open").style.display = "block"; // '상세 설명 보기' 단추를 화면에 표시
}

여기까지 작성후 메소드를 이용한 방식을 사용하여 이벤트핸들러를 작성해보세요

1.2.7. 버튼클릭시 글자변경 문제

Info: 💡 ▶️ 실행화면

주어진 코드를 활용하여 세가지 방법으로 이벤트 핸들러를 작성해보세요.

요소를 변수로 지정 & 미리 만든 함수 사용
요소를 따로 변수로 만들지 않고 사용
직접 함수를 선언

아래의 코드를 복사하여 시작합니다.

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>자바스크립트 이벤트</title>
    <link rel="stylesheet" href="css/function.css" />
  </head>
  <body>
    <button id="change">글자색 바꾸기</button>
    <p>
      Reprehenderit tempor do quis sunt eu et exercitation deserunt. Laboris
      adipisicing est sint aliquip nulla pariatur velit irure elit qui id.
      Dolore aliquip dolore eu ut irure sint Lorem reprehenderit velit. Duis
      veniam irure cillum anim excepteur culpa pariatur sunt esse. Eu nulla
      commodo velit ex id dolore incididunt mollit incididunt nisi labore culpa
      qui ea. Commodo veniam veniam in ipsum ad minim occaecat qui pariatur
      adipisicing laborum quis.
    </p>

    <script></script>
  </body>
</html>

css

a:link,
a:visited {
  color: black;
  text-decoration: none;
}
ul {
  list-style: none;
  width: 500px;
  margin: 10px auto;
  padding: 0;
}
li {
  display: inline-block;
  width: 120px;
  border: 1px solid #ccc;
  padding: 10px 15px;
  font-size: 16px;
  text-align: center;
}
#result {
  width: 500px;
  height: 300px;
  margin: 30px auto;
  border: 2px solid #ccc;
  border-radius: 15px;
}
p {
  width: 80%;
  padding: 10px;
  line-height: 2em;
}

요소를 변수로 지정 & 미리 만든 함수 사용

let changeBttn = document.querySelector(‘#change’);
changeBttn.onclick = changeColor;

function changeColor() {
document.querySelector(‘p’).style.color = ‘#f00’;
}

요소를 따로 변수로 만들지 않고 사용

document.querySelector("#change").onclick = changeColor;
function changeColor() {
  document.querySelector("p").style.color = "#f00";
}

직접 함수를 선언

document.querySelector("#change").onclick = function () {
  document.querySelector("p").style.color = "#f00";
};

2. 마무리문제

2.1. ▶️ 실행화면

🔗1.2.6예제 를 응용하여 상세설명을 열고 닫는 함수를 DOM 방식으로 수정해 보세요.

2.2. ▶️ 실행화면

다음 조건을 참고하여 매개변수로 전달받은 두수의 값이 같으면 곱하고 다르면 더하는 함수 sumMulti() 를 작성하세요. 그후 인자로 5,10 을 전달할때와 10,10 을 전달할때의 실행결과를 콘솔창에 표시하세요.

Info: 💡 조건

함수의 선언은 function sumMulti(x,y) 로 합니다.
if~else 문을 사용하여 두수의 값을 비교합니다.
값의 비교시 비교연산자는 === 를 사용합니다.

2.3. ▶️ 실행화면

프롬프트 창에서 두수를 입력받아 크기를 서로 비교한 후 더 큰 숫자를 알림창으로 표시하는 함수를 작성하세요. 그후 인자로 5,10 을 전달할때와 10,10 을 전달할때의 실행결과를 콘솔창에 표시하세요.

Info: 💡 조건

프롬프트 창에서 입력받은 두수를 각각 num1, num2 변수에 저장합니다.
함수 선언시 함수명은 자유롭게 지정하고 매개변수는 2개를 사용합니다.
if~else 문을 사용하며 값의 비교시 비교연산자는 === 를 사용합니다.
두수가 같을경우 ‘같습니다’ 를 출력합니다.

이벤트

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

1. 이벤트

자바스크립트에서 이벤트는 웹 페이지에서 발생하는 특정한 동작이나 사건을 의미합니다.

1.1. 이벤트

:link:MDN

1.1.1. 마우스이벤트

이벤트 이름	설명
`click`	사용자가 요소를 클릭했을 때 발생합니다.
`dblclick`	사용자가 요소를 더블 클릭했을 때 발생합니다.
`mousedown`	사용자가 마우스 버튼을 눌렀을 때 발생합니다.
`mouseup`	사용자가 마우스 버튼을 놓았을 때 발생합니다.
`mousemove`	마우스 커서가 요소 위에서 움직일 때마다 발생합니다.
`mouseover`	마우스 커서가 요소 위로 이동하면 발생합니다. (하위 요소에 대해서도 반응)
`mouseenter`	마우스 커서가 요소 위로 이동하면 발생합니다. (하위 요소에 대해서는 반응하지 않음)
`mouseout`	마우스 커서가 요소 바깥으로 나갈 때 발생합니다. (하위 요소에 대해서도 반응)
`mouseleave`	마우스 커서가 요소 바깥으로 나갈 때 발생합니다.(하위 요소에 대해서는 반응하지 않음)

1.1.2. 키보드이벤트

이벤트 이름	설명
`keydown`	키보드의 키를 누르는 순간 발생합니다.
`keyup`	키보드의 키를 놓는 순간 발생합니다.
`keypress`	문자키가 눌렸을 때 발생합니다. ‘keydown’과 ’keyup’ 사이에서 발생하며, 특수키에는 반응하지 않습니다.

1.1.3. 문서로딩이벤트

이벤트 이름	설명
`DOMContentLoaded`	HTML 문서의 파싱이 완료되었고, DOM 트리가 완성되었을 때 발생합니다. 외부 리소스(images, stylesheets 등)의 로딩 상태와는 무관합니다.
`load`	페이지와 모든 관련 리소스(images, stylesheets 등)가 완전히 로드되었을 때 window 객체에서 발생합니다.
`beforeunload`	사용자가 페이지를 벗어나려 할 때 window 객체에서 발생합니다. 이를 활용하여 사용자에게 페이지를 벗어나지 않도록 경고할 수 있습니다.
`unload`	사용자가 페이지를 벗어났을 때 window 객체에서 발생합니다.
`resize`	문서 화면 크기가 바뀌었을때 이벤트가 발생합니다.
`scroll`	문서 화면이 스크롤 되었을때 이벤트가 발생합니다.

1.1.4. 폼이벤트

이벤트 이름	설명
`submit`	폼 데이터가 서버로 제출되기 전에 발생합니다. 이 이벤트의 기본 동작은 페이지를 새로고침하는 것이지만, preventDefault 메소드를 사용하여 중단할 수 있습니다.
`reset`	폼의 리셋 버튼이 클릭되었을 때 발생합니다.
`focus`	요소가 포커스를 받았을 때 발생합니다.
`blur`	요소가 포커스를 잃었을 때 발생합니다.
`change`	사용자가 입력 필드의 값을 변경하고 포커스를 잃었을 때 발생합니다.
`input`	사용자가 입력 필드에 값을 입력할 때마다 발생합니다.

1.2. 이벤트처리기

이벤트 처리기(event handler) 또는 이벤트 리스너(event listener)는 특정 이벤트가 발생했을 때 실행되는 함수를 말합니다.

Info: 💡 이벤트 실행의 3가지 기본문법

html 속성으로 설정 ⇒ event handler
dom 프로퍼티로 설정 ⇒ event handler
addEventListener 메서드로 설정 ⇒event listener

Event Handler VS Event Listener

Event Handler ⇒ 이벤트가 발생했을 때 실행되는 함수
Event Listene r⇒ 이벤트를 "듣는" 역할을 하며, 해당 이벤트가 발생하면 지정된 핸들러 함수를 호출. addEventListener() 메서드를 사용해 추가 되며 하나의 요소에 여러개 추가 가능

1.2.1.HTML 속성으로 설정

<button onclick="console.log('Button clicked!')">Click me</button>

1.2.2.DOM 프로퍼티로 설정

document.querySelector("button").onclick = function () {
  console.log("Button clicked!");
};

1.2.3.메서드로 설정

addEventListener 메서드 사용 (추천) 여러 개의 이벤트 리스너를 동일한 요소와 이벤트에 대해 추가할 수 있습니다.

document.querySelector("button").addEventListener("click", function () {
  console.log("Button clicked!");
});

1.2.4. 버튼 클릭시 알림창표시하기

HTML 속성으로 작성하기 ▶️ 실행화면

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>자바스크립트 이벤트</title>
    <link rel="stylesheet" href="css/function.css" />
  </head>
  <body>
    <ul>
      <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
      <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
      <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>
    </ul>
    <div id="result"></div>
  </body>
</html>

css

a:link,
a:visited {
  color: black;
  text-decoration: none;
}
ul {
  list-style: none;
  width: 500px;
  margin: 10px auto;
  padding: 0;
}
li {
  display: inline-block;
  width: 120px;
  border: 1px solid #ccc;
  padding: 10px 15px;
  font-size: 16px;
  text-align: center;
}
#result {
  width: 500px;
  height: 300px;
  margin: 30px auto;
  border: 2px solid #ccc;
  border-radius: 15px;
}
p {
  width: 80%;
  padding: 10px;
  line-height: 2em;
}

1.2.5. 버튼 클릭시 배경변경

Dom Property 로 작성하기 ▶️ 실행화면

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>자바스크립트 이벤트</title>
    <link rel="stylesheet" href="css/function.css" />
  </head>
  <body>
    <ul>
      <li><a href="#" onclick="changeBg('green')">Green</a></li>
      <li><a href="#" onclick="changeBg('orange')">Orange</a></li>
      <li><a href="#" onclick="changeBg('purple')">Purple</a></li>
    </ul>
    <div id="result"></div>
    <script>
      
    </script>
  </body>
</html>

css

a:link,
a:visited {
  color: black;
  text-decoration: none;
}
ul {
  list-style: none;
  width: 500px;
  margin: 10px auto;
  padding: 0;
}
li {
  display: inline-block;
  width: 120px;
  border: 1px solid #ccc;
  padding: 10px 15px;
  font-size: 16px;
  text-align: center;
}
#result {
  width: 500px;
  height: 300px;
  margin: 30px auto;
  border: 2px solid #ccc;
  border-radius: 15px;
}
p {
  width: 80%;
  padding: 10px;
  line-height: 2em;
}

function changeBg(color) {
  const result = document.querySelector("#result");
  result.style.backgroundColor = color;
}

1.2.6. 버튼 클릭시 상세설명 표시

EventListenter Method 로 작성하기 ▶️ 시작화면 아래의 코드를 복사하여 시작하겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>자바스크립트 이벤트</title>
    <link rel="stylesheet" href="css/event.css" />
  </head>

  <body>
    <div id="item">
      <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />
      <button class="over" id="open">상세 설명 보기</button>
      <div id="desc" class="detail">
        <h4>이벤트 처리기(event handler)</h4>
        <p>
          이벤트 처리기(event handler) 또는 이벤트 리스너(event listener)는 특정
          이벤트가 발생했을 때 실행되는 함수를 말합니다. 웹 페이지에서 사용자의
          상호작용(마우스 클릭, 키보드 입력 등) 또는 브라우저의 특정 동작(페이지
          로딩, 이미지 로딩 완료 등)과 같은 이벤트가 발생하면, 그에 따른 반응을
          처리하기 위해 이벤트 처리기를 사용합니다.
        </p>
        <button id="close">상세 설명 닫기</button>
      </div>
    </div>
    <script>
      //스크립트 작성
    </script>
  </body>
</html>

#item {
  position: relative;
  width: 500px;
  height: auto;
  padding: 15px 20px;
  margin: auto;
}
button {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 5px;
  border: 1px solid #ccc;
  font-size: 0.8em;
}
.over {
  position: absolute;
  left: 30px;
  bottom: 30px;
}
.detail {
  width: 400px;
  text-align: left;
  line-height: 1.8;
  display: none;
}

▶️ 실행화면

script

function showDetail() {
  document.querySelector("#desc").style.display = "block"; // 상세 설명 부분을 화면에 표시
  document.querySelector("#open").style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤
}

function hideDetail() {
  document.querySelector("#desc").style.display = "none"; // 상세 설명 부분을 화면에서 감춤
  document.querySelector("#open").style.display = "block"; // '상세 설명 보기' 단추를 화면에 표시
}

여기까지 작성후 메소드를 이용한 방식을 사용하여 이벤트핸들러를 작성해보세요

1.2.7. 버튼클릭시 글자변경 문제

Info: 💡 ▶️ 실행화면

주어진 코드를 활용하여 세가지 방법으로 이벤트 핸들러를 작성해보세요.

요소를 변수로 지정 & 미리 만든 함수 사용
요소를 따로 변수로 만들지 않고 사용
직접 함수를 선언

아래의 코드를 복사하여 시작합니다.

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>자바스크립트 이벤트</title>
    <link rel="stylesheet" href="css/function.css" />
  </head>
  <body>
    <button id="change">글자색 바꾸기</button>
    <p>
      Reprehenderit tempor do quis sunt eu et exercitation deserunt. Laboris
      adipisicing est sint aliquip nulla pariatur velit irure elit qui id.
      Dolore aliquip dolore eu ut irure sint Lorem reprehenderit velit. Duis
      veniam irure cillum anim excepteur culpa pariatur sunt esse. Eu nulla
      commodo velit ex id dolore incididunt mollit incididunt nisi labore culpa
      qui ea. Commodo veniam veniam in ipsum ad minim occaecat qui pariatur
      adipisicing laborum quis.
    </p>

    <script></script>
  </body>
</html>

css

a:link,
a:visited {
  color: black;
  text-decoration: none;
}
ul {
  list-style: none;
  width: 500px;
  margin: 10px auto;
  padding: 0;
}
li {
  display: inline-block;
  width: 120px;
  border: 1px solid #ccc;
  padding: 10px 15px;
  font-size: 16px;
  text-align: center;
}
#result {
  width: 500px;
  height: 300px;
  margin: 30px auto;
  border: 2px solid #ccc;
  border-radius: 15px;
}
p {
  width: 80%;
  padding: 10px;
  line-height: 2em;
}

요소를 변수로 지정 & 미리 만든 함수 사용

let changeBttn = document.querySelector(‘#change’);
changeBttn.onclick = changeColor;

function changeColor() {
document.querySelector(‘p’).style.color = ‘#f00’;
}

요소를 따로 변수로 만들지 않고 사용

document.querySelector("#change").onclick = changeColor;
function changeColor() {
  document.querySelector("p").style.color = "#f00";
}

직접 함수를 선언

document.querySelector("#change").onclick = function () {
  document.querySelector("p").style.color = "#f00";
};

2. 마무리문제

2.1. ▶️ 실행화면

🔗1.2.6예제 를 응용하여 상세설명을 열고 닫는 함수를 DOM 방식으로 수정해 보세요.

2.2. ▶️ 실행화면

Info: 💡 조건

함수의 선언은 function sumMulti(x,y) 로 합니다.
if~else 문을 사용하여 두수의 값을 비교합니다.
값의 비교시 비교연산자는 === 를 사용합니다.

2.3. ▶️ 실행화면

Info: 💡 조건

프롬프트 창에서 입력받은 두수를 각각 num1, num2 변수에 저장합니다.
함수 선언시 함수명은 자유롭게 지정하고 매개변수는 2개를 사용합니다.
if~else 문을 사용하며 값의 비교시 비교연산자는 === 를 사용합니다.
두수가 같을경우 ‘같습니다’ 를 출력합니다.