5/31

💡피드백

• 두괄식으로 말하기

  • 시간이 부족하니까 본론 먼저 말하기

• 의견을 정리한 자료 준비

  • 회의 진행 주제, 말할 내용을 요약된 텍스트로 준비

💡6월 월간 코딩

Js와 css 활용이 궁금해서 신청한 강의
image

💡주요 코드

.showText {
  opacity: 1;
  transition: opacity 0.5s linear;
}

.hideText {
  opacity: 0;
}

/* opacity : 투명도
opacity는 1에 가까워 질 수록 불투명.
반대로 0에 가까워 질 수록 투명.*/

/* transition : 전환 
0.5초동안 천천히 나타나는 효과. */

function showText(number) 
/* when you hover(or mouseover), showing text
 1. 조건문으로 몇 번째 사진에 마우스가 올라왔는지 확인
 2. 확인된 사진의 hideText 제거, showText 추가 */
  {
    if (number === 1) {
      document.querySelector("#desc1").classList.remove("hideText");
      document.querySelector("#desc1").classList.add("showText");
    } else if (number === 2) {
      document.querySelector("#desc2").classList.remove("hideText");
      document.querySelector("#desc2").classList.add("showText");
    } else if (number === 3) {
      document.querySelector("#desc3").classList.remove("hideText");
      document.querySelector("#desc3").classList.add("showText");
    } else {
      document.querySelector("#desc4").classList.remove("hideText");
      document.querySelector("#desc4").classList.add("showText");
    }
  }

  function hideText(number)
/* when you mouseout, cover up text
 1. 조건문으로 몇 번째 사진에서 마우스가 벗어났는지 확인
 2. 확인된 사진의 shotText class를 제거, hideText 추가 */ 
  {
    if (number === 1) {
      document.querySelector("#desc1").classList.remove("showText");
      document.querySelector("#desc1").classList.add("hideText");
    } else if (number === 2) {
      document.querySelector("#desc2").classList.remove("showText");
      document.querySelector("#desc2").classList.add("hideText");
    } else if (number === 3) {
      document.querySelector("#desc3").classList.remove("showText");
      document.querySelector("#desc3").classList.add("hideText");
    } else {
      document.querySelector("#desc4").classList.remove("showText");
      document.querySelector("#desc4").classList.add("hideText");
    }
  }

  function alertText(number) {
    alert(`저희의 ${number}번째 추억이에요! :)`);
  }
// 클릭하면 선택된 사진의 숫자를 가진 텍스트를 alert 형태로 출력