최근 글

태그 사이 공백 때문에 생기는 틈과 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 상자의 계산 결과를 비교하고 루트 글자 크기를 바꾸어 영향 범위를 확인합니다.

button에 돋보기 배경과 텍스트를 함께 배치하는 전체 예제를 제공합니다. 이미지 경로, padding, 크기와 초점 표시를 설정하고 키보드 조작·폼 제출·이미지 실패 상태를 확인합니다.

자동 표 배치와 고정 표 배치의 차이를 같은 내용으로 비교합니다. width 설정, 열 너비 결정 순서, 긴 문자열의 줄바꿈·말줄임표와 모바일 가로 스크롤을 함께 설명합니다.

uppercase·lowercase·capitalize·none의 결과를 같은 원문으로 비교합니다. 상속 해제, 한글·영문 혼용과 터키어의 lang 설정을 실습하고 화면 표시와 원본 데이터 변환의 차이를 설명합니다.

현재 Google Fonts 화면에서 삽입 코드를 찾고 Noto Sans KR의 400·700 굵기를 적용하는 전체 예제입니다. link와 font-family의 역할, 대체 글꼴, Network와 렌더링 글꼴 확인, 필요한 굵기 선택 기준을 설명합니다.