✨ Front-end67 [HTML] 스프링(Spring)에서 파일 생성 시 형식 추가 세팅 파일 메뉴의 Window -> Preferences를 클릭한다. 검색창에 template를 치고, HTML Files를 찾아 Templates를 선택하면 위와 같은 창이 뜨는데, New 혹은 Edit을 클릭하여 창을 생성 또는 수정한 후 OK를 누른다. 생성 or 수정한 HTML 파일 만들어보기 위와 같은 방법으로 마지막에 Finish를 누르면 생성이 된다 ! 2023. 3. 17. [JavaScript] 전체 체크박스 항목 선택 및 해제, 체크 여부 변경 See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen. 이번에는 자바스크립트만을 이용하여 체크박스를 간편하게 전체 선택 또는 해제 하는 방법에 대해 알아보았다. 첫번째 이벤트로, 체크박스 전체 선택 및 전체 해제에 대한 방법을, 두번째 이벤트로, 내용부에 있는 체크박스에 따라 제목줄 체크박스 체크 여부 변경에 대해서 자세히 기술해보려고한다. 위와 같이 HTML을 짜주고, body 태그가 끝나기 전에 js를 연결시켜준다. 첫번째 이벤트 체크 박스 전체 선택 및 전체 해제 기능을 해볼 것이다. 일단 제목줄에 있는 체크 박스를 선택해서 가져와야 한다. 나는 id태그에 checkAll을 주어 js로 가지고 왔다. 이후 체크박스 클릭시 실행되는 이벤트를 추.. 2023. 3. 9. CSS - div를 가운데 정렬 (inline-block) 이전 포스팅에서는 float과 overflow를 이용하여 div를 가운데 정렬해보았다. div를 가운데 정렬하기 위해서 또 한가지의 방법이 있다. 알아보자. HTML 삽입 미리보기할 수 없는 소스 .wrap > div { } 태그에 width를 추가하고, display 값을 inline-block으로 바꾸었다. .wrap > div { border : 1px solid black; background-color: maroon; width: 20%; display: inline-block; } float과 inline-block에는 차이점이 있다. float은 빈공간을 안띄워주고, inline-block은 공간을 띄워준다. 단, inline-block은 크기를 조절해주기가 float보다는 어려운 단점이 있다. 2023. 3. 7. CSS - div를 가운데 정렬 (float과 overflow) div를 사용했는데 내용을 중간으로 옮기고 싶을 경우가 있다. 아래와 같이 적용해보자 HTML 삽입 미리보기할 수 없는 소스 .wrap > div { } 태그에 width를 추가해주었다. .wrap > div{ /* >은 wrap의 자식 테이블 선택. */ background-color: fuchsia; border: 1px solid black; width: 20%; } .wrap > div { } 태그에 float을 추가해주었다. .wrap > div{ /* >은 wrap의 자식 테이블 선택. */ background-color: fuchsia; border: 1px solid black; width: 20%; float:left; } float를 적용시키면 인식을 못한다. 이 float을 감싸고 있.. 2023. 3. 7. 이전 1 ··· 10 11 12 13 14 15 16 17 다음
