Front-End19 margin 과 gap margin: 개별 요소 간에 원하는 곳에 자유롭게 간격을 줄 수 있습니다.gap: flex나 grid 레이아웃에서 자식 요소 간에 균일한 간격을 적용할 때 사용됩니다.gap은 display: flex 또는 display: grid에서만 작동합니다. 만약 상위 컨테이너가 제대로 flex 레이아웃으로 설정되지 않았다면 gap이 적용되지 않을 수 있습니다. 따라서 부모 컨테이너에 display: flex가 적용되어 있는지 다시 확인해야 합니다. 로그아웃 로그인 회원가입 .. 2024. 9. 29. float flex gird 태그 float왼,오른쪽으로 지정해 div를 띄울 수 있다.float는 flex 보다 고전적인 방식이므로 모든 브라우저에서 float 방식으로 화면 구성 가능 flexfloat과 다르게 부모 - 자식 관계로 동작한다.반응형 디자인 gridflex 처럼 부모-자식 관계로 동작 flex와 grid의 차이flex는 1차원 정렬 (가로, 세로 만 정렬이 가능)grid는 2차원 레이아웃 만들기 가능, 컬럼과 로우 동시에 설정가능(가로한칸, 세로두칸) 우월한 것은 없다 만들고 싶은 페이지를 제일 잘 구현할수만 있으면 그걸로 OK 2024. 9. 25. [Thymeleaf] 조건문 사용하기 (+ th:block) if-else문의 경우는 [th:if]와 [th:unless]를 사용아래는 div 에 포함되어있는 button 영역에 대해서 조건문을 사용한 것 로그아웃 로그인 또는 th:block 을 사용하면 div 자체도 포함가능 로그아웃 로그인 이렇게 block 으로 감싸주면 div 두개의 영역을 포함하도록 하는 것도 가능 출처: https://ssd0908.tistory.com/entry/thymeleaf-if-else-조건문-사용방법 [에스제이:티스토리] 2024. 9. 22. [HTML] p 태그와 input 태그 시작하기Fetch API를 사용해서 프론트에 입력된 데이터를 서버에 보내서 데이터를 수정하게 하는 기능을 만드는 중이다. where절에 userCode가 들어가야지 데이터 조건을 통과해 수정이 되는 쿼리인데, 쿼리가 오류없이 잘 돌았는데도 데이터 수정이 안되는 상황이 생겼다. 그래서 일단 프론트의 값을 다 받아오는지 확이하려고 log.info 로 찍어봤더니 userCode 값을 가져오지 못하고 있었다... 알고보니 원래 나는 태그에 userCode를 value 속성에 정의해서 js에서 받아서 서버로 보내려고 했는데 p태그는 valuer 속성을 사용하는게 안됐던 것이었다... 그래서 input 태그로 바꾸고 value 에 정의를 하니 값이 바로 들어가졌다..! ( input, textarea 같은 폼.. 2024. 9. 21. 이전 1 2 3 4 5 다음