IT'S YU
[Spring] html / Thymleaf(타임리프) th 기본 문법 본문
타임리프 소개
*공식 사이트: https://www.thymeleaf.org/
*공식 메뉴얼 - 기본 기능: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
*공식 메뉴얼 - 스프링 통합: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html
1) SSR
: 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용된다. 백엔드 개발자가 리엑트, 뷰 같은 프론트엔드 기술까지 배워서 구사하기에는 현실적으로 힘들다. 따라서 SSR을 할 수 있는 뷰 템플릿을 하나 정도는 익히고 있어야 한다.
2) 네츄럴 템플릿
: 타임리프는 순수 HTML을 최대한 유지하는 특징이 있다.
타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다. (다른 뷰 템플릿은 파일을 직접 열면 다 깨진다.)
3) 스프링 통합 지원
타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.
• 간단한 표현:
◦ 변수 표현식: ${...}
◦ 선택 변수 표현식: *{...}
◦ 메시지 표현식: #{...}
◦ 링크 URL 표현식: @{...}
◦ 조각 표현식: ~{...}
• 리터럴
◦ 텍스트: 'one text', 'Another one!',…
◦ 숫자: 0, 34, 3.0, 12.3,…
◦ 불린: true, false
◦ 널: null
◦ 리터럴 토큰: one, sometext, main,…
• 문자 연산:
◦ 문자 합치기: +
◦ 리터럴 대체: |The name is ${name}|
• 산술 연산:
◦ Binary operators: +, -, *, /, %
◦ Minus sign (unary operator): -
• 불린 연산:
◦ Binary operators: and, or
◦ Boolean negation (unary operator): !, not
• 비교와 동등:
◦ 비교: >, <, >=, <= (gt, lt, ge, le)
◦ 동등 연산: ==, != (eq, ne)
• 조건 연산:
◦ If-then: (if) ? (then)
◦ If-then-else: (if) ? (then) : (else)
◦ Default: (value) ?: (defaultvalue)
• 특별한 토큰:
◦ No-Operation: _
https://blog.naver.com/ghk4889/222643239010
1. 타임리프 - 기본기능1
<목차> 1. 프로젝트 생성 2. 타임리프 소개 3. 텍스트 - text, utext 4. 스프링 EL 5. 기본 객체들...
blog.naver.com
[소스코드 : templates >> testThymeleafLang.html]
<!-- body 시작 부분 -->
<body>
<!--
[타임리프 자주 사용 문법 설명]
1. 타임리프는 th 키워드를 사용해서 문법을 사용합니다
2. th 키워드를 사용하기 위해서는 <html> 부분에 th 설정을 해줘야합니다
- <html lang="en" xmlns:th="http://www.thymeleaf.org">
3. 주요 th 종류 설명
- th:text - 텍스트 지정의미입니다
- th:value - value 값 지정의미입니다 (폼 양식)
- th:each - for 반복문 의미입니다 (값이 하나 일 경우 단순 변수 지정으로도 사용가능)
- th:if / th:unless - if , else 구문입니다
- th:switch / th:case - switch 분기 처리 구문입니다
4. 주요 표현식 설명
- ${} - key 값을 지정할 때 사용하는 변수입니다
5. 주요 연산자 설명 (th:타입 = "구문내에서 연산자 사용")
- and , or , not , 크기 비교 연산자 (< (gt) , > (lt) , >= (ge) , <= (le))
<!-- [문법] th:text="${key}" : 텍스트 지정 = 특정 key 변수 호출 -->
<div style="top: 2%;">
<!--
[컨트롤러에서 지정한 model 모델 형식]
model.addAttribute("name", "twok"); // [key, value]
model.addAttribute("age", 28); // [key, value]
model.addAttribute("sex", "M"); // [key, value]
-->
<p>
<span class="title">[문법] th:text="${key}" : 텍스트 지정 = 특정 key 변수 호출</span><br>
이름 : <span th:text="${name}"></span><br>
나이 : <span th:text="${age}"></span><br>
성별 : <span th:text="${sex}"></span><br>
</p>
</div>
<!-- [문법] th:each="n_data : ${name}" th:text="${n_data}" : 단순 변수 지정 및 데이터 결합 -->
<div style="top: 4%;">
<!--
[컨트롤러에서 지정한 model 모델 형식]
model.addAttribute("name", "twok"); // [key, value]
model.addAttribute("age", 28); // [key, value]
model.addAttribute("sex", "M"); // [key, value]
-->
<p>
<span class="title">[문법] th:each="n_data : ${name}" th:text="${n_data}" : 단순 변수 지정 및 데이터 결합</span><br>
이름 : <span th:each="n_data : ${name}" th:text="${n_data} + ' 입니다'"></span><br>
나이 : <span th:each="a_data : ${age}" th:text="${a_data} + ' 입니다'"></span><br>
성별 : <span th:each="s_data : ${sex}" th:text="${s_data} + ' 입니다'"></span><br>
</p>
</div>
<!-- [문법] th:if / th:unless : if else 조건문 처리 -->
<div style="top: 6%;">
<!--
[컨트롤러에서 지정한 model 모델 형식]
model.addAttribute("name", "twok"); // [key, value]
model.addAttribute("age", 28); // [key, value]
model.addAttribute("sex", "M"); // [key, value]
-->
<p>
<span class="title">[문법] th:if / th:unless : if else 조건문 처리</span><br>
이름 : <span th:if="${name}=='twok'" th:text="'IF twok'"></span><span th:unless="${name}=='twok'" th:text="'ELSE twok'"></span><br>
이름 : <span th:if="${name}=='투케이'" th:text="'IF 투케이'"></span><span th:unless="${name}=='투케이'" th:text="'ELSE 투케이'"></span><br>
</p>
</div>
<!-- [문법] th:switch / th:case : switch 문 분기 처리 실시 -->
<div style="top: 8%;">
<!--
[컨트롤러에서 지정한 model 모델 형식]
model.addAttribute("name", "twok"); // [key, value]
model.addAttribute("age", 28); // [key, value]
model.addAttribute("sex", "M"); // [key, value]
-->
<p>
<span class="title">[문법] th:switch / th:case : switch 문 분기 처리 실시</span><br>
이름 :
<span th:switch="${name}">
<span th:case="'투케이1'">1번 투케이</span>
<span th:case="'투케이2'">2번 투케이</span>
</span>
<span th:unless="${name} == '투케이1' or ${name} == '투케이2'">ELSE 투케이</span>
<br>
</p>
</div>
<!-- [문법] th:each : List 객체 데이터 for 반복 출력 실시 -->
<div style="top: 10%;">
<!--
[컨트롤러에서 지정한 model 모델 형식]
List<Insert_Each_List_Model> tables = new ArrayList<>();
for (int i=1; i<=5; i++){
// 이름 / 나이 / 성별 데이터 삽입
tables.add(new Insert_Each_List_Model(name+String.valueOf(i), String.valueOf(i), "M"));
}
model.addAttribute("tableList", tables); //value 값에 객체 지정 실시
-->
<p>
<span class="title">[문법] th:each : List 객체 데이터 for 반복 출력 실시</span><br>
<span th:each="list : ${tableList}">
<span th:text="' 이름 : ' + ${list.name}"></span>
<span th:text="' 나이 : ' + ${list.age}"></span>
<span th:text="' 성별 : ' + ${list.sex}"></span>
<br>
</span>
</p>
</div>
</body>
https://blog.naver.com/kkh0977/222478032371
20. (spring/스프링) [thymeleaf/타임리프] 자주 사용하는 th 기본 문법 설명 - text , if else , switch , for
[개발 환경 설정] 개발 툴 : inteli j 개발 언어 : spring [소스코드 : templates >> testThymeleaf...
blog.naver.com
'웹개발 > HTML' 카테고리의 다른 글
| [HTML] 식별자(id, class, name), <a> vs <form> (0) | 2022.04.29 |
|---|---|
| [HTML] form요소 / method속성 / get, post (0) | 2022.04.29 |
| [HTML] div, span 태그 (0) | 2022.02.07 |
| [HTML] attribute(속성) CSS property(속성)의 차이 (0) | 2022.02.07 |
| [HTML] 폼 태그, form, fieldset, legend, label, input (0) | 2022.02.04 |
