codinglog

이 포스트는 CSS 레이아웃의 가장 근본적인 개념인 박스 모델(Box Model)에 대해 다루겠습니다. 웹 페이지의 모든 HTML 요소는 사각형 박스입니다. 이 박스가 어떻게 구성되고, 크기가 어떻게 계산되는지 알아보겠습니다. 브라우저는 모든 것을 박스로 본다 브라우저 렌더링 엔진은 HTML 요소를 화면에 그릴 때 모든 것을 직사각형 박스로 처리합니다. 텍스트든, 이미지든, 심지어 둥근 버튼이든...

지난 글에서 브라우저가 CSS를 어떻게 렌더링하는지 알아봤습니다. HTML 파싱 → DOM 생성 → CSSOM 생성 → Render Tree → Layout → Paint → Composite 위와 같이 6단계 파이프라인을 통해 CSS가 화면에 그려진다는 것을 확인했습니다. 이제 CSS를 실제로 작성할 때 꼭 알아야 할 기본 개념들을 깊이 있게 살펴보겠습니다. 선택자는 어떻게 동작하고,...

HTML에 <div> 하나 추가했는데 갑자기 전체 레이아웃이 무너지거나, CSS 속성 하나만 바꿨는데 페이지가 버벅거리기 시작하는 경험이 있으신가요? 무엇 때문에 이런일이 벌어지는지 의문을 품었었다면, 이번 글이 답을 줄 수 있습니다. CSS는 단순히 “꾸미기”가 아니라, 브라우저의 렌더링 엔진과 긴밀히 연결된 하나의 시스템입니다. 이 시스템을 이해하면, 왜 어떤 CSS 속성은 성능에 악영향을 주고,...

Java에서 객체 타입별로 다른 처리가 필요할 때 instanceof 남발로 인한 복잡한 코드와 확장성 문제를 Visitor Pattern으로 해결하는 방법을 다룹니다. 음악 스트리밍 서비스 예제를 통해 패턴의 원리를 단계별로 설명하고, Java 21의 최신 기능들과 실무 적용 방법까지 다룹니다. 오늘도 평범한(?) 목요일 아침, 커피를 마시며 코드를 보던 중 이런 생각이 들었습니다. “아, 또...

지금까지 제네릭 클래스, 제네릭 메소드, 와일드카드의 extends에 대해서 알아보았습니다. 드디어 우리의 목표 메소드를 완전히 해석할 수 있는 마지막 퍼즐 조각인 super 키워드에 대해 알아보겠습니다. public <T extends Comparable<? super T>> T max(Collection<? extends T> col) [리스트 1] 드디어 완전히 해석할 목표 super 와일드카드의 필요성 앞선 포스트에서 extends 와일드카드를 배웠는데, 왜...