728x90
반응형

 

HTML 에서 정식으로 날짜 입력폼을 지원하고 있습니다.

 

input 태그에 type 을 'date' 로 지정해주면 간단하게 만들어집니다.

 

 

 

 

이로 인해서 jquery에서 지원하던 datePicker를 사용하지 않고도 쉽고 빠르게 만들수 있게 되었습니다.

 

month 까지만 입력을 제한할 수도있고 시작날짜를 value 속성을 통해 지정할 수도 있습니다.

 

그리고 최소 입력 날짜와 최대 입력날짜도 제한할 수 있습니다.

 

 

 

 

input date를 사용하면서 문제는 기본 설정으로 연도입력이 6글자까지 입력이 된다는 문제가 있습니다.

 

아래와 같이 아무렇게나 입력해봐도 6글자까지 입력이 되고 있습니다.

 

 

 

JavaScript 에서나 Jquery 에서 입력한 값을 정규표현식으로 걸러내는 방식도 있지만 입력자체를 막아야 된다는 생각이 들었습니다.

 

정말 간단한 속성을 설정하여 년도 yyyy 즉 년도 입력을 4자리만 제한해 보겠습니다.

 

 

 

 

아래와 같이 max값을 주어 yyyy 년도값을 4자리로 제한을 주었습니다.

 

정말 간단하게 max 속성을 주는것만으로도 입력을 제한할 수 있습니다.

<input type="date" max="9999-12-31">

 

 

 

다양한 브라우저에서 쉽고 간편하게 input date를 사용해보세요.

 

728x90
반응형
728x90
반응형

 

다음 예제는 데이터가있는 테이블 을 렌더링하는 두 가지 다른 흥미로운 조각 사용법을 보여줍니다 . 

 

이것은 변경할 수있는 테이블 헤더와 데이터가 렌더링되는 본문의 두 가지 중요한 부분으로 구성된 재사용 가능한 테이블 조각입니다.

<table>
    <thead th:fragment="fields(theadFields)">
        <tr th:replace="${theadFields}">
        </tr>
    </thead>
    <tbody th:fragment="tableBody(tableData)">
        <tr th:each="row: ${tableData}">
            <td th:text="${row.id}">0</td>
            <td th:text="${row.name}">Name</td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

 

 

 

 

이 테이블을 사용하려면 필드 함수를 사용하여 자체 테이블 헤더를 전달할 수 있습니다 . 

 

헤더는 myFields 클래스 로 참조됩니다 . 테이블 본문은 데이터를 매개 변수로 tableBody 함수 에 전달하여로드됩니다 .

<body>
    <header th:replace="fragments/general.html :: header"> </header>
    <table>
        <thead th:replace="fragments/tables.html
              :: fields(~{ :: .myFields})">
            <tr class="myFields">
 
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <div th:replace="fragments/tables.html
          :: tableBody(tableData=${data})">
        </div>
    </table>
    <div th:replace="fragments/general.html :: footer"></div>
</body>

 

 

 

이것이 최종 페이지의 모양입니다.

<body>
    <div>
        <h1>Thymeleaf Fragments sample</h1>
    </div>
    <div>Data received</div>
    <table>
        <thead>
            <tr class="myFields">
 
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>John Smith</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>Jane Williams</td>
            </tr>
        </tbody>
    </table>
    <footer>
        <a href="/spring-thymeleaf/fragments">Fragments Index</a> |
        <a href="/spring-thymeleaf/markup">Markup inclussion</a> |
        <a href="/spring-thymeleaf/params">Fragment params</a> |
        <a href="/spring-thymeleaf/other">Other</a>
    </footer>
</body>

 

 

 

템플릿 관리를 쉽게 할 수있는 강력한 도구 인 Thymeleaf Fragments를 사용하여보기 구성 요소를 재사용하는 방법을 살펴 보았습니다.

 

728x90
반응형

'프로그래밍 > Spring' 카테고리의 다른 글

[STS] SpringToolSuite SVN 연결  (0) 2019.07.14
[Spring] Session Time Out Check  (2) 2019.05.31
[Spring] Thymeleaf 3 String 날짜 Format  (0) 2019.05.22
[Spring] Thymeleaf Number Format  (0) 2019.05.21
[Spring] Thymeleaf LocalDateTime Format  (0) 2019.05.15
728x90
반응형

 

이전글에선 티스토리 에디터 업데이트가 되고난 후에 Color Scripter 붙여넣기가 정상적으로 되지 않았던 문제에 대해서 작성하였습니다.

 

https://gigas-blog.tistory.com/128

불러오는 중입니다...

 

 

 

이번글에선 티스토리 업데이트가 되고 나서 강력한 기능인 코드블럭에 대해서 알아보겠습니다.

 

글쓰기 화면으로 이동하여 새로운 에디터를 사용하고 계시다면 아래와 같은 화면이 보이게 됩니다.

 

상단의 더보기 버튼을 클릭합니다.

 

 

 

 

 

여러가지 메뉴들이 펼쳐지는데 코드블럭 메뉴를 클릭합니다.

 

아래와같이 Color Script 처럼 코드를 입력하는 화면이 보여지게 됩니다.

 

 

 

 

여러가지 코드 설정도 가능합니다.

 

코드에 맞게 색상이 표현됩니다.

 

 

 

 

 

삽입을 할 코드를 붙여넣고 확인을 클릭합니다.

 

 

 

 

 

그러면 이전화면으로 전환되며 아래와 같이 코드가 깔끔하게 붙여지는것을 확인할 수 있습니다.

 

 

기존에 Color가 입혀진 코드를 입혀본적도 있지만 다른사이트를 거치지 않고 티스토리 에디터에서 바로 삽입을 할 수 있다는 장점이 있습니다.

 

몇번의 설정없이 바로 사용하기에 정말 좋은 방법인것 같습니다.

 

728x90
반응형

'일상 리뷰 > 기타 정보' 카테고리의 다른 글

Naver Cloud Server  (0) 2019.07.08
개인정보처리방침 만들기  (2) 2019.06.25
티스토리 업데이트 - Color Scripter 사용  (0) 2019.05.22
오리코(Orico) 1125SS SSD Guide (업그레이드) 개봉기  (0) 2019.03.15
개인통관고유부호 발급하기  (1) 2019.03.15

+ Recent posts

티스토리툴바