div를 의미 없는 범용 컨테이너로 사용하는 경우를 배웁니다.
div는 여러 요소를 하나로 묶어 레이아웃이나 스타일을 적용할 때 사용합니다. article, nav, header처럼 의미가 분명한 요소가 있으면 그 요소를 먼저 선택하고 적절한 요소가 없을 때 div를 사용합니다.
예제에서는 <div class="card">...</div> 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.
먼저 현재 결과를 확인한 뒤 profile 안에 기술 목록 div를 추가하고 CSS로 구분하세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.
모든 영역을 div로만 만들면 문서 구조를 이해하기 어렵습니다.
직접 바꿔보세요profile 안에 기술 목록 div를 추가하고 CSS로 구분하세요.