일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- Sticky
- addEventListener
- swiperjs
- swiper
- NAV
- 이벤트리스너
- scrollevent
- 확장성
- forEach
- insertAdjacentHTML
- classList
- For
- html
- css
- 스크롤
- width
- getBoundingClientRect
- input
- scroll
- JavaScript
- 반복문
- Animation
- scrollY
- localstorage
- NodeList
- mousemove
- React
- 애니메이션
- Hover
- pointermove
- Today
- Total
ZeroToHunnit Coding
[Javascript] 데이터로 책 리스트 보여주기 본문
이렇게 더보기 버튼을 누르면 추가의 책 자료들을 보여주는 ui를 만들었다. HTML은 거의 비워두고 자바스크립트로만 동작한다고 볼 수 있다.
HTML
HTML은 큰 틀과 더보기 버튼만 담아두었다.
CSS
자바스크립트로 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
이렇게 외부에서 데이터를 받아왔다는 가정하게 두개의 데이터 object 자료를 준비했고, 반복문을 활용해 기존 큰 틀에 content를 갯수만큼 넣어주게 했다. 저렇게 변수에 템플릿을 만들어놓고 insertAdjacentHTML을 이용해 템플릿을 삽입했다. beforeend의 의미는 끝나기 전, 즉 제일 마지막 부분에 템플릿을 넣어달라는 의미이다.
more버튼을 클릭하면 data2의 요소들을 넣어주고 more버튼은 없어지게 했다.
데이터를 더 불러와서 한 번 더 클릭했을 때 more버튼이 사라지게 하고 싶으면 count를 변수로 지정해서 숫자를 올려주고 그 숫자에 따라 다르게 동작하게 만들면 되지 않을까 싶다.
'JAVASCRIPT' 카테고리의 다른 글
[Javascript] 스크롤 내리면 사라지고 스크롤 올리면 나타나는 navbar (0) | 2024.02.01 |
---|---|
[Javascript] 마우스따라 움직이는 bar (2) | 2024.01.30 |
[Javascript] 확장성있게 모달창 띄우기 (0) | 2024.01.24 |
[Javascript] 스크롤에 따라 박스 크기, 글자 크기, 위치 조정하기 (2) | 2024.01.22 |
[Javascript] Intersection Observer로 애니메이션 만들기 (0) | 2024.01.20 |