카테고리: CSS Reference

부모와 루트 글자 크기를 기준으로 em·rem을 계산합니다. 중첩된 상대 크기의 차이와 확대 시 잘림을 확인하는 방법을 제공합니다.

content-box·border-box의 내용과 외곽 너비를 계산합니다. 여백과 테두리보다 작은 지정 너비에서 생기는 최소 크기 예외도 실습합니다.

가상 요소에 문자열·속성값·장식 도형을 생성하는 방법을 설명합니다. 빈 문자열과 none의 차이를 실습하고 중요한 정보를 HTML에 남기는 기준을 확인합니다.

요소 내부와 페이지 스크롤을 나누어 local·scroll·fixed의 기준을 비교합니다. 별도 실행 예제와 모바일에서 확인해야 할 조건을 제공합니다.

cover·contain을 같은 이미지와 영역에서 비교합니다. 비율 유지, 잘림, 빈 공간과 padding-box 기준의 크기 계산을 함께 확인합니다.

중첩 인용에 사용할 여닫는 부호를 지정하고 문자로 입력한 따옴표와 구분합니다. 인용 깊이, 마지막 쌍의 재사용과 none의 동작을 비교합니다.

긴 단어의 긴급 줄바꿈과 최소 내용 너비를 비교합니다. anywhere·break-word의 min-content 차이와 Flex·Grid에서 필요한 최소 크기 조정을 확인합니다.

한국어·영문 예문에서 normal·keep-all·break-all의 줄바꿈을 비교합니다. 사용 중단된 break-word와 overflow-wrap의 차이도 구분합니다.

문단 안의 인라인 내용을 정렬하고 블록 자체의 배치와 구분합니다. start·end의 쓰기 방향과 양끝·마지막 줄 정렬을 비교합니다.

단위 없는 줄 높이와 고정 길이의 상속 결과를 비교합니다. 부모·자식 글자 크기를 바꾸어 계산값과 실제 줄 상자의 차이를 확인합니다.