Front-End

Front-End/Web Views

[Thymeleaf, html, bootstrap] 자주 사용하는 태그 모음

HTML 헤더 , 타임리프 사용 설정 - xmlns:th="http://www.thymeleaf.org" 부트스트랩 css파일 상대경로 - th:href="@{/css/bootstrap.min.css}" 태그 : 오류발생시 사용 전체 컨테이너 컨테이너 좌우 너비 최대 1000px로 고정 row, column row 지정 후 그 row 안을 두개의 column으로 지정 왼쪽부터 첫번째 column은 text-start로, 두번째 column은 text-end 로 지정 text-start / text-end / text-center : 해당 태그 내에 들어갈 요소의 위치 지정 py-1 : 해당 태그위 위 아래 여백설정 form의 에 작성한 내용을 아래에 type="submit"을 누르면 PO..

Front-End/Web Views

[Thymeleaf] 기본객체, 유틸리티 객체

1. 타임리프가 제공하는 기본 객체 타임리프가 제공하는 기본 객체 ${#request} - 스프링 부트 3.0부터 제공하지 않는다. ${#response} - 스프링 부트 3.0부터 제공하지 않는다. ${#session} - 스프링 부트 3.0부터 제공하지 않는다. ${#servletContext} - 스프링 부트 3.0부터 제공하지 않는다. ${#locale} @GetMapping("/basic-objects") public String basicObjects(HttpSession session){ session.setAttribute("sessionData", "Hello Session"); return "basic/basic-objects"; } @Component("helloBean") stati..

Front-End/Web Views

[Thymeleaf] 기본 문법 (text, 변수표현, URL 링크, 리터럴)

텍스트 - text, utext 1. 내용 변경 : th:text , [[…]] "th:text" 사용 : 텍스트 컨텐츠 안에서 직접 출력하기 : [[${data}]] 1) th:text 내용의 값을 th:text 의 값으로 변경한다. 여기서는 ‘텍스트’을 ${data} 의 값으로 변경한다. 2) [[…]] [[…]] 안에 있는 데이터를 직접 출력할 수 있다. 2. Escape 이스케이프(escape) : HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것 HTML 엔티티 : 웹 브라우저는 ‘spring! th:utext = Hello spring! [[...]] = Hello spring! [(...)] = Hello spring! (+) th:inline="no..

Front-End/Web Views

[Thymeleaf] 타임리프 란?

타임리프 핵심 핵심은 th:xxx 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. th:xxx 이 없으면 기존 html의 xxx 속성이 그대로 사용된다. HTML을 파일로 직접 열었을 때, th:xxx 가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다. 따라서 HTML을 파일 보기를 유지하면서 템플릿 기능도 할 수 있다. 서버 사이드 HTML 렌더링 (SSR) 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용된다. 네츄럴 템플릿 타임리프는 순수 HTML을 최대한 유지하는 특징이 있다. 타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확..

HSRyuuu
'Front-End' 카테고리의 글 목록 (2 Page)