template 요소

개념 이해하기

template 안의 콘텐츠는 페이지 로드 때 렌더링되거나 실행되지 않습니다. JavaScript에서 template.content를 복제한 뒤 필요한 값을 넣어 문서에 추가합니다. 같은 카드 구조를 문자열로 반복 조립하는 것보다 요소를 안전하게 선택하고 수정하기 쉽습니다.

예제에서는 <template id="cardTemplate">...</template> 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.

사용자 동작에 따라 상태가 바뀌는 화면에서 사용합니다. 보이는 모양뿐 아니라 키보드 조작, 현재 상태를 알리는 문구와 포커스 이동까지 한 흐름으로 확인하세요.

먼저 현재 결과를 확인한 뒤 강좌 배열에 JavaScript를 추가하고 버튼을 눌러 세 번째 카드를 만드세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.