이 글은 인프런 김영한님의 Spring 강의를 바탕으로 개인적인 정리를 위해 작성한 글입니다. 타임리프 스프링 통합 타임리프 기본 메뉴얼 : https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 스프링 통합 메뉴얼 : https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html 스프링 통합으로 추가되는 기능 스프링의 SpringEL 문법 ${@myBean.doSomething()} 처럼 스프링 빈 호출 지원 편리한 폼 관리를 위한 추가 속성 → th:object (기능 강화, 폼 커맨드 객체 선택) → th:field , th:errors , th:errorclass 폼 컴포넌트 기능 →c..

이 글은 인프런 김영한님의 Spring 강의를 바탕으로 개인적인 정리를 위해 작성한 글입니다. 타임리프(Thymeleaf)에서 템플릿 레이아웃은 웹 애플리케이션의 다양한 페이지에서 공통적으로 사용되는 레이아웃 구조를 재사용할 수 있도록 도와준다. 이를 통해 개발자는 중복 코드를 줄이고, 일관된 레이아웃을 유지할 수 있다. 예를 들어서 layoutExtend.html 메인 컨텐츠 common_header(~{::title},~{::link}) 이 부분이 핵심이다. ::title 은 현재 페이지의 title 태그들을 전달한다. ::link 는 현재 페이지의 link 태그들을 전달한다. 결과 메인 컨텐츠 메인 타이틀이 전달한 부분으로 교체되었다. 공통 부분은 그대로 유지되고, 추가 부분에 전달한 들이 포함된 ..

이 글은 인프런 김영한님의 Spring 강의를 바탕으로 개인적인 정리를 위해 작성한 글입니다. 타임리프(Thymeleaf)의 템플릿 조각 기능은 HTML 문서의 특정 부분을 재사용 가능한 형태로 정의하고, 이를 다른 템플릿에서 삽입하여 사용할 수 있게 해준다. 이 기능은 중복을 줄이고, 템플릿의 유지보수를 용이하게 만들어준다. 템플릿 조각은 주로 헤더, 푸터, 네비게이션 바 등의 반복적으로 사용되는 UI 컴포넌트를 만들 때 유용하다. 템플릿 조각 정의하기 템플릿 조각은 th:fragment 속성을 사용하여 정의한다. 예를 들어, 하나의 HTML 파일 내에 여러 조각을 정의할 수 있다. 부분 포함 부분 포함 insert 부분 포함 replace 부분 포함 단순 표현식 파라미터 사용 결과 부분 포함 부분 포..

이 글은 인프런 김영한님의 Spring 강의를 바탕으로 개인적인 정리를 위해 작성한 글입니다. 타임리프 공식 사이트 : https://www.thymeleaf.org/ 공식 메뉴얼 - 기본 기능 : https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 공식 메뉴얼 - 스프링 통합 : https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html 타임리프 사용 선언 ` 기본 표현식 간단한 표현 ◦ 변수 표현식: ${...} ◦ 선택 변수 표현식: *{...} ◦ 메시지 표현식: #{...} ◦ 링크 URL 표현식: @{...} ◦ 조각 표현식: ~{...} 리터럴 ◦ 텍스트: 'one text..

타임리프란? 타임리프(Thymeleaf)는 자바 웹 애플리케이션 개발에 사용되는 모던 서버사이드 Java 템플릿 엔진 중 하나이다. HTML, XML, 텍스트, 자바스크립트, CSS 등 다양한 마크업 파일을 생성할 수 있으며, 주로 웹 애플리케이션에서 동적인 뷰를 생성하는 데 사용된다. 타임리프의 가장 큰 특징 중 하나는 natural templates 을 지원한다는 것으로, 애플리케이션이 실행되지 않는 상태에서도 HTML 파일을 웹 브라우저에서 직접 열어볼 수 있다. 이는 개발 과정을 보다 효율적으로 만들어준다. 타임리프의 주요 특징 네츄럴 템플릿: 타임리프 템플릿은 실행되지 않는 상태에서도 HTML 파일로서 자연스럽게 보여질 수 있어, 디자이너와 개발자 간의 협업을 용이하게 한다. 서버 사이드 렌더링..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 배경 속성 background-color 속성 요소의 배경에 색상을 넣을 수 있다. 속성 값으로는 색상값을 사용하면 된다. background-image 속성 요소의 배경에 해당 속성을 사용하면 이미지를 넣을 수 있다. 속성 값은 삽입할 이미지의 경로를 url() 함수로 지정하면 된다. 요소의 배경 크기가 반드시 지정되어야 한다. 이미지의 크기가 요소의 배경크기와 맞아야 한다. -요소의 배경이 이미지 크기보다 작으면 잘린다. -요소의 배경이 이미지 크기보다 크면 이미지 패턴이 반복된다. backgrount-repeat 속성 요소의 배경 크기가 삽입하려는 이미지보다 크면 이미지를 자동으로..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 박스 모델을 구성하는 속성 HTML 문서에서 사용된 각각의 요소가 어떤 원리로 웹 브라우저에 배치되어 표시되는지 이해하려면 박스 모델을 알아야 한다. 박스 모델은 모든 HTML 요소가 사각형의 박스로 둘러 쌓여 있다는 개념이다. 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 결국 웹 페이지를 만드는 본질이다. 박스 모델은 아래와 같은 4가지 요소로 구성된다. 박스 모델은 크롬 웹브라우저 개발자도구(F12, ctrl+shift+i)에서 살펴볼 수 있다. margin 영역 margin은 박스 모델에서 가장 외부에 있는 영역으로, 요소의 외부 여백을 담당..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. CSS의 특징 기본 스타일 시트 hn 태그는 단순히 태그만 사용했는데도 웹 브라우저에는 텍스트가 다양한 크기와 굵기로 표시됐다. HTML 태그는 태그 자체에 꾸밈을 담당하는 역할이나 기능이 없다. 그렇지만 웹 브라우저 자체에 기본 스타일 시트가 내장되어 있기 때문에 위와 같은 모양으로 표현될 수 있는 것이다. 기본 스타일 시트 기본 스타일 시트란 글꼴이나 크기, 색상, 굵기, 문단 설정과 같은 스타일이 미리 정의된 파일 또는 문서 양식을 말한다. 기본 스타일 시트에 정의된 스타일 속성보다 사용자가 정의한 스타일 속성이 우선 적용된다. 적용 우선순위와 개별성 specificity 위와 같..