프론트엔드
-
Javascript프론트엔드 2022. 8. 26. 02:11
• attr() ↪ 요소의 속성의 값을 가져오거나 속성을 추가 ① .attr(attributeName) $( "form" ).attr( "action" ); : 태그의 action 속성을 가져옴 ② .attr(attributeName, value) $( "form" ).attr( "action", "/guestbook/remove" ); : 태그의 action 속성에 값으로 /guestbook/remove 를 지정 • confirm() ↪ 확인, 취소 버튼을 보여주는 다이얼로그 박스를 보여줌 ↪ 즉, 파일을 수정하거나, 삭제할 때 등 재확인하기 위해 사용하는 경우가 많음 $(".modifyBtn").click(function() { if(!confirm("수정하시겠습니까?")) { return; } } ..
-
Thymeleaf 정리프론트엔드 2022. 8. 23. 16:44
th:replace 각 화면에 분리해놓은 fragment를 붙여넣을 때 사용 태그 전체를 지정한 fragment로 교체해줌 th:insert th:replace와 유사한 기능 th:replace와의 가장 큰 차이점은 th:insert가 속한 태그 내부에 fragment를 삽입해줌 th:action form 태그와 같이 사용. 지정한 속성값 경로로 요청을 보낼 때 사용 위 코드는 POST 방식으로 전송할 수 있도록 지정 Thymeleaf의 링크 '@{ }' 를 이용 Thymeleaf의 반복문 th:each = "변수: ${목록} " th:block HTML의 태그가 아닌 오직 Thymeleaf만이 제공하는 자체 태그 => HTML로 처리X th:text나 th:value등을 써야하는 다른 태그들과 달리 별..
-
HTML 요약프론트엔드 2022. 7. 24. 19:25
웹 브라우저에 어떤 표준에 따르는 html인지 알려주는 용도 은 문서의 head와 body를 감싸야 함 HTML 기술소개 숫자 리스트 EX 1. 2. 3. ~ • ↪ 단락을 나눠줌 • ↪ 줄바꿈 ↪ 을 하지 않음 (닫지 않아도 됨) • ↪ ↪ 를 하지 않아도 됨 ↪ 만약 이미지 경로가 잘못 되면 alt의 "산 이미지" 텍스트를 보여줌 (alternative text) ↪ title 태그로 인해 이미지에 커서를 붙이면 "산 이미지" 텍스트를 보여줌 • ↪ 표 ↪ : table의 테두리 정하기 ↪ : table row (행) ↪ : table의 한 칸 ↪ : 표의 카테고리 -> 진하게 바꿔줌 ↪ : 표의 정보 ↪ : 표의 가장 아래에 위치하게 됨 이름 성별 주소 최진혁 남 청주 최유빈 여 서울 ↪ 표 병합 ..