포켓몬 데모

// https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png

const container = document.querySelector('#container');
const newImg = document.createElement('img');
const baseURL = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/'
container.appendChild(newImg)

for (let i = 1; i < 151; i++) {
    const pokemon = document.createElement('div');
    const label = document.createElement('span');
    label.innerText = `#${i}`
    const newImg = document.createElement('img');
    newImg.src = `${baseURL}${i}.png`

    pokemon.appendChild(newImg);
    pokemon.appendChild(label);
    container.appendChild(pokemon);
}

사용된 코드는 위와 같다 .

 

container id가 들어간 section 뒤에 appendChild를 해줘야 하니 변수를 지정하고

새로운 포켓몬 이미지가 들어갈 newImg 변수도 지정해준다. 

깃허브에서 가져온 이미지의 링크 맨 뒤의 1.png의 숫자는 포켓몬의 번호를 뜻한다. 

포켓몬 151마리를 모두 출력하기 위해선 1.png에서 151.png까지 반복문을 해줘야하니 반복문 i로 처리될 url을 제외한

나머지 url을 basURL로 지정하였다. 

 

html에 출력될 이미지의 기본 모양은

<div>
    <img src="" alt="">
    <span>number</span>
</div>

이므로 

div, img, span 변수를 모두 만들어준다. ( pokemon, newImg, label )

newImg의 링크가 될 src에는 `${baseURL}${i}.png` 를 이용하여 번호와 url을 이어주고

section 값 뒤에 자식값으로 div인 pokemon, img인 newImg, span인 label을 넣어주면 된다.

 

이후 이미지가 잘 정렬되게 하기 위해서 div는 inline-block , text-align : center 또한 img가 string과 위 아래로 정렬이 되어야 하기 때문에 img의 display를 block 처리 했다