#프론트엔드

총 15개의 글

CSS 유효성 검사기 사용법 총정리 - W3C 검사기부터 Stylelint까지 오류 잡는 방법

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

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

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

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

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

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

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

이미지를 코드에 직접 넣고, JSON으로 파일을 주고받고, 인증 토큰을 만드는 일까지. 웹 개발 곳곳에 숨어 있는 Base64의 실제 쓰임새를 원리부터 정리했습니다.

수치를 손으로 일일이 바꿔가며 그림자를 맞추느라 시간 낭비하고 계신가요. 슬라이더만 움직이면 box-shadow 코드가 바로 나오는 생성기 활용법을 정리했습니다.

CSS 압축 도구가 실제로 무엇을 줄여주는지, 어떤 도구를 써야 하는지, 압축 후 깨지지 않게 관리하는 방법까지 한 번에 정리했습니다.