벡터 도형을 마크업으로 표현하는 SVG를 배웁니다.
SVG는 circle, rect, path 같은 요소로 도형을 표현합니다. 벡터 방식이라 확대해도 선명하고 각 도형이 DOM 요소이므로 CSS와 JavaScript로 선택할 수 있습니다.
예제에서는 <svg viewBox="0 0 400 180"><circle ...></circle></svg> 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.
먼저 현재 결과를 확인한 뒤 circle의 cx와 fill, rect의 rx 값을 바꿔보세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.
의미 있는 SVG에는 접근 가능한 이름을 제공하고 장식용이면 보조 기술에서 숨기세요.
직접 바꿔보세요circle의 cx와 fill, rect의 rx 값을 바꿔보세요.