Brute force Study

타임리프 몰아서 정리#Spring/Thymeleaf/타임리프 사용 선언/th:xxx=“value2”/타임리프 속성/th:href/th:onclick/반복 출력 - th:each/반복 상태 유지/내용 변경 - th:text/속성 변경 - th:value/속성 변경 - th:action/조건문 평가 - th:if, th:switch/텍스트 - text, utext/Escape/HTML 엔티티/Unescape/th:inline="none"/속성 값 설정/속성 추가/checked 처리">/블록 - /URL 링크 표현식 - @{...}/리터럴 대체 - |...|/변수 표현식 - ${...}/지역 변수 선언 - th:with/URL 링크 표현식2 - @{...}/URL 링크 간단히/타임리프 기본 객체/유틸리티 객체..

Tailwind - 다크모드#Web/CSSTailwind는 다크 모드를 적용할 수 있는 유틸리티 클래스를 제공하며, 기본적으로 운영 체제의 선호도에 따라 다크 모드를 적용하거나, 사용자가 직접 선택할 수 있게끔 설정할 수 있다.예시: dark 유틸리티 Writes Upside-Down The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. 평시와, 다크 모드가 활성화되었을 때 스타일을 각각 지정한다.다크 모드 전환 전략운영 체제 선호도 사용 (기본 전략,media)Tailwind는 기본적으로 운영 체제의 다크 모드 선호도에 따라 스타일을 ..

Tailwind - 트랜지션, 애니메이션#Web/CSSTailwind에서는 간단한 유틸리티 클래스를 통해 Transition 효과를 적용할 수 있다.기본 사용법transition 클래스는 색상, 배경, 보더 등 여러 속성에 전환 효과 적용.duration-500은 전환 시간을 500ms로 설정합니다.hover:bg-blue-900은 마우스를 올렸을 때 배경색을 blue-900로 변경합니다.전환 속성 지정 (transition-property)transition-all, transition-colors, transition-opacity 등의 클래스를 사용하여 특정 속성만 전환되도록 할 수 있습니다. Hover metransition-colors는 색상 변경에만 전환 효과를 적용합니다.duration-5..

Tailwind - 반응형 디자인#Web/CSSTailwind CSS는 미디어 쿼리를 사용하지 않고, 미리 정의된 브레이크포인트 유틸리티를 통해 반응형 디자인을 구현할 수 있다.브레이크포인트뷰포트 메타 태그Tailwind의 반응형 유틸리티를 사용하기 전에, 반드시태그를 HTML 문서의섹션에 추가해야 한다.브라우저가 페이지의 크기를 기기 화면 크기에 맞게 조정하도록 지시하는 것이다.ex) 배경색 변경 이 박스는 화면 크기에 따라 배경색이 바뀝니다.ex) 이미지 크기 변경ex) 배치 바꾸기 설명기본적으로 div는 block 레이아웃을 따르며, md:flex 클래스를 통해 화면 크기가 중간 이상일 때 flex 레이아웃으로 변환된다이미지와 콘텐츠는 모바일 화면에서는 각각 쌓이고, 중간 크기..

Tailwind - Layout(Container, Flexbox, Grid, Position)#Web/CSSContainercontainer 클래스는 웹 레이아웃에서 콘텐츠 영역을 깔끔하게 정리하고 중앙에 배치하는 데 주로 사용된다. 보통 본문이나 주요 섹션을 지정된 너비 안에 고정시켜 직관적인 레이아웃을 제공하는데 사용된다.주요 역할컨테이너는 웹 페이지에서 콘텐츠가 화면 크기에 맞춰 잘 정리되도록 도와준다.ex) 콘텐츠의 가로 길이를 적당하게 제한모바일 환경, 큰 모니터 환경, … 웹 페이지 타이틀 이 영역은 컨테이너 안에서 중앙에 배치되며, 화면 크기에 맞춰 최대 너비가 조절됩니다.mx-auto 유틸리티는 컨테이너를 가로로 가운데 정렬한다.컨테이너 속성 값가로 패딩 추가px-* 유틸리티 컨테이..

Tailwind - Core(Utility-First CSS, State)#Web/CSSUtility-First CSSUtility-First CSS는 미리 정의된 작은 유틸리티 클래스들을 사용하여 HTML 요소에 스타일을 직접 적용하는 방식이다. Tailwind CSS는 미리 정의된 유틸리티 클래스를 HTML에서 바로 사용해 빠르게 스타일을 지정하는 방식을 취한다.Hover, Focus, and Oother Stateshover, focus 등의 상태의 element을 스타일링할 때 유틸리티를 사용할 수 있다.EX)hover 상태 배경색 변경: hover:bg-blue-700Tailwind Css의 장점클래스 이름 발명의 필요성 없음: 기존 방식에서는 스타일을 지정하기 위해 새로운 클래스 이름을 만들어..

Tailwind - 간격 조절, Sizing#Web/CSS패딩 설정(padding)p 유틸리티 클래스를 사용하여 패딩을 설정할 수 있다. 이 박스는 모든 방향에 1rem 패딩이 있습니다. 이 박스는 좌우에 1.5rem, 상하에 0.5rem 패딩이 있습니다.마진 설정(margin)m 유틸리티 클래스를 사용하여 패딩과 유사한 방법으로 마진을 설정할 수 있다. 이 박스는 모든 방향에 1rem의 마진이 있습니다. 이 박스는 상단에 1.5rem, 하단에 0.5rem의 마진이 있습니다.mx-auto: 가로 중앙 정렬을 설정한다. margin-left와 margin-right를 자동으로 설정하여, 콘텐츠가 가운데로 배치된다.요소 간의 공간 조정 (space-between)요소 간의 간격을 조정할 때는 spac..

Tailwind - 컬러 및 배경, 보더 처리#Web/CSS배경색 설정(background-color) 배경색이 파란색입니다. 배경색이 연한 회색입니다.텍스트 색상 설정(text-color)이 문장은 빨간색 텍스트입니다.이 문장은 녹색 텍스트입니다.이 문장은 파란색 텍스트입니다.보더 스타일 설정(border)보더 두께, 색상, 모양 등을 쉽게 설정할 수 있다.예: border, border-2, border-gray-300, rounded-lg, rounded-full 이 상자는 회색 보더와 둥근 모서리를 가지고 있습니다. 이 상자는 파란색 보더와 완전히 둥근 모서리를 가지고 있습니다.Reference)Tailwind CSS 공식 문서짐코딩님 Tailwind CSS 완전 정복

Tailwind - Tyography 스타일링#Web/CSS폰트 크기, 폰트 두께, 텍스트 정렬, 라인 높이 등의 스타일 속성을 Tailwind의 유틸리티 클래스로 적용하는 방법에 대해 살펴보자.폰트 크기 조절(font-size)이 문장은 작은 크기입니다.이 문장은 큰 크기입니다.이 문장은 더 큰 크기입니다.폰트 두께 설정(font-weight)이 문장은 얇은 폰트입니다.이 문장은 일반 두께입니다.이 문장은 굵은 폰트입니다.텍스트 정렬(text-align)이 문장은 왼쪽 정렬되었습니다.이 문장은 중앙 정렬되었습니다.이 문장은 오른쪽 정렬되었습니다.라인 높이 조절(line-height)이 문장은 라인 간격이 매우 좁습니다.이 문장은 라인 간격이 넓습니다.Reference)Tailwind CSS 공식 문서짐..

Tailwind 설치 정리(V3.4.17 기준)#Web/CSS/TailwindTailwind CSS 설치 방법Play CDN을 사용하여 설치HTML Tailwind CSS 플러그인 활성화 방법HTML 태그에 플러그인 CDN 스크립트 태그 추가Tailwind CSS 공식 플러그인으로는 Typography, Forms, Aspect Ratio, Container Queries 등이 존재한다.참고)글을 작성하는 시점인 2025년 2월 현재, Tailwind CSS v4.0이 릴리즈되었고, 일부 플러그인(ex. 컨테이너 쿼리)의 기능이 Tailwind CSS 기본 코어에 포함되었습니다.Tailwind CSS IntelliSenseTailwind CSS의 유틸리티 클래스 자동 완성과 문법 오류 감..