자바 배열(Array)을 활용하여 효울적이게 이미지 넣기 (6)

#자바배열 #자바style

​

​

웹사이트 디자인 소개 및 학습목표

디자인소개

패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리를 한 것 입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.

​

학습목표

1. 음악패널안의 이미지를 효율적이게 넣는 방법을 배워보자

1. 이미지 이름으로 배열을 만든 후 #style.backgroundImage를 활용할 것이다.

​

사용되는언어

HTML

• main>article>.inner>.pic 의 구조로 이미지가 들어갈 전체적인 틀을 만들 것이다.

​

CSS

• .pic의 모양을 잡아 줄 것이다. 우선은 정사각형까지만 구현하자

​

JS

• 이미지의 이름을 배열로 만들어서 한번에 패널로 넣을 것이다. style.backgroundImage를 활용할 것이다.
• Array(배열)의 반복함수인 forEach를 활용하여 만들 것이다.

이미지 소개

이미지 파일을 미리 소개하겠다. 이미지 이름으로 자바에서 배열을 만들것이다.

                                    const names=["Blizzards", "Calm", "Dusty_Road", "Escape", "Payday", "Retreat", "Seasonal", "Vespers"];

HTML

.pic

                                    <main>
  <article>
    <div class="inner"> <!--패널 전체틀-->
        <div class="pic"> <!--이미지 틀-->
        </div>
     </div>
  </article>
</main>

main안쪽 class inner안쪽에 class pic을 만들어준다. 이미지틀을 만들어서 원하는 UI를 구현해 줄 것이다.

CSS

.pic 꾸미기

                                    css

main{
 article{
   .inner{
          .pic{
             width: 15vw;
             height: 15vw;
             display: flex;
             justify-content: center;
             align-items: center;
             }
          }
    }
}

​

이미지 정사각형 모양으로

• 넓이와 높이 동일하게 15vw로 준다

\참고\ 정사각형이기 때문에 반드시 ~vw, ~vw

높이를 15vh로 혼동하지 않아야 한다

​

정가운데 정렬

• display : flex;
• justify-content: center; // 가로 가운데 정렬
• align-items : center; // 세로 가운데 정렬

​

JS

name이라는 배열을 만든 후 pic.style.backgroundImage 속성을 이용하여 이미지를 각 패널에 넣어보자

                                    const names=["Blizzards", "Calm", "Dusty_Road", "Escape", "Payday", "Retreat", "Seasonal", "Vespers"];

names.forEach((name, index)={
const pic= list[index].querySelector(".pic");
pic.style.backgroundImage=`url(img/${names[index]},jpg)`;
})

foreach문 이해 +

• 콜백함수,즉 화살표 함수가 인수로 들어갔다.
• 화살표 함수의 인자는 name과 index이다. 각각은 이름과, 순서를 나타낸다
• 콜백함수가 배열을 순회한다. => backgroundImage의 변수로 작용한다.==>

각 패널에 이미지가 하나씩 들어간다

​

forEach문이 잘 이해안될 수도 있는데 여기를 클릭하여 공부하면 좋다 :D

​

학습결과

각 패널마다 이미지가 잘 들어간 것을 확인할 수 있다.

​