경매 서비스 프로젝트를 하다보니 상황에 따른 버튼 비활성화가 필요하였고, 이를 위해 기본적인 버튼 비활성화 방법에 대해 알아보았다. input 태그 내에 disabled 속성 사용See the Pen button disabled by SeongHo-C (@seongho-c) on CodePen. input 태그에 disabled 속성을 따로 명시하지 않으면, 버튼은 기본적으로 활성화 상태가 된다.input 태그에 disabled 속성을 명시해 주면, 버튼은 비활성화 상태가 된다. 활성화/비활성화 버튼을 클릭하여 버튼의 상태 변경See the Pen button click disabled by SeongHo-C (@seongho-c) on CodePen. [JAVASCRIPT]const target =..

현재 시간과 마감 기간을 비교해 남은 시간 구하기function remaindTime(endDate) { // 현재 시간을 구한다. const now = new Date(); // 마감 기간을 가져온다. const end = new Date(endDate); // 현재 시간을 ms로 반환한다. const nt = now.getTime(); // 마감 기간을 ms로 반환한다. const et = end.getTime(); // 마감 기간이 현재 시간보다 클 경우 if (nt  출력 결과현재 시간: Tue Jul 23 2024 16:09:33 GMT+0900 (Korean Standard Time) 남은 시간: 365일 00시간 00분 26초

● 상품 이미지 업로드를 위한 HTML 상품 이미지 등록 태그의 enctype 속성값은 multipart/form-data로 지정합니다. ※매우 중요※ 태그의 multiple 속성은 요소에 사용자가 둘 이상의 값을 입력할 수 있음을 명시합니다. 파일을 업로드 하기 위해서는 태그의 type 속성값은 file로 지정합니다. ● 이벤트리스너 이용을 위한 태그 등록 ● Fetch API & FormData를 이용하여 서버에 Request 전달 fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 Option 객체를 받고, Promise 타입의 객체를 리턴합니다. URL은 필수 매개변수 입니다. 반환된 객체는, API 호출이 성공했을 경우 response 객체를 resolve하고, 실패했을 경우 error ..

위 그림과 같이 입찰 단위 내용에 드롭다운 목록을 사용해 보았습니다. 드롭다운 목록은 사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택할 수 있도록 해줍니다. 선택하세요 1,000 원 3,000 원 5,000 원 1,0000 원 태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 태그를 사용하여 원하는 항목을 추가할 수 있습니다. ● 태그의 속성 size: 화면에 표시할 드롭다운 항목의 개수를 지정합니다. (default = 1) multiple: 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용합니다. ● 태그의 속성 value: 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정합니다. selected: 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정합니다.

웹 개발을 하면서 탭은 매우 유용하게 사용될 수 있습니다. 위 사진은 제가 직접 Bootstrap을 사용하여 만든 탭 입니다. 차례대로 탭 사용법에 대해 알려드리겠습니다. ● 외부 스타일시트 적용 기본적으로 태그 안에 넣어 주셔야 합니다. ● 탭 메뉴 구성 판매현황 구매현황 , 태그를 이용하여 순서 없는 목록을 만들고 버튼으로 탭 메뉴를 만들었습니다. ● 메뉴별 내용 구성 상품명 최고입찰가 경매상태 남은 마감시간 HTML CSS JAVASCRIPT ... 태그를 이용하여 메뉴별 내용을 구성하였습니다. 태그를 이용하여 각 열마다 너비를 지정하였습니다. ● 탭 전환 JS 적용 ● Bootstrap JavaScript plugin 적용 를 태그가 닫히기 전에 페이지 끝 부분에 넣어 활성화 시킵니다. 지금까지 ..