스프링을 공부하다 보면 의존성 주입(DI, Dependency Injection)이라는 개념을 만나게 됩니다. DI는 객체 간의 관계를 외부에서 주입해주는 방식으로 코드의 유연성과 테스트 편의성을 높여주는 중요한 설계 기법입니다. 하지만 DI를 먼저 배우다보면 "왜 굳이 DI가 필요한 거지?"하는 의문이 들기도 합니다. 이번 글에서는 DI의 소중함을 직접 느끼기 위해 순수 자바 코드로 DI를 구현해보려 합니다. 지금 시작합니다.  1️⃣ 객체 직접 생성(new)의  문제점스프링 없이 객체를 사용할 때 가장 흔히 사용하는 방법은 `new` 키워드를 사용해 직접 인스턴스를 생성하는 것입니다. 예를 들어 서비스 코드 안에 리포지토리(=저장소)를 직접 생성하는 식입니다.public class MemberServ..

반응형 웹은 단순히 화면 크기에 맞춰 줄이는 것만으로 완성되지 않습니다. 진짜 반응형 웹을 만들기 위해서는 화면 크기에 따라 레이아웃이 자연스럽게 재배치되고, 불필요한 요소를 숨기거나 보여주는 대응 전략이 필요합니다. 이번 글에서는 미디어쿼리를 활용하여 실제로 레이아웃을 어떻게 변화시키는지, 자주 쓰이는 실전 패턴들을 정리해보겠습니다.  반응형 웹이 뭔지 아직 헷갈린다면? 👉 아래의 글을 먼저 보고 오는 걸 추천합니다  [🎨CSS] 반응형 웹 시작하기 — viewport, 미디어쿼리, flex-wrap까지요즘 웹사이트는 PC, 태블릿, 모바일처럼 다양한 화면 크기에서 모두 자연스럽게 보이도록 설계해야 합니다. 이때 꼭 필요한 개념이 바로 반응형 웹(Responsive Web) 입니다. 반응형 웹을 제..

요즘 웹사이트는 PC, 태블릿, 모바일처럼 다양한 화면 크기에서 모두 자연스럽게 보이도록 설계해야 합니다. 이때 꼭 필요한 개념이 바로 반응형 웹(Responsive Web) 입니다. 반응형 웹을 제대로 만들기 위해서는 단순히 화면 크기에 맞춰 크기만 조정하는 게 아니라 레이아웃이 유연하게 변하고 요소들이 자연스럽게 재배치되도록 설계해야 합니다. 이 글에서는 반응형 웹을 구성하는 핵심 요소인 viewport 설정, 미디어쿼리(media query), flex-wrap 같은 기본 기술들을 차근차근 정리해보겠습니다.  1️⃣ 반응형 웹(Responsive Web)이란?반응형 웹이란 하나의 HTML 코드로 다양한 화면 크기(PC, 태블릿, 모바일)에 자동으로 대응하는 웹 디자인 형식을 말합니다. 핵심은 한 번..

레이아웃을 구성하다 보면 콘텐츠가 부모 요소의 크기를 넘어버리는 상황을 자주 만나게 됩니다. 이때 요소가 넘치는 걸 어떻게 처리할지를 결정하는 속성이 overflow입니다. 이 글에서는 overflow 기본 개념부터 visible, hidden, scroll, auto까지 하나씩 정리해보겠습니다.  1️⃣ overflow란?`overflow`는 요소 안에 콘텐츠가 요소 크기를 초과했을 때 그 초과된 부분을 어떻게 처리할지를 결정하는 CSS 속성입니다. 기본적으로 모든 요소는 콘텐츠를 다 담아야 하지만 부모 요소 크기보다 내용이 커질 경우 `overflow` 설정에 따라 1)초과된 내용을 그냥 보여줄지 2)잘라버릴지 3)스크롤을 만들어줄지 4)상황에 따라 자동 처리할지를 결정할 수 있습니다. 속성 이름  ..

CSS에서 요소를 겹칠 때 어떤 요소가 위로 올라올지를 결정하는 것이 z-index입니다. 하지만 실제 레이아웃에서는 단순히 z-index 숫자만 비교하는 게 아니라 stacking context라는 보이지 않는 독립 그룹 구조까지 함께 이해해야 정확한 결과를 만들 수 있습니다.이 글에서는 z-index 기본 개념과, 실전에서 반드시 알아야 할 stacking context까지 한 번에 정리해보겠습니다. 📌 position이 아직 헷갈린다면 z-index와 stacking context을 배우기 전에 이 글부터 보고 오는 걸 추천할게요! 😊 [🎨CSS] CSS position 속성 총정리display 속성으로 레이아웃을 구성하는 방법을 익힌 뒤는 요소를 세밀하게 배치하고 조정할 수 있는 positi..

display 속성으로 레이아웃을 구성하는 방법을 익힌 뒤는 요소를 세밀하게 배치하고 조정할 수 있는 position 속성을 제대로 이해해야 합니다. 이 글에서는 position 속성의 기본 개념부터 static, relative, absolute, fixed, sticky 각각의 차이와 특징을 살펴보겠습니다.  📌 display가 아직 헷갈린다면 position을 배우기 전에 이 글부터 보고 오는 걸 추천할게요! 😊  [🎨CSS] CSS display 속성 총정리CSS는 기본 개념을 제대로 정리하지 않으면 나중에 flex나 grid 같은 레이아웃을 다룰 때 계속 헷갈리게 됩니다. 다르게 말하면 한 번만 제대로 정리하면 그 이후로는 어떤 레이아웃도 훨씬 쉽게 이sim-plism.tistory.com..

CSS는 기본 개념을 제대로 정리하지 않으면 flex나 grid 같은 레이아웃을 다룰 때 계속 헷갈리게 됩니다. 다르게 말하면 한 번만 제대로 정리하면 그 이후로는 어떤 레이아웃도 훨씬 쉽게 이해하고 다룰 수 있습니다. 이 글에서는 display 속성의 기본부터 flex와 grid 같은 레이아웃 방식까지 한 번에 깔끔하게 정리해보겠습니다.  1️⃣ display란 무엇인가?`display` 속성은 HTML 요소가 페이지에서 어떻게 보일지를 결정하는 CSS 속성입니다. 즉 이 요소를 박스처럼 보이게 할지, 줄 안에 끼워 넣을지 등을 설정하는 것이죠. HTML 태그마다 기본적으로 지정된 display 값이 있지만 우리는 CSS display 속성을 이용하여 기본 동작을 마음대로 바꿀 수 있습니다. 2️⃣ 주..

`Spring`과 `Spring Boot`는 둘 다 `Java` 기반의 웹 애플리케이션 개발에 사용되는 프레임워크입니다. 이름도 비슷하고 기능도 유사해서 많은 개발자들이 어떤 것을 선택해야 할지 고민하곤 합니다. 이 글에서는 여러분이 이해하기 쉽도록 두 프레임워크을 비교 분석해 보겠습니다. 1️⃣ 스프링(Spring)이란?Java는 오랫동안 사랑받아온 대표적인 프로그래밍 언어이지만 개발된 지 오래되어 몇 가지 불편한 점도 있습니다. 예를 들어, 다른 언어에 비해 속도가 느리고, 객체를 생성하고 주입하거나, 웹 요청을 처리하는 컨트롤러, 트랜잭션, 예외 처리, DAO 연결 등 모든 기능을 개발자가 일일이 구현해야 한다는 점이 있죠. 이런 작업을 매번 반복하다 보면, 코드는 점점 복잡해지고 재사용도 어려워집..