#CSS

총 27개의 글

화면 해상도와 뷰포트 차이 완벽 정리 - 같은 1920인데 왜 다르게 보일까

모니터는 1920px인데 브라우저는 1536px이라고 말합니다. 화면 해상도와 뷰포트의 차이, 그리고 그 차이를 만드는 기기 픽셀 비율(DPR)의 원리를 실제 기기 수치와 함께 쉽게 정리했습니다.

float와 position으로 씨름하던 레이아웃 작업, CSS 그리드는 코드 몇 줄로 끝냅니다. 핵심 속성 정리표와 카드형 레이아웃 실전 예제, 미디어 쿼리 없는 반응형 구현 팁까지 한 번에 확인하세요.

HEX 코드만 보면 막막했던 색 선택, HSL 색상 모델을 이해하면 달라집니다. 색상, 채도, 명도 숫자의 의미부터 CSS 활용법, 실무 배색 요령까지 한 번에 정리했습니다.

웹에서 매일 마주치는 #FF5733 같은 6자리 코드, 어떤 원리로 색이 되는 걸까요? 16진법 기초부터 색상코드 읽는 법, 실무 활용 팁까지 한 번에 정리했습니다.

브라우저마다 레이아웃이 깨지는 원인, 오타 하나일 수 있습니다. W3C CSS 유효성 검사기와 Stylelint로 CSS 오류를 자동으로 찾아내는 방법을 단계별로 정리했습니다.

글자 크기는 px로? rem으로? 브라우저 기본값 16px부터 접근성 문제까지, CSS 단위 px em rem 차이를 예제와 함께 한 번에 정리했습니다.

모바일 480px, 태블릿 768px, 데스크톱 1024px. 헷갈리는 반응형 웹 화면 크기 기준을 프레임워크별 표와 실전 미디어 쿼리 예제로 한 번에 정리했습니다.

float와 position으로 레이아웃 짜느라 고생하셨나요. CSS 플렉스박스 가이드로 가로 세로 정렬, 간격, 반응형 배치까지 속성 하나하나 예제와 함께 익혀보세요.

아이콘 수십 개를 따로 불러오면 사이트가 느려집니다. 이미지 스프라이트 생성기로 한 장에 묶어 HTTP 요청을 줄이고 로딩 시간을 단축하는 방법을 정리했습니다.

#FF5733 같은 HEX 코드를 rgb(255, 87, 51)로 바꾸는 원리와 손으로 계산하는 법, 그리고 빠른 변환 도구까지 한 번에 정리했습니다.