카테고리: CSS

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

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

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

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

태그 사이 공백 때문에 생기는 틈과 margin·padding을 구분합니다. 공백 제거, Flexbox gap, 부모 font-size 0을 같은 예제로 비교하고 음수 margin의 한계와 글자 크기 복원 조건을 설명합니다.

counter-reset·counter-increment·counter()의 역할을 구분하고 장·절 번호를 자동으로 표시하는 전체 예제를 제공합니다. 시작값·증가량·로마 숫자 표시를 바꾸고 HTML 순서 목록과의 선택 기준도 설명합니다.

::after로 제목 아래에 짧은 장식선을 만들고 길이·두께·간격을 조절합니다. 왼쪽과 가운데 정렬의 차이, 여러 줄 제목에서의 동작, 일반 텍스트 밑줄과의 선택 기준을 설명합니다.

table·table-row·table-cell의 역할과 세로 정렬·열 너비·여백 조절을 설명합니다. 설명 목록을 두 열로 배치하는 전체 예제와 모바일 전환을 제공하고 실제 데이터 표와의 차이를 짚습니다.

float 주위로 텍스트가 흐르는 경우와 본문 상자 전체가 피하는 경우를 비교합니다. BFC의 역할, 부모 높이 문제, flow-root 대안과 overflow의 잘림·스크롤 부작용을 예제로 설명합니다.

font-size와 padding에서 em의 기준이 달라지는 이유를 설명합니다. 중첩한 em·rem 상자의 계산 결과를 비교하고 루트 글자 크기를 바꾸어 영향 범위를 확인합니다.