* {
  box-sizing: border-box;
  color: #fff;
}
ul {
  list-style: none;
}

section {
  padding: 30px;
  background: #2A3882;
}

ul {
  padding: 30px;
  background: #6D3AA0;
}

li {
  padding: 30px;
  background: #B6A930;
}

p {
  padding: 30px;
  background: #9B5031;
  color: #000;
}

.clicked {
  background: red !important;
}

const sectionEl = document.querySelector("section");
const ulEl = document.querySelector("ul");
const liEl = document.querySelector("li");
const pEl = document.querySelector("p");

const targetCheck = (e) => {
  alert(`e.target = ${e.target.tagName} 태그 / e.currentTarget = ${e.currentTarget.tagName} 태그`)
}

sectionEl.addEventListener("click", targetCheck)