codinglog
COTHE's technical blog
-
Spring Security 7.x HttpSecurity와 WebSecurity의 차이점
Spring Security 7.x는 단순한 버전 업그레이드가 아닌, 보안 설정 패러다임의 근본적인 전환을 의미합니다. 특히 HttpSecurity와 WebSecurity의 역할과 사용 방식이 명확히 재정의되면서, 이를 제대로 이해하지 못하면 보안 헤더 누락, 필터 미적용, 예상치 못한 인증 우회 등의 문제가 발생할 수 있습니다. 이 글에서는 Spring Security 6.4.5와 7.0.2의 차이점을 중심으로, 실무에서 반드시 알아야...
-
시리즈1.CSS 기본 원리와 렌더링 이해-번외-박스겹침현상
마진 겹침(Margin Collapse): 예상치 못한 동작 마진 겹침은 CSS의 가장 혼란스러운 동작 중 하나입니다. 수직 방향으로 인접한 블록 요소들의 마진이 하나로 합쳐지는 현상입니다. 형제 요소 간 마진 겹침 <!DOCTYPE html> <head> <style> .first { margin-bottom: 30px; background: #ff6b6b; height: 30px; } .second { margin-top: 20px; background: #4ecdc4; height: 30px; }...
-
시리즈1.CSS 기본 원리와 렌더링 이해-3편.CSS 박스 모델-모든 레이아웃의 시작점
이 포스트는 CSS 레이아웃의 가장 근본적인 개념인 박스 모델(Box Model)에 대해 다루겠습니다. 웹 페이지의 모든 HTML 요소는 사각형 박스입니다. 이 박스가 어떻게 구성되고, 크기가 어떻게 계산되는지 알아보겠습니다. 브라우저는 모든 것을 박스로 본다 브라우저 렌더링 엔진은 HTML 요소를 화면에 그릴 때 모든 것을 직사각형 박스로 처리합니다. 텍스트든, 이미지든, 심지어 둥근 버튼이든...
-
시리즈1.CSS 기본 원리와 렌더링 이해-2편.CSS 기본 개념-선택자부터 단위까지 완벽 정리
지난 글에서 브라우저가 CSS를 어떻게 렌더링하는지 알아봤습니다. HTML 파싱 → DOM 생성 → CSSOM 생성 → Render Tree → Layout → Paint → Composite 위와 같이 6단계 파이프라인을 통해 CSS가 화면에 그려진다는 것을 확인했습니다. 이제 CSS를 실제로 작성할 때 꼭 알아야 할 기본 개념들을 깊이 있게 살펴보겠습니다. 선택자는 어떻게 동작하고,...
-
시리즈1.CSS 기본 원리와 렌더링 이해-1편.CSS는 어떻게 브라우저에서 동작하는가?
HTML에 <div> 하나 추가했는데 갑자기 전체 레이아웃이 무너지거나, CSS 속성 하나만 바꿨는데 페이지가 버벅거리기 시작하는 경험이 있으신가요? 무엇 때문에 이런일이 벌어지는지 의문을 품었었다면, 이번 글이 답을 줄 수 있습니다. CSS는 단순히 “꾸미기”가 아니라, 브라우저의 렌더링 엔진과 긴밀히 연결된 하나의 시스템입니다. 이 시스템을 이해하면, 왜 어떤 CSS 속성은 성능에 악영향을 주고,...