HTML 검색 결과
4 개의 검색 결과가 있습니다.
HTML , CSS

HTML 테이블(table) 안 tr 태그 div 태그로 감싸지지 않음

특정 화면에서 html table 을 만들고 tbody 영역 안 tr 태그가 여러 개 있는데 이 tr 태그들을 그룹화하여 동적으로 제어하려고 div 태그로 tr 태그를 나눠서 감싼 뒤 화면을 로드하여 렌더링 된 요소를 보면 div 태그는 생성되지 않는다. 이름 나이 주소 김철수 20 서울 홍길동 19 부산 이런 경우에는 하나의 table 안에 tbody 태그를 여러 개 생성할 수 있으니 tbody로 그룹화해서 활용할 수 있다. 이름 나이 주소 김철수 20 서울 홍길동 19 부산

2023. 9. 23. 20:59
Thymeleaf

Thymeleaf 타임리프 th:block 활용

th:block 은 HTML에 영향을 미치지 않는, *보이지 않는 블록을 생성하는 속성 * 예를 들어 부모요소가 있고 그안에 자식요소가 있는데 백엔드에서 넘겨받은 데이터로 부모요소와 자식요소의 text 값을 각기 다르게 표현하고 싶을 때 th:text나 th:utext 를 부모요소에 적용시키면 부모요소에 주입한 값으로 덮어씌워져서 그 안에 있는 자식요소는 아래 예시 코드처럼 소멸하게 된다. "제목" 이럴때 th:block 을 활용하여 아래 예시와 같이 사용하여 표현이 가능하다. "제목" "내용" * 또 다른 예로 List 안 List가 있는 구조의 데이터를 넘겨 받아 th:each로 이중 반복문으로 표현하는데 *outerList들 중에 내부에 innerList가 있는 outer가 있고 없는 outer가 ..

2023. 3. 5. 10:41
HTML , CSS

HTML input 태그 date 타입 날짜(달력) 입력 max 속성을 통한 연도 4자리 제한

날짜 정보를 입력받는 화면에서 input 태그에 type을 date 로 사용하여 구현하는 경우가 있는데 입력 창에서 연도 값을 타이핑 하다 보면 6자리 까지 입력이 되는 것을 확인할 수 있다. 물론 데이터를 넘기기 전에 자바스크립트를 통해 유효성 체크를 별도로 할 수 있지만 입력 자체를 4자리로 제한 하는 것이 깔끔할 수 있겠다는 생각이 든다. 그럴 경우 간단하게 태그의 속성 값으로 제어할 수 있을 듯 하다. input 태그에 max 속성을 주는데, 값을 위 이미지 처럼 설정 해주면 연도는 4자리를 넘어가게 되면 다음 월 입력 칸으로 넘어가게 된다 이후 입력 값에 대해서는 자바스크립트를 통해 유효성을 체크한 뒤 DB와 통신하면 될 것 같다.

2022. 7. 10. 13:30
HTML , CSS

HTML select 태그 form 태그 내에서 필수 입력 값으로 설정하는 방법

화면상 사용자에게 값을 입력 받을 때 select 태그를 이용할 때 가 있는데, 필수로 입력 하도록 제어 하고 싶다면, 위 코드와 같이 select 태그에 required 속성을 주고 option 태그들 중 디폴트 값을 하나 만든다. 그리고 디폴트 값이 기본적으로 선택되어져 있게 selected 속성을 주고 선택하기 위해 사용자가 옵션값을 선택하게 되면 디폴트 값은 사용하지 못하도록 disabled 속성을 준다. (다른 input 태그 들의 placeholder 용도로 사용) 그리고 디폴트 옵션에는 value 값을 "" 빈값으로 둔다. 그러면 사용자가 옵션을 건드리지 않고 submit을 하려고 할 경우 값을 입력하라는 알림과 해당 옵션으로 포커싱을 해준다.

2022. 3. 25. 20:40