[JS][Udemy] pokemon game demo

[포케몬 API 주소를 이용해서 캐릭터 생성하기]

html & css

1. html 파일에서 h1태그로 제목 만들기
2. div 태그 (section) id container 지정하기
3. js파일 연결하기

 

JS

1. html파일의 container를 선택하고 포케몬 url 변수 만들기 
2. https://raw.githubusercontent.com/pokeapi/sprites/master/sprites/pokemon/
3. 반복문으로 30개의 포케몬 생성하는데
4. div, img, span 태그 만들고 div안에 img, span넣고 container안에 div를 넣기
5. img태그에서 url을 집어넣어야하는데 url마지막에 <1.png>와 같이 숫자를 붙여줘야하므로 리터럴 템플릿을 이용하여 반복문의 i와 연결시켜줌
6. 이미지 아래에 번호를 붙여주기위해서 리터럴 템플릿 이용
7. css부분에서 배치를 조정

 

 

[완성본]

 

[console창]

누가 부모이고 자식요소인지 파악할 것!