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 드라이버는 커넥션 객체를 생성해서 클라이언트에 반환한다..

Set#Java자바가 제공하는 Set1 - HashSet, LinkedHashSet자바의 Set 인터페이스는 java.util 패키지의 컬렉션 프레임워크에 속하는 인터페이스 중 하나이다. Set 인터페이스는 중복을 허용하지 않는 유일한 요소의 집합을 나타낸다. 그러다보니, 특정 요소가 집합에 있는지 여부를 확인하는데 최적화되어 있다.Set 인터페이스는 HashSet , LinkedHashSet , TreeSet 등의 여러 구현 클래스를 가지고 있으며, 각 클래스는 Set 인터페이스를 구현하며 각각의 특성을 가지고 있다.주요 메서드add(E e) 지정된 요소를 세트에 추가한다(이미 존재하는 경우 추가하지 않음).addAll(Collection c) 지정된 컬렉션의 모든 요소를 세트에 추가한다.contain..

HashSet#Java이전 챕터에 처음 정의했던 Set의 성능을 해시 알고리즘을 통해 평균 O(1)으로 개선해보자.MyHashSetV1단순히 해시 인덱스를 다음과 같은 방법으로 구한다.public class MyHashSetV1 { static final int DEFAULT_INITIAL_CAPACITY = 16; LinkedList[] buckets; private int size = 0; private int capacity = DEFAULT_INITIAL_CAPACITY; public MyHashSetV1() { initBuckets(); } public MyHashSetV1(int capacity) { this.capacity = capacity; initBuckets(); } privat..