본문 바로가기

Front-End24

[ 타임리프 ] 문법03 ${ #numbers.sequence( ) } #numbers 숫자 유틸리티 개체 .sequence(from, to) : from부터 to까지 1씩 증가 .sequence(from, to, step) : from부터 to까지 step씩 증가  subList()는 Java의 List 인터페이스에서 제공하는 메서드 2025. 2. 5.
[ 타임리프 ] 문법 정리 02 th:utextinnerHTML처럼 동작하려면 th:utext를 사용 ( HTML을 포함한 내용을 렌더링 )텍스트로만 처리해야 하는 경우 th:text를 사용 2025. 1. 9.
HTML tag와 속성, CSS 선택자 Tag , , , , , , , ,  , , .... ,    Attribute속성사용예시hrefa href="https://www.w3schools.com"> Visit W3Schools /a>stylep style="color:red;">This is a red paragraph./p>src , width, heightimg src="img_girl.jpg" width="500" height="600">classdiv class="city">  ,  h2 class="city main"> id h1 id="myHeader"> name 속성 중복 가능: 한 HTML 문서 내에서 동일한 name 값을 가진 요소들이 여러 개 존재할 수 있습니다. 용도: 폼 요소(, ,  등)에서 사용 서버로 .. 2024. 12. 22.
Bootstrap 시작 https://www.w3schools.com/ W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com저기에 이것저것 많음 아래 코드 추가해주면 부트스트랩 바로 사용 가능! 다양한 UI들 제공함이미지와 해당 코드 주어짐 2024. 12. 8.
[ 타임리프 ] 문법 정리 01 html에 th:속성(문법)=" ~ " , ${ }${ } 는 java문법과 비슷한 환경을 제공th: 와 ${ }를 java쪽에서 처리해서 html로 만들어 줄듯th:replace=" ~ "다른 템플릿 파일 포함 src / main / resources / templates 아래있는 include폴더에서 footer.html파일 가져와서 넣어줌 th:text="${ }"해당 값을 text형식으로 넣어줌자바 컨트롤러쪽에서 model.addAttribute("message","Model addAttribute"); 일때, Model addAttribute 으로 출력됨 [[ ${  } ]]html일반 텍스트 자리에서 해당 값을 출력해줌 [[${postWithOthers.investPost.content}].. 2024. 7. 5.
HTML, data- 속성 HTML 요소에 커스텀 데이터를 저장하기 위해 사용되는 data- 속성 이 속성은 JavaScript를 통해 접근할 수 있으며, 일반적으로 특정 요소에 관련된 데이터를 저장할 때 사용  data속성의 post-id 에 게시물의 ID를 저장 data속성중 post-id의 값을 가져오는거$(".likeBtn").on("click", function(e) { var postId = $(this).data("post-id"); ~}); 2024. 7. 4.

티스토리툴바