VS Code 네컷 사진 만들기

2023.02.01

 

VS Code 다운로드

https://code.visualstudio.com/Download

Download Visual Studio Code - Mac, Linux, Windows

 

• ! + Tab 으로 시작

 

• 클래스, 아이디 태그

<h1 class="myclass">나는 클래스 태그입니다.</h1>
<h1 id="myid">나는 아이디 태그입니다.</h1>

<style>
/* . + class명 */
    .myclass {
        color: red;
        background-color: beige;
    }
    
/* # + id명 */
    #myid {
        color: white;
        background-color: black;
    }
</style>

 

• 폰트 적용하기 ( 이서윤체 )

@font-face {
  font-family: "LeeSeoyun";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

 

• 가로 너비 설정하기 (내부 콘텐츠에 딱 맞게)

width: fit-content;

 

• 이미지 설명 가운데 아래로 내리기

.photo-frame {
	position: relative;
}

.photo-description {
  position: absolute;
  bottom: 0;
  transform: translate(-50%);
  left: 50%;
}

 

• 유튜브 동영상 가져오기

<div class="photo-frame">
	<iframe
		src=""
    frameborder="0"
	></iframe>
</div>

src 속성은 해당 동영상 공유 > 퍼가기 > src 속성만 복사

 

• 마우스 오버 효과, 클릭 효과 (onmouseover, onmouseout, onclick)

<div id="image1" class="photo-frame"
onmouseover="hideText(1)"
onmouseout="showText(1)"
onclick="alertText(1)">

.showText {
/* opacity : 투명도 0% (보인다) */
	opacity: 0;
}

.hideText {
/* opacity : 투명도 100% (안보인다) */
	opacity: 1;
/* 0.5초동안 천천히 나타나는 효과 */
  transition: opacity 0.5s linear;
}

// 텍스트가 보여지는 기능
// 1. 몇 번째 사진에 마우스가 올라갔는지 확인(if문)
// 2. 해당 사진을 찾아 hideText class를 지워주고, showText는 삽입해줌
function showText(number) {
  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 {
    document.querySelector("#desc3").classList.remove("hideText");
    document.querySelector("#desc3").classList.add("showText");
  }
}

// 텍스트가 감춰지는 기능
// 1. 몇 번째 사진에서 마우스가 벗어났는지 확인(if문)
// 2. 해당 사진을 찾아 shotText class를 지워주고, hideText는 삽입해줌
function hideText(number) {
  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 {
    document.querySelector("#desc3").classList.remove("showText");
    document.querySelector("#desc3").classList.add("hideText");
  }
}

// 클릭 기능
// 1. 선택된 사진의 숫자를 가진 텍스트를 alert 형태로 출력해줌
function alertText(number) {
	alert(`${number}번째 추억이에요! 눌러주셔서 감사합니다 :)`);
}

cursor: pointer; //마우스가 사진 위로 올라가면 포인터 아이콘으로 바뀌도록