웹사이트 내에 랜덤으로 이미지 노출시키기

최근 만든 웹사이트(트위터 맛집 검색기 https://twitter-michelin-guide.netlify.app/)의 주 사용층이 아이돌 팬들이기 때문에, 초반에는 하루씩 돌려가면서 트친들이 좋아하는 아이돌 사진을 올려주었다. 그렇지만 세상은 넓고 아이돌은 많기 때문에 한번에 다 올려서 창이 새로고침 될때마다 다르게 띄워줘야겠다는 생각을 했다. (그럼 최애 찾으려고 새로고침도 많이하고 사이트 방문도 많이하고 읍읍..)

 

초보 개발자에게 웹사이트 개발은 구글링-복붙-고치기의 연속이 아닐까... 반박시 님들 말이 다 맞음. 내가 잘 몰라..

암튼 그렇게 구글링을 했는데,, 이게 언어도 다양하고 (개발 언어든, 말하는 언어든,,,) 쉽게 적용하기가 어렵더라...구요... 그래서 여러 코드 참고해서, 제가 돌렸을 때 잘 적용된 코드를 소개해볼게요..

 

언어는 HTML과 JavaScript를 사용했습니다.

 

1. HTML

- body 내에 적절한 위치에 img 태그를 넣어주세요.

- id를 설정해주세요. 이 아이디를 자바스크립트에서 찾아야 하니까요.

- src는 안 넣어두 됩니다. (만약에 넣는다면? 로딩화면처럼 그 이미지 반짝 뜨고 랜덤 이미지가 나타나는 기이한 현상을 볼 수 있읍니다..)

<div>
	<img id="randomImg" width = 330>
</div>

 

2. JavaScript 파일

- 아이돌 친구들이 참 많죠...? 모두 같은 뿌리에서 시작했어요 놀랍게도.

- 암튼 코드 설명

1) window.onload = showImage()

: 새로운 창이 열리면 showImage 함수를 실행시켜줄거예요

2) var backgroundImage

: 배열을 만들어서 그 안에 이미지들을 저장해줄거예요

: 로컬 주소를 쓰셔도 되고, 인터넷 링크를 사용하셔도 괜챦습니댜

3) 함수 만들기

: 앞서 만든 배열에 있는 이미지를 랜덤으로 뽑아서 보여줄 함수가 필요해요

: 저는 랜덤 숫자를 이미지의 길이를 가지고 뽑았는데, 배열 번호를 통해서 뽑으셔도 돼요

: 앞서 HTML 파일 속 이미지 태그 내에 적어준 아이디를 찾아가도록 해주시면 됩니다

window.onload = showImage;

var backgroundImage = [
	'./random_image/강승윤.jpg',
	'./random_image/송민호.jpg',
	'./random_image/아낙네.jpg',
	'./random_image/위너.jpg',
	'./random_image/이장준.jpg',
	'./random_image/임창균.jpg',
	'./random_image/홍중.jpg',
	'./random_image/홍지수.jpg',
	'./random_image/휘영.jpg',
	'./random_image/원우.jpg',
	'./random_image/기범.jpg',
	'./random_image/윤현석.jpg',
	'./random_image/조슈아.jpg',
	'./random_image/최승철.jpg',
	'./random_image/도겸.jpg',
	'./random_image/용복.jpg',
	'./random_image/호싱이.jpg',
	'./random_image/채.jpg',
	'./random_image/이준.jpg'
];

function showImage(){
	var randomNum = Math.floor(Math.random() * backgroundImage.length); //이미지 랜덤으로 뽑아냄
	document.getElementById("randomImg").src = backgroundImage[randomNum];
};

---

그러면 이렇게, 새로고침 할때마다 이미지가 랜덤으로 바뀌는 것을 구현하실 수 있을거예여

수고하셨슴다