개발자 문문님의 블로그

지난 글에서는 CSS 변수(Custom Properties)를 활용하여 다크 모드를 구현하는 방법을 알아보았습니다. 이번 글에서는 웹 서비스의 완성도를 높여주는 CSS 애니메이션에 대해 알아보겠습니다. 버튼에 마우스를 올렸을 때 부드럽게 색상이 변경되거나, Modal이 자연스럽게 등장하거나, Loading 화면에서 움직이는 효과를 만드는 것 모두 CSS 애니메이션 기술을 활용합니다. React와 Next.js에서도 별도의 애니메이션 라이브러리를 사용하기 전에 CSS 기본 애니메이션 기능을 활용하는 경우가 많습니다. 이번 글에서는 가장 많이 사용하는 transitiontransformanimation@keyframes를 중심으로 실무에서 활용하는 방법을 알아보겠습니다.목차CSS 애니메이션이 필요한 이유Tr..

지난 글에서는 CSS 변수(Custom Properties)를 활용하여 색상, 간격, 폰트 등의 값을 효율적으로 관리하는 방법을 알아보았습니다. 이번에는 앞에서 배운 CSS 변수를 활용하여 다크 모드(Dark Mode)를 구현해 보겠습니다. 요즘 대부분의 웹 서비스는 다크 모드를 지원합니다.GitHubYouTubeDiscordNotionChatGPT이처럼 사용자의 환경이나 취향에 따라 테마를 변경하는 기능은 이제 선택이 아닌 기본 기능이 되었습니다. React와 Next.js에서도 다크 모드는 매우 자주 구현되는 기능이며, CSS 변수와 함께 사용하면 유지보수하기 쉬운 구조를 만들 수 있습니다. 이번 글에서는 브라우저 설정을 자동으로 감지하는 방법과 사용자가 직접 테마를 변경하는 방법을 함께 알아보겠습니..

지난 글에서는 반응형 디자인(Responsive Design) 을 통해 다양한 화면 크기에 대응하는 레이아웃을 만드는 방법을 알아보았습니다. 이번에는 CSS를 더욱 유지보수하기 쉽게 만드는 기능, CSS 변수(Custom Properties)를 살펴보겠습니다. 처음에는 "CSS에도 변수가 있나?"라는 생각이 들 수 있습니다.하지만 프로젝트 규모가 커질수록 CSS 변수는 선택이 아닌 필수가 됩니다. 특히 React와 Next.js 프로젝트에서는 색상(Color), 간격(Spacing), 폰트(Font), 다크 모드(Dark Mode) 등을 관리할 때 CSS 변수를 적극적으로 활용합니다. 이번 글에서는 CSS 변수의 기본 개념부터 실무 활용 방법까지 자세히 알아보겠습니다.목차CSS 변수란?변수 선언하기변수 ..

지난 글에서는 CSS Grid를 이용해 2차원 레이아웃을 구성하는 방법을 알아보았습니다. 하지만 아무리 레이아웃을 잘 만들어도 PC에서만 정상적으로 보이고 모바일에서는 화면이 깨진다면 좋은 UI라고 할 수 없습니다.React와 Next.js 프로젝트는 데스크톱, 테블릿, 모바일 등 다양한 화면 크기에서 동작해야 합니다. 이번 글에서는 반응형 디자인(Responsive Design)을 구현하는 핵심 기술과 실무에서 자주 사용하는 패턴을 알아보겠습니다.목차반응형 디자인이란?Viewport 이해하기Media QueryMobile First vs Desktop FirstBreakpoint는 어떻게 정할까?반응형 단위(rem, %, vw, vh)clamp() 활용하기Container Query란?React 실무 ..

지난 글에서는 Position과 z-index를 이용해 요소를 원하는 위치에 배치하는 방법을 알아보았습니다. 이번에는 React 프로젝트에서 페이지 전체 레이아웃이나 카드 목록, 관리자 대시보드를 만들 때 자주 사용하는 CSS Grid를 살펴보겠습니다. Flexbox를 이미 배웠다면 "Grid도 결국 요소를 배치하는 거 아닌가?" 라는 생각이 들 수 있습니다.하지만 두 기술은 해결하려는 문제가 다릅니다. Flexbox는 한 방향(1차원)으로 요소를 배치하는 데 강합니다.Grid는 행(Row)과 열(Column)을 동시에 다루는 2차원 레이아웃에 강합니다.이번 글에서는 Grid의 기본 개념부터 실무 활용 패턴까지 차근차근 알아보겠습니다.목차CSS Grid란?Grid Container와 Grid Itemdi..

React 프로젝트를 만들다 보면 다음과 같은 UI를 자주 구현하게 됩니다. 화면 상단에 고정되는 Header항상 화면 아래에 떠 있는 버튼(FAB)Dropdown 메뉴TooltipModal이러한 UI를 구현하는 핵심이 바로 Position입니다. 처음에는 relative, absolute, fixed, sticky가 비슷해 보여 헷갈릴 수 있습니다. 하지만 각각의 역할과 기준만 이해하면 대부분의 레이아웃을 쉽게 구현할 수 있습니다. 이번 글에서는 Position의 동작 원리부터 z-index를 이용한 요소 겹치기까지 실무 중심으로 알아보겠습니다.목차Position이란?position: staticposition: relativeposition: absoluteposition: fixedposition:..

지난 글에서는 display: flex를 시작으로 Flexbox의 기본 개념을 알아보았습니다.하지만 실제 React 프로젝트에서는 단순히 요소를 정렬하는 것만으로는 부족합니다. 다음과 같은 상황을 만나게 됩니다."왼쪽 사이드바는 고정하고 오른쪽 콘텐츠만 늘어나게 하고 싶다.""카드 목록이 화면 크기에 맞게 자동으로 늘어나게 하고 싶다.""검색 창은 남은 공간을 모두 차지하고 버튼은 고정하고 싶다." 이런 레이아웃을 만들기 위해 사용하는 것이 바로 Flexbox의 심화 속성입니다. 이번 글에서는 실무에서 자주 사용하는 Flexbox 속성을 자세히 알아보겠습니다.목차flex-grow란?flex-shrink란?flex-basis란?flex 단축 속성flex-wrapalign-selforder실무 레이아웃 패턴..

웹 페이지를 만들다 보면 이런 경험을 한 번쯤 해보셨을 겁니다. "버튼의 width를 100%로 줬는데 왜 적용되지 않지?""span에 margin을 줬는데 왜 원하는 대로 동작하지 않지?""display: none과 visibility: hidden은 뭐가 다를까?"이러한 문제는 대부분 display 속성을 이해하면 쉽게 해결됩니다.이번 글에서는 HTML 요소가 화면에 배치되는 방식과 React 컴포넌트를 만들 때 자주 사용하는 display 속성을 알아보겠습니다.목차 display란?HTML 요소는 기본 display를 가지고 있다blockinlineinline-blocknonevisibility: hidden과의 차이React에서 display를 사용하는 예Flexbox란? 왜 Flexbox가 필요..

개요React 컴포넌트가 원하는 모양대로 배치되지 않는다면, 대부분의 원인은 Box Model을 제대로 이해하지 못했기 때문입니다.이번 글에서는 Box Model의 개념부터 box-sizing을 사용하는 이유까지 알아보겠습니다.목차 Box Model이란?모든 HTML 요소는 박스(Box)이다Box Model의 4가지 구성 요소ContentPaddingBorderMarginwidth와 height는 어디까지의 크기일까?box-sizing이 필요한 이유border-box를 사용하는 이유React에서 Box Model이 중요한 이유실습: 카드(Card) 컴포넌트 만들기 Box Model이란?HTML에서 모든 요소는 하나의 사각형(Box)로 취급됩니다. 예를 들어 아래와 같은 버튼이 있다고 가정해 보겠습니다.로..

개요웹 개발을 시작하면 가장 먼저 접하는 기술이 HTML, CSS, JavaScript입니다. 하지만 React나 Next.js를 공부하려는 분이라면 이런 고민을 한 번쯤 해봤을 것입니다. 결론부터 말하면 그럴 필요는 없습니다. React 개발자가 되기 위해서는 CSS의 모든 문법을 외우기 보다는 컴포넌트를 만들기 위해 필요한 CSS를 먼저 이해하는 것이 훨씬 중요합니다. 이번 글에서는 React 개발자가 알아야할 CSS의 가장 기본적인 개념만 빠르게 정리해보겠습니다.HTML, CSS, JavaScript의 역할기술역할HTML웹 페이지의 구조를 만든다CSS웹 페이지를 꾸민다JavaScript웹 페이지에 동작을 추가한다 React에서는 CSS를 어떻게 사용할까?순수 HTML에서는 CSS 파일을 직접 연결해..