카테고리: CSS

요소·클래스·ID·속성 선택자를 같은 HTML에 적용해 대상과 결과를 비교합니다. 복합 클래스, 공백으로 구분한 속성값, 필수 입력칸을 포함한 전체 예제와 선택자 수정 실습을 제공합니다.

표 셀의 가로·세로 간격을 지정하고 padding과 구분합니다. separate·collapse 및 간격 0의 차이를 같은 표에서 비교합니다.

3차원 회전에서 요소 뒷면의 표시 여부를 비교합니다. 양면 카드의 별도 면 구성, 키보드 조작과 모션 감소 조건을 설명합니다.

텍스트 장식의 선·색·모양과 부모에서 이어지는 장식을 설명합니다. 자식의 none이 부모 밑줄을 없애지 못하는 경우를 같은 조건에서 비교합니다.

표 캡션을 위·아래로 배치하면서 첫 요소 자식 위치를 유지합니다. 표 내용과 맞는 제목, 긴 캡션 줄바꿈과 글자 정렬을 확인합니다.

같은 공백·탭·개행을 normal·nowrap·pre·pre-wrap·pre-line·break-spaces로 비교합니다. 보존과 접힘, 자동 줄바꿈 및 내부 스크롤의 차이를 확인합니다.

전경색과 currentColor의 연결을 같은 박스에서 확인합니다. 상속, 배경색과의 차이, 대비와 색상 이외의 정보 표시 기준을 설명합니다.

테두리 스타일의 1~4개 값 대응과 none의 계산 두께를 설명합니다. 접힌 표에서 hidden이 이웃 경계를 억제하는 차이도 실행 예제로 확인합니다.

배경 위치의 백분율이 영역과 이미지 크기의 차이에 적용되는 이유를 설명합니다. 동일 영역에서 0·50·100%를 비교하고 위치와 잘림을 조정합니다.

배경 이미지의 주소 기준과 여러 레이어의 순서를 설명합니다. 인라인 SVG 예제로 실행하고 외부 CSS의 상대 경로와 요청 실패를 확인합니다.