(JS)(Udemy) 포켓몬 게임 데모

(포켓몬 API 주소로 캐릭터 생성)


HTML 및 CSS

  1. HTML 파일에서 h1 태그로 제목 만들기
  2. div 태그(섹션) ID 컨테이너 지정
  3. js 파일 연결


JS

  1. HTML 파일의 컨테이너를 선택하고 Pokemon URL 변수를 만듭니다.
  2. https://raw.githubusercontent.com/pokeapi/sprites/master/sprites/pokemon/
  3. 루프로 30마리의 포켓몬을 만듭니다.
  4. div, img, span 태그 생성, img 포함, div의 범위 및 컨테이너의 div
  5. img 태그에 url을 넣어야 하는데 다음과 같이 숫자를 넣어야 합니다. <1.png> URL 끝에 있으므로 리터럴 템플릿을 사용하여 루프 문의 i에 연결합니다.
  6. 약어 템플릿을 사용하여 아래 이미지에 번호를 매기십시오.
  7. CSS 부분에서 레이아웃 조정

(완성된 버전)


(콘솔 창)


누가 부모이고 누가 자식인지 알아보십시오!