이번 포스트에서는 CSS 우선순위에 대해 살펴보자.  CSS 우선순위 Cascading Style SheetCSS는 Cacading Style Sheet의 약자이다. Cascade의 사전적 의미는 '작은 폭포' 같은 것이고 CSS에서의 의미는 상위에서 하위로 단계적으로 적용된다는 의미일 것이다.웹 문서의 태그들은 서로 포함 관계에 있다. 이때 자식 요소에서는 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성을 그대로 물려 받는다. 예를 들어 에 글자색이나 글꼴을 지정하면 그 스타일은 하위 태그에 영향을 준다. 문제는 요소들이 계층적으로 사용되다 보니 하위에 있는 요소들에서는 상위에서 흘러들어오는 스타일이 중복될 수밖에 없다. 이처럼 웹 요소에 둘 이상의 스타일이 적용될 때 우선 순위에 따라 적..

그동안 modal 창이 필요할 때 부트스트랩을 자주 사용했었는데 이제(2022년? ㅎ) html의 기본 태그에도 modal 역할을 수행하는 녀석이 생겼다. 이름 하여    hello dialog?dialog는 단순히 써볼 수 있는데 dialog를 보여주기 위해서는 open 속성을 사용하면 된다. 안녕 난 다이어로그야!dialog의 기본 display는 none인데 open 상태일 경우는 block으로 변경된다. (미리 css 처리가 되어있고 이때 내부적으로는 HTMLDialogElement.show() 함수가 동작한다.)position 속성은 absolute를 가지므로 top, left 등의 속성으로 위치를 제어하기 용이하다. 기본적으로는 가운데 상단에 배치된다. 이벤트를 이용한 dialog 제어간단..

이번 포스트에서는 HTML 코드 작성시 코딩 속도에 날개를 달아줄 Emmet의 필수 사용법에 대해 알아보자. Emmet - the essential toolkit for web developers Emmet은 HTML 태그 작성을 매우 빠르게 할 수 있게 도와주는 도구이다. https://emmet.io/ Emmet — the essential toolkit for web-developers Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like ab..

이번 포스트에서는 inline 형태로 Thymeleaf를 사용하는 방법에 대해 살펴보자. inline style inlie expression 기본적으로 Thyleleaf는 html 태그에 사용자 정의 속성을 이용해서 부가적인 기능을 추가한다. inline style은 사용자 정의 속성 없이 [[${...}]] 처럼 두 개의 대괄호 내에 표현식을 작성하는 방식이다. property 사용 attribute 사용 제목: [[#{home.title}]] 사용자: [[${user.name}]] 만약 [[]] 자체를 사용해야 하는 경우에는 th:inline="none"을 이용해서 escape 시켜줘야 한다. A double array looks like this: [[1, 2, 3], [4, 5]]! inline..

이번 포스트에서는 Thymeleaf에서 페이지의 레이아웃을 재사용하기 위한 thymeleaf-layout-dialect에 대해 살펴보자.  레이아웃 재사용 웹 페이지 레이아웃의 특징Thymeleaf에서는 th:fragment, th:insert, th:replace를 이용해서 페이지마다 반복되는 뷰 부분(fragment)을 모듈화 하고 재사용할 수 있었다. 웹 페이지를 작성하다 보면 이런 fragment 만 복되드는 것이 아니라 레이아웃도 반복되는 것을 쉽게 알 수 있다.위 그림을 보면 regist.html과 modify.html은 header+footer fragment에 각각의 content가 들어간 것을 알 수 있다. detail.html과 manage.html은 base-layout에 추가로 c..

이번 포스트에서는 Thymeleaf에서의 layout 작성 방법에 대해 알아보자. Thymeleaf 레이아웃 th:fragment 일반적으로 웹 페이지들은 header, footer 등 반복적으로 등장하는 요소들을 가지며 이들을 매번 만들지 않고 fragment 같은 조각으로 만들어 놓고 재사용 한다. 이를 위해 Thymeleaf에서는 th:fragment를 사용한다. /src/main/resources/fragments 아래처럼 header.html과 footer.html을 만들어보자. header를 구성할 때는 각 페이지의 부제목(subtitle)을 파라미터로 전달받아서 사용하기 위해 header(subtitle)의 형태를 사용할 수 있다. Welcome To Thymeleaf Test Page 부제..

이번 포스트에서는 Thymeleaf에서의 제어문에 대해 살펴보자. 반복문 th:each Thymeleaf에서 반복문을 사용하기 위해서는 th:each를 사용한다. 반복의 대상은 배열이나 Collection, Stream 등이 가능하다. 간단히 th:each="item, status: ${iterable}" 문장의 사용예를 보면서 사용법을 익혀보자. noidageaddr count name age addr th:each는 for-each 문장과 유사하게 iterable 한 요소를 하나씩 item으로 분리해서 사용한다. item은 다시 ctx의 속성으로 등록되므로 ${item} 형태로 사용할 수 있다. 상태 관리 옵션으로 사용되는 status는 반복도는 상황을 체크하기 위한 여러 속성이 제공된다. statu..

이번 포스트에서는 표준 표현식을 이용해서 값을 출력하는 방법에 대해 알아보자.  표준 표현식 th:textth:text는 메시지를 출력하기 위해 사용되는 속성이다.표현식설명th:text="'some text'"주어진 some text로 대체th:text="#{property}"message source에 설정된 property를 활용하며 일반적으로 국제화(i18N)을 지원하기 위해 사용th:text="${attribute}"request scope에 저장된 attribute를 출력th:text와 유사하게 th:utext (utext: unescaped text)도 사용할 수 있다. text는 html 태그가 escape 처리되서 그냥 단순 문자열로 처리된다. 반면 utext는 html 태그가 escap..