html thymeleaf

• html 기술과 스프링기술을 분리하는게 좋다.

• @ResponseBody 를 붙이지 않으면 template으로 view 를 대체한다는의미

• 우리가 사용할 템플릿엔진은 타임리프(thyemleaf)를 사용할건데 사용하려면 의존성 추가해야함.

• 프로그래밍이 불가능한 html 에서 프로그래밍을 하고싶다 ->템플릿엔진(템플릿 엔진) ->문법있다.

• 변수를 사용할 수있는 영역을 태그로 잡아줌 ex < div> < /div>

• div 는 줄이라도 바꿔주는데 span 은 그냥 마크업 해주는것(정보만 보여주는거)

• 출력하고 싶을때는 th:text

• 변수를 선언 하고싶을떄 th:with

• 변수를 넣어줄때 "${변수}"

• 변수사용

<div th:with="name='이동원'"> 
<div>안녕하세요 <span th:text="${name}">이동원</span>님 </div> -> 이동원을 덮어쓴다
<div>안녕하세요 <span th:text="${name}"></span>님 </div>
<div>안녕하세요 <span th:text="${name}"></span>님 </div>
<div>안녕하세요 <span th:text="${name}"></span>님 </div>
<div>안녕하세요 <span th:text="${name}"></span>님 </div>
</div>
```java  

- 조건문사용
```java
<div th:with="num=10">
<div th:if="${num%2 !=0 }">홀수</div>
<div th:if="${num%2 ==0">짝수</div>
</div>

• 직접 인덱스 만들어서 사용하는 반복문 사용

<div>
<div th:each="i : ${#numbers.sequence(0,9)}" th:text="${i}"></div>
</div>

• 컨트롤러에서 타임리프로 데이터 넘기는법

@RequestMapping("/data")
public String dataSend(Model model){
ArrayList<String> list = new ArrayList<>();
list.add("바나나");
list.add("사과");
list.add("오렌지");

model.addAttibute("myNumber" , 19);
model.addAttibute("myName" , "홍길동");
model.addAttibute("fruitList" , list);

}

• 컨트롤러에서 넘어온 데이터 사용방법

<div th:text="${myNumber}"></div>
<div th:text="${myName}"></div>
<div th:text="${fruitsList}"></div>

<ul>
<li th:each="fruit : ${fruitsList}" th:text="${fruit}"></li>
</ul>