티스토리 뷰

코드잇 스프린트/Daily Quiz

[코드잇 스프린트] 0325 데일리 퀴즈

무화과(Fig) 2024. 3. 25. 12:32

 

 

 

1. 다음 HTML 코드를 보고 문제를 해결해주세요.

<head>
    <style>
        .done {
            opacity: 0.5;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div id="main">
        <h2>음식</h2>
        <ul id="food_list">
            <li>햄버거</li>
            <li>치킨</li>
            <li>피자</li>
        </ul>
        <h2>나라</h2>
        <ul id="country_list">
            <li>한국</li>
            <li>일본</li>
            <li>미국</li>
            <li>영국</li>
        </ul>
    </div>
</body>

 


(1) 코드에서 1번과 2번의 접근 대상은?

const foodList = document.querySelector("#food_list");
const countryList = document.querySelector("#country_list");
// 1번
console.log(
    foodList.parentElement.children[2].nextElementSibling.children[2]
);
// 2번
console.log(
    countryList.parentElement.firstElementChild.nextElementSibling
        .children[1]
);

 

답:

1번: 미국

2번: 치킨

 


(2) 아래 코드에서 1, 2, 3번 중 done 클래스를 추가 하는 코드를 모두 고르시오

const foodList = document.querySelector("#food_list");
const item = foodList.children[0];

// 1번
item.classList.add("done");
// 2번
item.classList.toggle("done");
// 3번
item.classList.remove("done");

 

답: 1, 2

 

2. 이벤트 객체 프로퍼티의 공통 프로퍼티 type과 target에 대해서 설명하시오.

답:

type은 이벤트의 종류를 나타내는 프로퍼티다. 클릭, 마우스 오버 등 다양한 종류의 이벤트가 존재한다.

target은 이벤트가 발생한 요소를 나타내는 프로퍼티다.

 

정리하자면 type은 어떤 종류의 이벤트인지를 식별하고 target은 이벤트가 발생한 요소를 참조해서 해당 요소에 대한 조작을 할 수 있도록 도와준다.

 

+) 이외에도 currenTarget, timeStamp, bubbles 공통 프로퍼티가 존재한다.

 

- currenTarget: 이벤트 핸들러가 등록된 요소

- timeStamp: 이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초)

- bubbles: 버블링 단계인지를 판단하는 값

 

+) target과 currentTarget의 차이점

target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다.

하지만 currentTarget은 실제로 이벤트가 부착된 부모의 위치를 반환한다.

저작자표시

'코드잇 스프린트 > Daily Quiz' 카테고리의 다른 글

[코드잇 스프린트] 0328 데일리 퀴즈  (0) 2024.03.28
[코드잇 스프린트] 0327 데일리 퀴즈  (0) 2024.03.27
[코드잇 스프린트] 0323 데일리 퀴즈  (0) 2024.03.23
[코드잇 스프린트] 0322 데일리 퀴즈  (0) 2024.03.22
[코드잇 스프린트] 0321 데일리 퀴즈  (0) 2024.03.21