JAVASCRIPT

[Javascript] 데이터로 책 리스트 보여주기

0에서100 2024. 1. 26. 16:54
728x90
반응형

이렇게 더보기 버튼을 누르면 추가의 책 자료들을 보여주는 ui를 만들었다. HTML은 거의 비워두고 자바스크립트로만 동작한다고 볼 수 있다.

 

HTML

  <div class="section">
    <div class="wrap">
      <ul class="content-box">
      </ul>
      <button class="more">더보기</button>
    </div>
  </div>

HTML은 큰 틀과 더보기 버튼만 담아두었다.

 

CSS

.content-box{
display: flex;
flex-wrap: wrap;
padding: 120px;
}

.content{
  padding: 40px;
  width: 300px;
  height: 500px;
}

.photo{
  width: 250px;
  height: 250px;
  background-color: #999;
  display: flex;
  align-items:center;
  justify-content: center;
  font-size: 40px;
}

.title{
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 40px;
}

.author, .price{
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 30px;
  margin-top: 20px;
}

.more{
  display: block;
  padding: 40px 60px;
  font-size: 40px;
  background-color: #666;
  border-radius: 40px;
  margin: 0 auto;
  cursor: pointer;
}

자바스크립트로 HTML요소들을 넣어줄 것이기 때문에 그 HTML 요소들에 CSS를 입히는 작업이다.

제목을 보면 본인 박스의 길이보다 넘치면 ...으로 생략되는 것을 볼 수 있는데 .title이나 .author, .price의 css 요소를 보면 display: block, white-space: nowrap; text-overflow:ellipsis; overflow: hidden 을 볼 수 있다. 위의 요소가 한 패키지처럼 이루어져야 ...으로 생략이 될 수 있다.

white-space: nowrap => 줄바뀜 방지

text-overflow: ellipsis => 글자가 넘치면 ...로 생략

overflow: hidden => 요소가 넘치면 보이지 않게 하기

 

JAVASCRIPT

let data1 = [
  { id : 0,
    title: '푸바오, 언제나 사랑해',
    author: '에버랜드 동물원',
    price: 20700
  },
  {id : 1,
    title: '하와이 대저택 100일 미라클',
    author: '하와아 대저택',
    price: 17820
  },
  {id : 2,
    title: '나는 메트로폴리탄 미술관의 경비원입니다',
    author: '패트릭 브링리',
    price: 15700
  },
  {id : 3,
    title: '마흔에 읽는 쇼펜하우어',
    author: '강용수',
    price: 15300
  }
]

let data2 = [
  { id : 4,
    title: '퓨처 셀프',
    author: '벤저민 하디',
    price: 17820
  },
  {id : 5,
    title: '사람과 돈이 따르는 센스 있는 3초 표현',
    author: '아소 사이카',
    price: 16200
  },
  {id : 6,
    title: '세이노의 가르침',
    author: '세이노',
    price: 6480
  },
  {id : 7,
    title: 'ETS 토익 정기시험 기출문제집 1000',
    author: 'ETS',
    price: 17820
  }
]

function contentBox (arr){
  arr.forEach(data => {
    let contentTemplate = `
    <li class="content">
    <div class="photo"><p>책${data.id + 1}</p></div>
    <h1 class="title">${data.title}</h1>
    <p class="author">${data.author}</p>
    <p class="price">가격 : ${data.price}원</p>
    </li>`

    document.querySelector('.content-box').insertAdjacentHTML('beforeend', contentTemplate);
  });
}

contentBox(data1);

function onClickMore(){
  contentBox(data2);
  document.querySelector('.more').style.visibility = 'hidden';
}

document.querySelector('.more').addEventListener('click', onClickMore);

이렇게 외부에서 데이터를 받아왔다는 가정하게 두개의 데이터 object 자료를 준비했고, 반복문을 활용해 기존 큰 틀에 content를 갯수만큼 넣어주게 했다. 저렇게 변수에 템플릿을 만들어놓고 insertAdjacentHTML을 이용해 템플릿을 삽입했다. beforeend의 의미는 끝나기 전, 즉 제일 마지막 부분에 템플릿을 넣어달라는 의미이다.

more버튼을 클릭하면 data2의 요소들을 넣어주고 more버튼은 없어지게 했다.

데이터를 더 불러와서 한 번 더 클릭했을 때 more버튼이 사라지게 하고 싶으면 count를 변수로 지정해서 숫자를 올려주고 그 숫자에 따라 다르게 동작하게 만들면 되지 않을까 싶다.

728x90
반응형