· FRONT-END(93)
-
[ jsp / html ] 정보 수정 페이지에서 성공/실패 페이지로
환경 : DBeaver, Spring Tool Suite4 (참고) 해당 실습에 사용된 데이터 베이스 코드 : https://ggingggang05.tistory.com/109 (참고) 해당 실습에 대한 Dto / Dao / Mapper 클래스 코드 및 기타 추가 설정 관련 : https://ggingggang05.tistory.com/110 [ 수정 페이지의 기본구성 ] 수정 받을 것에 대한 정보가 표시된다. (예) 제품 명 : [ 입력 받을 칸 ] 수정 받을 대상을 알기 위해 기본키(PK) 등 최소 한 개의 데이터는 사전에 전달받아 페이지가 알고 있어야 한다. 무언가를 화면으로 전달하고 싶다면 매개변수에 Model 객체를 선언 (Model이 매개체 역할을 하게 된다!!!) [ 코드 ] - Produc..
2024.03.03 -
[ HTML ] <select>, <option> 태그
환경 : Spring Tool Suite 4 태그 태그는 말그대로 선택하는 태그이다. 태그 안에서 태그를 활용하여 태그 중에 원하는 항목을 선택할 수 있다. 속성 속성명 설명 label 태그에 표시할 글자 속성을 정함 태그 내부의 글자보다 우선 적용됨 name 에 작성하여 제출 시 전송될 파라미터의 이름을 지정 value 실제 선택된 값을 처리 이 제출될 경우 value값이 전송됨 size 개수 지정 size 속성보다 많은 개수의 이 존재할 경우 스크롤이 생김 multiple 특수 키를 이용하여 다중선택 가능 required 값이 무조건 존재해야 함 disabled 비활성화. 사용자가 조작할 수 없음 optgroup 복잡한 구조 구현 [ 메뉴 등록 페이지를 활용한 예시 - 전체코드 ] - MenuCont..
2024.03.01 -
[ HTML ] <input> 태그 속성 Type의 값
환경 : Spring Tools Suite4 웹에서 사용할 수 있는 입력을 위한 도구 [ type ] 입력창의 형태를 결정할 수 있음 속성 값 설명 text 기본값. 한 줄의 텍스트 입력 칸을 만든다. (기본 너비 : 문자 20) password text와 동일하지만 입력되는 문자를 아스테리크(*) 문자열로 표시 checkbox 체크박스 생성 radio 선택 항목 중 한 가지만 선택가능한 라디오 버튼 생성 button 누를 수 있는 버튼 생성 submit 전송 버튼 reset 재설정 버튼 file 파일 선택창 여는 버튼 hidden 사용자에게 보이지 않는 숨김 창 생성 image 이미지로 된 전송 버튼 (src 속성 추가 기입 필수) color 색상 선택 창 date 년, 월, 일을 입력할 수 있는 날짜..
2024.02.28 -
[ HTML ] <input> 태그의 속성
환경 : Spring Tools Suite4 웹에서 사용할 수 있는 입력을 위한 도구 [ input 속성 ] 속성 설명 name 파라미터의 이름을 설정할 수 있음 (값에 부여될 식별자를 설정) type 입력창의 형태를 결정할 수 있음 (기본값 : text) value 입력창의 초기 표시 값 autofocus 커서를 자동으로 표시해줌 placeholder 무엇을 입력받는 자리인지 알려줌 readonly 사용자가 쓸 수 없고, 읽을 수만 있음 required 필수 입력 사항처럼 꼭 입력해야 함. maxlength 필드의 최대 글자 개수 minlength 필드의 최소 글자 개수 개인 공부 기록용입니다:)
2024.02.27 -
[ HTML ] <A> 태그
환경 : Spring Tools Suite4 [ A(Anchor) 태그 ] 다른 URL과 연결할 수 있는 하이퍼링크를 생성하는 태그 href 속성으로 이동할 위치를 설정 └ (Hypertext Reference) title 속성으로 Tooltip 텍스트를 설정할 수 있음 영역에 링크를 설정하면 안됨 └ 실체가 있는 대상(글자, 이미지, 버튼, ...)에 설정하여 이동하도록 구현 [ 사용 예 ] - HtmlController.java import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class HtmlController {..
2024.02.24 -
[ HTML ] <img> 태그에 dummy 이미지 첨부 해보기
환경 : Spring Tools Suite4 [ 더미 이미지(Dummy image) ] - 개발 단계에서 이미지가 위치할 곳에 가짜 이미지를 배치하는 것 - 이를 제공해주는 사이트가 여럿 있다. https://dummyimage.com/ https://picsum.photos/ 에 대한 내용은 다른 게시글에 적어놨습니다. [ 사용 예 ] - HtmlController.java import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class HtmlController { @RequestMapping("/dumm..
2024.02.23