#프론트엔드

총 18개의 글

CSS 색상 이름 목록 완벽 정리 - 148개 색상 키워드와 실무 활용법 총정리

tomato, gold, teal 같은 CSS 색상 이름은 총 148개입니다. 기본 16색부터 계열별 색상 그룹, darkgray가 gray보다 밝은 이유까지 실무에서 바로 쓰는 정보만 모았습니다.

이미지를 텍스트로 바꾸는 Base64 인코딩의 원리와 4가지 변환 방법을 정리했습니다. 온라인 변환기, 자바스크립트, 터미널 명령어 사용법부터 용량 33% 증가 같은 함정까지 한번에 확인해 보세요.

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

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

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

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

같은 이미지인데 모바일에서는 흐릿하고 PC에서는 로딩이 느린 이유, 반응형 이미지 크기 설정으로 해결합니다. 실전 코드와 화면별 기준값까지 한번에 정리했습니다.

VS Code 확장 설치가 부담스러울 때, 브라우저만으로 들여쓰기와 줄바꿈을 한 번에 정리하는 방법을 정리했습니다. 언어별 추천 도구와 안전하게 쓰는 기준까지 한눈에 확인하세요.

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

디바이스마다 깨지는 화면 때문에 고민이신가요. 부트스트랩과 테일윈드 기준부터 실제 기기 해상도, 미디어쿼리 작성법까지 한번에 정리했습니다.