이번에는 봉투 클릭시 편지가 보이게 하는 작업을 javascript로 진행해요!

<script>
    function open_letter() {
      document.getElementsByClassName("letter")[0].style.display = 'none';
      document.getElementsByClassName("letter-open")[0].style.display = 'block';
    }
  </script>

위 코드를 간단히 설명하자면! class 이름이 "letter" 라는 친구를 클릭한다면! display = 'none' 즉, 보이지 않게, "letter-open"이라는 친구를 클릭한다면! display = 'block' 즉, 보이게하라는 open_letter라는 이름을 가진 함수를 만든것입니다!

<div class="envelope" onclick = "open_letter()""></div>

편지 봉투에 위의 기능을 하는 함수를 넣어주면 되겠죠! 함수는 우리가 봉투를 클릭할때 발생해야하니까 onclick = "open_letter()"라고 작성합니다!

봉투에 마우스를 얹었을때 커서 모양이 pointer가 되어야 클릭하고싶은 마음이 생길거같죠?! 그래서

.envelope {
	 cursor: pointer;
}

를 작성해주어 커서가 봉투위로 올라갔을때 포인터 모양으로 바뀌도록 처리해주었습니다!

봉투 클릭 전 모습

봉투 클릭 후 모습

이번 강의에서는 간단한 js맛보기를 통해 봉투 클릭시 편지가 뜨게끔 작업을 해주었습니다!

다음 강의에서는 눈오는 효과를 넣어볼건데요!

눈오는 효과도 움직이는 동적인 효과이니 js를 이용하는건데! 다른사람들이 만든 효과를 가져와서 우리 편지에 붙여볼거에요!

다양한 라이브러리가 많으니 맘에드는 효과를 찾아서 사용하면 더 예쁘게 꾸밀수 있겠죠?