1. 부트스트랩 없이 구현하기
2. 추가기능 구현
1.
카드 뼈대만 부트스트랩에서 가져와서 id랑 class 빼고 필요없는건 다 지워줬다
필요한 디자인과 기능은 css를 일일이 바꾸면서 만들었다
css 기능은 구글링 + 다른 분들의 조언을 참고했다.
/* 헤더를 div로 분류해서 여백이 생김. 여백 없애기 위해 margin을 0으로 둠 */
margin: 0;
/* 입력 시 테두리 생성 */
border: 2px solid var(--primay-color);
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 1rem;
/* 버튼 커서 올릴 시 호버 효과 */
.searchbtn:hover{
box-shadow: 0 80px 0 0 rgba(0,0,0,0.25) inset,
0 -80px 0 0 rgba(0,0,0,0.25) inset;
}
/* 행 개수 정하기 */
justify-content: space-between; -> 하위 아이템에 width:20~30% 지정
/* 열 여러개로 나누기 */
flex-wrap: wrap;
/* 내용박스 줄이기 + 스크롤 */
overflow: auto;
height: 100px;2.
카드 밖 여백 부분까지 영역이 잡혀서 여백을 클릭해도 id alert가 뜨는 현상 발생
querysellector -> getElementById 메서드 변경, 영역이 맞는 id값을 찾아 해결
addEventListener 메서드로 'click' 이벤트시 clickCard(id)함수 호출
autofocus : 자동커서
.replace(/ /g,"") 를 사용해서 공백 없이 검색 허용
