자바스크립트로 <div> 만들기

html에서 <div>의 부모를 생성한다.

<!-- 영화 목록 전체 div -->

<div class = movie-container-div>

<!-- 영화 목록 -- >

            <div class="movie-container> 

             <!--  내가 만들 태그의 위치 -->

            </div> 

      </div>

 

 

 

→ 자바스크립트에서 <div>를 생성한다.

const card = document.createElement('div');

let imgTag = document.createElement('img');
imgTag.src

= `https://image.tmdb.org/t/p/w300${movie.poster_path}`;
card.innerHTML = `<h4>${movie.original_title}</h4>`;
card.appendChild(imgTag);
 movieContainer.appendChild(card);

 

→  css 설정

/* 영화 목록 전체 div */

.movie-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
}

/* 영화 목록 */
.movie-container-div{
    text-align: center;
}

 

 

 

 

자바스크립트로 클래스명, 아이디에

이벤트도 부여하고..

반복문에 조건문에 이런 div태그도 만들고

참..

다재다능하네..

다음세상에는 너로 태어나고싶다