최근 글

체크박스로 이동과 색을 바꾸는 전체 예제로 transition의 대상·지속 시간·속도·지연을 설명합니다. 되돌림, 설정 우선순위, 이산 속성의 범위와 동작 줄이기 환경도 구분합니다.

absolute의 50% 좌표와 translate(-50%, -50%)를 조합하는 전체 예제와 연습용 이미지를 제공합니다. Grid 대안, 서로 다른 백분율 기준과 모바일의 긴 문구·대비 문제를 함께 확인합니다.

z-index의 앞뒤 순서와 적용 대상을 설명하고 같은 범위·다른 부모의 비교를 전체 예제로 확인합니다. 부모 쌓임 맥락, auto와 0, 잘림과 상단 레이어의 차이도 구분합니다.

표의 최소 너비와 바깥 스크롤 상자를 분리하는 전체 예제를 제공합니다. 제목 셀·행 배경·줄바꿈을 꾸미고 페이지 넘침, 키보드 스크롤과 부모 레이아웃의 최소 크기를 확인합니다.

::selection으로 선택한 텍스트의 배경색·글자색을 바꾸는 전체 예제를 제공합니다. 특정 문단에만 다른 색을 적용하고 허용 속성, 대비와 브라우저별 확인 범위를 설명합니다.

원·타원·중심 위치·closest-side 크기를 같은 상자에서 비교합니다. 크기 키워드가 색상 지점의 백분율에 주는 영향과 원 바깥의 색, 배경 적용 조건을 설명합니다.

linear-gradient()의 방향·각도·색상 지점을 전체 예제로 비교합니다. 50%·60% 지점 사이의 전환과 같은 위치에서 생기는 선명한 경계를 구분하고 투명 색상·배경 적용 주의점도 설명합니다.

max-width: 100%와 height: auto를 함께 적용하는 전체 예제와 연습용 이미지 소스를 제공합니다. width: 100%의 확대 차이, HTML 크기 속성, 인라인 높이와 부모 너비 문제도 확인합니다.

details·summary로 열고 닫는 드롭다운 메뉴의 전체 예제를 제공합니다. CSS 위치·너비·겹침을 설정하고 키보드·모바일 확인 방법과 자동 닫힘을 추가로 구현해야 하는 범위를 설명합니다.

opacity와 색상 알파의 적용 범위를 같은 색의 상자로 비교합니다. rgb·rgba 알파 값, transparent, 배경 이미지와의 관계 및 실제 배경 위 가독성 확인 방법을 설명합니다.