웹 프로그래밍/프론트 엔드 (6) 썸네일형 리스트형 타임리프(스프링 통합과 폼) 입력 폼 처리 th:object="${item}" -> 폼에서 사용할 객체를 지정. 그러면 item에 관한 프로퍼티를 *{...}으로 적용 가능 th:field는 id, name, value 속성을 모두 다 자동으로 만들어줌 -> 검증(Validation)에서 위력 체크 박스 html의 체크박스는 체크시에는 on(true)으로 넘어오고 비체크시에는 아무것도 넘어오지 않는다 -> -> 스프링 MVC는 히든 필드도 만들어서 해결함(스프링이 비체크시에는 false로 반환해줌) 타임리프는 히든 필드마저 생성해줌 ( 값이 참이면 내부 비교로직으로 checked까지 넣어줌 ) 체크 박스 - 멀티 @ModelAttribute의 또다른 기능 -> 아래처럼 쓰면 모든 뷰에서 모델에 regions가 넘어간다 @ModelA.. Thymeleaf(타임리프) 기본 텍스트 출력- th:text, th:utext 컨텐츠 안에서 직접 출력하기 = [[${data}]] HTML 엔티티 '' 같은것을 그대로 표현하기위함 HTML 엔티티로 변경하는것을 이스케이프라 하고 타임리프의 th:text나 [[...]] 은 디폴트로 제공 이스케이프 하지 않는법(unescape) th:text -> th:utext [[...]] -> [(...)] 변수-SpringEL -Object 접근 ${user.username} = userA ${user['username']} = userA ${user.getUsername()} = userA -List ${users[0].username} = userA ${users[0]['username']} = userA ${users[0].getUsern.. Thymeleaf(타임리프) 기초 타임리프의 핵심 th:x 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 치환함. th:x 가 없으면 기존 html의 속성 x가 그대로 사용됨 앞에 써줘야 사용가능 URL 링크 표현식(@{...}) @{/css/bootstrap.min.css} 리터럴 대체 문법( | | ) th:onclick="|location.href='@{/basic/items/add}'|" | | 안에다 넣으면 편리하게 한꺼번에 사용 가능 원래는 "'location.href=' + '\'' +@{/basic/items/add} + '\''" 이렇게 +와 이스케이프로 해야함 변수 표현식(${...}) 10000 모델에 넘어온 값이나 타임리프 변수로 선언한 값 조회 가능(프로퍼티 접근법) 내용 변경(th:text) 10000 .. JavaScript 기초 : javascript 사용 이벤트 (사용자와 상호작용) : 버튼 생성과 버튼 이름 hi 속성 onclick="자바스크립트 코드" : 클릭시 실행됨 -> 동적으로 자바스크립트 코드 삽입 가능 document.querySelector("#night_day").value = "night"; -> id를 통해 value값 접근및 수정 가능 리팩토링 태그를 자신을 가리킬때는 this를 쓰면 편함 (this.value) 자주 쓰이는 부분은 변수로 지정 var target = document.querySelector("#night_day").value; 함수에서 this 함수에서 this를 쓸경우 전역변수로 쓰인다 -> 따라서 함수에서 this를 self로 고치고 매개변수로 현재 태그의 this를 받아야 한다 객체.. CSS 기초 또는 CSS 이렇게 style 속성과 함께 씀 a -> selector {} -> declaration color(property) red(value) h1 { font-size: 55px; text-align: center; } -> 폰트 사이즈와 가운데 정렬 우선순위 id 선택자(#) > class 선택자(.) > 태그 선택자 동등한 우선순위일 경우 가장 마지막의 코드가 적용됨 박스 모델 h1{ border: 5px solid red; padding: 20px; margin: 20px; display: block; width: 100px; } grid (무색무취) : 그룹핑해서 grid를 사용하여 레이아웃을 하거나 아이디값 부여할때 주로 사용(줄바꿈) : 와 똑같으나 줄바꿈하지 않음 #grid { d.. HTML 기초 TAG는 설명 : 전체 html 코드를 감싸는 태그 : 본문을 설명하는 태크 : 웹페이지 제목 : utf-8로 html를 해석 : 본문 : 진하게 : 밑줄 쫙 : 줄바꿈 : 단락 줄바꿈(br과 비슷하지만 더 정보를 담고있음) 이전 1 다음
