state state는 자주 변경되는 데이터를 넣어놓고 사용할 수 있습니다. 좋아요 버튼 만들기 state변수명 뒤에 state변경 함수명을 넣어줍니다. 하트이미지를 클릭했을 때 만들어준 함수 likeUp()의 매개변수로 like를 1씩 증가시키도록 해서 간단하게 좋아요 버튼 만들 수 있습니다!
여러개의 체크박스를 선택하려면 해당 태그에 클래스를 만들어주고 document.querySelectoAll('.클래스명') 체크가 된 체크박스만 선택하려면 document.querySelectoAll('.클래스명:checked') 체크박스 체크표시 체크박스선택.checked = true 체크박스 체크해제 체크박스선택.checked = false input 태그 타입으로 선택하기 querySelector('input[type="checkbox"]')
input 태그 속성 만들기 input 태그의 속성 값으로 데이터를 많이 전달하게 되는데 그 속성을 직접 만들어서 사용할 수 있습니다! data-이름=" " 타임리프 문법 사용시 th:data-이름=" " 이름은 하이픈으로 만들어주기! 해당 속성값을 받아올 때는 하이픈으로된 이름을 카멜식으로 받을 수 있음 ex) data-item-name -> itemName 만든 속성 사용하는 법 해당태그선택.dataset.속성명 예시) th:each="cart : ${cartList}" 컨트롤러에서 받아온 cartList를 cart로 하나씩 꺼냅니다. th:data-total-price="${cart.itemVO.itemPrice * cart.cartCnt}" data-total-price의 속성을 만들어서 th:e..
부트스트랩 스타일 클래스 레이아웃 container : 페이지 컨테이너 container-fluid : 컨테이너를 100% 너비로 확장 row : 행 col-숫자 : 열 d-grid : 해당 영역 꽉 채우기 justify-content-center : 중앙 정렬 align-middle : 위아래 정렬 m-숫자 : 마진 p-숫자 : 패딩 텍스트 text-center : 텍스트 가운데 정렬 text-primary / text-secondary : 텍스트 색상 지정 font-weight-bold : 텍스트 굵게 버튼 btn : 기본 버튼 스타일 btn-primary / btn-secondary : 다양한 버튼 스타일 btn-lg btn-sm : 버튼 사이즈 폼 form-control : 입력 필드, 텍스트 영..
