차근차근정확하게

속성 덮어쓰기기존, html 속성을 th:~ 로 표현할경우 th로 설정한 값으로 대체된다ex)타임리프 렌더링 후 -> 로 렌더링 반복th:each=" [변수] : ${[넘어온 값]}"userStatthymeleaf에서 제공해주는 상태값 확인index, count, size, event, odd, first, last ,current 지원 username age username 0 index= null, count= null, size= null, even= null, ..

Thymeleaf 연산 표현Html Entity의 경우, & ; 를 하지 않으면 그대로 문자로 출력되는 것을 주의해야함  비교 연산 1 > 10 = 1 > 10 = 10"> 1 == 10 = 10 == 10 = true = Html Entity를 주의th:text="${1 > 10} " 를 하게 되면, true / false의 결과가 표현됨 조건식 / Elvis / no-opration (10 % 2 == 0)? '짝수':'홀수' = ${data}?: _ = 데이터가 없습니다. 조건식[조건] ? true : falseElvis${data}?:falsedata가 없으면, false ..

리터럴소스 코드 상에 고정된 값을 의미문자 : 'hello'숫자 : 10boolean : true, falsenull : null문자리터럴의 경우 원칙상 '(작은 따옴표)로 감싸야한다하지만, 공백이 없을경우 "(큰따옴표)도 인식해서 적용한다 (다만 공백이 있으면 다른 처리를 해줘야함) 문자 리터럴 ( 공백 )String data = "world";...model.addAttribute("data", data);... 'hello' + 'world' = 'hello world!' = 'hello' + ${data} = 리터럴 대체 |hello ${data}| = 작은 따옴표(')와 더하기(+) 를 사용하여 공백이 있는 문자 리터럴 표현또는, 작은따옴표(')를 이용하여 표..

URL 링크public String link(Model model){    model.addAttribute("param1", "data1");    model.addAttribute("param2", "data2");    return "basic/link";} /hello /hello?param1=data1&param2=data2 /hello/data1/data2 /hello/data1?param2=data2 @를 이용하여, URL을 표현@{/hello}/hello@{/hello(param1=${param1}, param2=${param2})}/hello ? param1=data1 & param2=data2@{/hello/{param1}/{param2}(param1..

지역변수 선언public class User{     private String username;         public String getUsername(){              return this.username;     }}@ControllerListusers = new ArrayList();users.add(userA);model.attribute("users", list);

Model Attribute 출력 th:text 출력: 컨텐츠 직접 출력 = [[${data}]] 속성에서 출력${data} 이용하여 Model.attribute("data", [data값]) 출력 컨텐츠 내부 직접 출력"[[]]" 을 이용하여 직접 출력 가능  객체 출력** 사전 준비 **public class User{     private String username;     public String getUsername(){              return this.username;     }}List list = new ArrayList();Map map = new HashMap();list.add(userA);map.put('userA', userA);model.addA..

1. 시멘틱 태그란?2. 시멘틱 태그 종류  시멘틱 태그란?"의미론적 태그"를 의미한다.해당 태그를 추가함으로써, 웹페이지의 변화를 주는 것은 아니다하지만, 가독성이 높아지고 구분되어있는 특징으로 html 유지보수가 쉬워진다또한, 검색엔진의 페이지 탐색에도 도움을 준다 시멘틱 태그 종류 : 컨텐츠 구분 , div와 유사 : 컨텐츠 구분, section보다 더 구체적 내용을 담음 : 보조 정보 (본문과 상관없는 부분), 광고 / 배너가 이에 해당 : 내비게이션 또는 본문 윗부분에 해당하는 부분을 일컫음 : 홈 bar 와 같은 웹페이지 맨 상단에 위치하는 내비게이터 : 웹페이지 마지막 부분  위와같이, 시멘틱태그의 경우 웹페이지에 어떠한 영향도 주지 않는다다만, 유지보수의 편리함과 검색엔진의 도움을 주는 효..

, ,  HTML5 지원pdf 파일을 가져와서 표현type : "application/pdf" 형식 지정data : pdf 파일 경로width : 폭설정height : 높이 설정비디오 표현type : video/quicktype 형식 지정src : video 파일 경로width : 폭설정height : 높이 설정다른 페이지의 내용 가져오기src : 가져올 URL나머지 동일 주의할점아직 html5를 지원하는 브라우저가 없을 수 있기에 동작하지 않을 수 있다