Front-End5 Thymeleaf 공부하기 (2) : 속성 값 설정, 반복, 조건, 주석, 블록, 자바스크립트 인라인, 템플릿 조각, 템플릿 레이아웃 1. 속성 값 설정 타임리프는 주로 HTML 태그에 th:'속성명' 을 지정하는 방식으로 동작한다. th:'속성명' 로 속성을 적용하면 기존 속성을 대체한다. 만약 기존 속성이 없으면 새로 만든다. checkbox 같은 경우 th:checked="true, false" 로 사용한다 속성 설정 속성 추가 - th:attrappend class 속성 뒤에 붙는다 = - th:attrprepend class 속성 앞에 붙는다 = - th:classappend class 속성에 자연스럽게 추가 = checked 처리 - checked o - checked x - checked=false 2. 반복문 타임리프에서 반복은 th:each 를 사용한다. 추가로 반복에서 사용할 수 있는 여러 상태 값을 지원한다. ind.. Front-End/thymeleaf 2022. 10. 11. Thymeleaf 공부하기 (1) : 텍스트, 변수, 기본 객체, 유틸리티 객체와 날짜, url 링크, 리터럴, 연산 본 Thymeleaf 공부하기 시리즈는 김영한 님의 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 강의를 듣고 작성한 내용입니다. 들어가면서 몇몇 포스팅에서 계속 이야기해왔지만 나는 정말정말 HTML 에 서툴다. CSS 는 말 할 것도 없고. 다만 어쨌든 내가 만든 프로젝트의 결과물들을 단순한 자바 코드로 보여 줄 수는 없었기에 HTML 을 공부...가 아니라 검색해서 사용해왔다. 다행히도 JSP 와 JSTL 을 배운 경험이 있어서 JSP 로 프론트 페이지를 겨우 구현할 수는 있었다. 사실 jsp 를 쓰면서 굉장히 불편했던 점이 많았다. JSP의 특성상 HTML 파일에 JAVA 코드가 들어갈 때가 많았고, JAVA 코드가 아닌 JSTL 을 사용해서 구현한다고 하더라도 JSTL 과 HTML, CSS 까.. Front-End/thymeleaf 2022. 10. 11. 데이터 형식 다루기 : JSON , XML 지금까지 json 을 엄청 나게 많이 사용하고 또 사용할때마다 정리를 했었다. 그런데 이제보니 JSON 이 제대로 무엇이고 JAVA 에서 어떻게 만들 수 있고, 어떻게 전달하고 하는 그런 것들에 대해서 적어놓은 글이 없다는 것을 깨달았다. 또한 JSON 과 함께 많이 쓰이는 XML 에 대해서도 이번 기회에 정리해놓고자 한다. JSON JavaScript Object Notation JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 JSON 은 참으로 위대한 자료형이다. 만들기 쉽고, 보내기 쉽고, 알기 쉽다! JSON 은 기본적으로 { KEY : VALUE } 형식으로 이루어져 있다. 이는 자바에서의 hashmap .. Front-End 2022. 6. 8. 1. CSS 다루기 - CSS 기본기 1. CSS란? CSS 는 Cascade Style Sheet 의 약자로 html 에 디자인적 요소를 추가하기 위한 언어(기능) 지금까지 보았던 어떤 언어들과도 살짝 다르기 때문에 기억해야할 것들이 많다ㅠ 태그 전체에 적용할 때는 태그명 { ~~ } 을 사용하고 보다 구체적으로 css 를 적용할때는 태그명#id값 { ~~~ } 을 사용한다. 자주 사용되는 CSS 속성 속성 설명 margin - 여백을 주는 속성. margin-top: 20px 라고 한다면 위쪽에 20px 만큼 여백을 생성함. 또한 margin 은 12시 방향에서 시계방향으로 정의하는 것을 원칙으로 한다. - margin auto 를 사용하면 사용자 창의 크기에 맞게 중앙에 위치한다 color, background-color 글자색과 배경.. Front-End/CSS 2022. 4. 15. 1. html 다루기 - tag 구조 와 종류, form 백엔드를 공부하면서 사실 프론트쪽인 html 이나 CSS, js 같은 것들은 안해도 되지 않을까...했지만 역시나 안하면 안되겠더라구요ㅠㅠ결국 프론트를 어느 정도는 알아야 백엔드에서 편하게 할 수 있어서 깊게는 아니더라도 간단하게라도 이것들에 대해서 정리하고 공부해둘까 합니다. 1. 웹 프로그래밍 개요 웹 프로그래밍 : 하이퍼텍스트 프로토콜 (hypertext protocol)을 활용하여, 월드 와이드 웹 (WWW: World Wide Web)을 통해 정보를 공유하는 환경을 구현하는 것 HTML5 하이퍼텍스트 (Hyper text) : 텍스트, 이미지, 영상 같은 문서의 개체가 서로 연결되어 있는 것 - 마크업 언어 (Markup Language) : 태그 (tag)를 이용하여 문서나 데이터의 구조를 명.. Front-End/HTML 2022. 3. 18. 이전 1 다음
