Tailwind border flex 사용법: 레이아웃 기본 클래스 기준
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 보더 두께, 방향, 색상, 라운딩, flex 배치와 정렬 클래스를 정리합니다. 클래스 이름을 따로 외우기보다 실제 CSS 속성과 연결해서 보는 데 초점을 둡니다. border는 선을 켜는 기본 스위치에…
더 읽기프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
Tailwind CSS 기본 클래스 사용법: text font bg spacing 익히기
이 글에서 정리하는 내용 Tailwind CSS 기본 클래스는 전부 외워야 하는 목록이 아니라 CSS 속성을 짧게 부르는 규칙에 가깝습니다. Tailwind CSS v4 기준으로 text, font, bg, w, h, p, m 접두사가 타이포그래피, 색상…
더 읽기
Tailwind CSS 실무 로드맵: 기본 클래스부터 반응형·상태·동적 클래스까지
이 글에서 정리하는 내용 Tailwind CSS는 클래스 이름을 많이 외우는 도구처럼 보이지만, 실제로는 화면을 만드는 순서대로 익힐 때 훨씬 편해집니다. 기본 유틸리티, flex와 grid, 반응형, 상태 variant, 다크 모드, 동적 className 문…
더 읽기
Container Query 사용 기준: media query가 복잡할 때
이 글에서 정리하는 내용 저는 웹퍼블리싱 실무에서 media query만으로 버티면 CSS 분기가 왜 점점 복잡해지는지, 그리고 어떤 순간에 판단 기준을 컨테이너 쿼리로 옮겨야 하는지를 정리해보겠습니다. 이 글을 끝까지 보면 페이지 전체 반응형은 media query로…
더 읽기
TypeScript infer 사용법: 조건부 타입에서 타입 추론하기
이번 학습을 통하여 이 문서는 TypeScript의 조건부 타입과 infer를 처음 접하는 분도 쉽게 이해할 수 있도록 다시 정리한 학습용 버전입니다. 복잡한 타입을 자동으로 추출하거나 배열과 함수·API 타입을 분석하는 방법을 단계별로 배울 수 있게 구…
더 읽기
JavaScript URLSearchParams 사용법: URL 파라미터 읽고 수정하기
이 글에서 정리하는 내용 저는 URL 파라미터가 무엇인지부터 시작해, JavaScript에서 값을 읽고 수정하는 방법, 그리고 퍼블리셔 실무에서 바로 쓸 수 있는 활용 패턴까지 한 흐름으로 정리하겠습니다. 이 글을 끝까지 보면 이벤트 페이지의 탭 유지, 필터 상태 보존…
더 읽기
CSS Baseline 보는 법: 2026년 안전한 속성 사용 기준
이 글에서 정리하는 내용 2026년 기준으로 최신 CSS를 어디까지 운영 서비스에 넣어도 되는지, Baseline 배지를 읽는 법과 실제 프로젝트 판단 기준을 함께 정리합니다. 단순히 지원 여부만 보는 것이 아니라 핵심 기능인지, fallback이 가능한지, 웹뷰와 오…
더 읽기
HTML CSS 이미지 깨짐 해결: 찌그러짐과 화질 문제 체크리스트
이 글에서 정리하는 내용 저는 반응형에서 이미지가 깨지거나 찌그러지거나 자글거릴 때, 어떤 순서로 확인해야 하는지 체크리스트 기준으로 정리하겠습니다. object-fit과 background-size 차이부터 큰 이미지를 작게 보여도 거칠어 보이는 원인까지 문제 단위로…
더 읽기
JavaScript 배열 메서드: map filter forEach reduce 차이
주요 포인트 한눈에 보기 배열(Array)은 장바구니, 검색 결과, 태그 목록처럼 “화면에 반복 렌더링되는 목록”의 출발점입니다. 이 문서는 배열을 만들고(생성), 원본을 지키고(복사), 필요한 것만 골라 쓰는(메서드) 흐름을 예제로 빠르게 정리합니다. …
더 읽기
Jest console.error 테스트: try catch 에러 검증 방법
이 글에서 정리하는 내용 이 글은 Jest 테스트에서 try / catch로 처리된 에러가 왜 실패로 인식되지 않는지 설명하고, 에러를 던지지 않는 구조에서 console.error 호출 여부로 오류를 검증하는 실무 테스트 패턴을 정리합니다. 개…
더 읽기