자기소개 페이지를 만들어보았다.
아래에는 링크를 달아두어 블로그, 깃허브, 내가 키우는 강아지들 인스타그램으로 넘어간다!
여기서 넣고싶은 기능 두 가지가 있는데
1. 버튼 누르면 사진 바뀌기 기능
2. 좋아요 기능
우선 1번 기능부터 만들어보겠다.
1. 버튼 생성 및 디자인
<button class="togglebtn">📸</button>버튼은 간단하게 이모티콘을 넣어서 만들어주었다.
.togglebtn {
background-color: transparent;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
font-size: 25px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.togglebtn:hover {
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
transform: translateY(-5px);
}css로 꾸며주면?
마우스를 갖다대면 그림자 효과가 커지는 귀여운 버튼이 만들어졌다!
2. 버튼에 함수 연결하기
<button onclick="change()" class="togglebtn">📸</button>버튼에 change()함수를 달아주었다.
script 부분으로 가서 버튼에 함수가 잘 연결되었는지 alert기능으로 확인해보자!
<script>
function change() {
alert('함수 연결 성공');
}
</script>
굿굿. 잘 뜬다
3. 함수 작성하기
이제 내 사진이 담겨있는 영역을 가져와서 사진을 바꾸는 change 함수를 작성해야한다.
즉, html의 내 사진이 있는 영역에 id값을 주어
script영역의 change함수에서 사용할 수 있도록 하는 것이다.
id 값은 picture이라고 주었다.
아래 change()함수를 천천히 살펴보자.
<script>
function change() {
let picture = document.getElementById("picture");
console.log(picture);
}
</script> (1) let picture = document.getElementById("picture");
picture라는 id값을 가진 태그 자체를 picture라는 변수에 담은 것이다.
변수 값과 id값을 동일하게 설정해두어서 언뜻보면 헷갈릴 수도 있겠지만,
document.getElementById("id값") 이라는 구조를 익히면 이해하기 쉽다.
(2) console.log(picture);
변수에 img 태그가 잘 담겼는지 콘솔로그로 확인해보자.
웹 개발 할 때에는 코드 중간중간 콘솔로그를 많이 적어두어야지 어디서 오류가 생기는 건지 확인하기 쉬운 것 같다!
버튼을 누를 때마다 콘솔에 img 태그가 잘 출력되는 것을 볼 수 있다.
이제 태그가 잘 받아졌으니, img 태그에 있는 src를 변경하면 될 것 같다.
코드를 한 줄만 더 추가해보자.
<script>
function change() {
let picture = document.getElementById("picture");
console.log(picture);
picture.src="./images/리치.jpg";
}
</script>(3) picture.src="./images/리치.jpg";
img 태그가 담겨있는 picture 변수에 . 을 찍어서 요소들을 변경할 수 있다.
함수를 실행하면 기존의 src였던 이민정.jpg가 리치.jpg로 변경될 것이다.
저장하고 새로고침 해보면?
변수 값이 바뀌었기 때문에 콘솔로그와 사진 모두 잘 변경된 것을 볼 수 있다!
👏👏👏
하지만!!!! 사진이 되돌아가려면? 새로고침밖에 없나?....
그럼 여러 장의 사진이 바뀌게 하려면?....
단순히 변수에 저장하면 안 될 것 같다!
배열과 if문 활용하기
<script>
let images = ["./images/이민정.jpg", "./images/럭키.jpg", "./images/리치.jpg"];
let i = 0; //변수 초기화
function change() {
i++;
if(i>=images.length){
i=0;
}
console.log(images[i]);
let picture = document.getElementById("picture");
picture.src = images[i];
}
</script>조금 길어졌지만 천천히 살펴보자!
(1) let images = ["./images/이민정.jpg", "./images/럭키.jpg", "./images/리치.jpg"];
우선 사진 3장을 배열에 저장해준다.
let i=0; 에서 i는 배열의 index가 될 변수이다.
(2) i++; if(i>=images.length){i=0;}
-
change함수의 실행과 동시에 i가 하나 증가하면,
배열에 1번째에 있는 럭키.jpg가 출력될 것이고 -
그다음 change 함수가 실행되어 i가 하나 늘어나면,
배열에 2번째에 있는 리치.jpg가 출력될 것이다. -
만약 또 change 함수가 실행되어 i가 하나 증가하면?
배열을 한바퀴 돌았으니 다시 0번째 항목을 출력해야한다.
여기서 if문을 사용하여 i의 최댓값은 2가 되도록 제한해준 것이다.
(3) 콘솔로그를 통해 배열이 잘 돌아가는지 확인하고, 나머지는 기존 코드와 같다.
🪄 완성!
버튼을 누를 때마다 사진이 잘 바뀌는 것을 볼 수 있다!!!!!
