<ul class="tabs">
  <li class="active">홈</li>
  <li>게시글</li>
  <li>포트폴리오</li>
  <li>문의</li>
</ul>

body { padding: 40px; }

.tabs {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.tabs li {
  padding: 14px 20px;
  color: #333;
  font-size: 18px;
  line-height: 1;
  background-color: #f8f8f8;
  position: relative;
  transition: color 0.3s ease;
  cursor: pointer;
}
.tabs li.active {
  color: royalblue;
}
.tabs li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: royalblue;
  transition: 0.3s;
  opacity: 0;
}
.tabs li:hover::after {
  width: 100%;
  opacity: 0.5;
}
.tabs li.active::after {
  width: 100%;
  opacity: 1;
}

const tabsEl = document.querySelector('.tabs')
const tabEls = tabsEl.querySelectorAll('li')

tabsEl.addEventListener('click', event => {
  if (event.target.closest('li')) {
    tabEls.forEach(el => el.classList.remove('active'))
    event.target.classList.add('active')
  }
})