최근 글

CSS / Tutorial / 선택자(Selector) / 가상 요소와 가상 클래스 순서

:hover::before가 선택하는 대상과 부모 색·가상 요소 색의 상속 차이를 전체 예제로 설명합니다. 가상 요소 뒤의 상태 선택에 관한 최신 명세의 조건과 브라우저 지원도 구분합니다.

CSS / Tutorial / 체크박스(checkbox)와 라벨(label) 높이 조정하는 방법

Flex로 체크박스와 라벨을 가운데 정렬하고, 여러 줄 문구의 첫 줄에 맞추는 전체 예제를 제공합니다. 글자·컨트롤 크기 변경, vertical-align과 top 보정의 적용 조건도 설명합니다.

CSS / Tutorial / 체크박스(checkbox) 꾸미는 방법

accent-color와 appearance를 이용해 체크박스의 색·테두리·선택 표시를 꾸미는 전체 예제입니다. 라벨 클릭, 키보드 포커스, 비활성 상태와 폼 선택값도 함께 확인합니다.

CSS / Flex / align-items

서로 다른 글자 크기로 stretch·시작·끝·가운데·기준선 정렬을 비교하는 전체 예제를 제공합니다. 고정 크기, align-self, 자동 여백과 column 방향에서 결과가 달라지는 조건도 설명합니다.

CSS / Flex / justify-content

여섯 가지 정렬 값을 같은 크기의 아이템으로 비교하고, space-between·around·evenly의 간격 차이를 설명합니다. gap, 자동 여백, flex-grow와 column 높이 때문에 정렬이 달라지는 조건도 확인할 수 있습니다.

CSS / Flex / display

flex와 inline-flex의 바깥 배치·안쪽 배치를 전체 예제로 비교합니다. 아이템 높이가 늘어나는 조건, 직접 자식의 범위, 줄바꿈과 긴 문자열 처리도 설명합니다.

CSS / Flex / flex-direction

같은 HTML 순서에 row·row-reverse·column·column-reverse를 적용해 방향을 비교합니다. 모바일에서 세로 배치로 전환하는 방법과 화면 순서·키보드 순서의 차이도 설명합니다.

CSS / 애니메이션 / animation

체크박스로 재생·일시 정지를 제어하는 전체 예제로 키프레임과 animation 속성을 설명합니다. 한 번의 재생 시간, 왕복 반복, fill-mode와 동작 줄이기 환경의 차이도 비교할 수 있습니다.

CSS / 이미지 가운데 정렬하는 방법

인라인 이미지의 부모 정렬과 블록 이미지의 자동 여백을 구분하고, Grid로 가로·세로 가운데에 배치하는 방법을 설명합니다. 연습용 SVG와 전체 HTML, 크기 변경 실습도 제공합니다.

CSS / columns / 다단으로 만들기

단 너비와 최대 개수를 조합해 넓은 화면에서는 3단, 모바일에서는 1단이 되는 전체 예제를 제공합니다. 간격·구분선·분할 제어와 Grid·Flex를 선택할 기준도 설명합니다.