자기소개 페이지 만들기

버튼 클릭시 명함에 앞, 뒤가 전환되는 기능 구현

function changeDisplay() {
  const icon = document.querySelector('#home_back');

  if(icon.style.display === 'none') {
    icon.style.display = 'inline-flex';
  } else {
    icon.style.display = 'none';
  }
}

1. main.js 파일에 function changeDisplay()라는 함수를 만들고,
   icon 이라는 변수에 document.querySelector 메서드를 사용해서 id가 home_back인 코드를 담았다.

2. if 문을 활용하여, icon.style.display가 'none' 일 경우 'inline-flex'로 바꿔주고, 아닐 경우 다시 'none'으로 바꿔주는 코드를 작성하였다.

3. 명함에 있는 이미지 아이콘이 클릭될 때마다 함수가 실행되게 구현하였다.

<button onclick="changeDisplay()"><i class="fas fa-undo"></i></button>

자기소개 페이지