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의 유틸리티 클래스 자동 완성과 문법 오류 감..

SQL 코테 대비 문법 정리 - MySQL#Database참고) SQL 쿼리의 실행 순서FROM 절WHERE 절GROUP BY 절집계 함수HAVING 절SELECT 절ORDERED BY 절LIMIT/OFFSET(Optional)DDLcreate table student ( ID varchar(5), name varchar(20) not null, dept_name varchar(20), tot_cred numeric(3,0), primary key (ID), foreign key (dept_name) references department);SELECT, FROM, WHERE설명SELECT: 조회할 컬럼을 지정합니다.중복을 제거하려면 select 뒤에 distinct 키워드를 삽입합니다.FRO..

02. 커넥션풀과 데이터소스 이해정리이전 챕터에서 학습한 코드의 동작 방식에는 한 가지 큰 문제점이 있다. 쿼리를 날릴 때 마다 커넥션을 매번 획득한다는 점이다.데이터베이스 커넥션을 획득할 때는 복잡한 과정을 거친다.애플리케이션 로직은 DB 드라이버를 통해 커넥션을 조회한다.DB 드라이버는 DB와 TCP/IP 커넥션을 연결한다. 물론 이 과정에서 3 way handshake 같은 TCP/IP 연결을 위한 네트워크 동작이 발생한다.DB 드라이버는 TCP/IP 커넥션이 연결되면 ID, PW와 기타 부가정보를 DB에 전달한다.DB는 ID, PW를 통해 내부 인증을 완료하고, 내부에 DB 세션을 생성한다.DB는 커넥션 생성이 완료되었다는 응답을 보낸다.DB 드라이버는 커넥션 객체를 생성해서 클라이언트에 반환한다..