오늘 한 것
- 필요한 코드 긁어오기
- 검색, 카테고리(태그)기술 조사
- 레이아웃 짜보기
필요한 코드 긁어오기
카드 부트스트랩
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<div class="card" style="width: 18rem;">
<img src="https://images.unsplash.com/photo-1611996575749-79a3a250f948?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>적합해 보이는 것은 이 코드인데 문제는 내가 그려놓은 레이아웃같은 느낌은 살릴 수 없을 것 같다는 점이다. 혹시 내가 직접 구현할 수 있는지 확인해봐야겠다.
그리고 부트스트랩을 찾으면서 생각보다 활용할만한게 없다는 것을 알았다. 아무래도 다른 사이트들을 뒤져가면서 찾아야겠다.
검색, 카테고리(태그)기술 조사
카테고리
filter elements라는게 있었다.
https://www.w3schools.com/howto/howto_js_filter_elements.asp
우리가 원하던 것이라고 생각은 드는데 문제는 javascript를 읽어보니 var이 사용되어 있었다... var은 배우지를 않아서 잘 모르겠어서 어디까지 고칠 수 있는지 모르겠다.
그리고 100개 가까이 카드를 만들게 될 것 같은데 그 100개에 이 스크립트까지 돌리면 무거워지지 않을까.. 싶은 것이다.
혹시 더 좋은 생각이 없는걸까..?
검색
이건 코드펜과 w3school에서 찾았다.
-
기본 검색창
https://www.w3schools.com/howto/howto_css_searchbar.asp -
반응형
https://codepen.io/menelaosly/pen/rZddyb
https://codepen.io/liamj/pen/vYYLGZj
반응형은 트랜지션이 엄청 다양하다. 문제는 사이트가 무거워질 수도 있다는 것이다. 그렇게 됨다면 기본 검색창을 쓰면 될 것 같다.
레이아웃 짜보기
스스로 대략적으로 짜본 것이다. 문제는 저 부트스트랩 카드가 마음에 들지 않는다.
카드를 내가 직접 코딩할 수 있는지 알아봐야겠다. 시간내로 가능할 것인가? 아니면 제플린으로 직접 임포트 할 수도 있겠다.
