타임리프는 스프링 없이도 동작하지만, 스프링과 통합을 위한 다양한 기능을 편리하게 제공한다. 타임리프 메뉴얼 기본 메뉴얼: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 스프링 통합 메뉴얼: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html 1. 스프링 통합 - 타임리프 추가기능 스프링 SpringEL 문법 ${@myBean} 스프링 빈 호출 지원 form 관리 추가 속성 th:object - 기능 강화, form command 객체 th:field, th:errors, th:errorclass form 컴포넌트 기능 - checkbox, radio button, list..
0. 이전 기본 문법 타임리프 사용 선언 th : PROPERTY = " @{} or ${} or | | or ( )" PROPERTY ex: name, class 같은거 의미 타임리프는 th:로 타임리프 문법이 시작된다. th에 적용할 property를 쓰고 " " 내부에 적용하고 싶은 문법을 적용한다. 어지간한 property는 다 th: property 종류 가능하다. th: property를 해도 그냥 property도 작성을 하는데 이는 렌더링 전에는 그냥 property가 적용되고 렌더링 후에는 th: property가 적용된다. @{} : url 경로 ${} : controller로 부터 받아온 model 객체의 key를 작성하면 value를 반환해줌 | | : 리터럴로 JS의 벡틱 같은 역..
1. 목록 tag ul : 순서 없는 목록 tag ol : 순서가 있는 목록 tag li : 목록 요소 ol tag Facebook Tweeter Linked In ul tag Facebook Tweeter Linked In 2. 정의 목록 특정 용어와 그 정의를 표현할 때 사용하는 tag dl : 정의 목록 tag (list) dt : 정의 용어 tag (term) dd : 정의 설명 tag (description) 정의 용어1 정의 설명 tag1 정의 설명 tag2 정의 설명 tag3 정의 용어2 정의 설명 tag1 정의 설명 tag2 정의 설명 tag3 3. table tag table : table 전체 border[property] : 표테두리 두께 지정 th : 행 내부 제목 넣는 칸 rows..
1. position, opacitoy position: fixed: web page 스클로을 내려도 계속 유지할 수 있도록 해주는 것. 고정 위치는 초기 설정되었던 div를 기준으로 한다. 가장 위에 차지한다. opacity: 투명도 position static(defalut) relative : 적용할 때 현 위치에서 좌우 상하 이동 absolute : position: relative가 되어있는 부모 중 가장 가까운 부모를 기준으로 이동, 만약 부모중 position relative가 없으면 body가 position relative이다. fixed most important : postition-absolute 1) use a lot 2) mistake - that need postition-re..
1. css margin 상쇄 collapse margin : 부모 border와 내부 border이 서로 붙어있으면 상하 margin은 적용이 안된다. 그래서 padding이란 개념이 도입 2. id, padding id -> # { } padding : border 반댓말 // id 지정 3. border border: block의 경계 의미 block, inline 모두 적용 4. class class : .으로 나타냄 class 내부에 여러개 지정이 가능하다. class="btn hello bye" id는 여러개 쓸수 없다. span에서는 좌우 : margin은 적용가능 - 상하 안됨 span에서는 상하좌우 : padding 적용 가능 5. inline-block div { display: inl..
1. html - css 2가지 방법 존재 우선권은 html 내부 작성이 가지고 있다. 1. html 내부에 작성 © 주식회사 느낌 낼수 있다. span1 a span2 p hello hello 4. display display property default value가 'inline'과 'block' 인 tag의 inline, block 변경 가능 div inline으로 변경시 inline 특성상 height와 width가 존재하지 않아서 사라지게 된다. 글자를 넣어도 height와 width 없다 block margin, padding, border 3가지 특성 margin: block 경계면의 바깥 공간 border: block 경계면 padding: block 경계면의 내부 공간 margin ..
1. 용어, 개념 element: html 시작 태그와 tag: element를 기반으로 작동 html layout layout은 결국 div div만 사용하면 너무 헷갈리니깐 이름을 넣어준 div라고 생각하면 된다. 이 중 head와 body는 의미 있는 div이다. 의미 없는 body 내부 div는 자신이 구성하고 싶은 layout에 맞춰서 div를 사용하면 된다. html layout 이미지를 보면 이해가 쉽다. head : meta 정보 담기 body : 실제 ui 꾸미는 전체 창 header main footer aside nav attribute: 속성으로 어떤 기능을 나타낸다. argument: attrubute에 들어가는 값으로 변경되는 값 html dom : html file 기준 att..
