div를 의미 없는 범용 컨테이너로 사용하는 경우를 배웁니다.
div는 여러 요소를 하나로 묶어 레이아웃이나 스타일을 적용할 때 사용합니다. article, nav, header처럼 의미가 분명한 요소가 있으면 그 요소를 먼저 선택하고 적절한 요소가 없을 때 div를 사용합니다.
바깥 div.profile은 display: flex로 두 자식을 가로로 나란히 놓고 gap: 16px로 사이를 벌립니다. 첫 자식 div.avatar는 56px 정사각형에 border-radius: 50%를 주어 원이 되고, display: grid와 place-items: center로 글자 H를 원의 정가운데에 둡니다. 두 번째 div는 이름과 소개를 한 덩어리로 묶어 세로로 쌓는 역할만 합니다.
div는 화면 읽기 도구에 아무 역할도 알리지 않으므로, 이 프로필 카드가 따로 떼어 내도 뜻이 통하는 내용이라면 바깥 div 대신 article을 쓸 수 있습니다. 원 모양 아바타처럼 꾸밈만을 위한 상자는 div가 맞는 선택이고, 이름과 겹치는 이니셜 H는 aria-hidden=true로 읽기 대상에서 빼기도 합니다.
모든 영역을 div로만 만들면 문서 구조를 이해하기 어렵습니다.
직접 바꿔보세요profile 안에 기술 목록 div를 추가하고 CSS로 구분하세요.