카테고리: CSS

CSS / Reference / opacity

요소 전체 투명도와 배경 알파를 구분합니다. opacity 0에서도 키보드 조작이 남는 예제로 공간·포커스·표시 여부의 차이를 확인합니다.

CSS / Reference / text-shadow

텍스트 그림자의 위치·흐림·레이어 순서를 조정합니다. 박스 그림자와의 차이, 잘림 및 실제 글자 대비를 함께 점검합니다.

CSS / Reference / box-shadow

박스 그림자의 위치·흐림·확산·겹침 순서를 조정합니다. 한 값씩 바꾸는 실습으로 그림자가 레이아웃 크기와 상위 잘림에 미치는 관계를 확인합니다.

CSS / Reference / background-clip

배경을 border·padding·content 영역 또는 텍스트에 맞춰 자릅니다. 위치 기준과의 차이, 투명 글자의 대체 색과 강제 색상 환경을 확인합니다.

CSS / Reference / font-weight

숫자 굵기와 상대 굵기를 지정하고 실제 지원 서체를 확인합니다. 정적·가변 글꼴의 차이와 여러 요청이 같은 모습으로 나오는 이유를 설명합니다.

CSS / Reference / font-style

italic·oblique의 요청과 실제 글꼴 선택을 구분합니다. 서체 파일, 합성 기울임, 의미 있는 강조와 font 단축 속성의 영향을 확인합니다.

CSS / Reference / font-size

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

CSS / Reference / box-sizing

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

CSS 강좌 / 링크 꾸미는 방법

링크의 기본 밑줄과 방문·호버·활성 상태를 설정하고 키보드 포커스를 표시합니다. 두 파일로 방문 이력과 Tab·Enter 동작을 확인하며 상태 규칙이 겹칠 때의 결과를 설명합니다.

CSS / Reference / content

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