` 요소를 여러 개 생성할 것입니다. ### 이미지 닫는 태그가 필요 없는 HTML 태그 중 하나는 `` 태그입니다. 이 태그는 `src` 요소를 포함하여 페이지가 항목을 렌더링하는 데 필요한 모든 정보를 제공합니다. 앱에 `images`라는 폴더를 만들고 그 안에 [소스 코드 폴더](../../../../3-terrarium/solution/images)에 있는 모든 이미지를 추가하세요. (식물 이미지 14개가 있습니다.) ### 과제 `` 태그 사이에 두 열로 식물 이미지를 추가하세요: ```html ``` > 참고: Spans vs. Divs. Divs는 '블록' 요소로 간주되고 Spans는 '인라인' 요소입니다. 이 div를 span으로 변환하면 어떻게 될까요? 이 마크업으로 식물이 화면에 표시됩니다. 아직 CSS로 스타일링되지 않았기 때문에 보기 좋지 않지만, 다음 강의에서 스타일을 추가할 것입니다. 각 이미지에는 이미지가 보이지 않거나 렌더링되지 않을 경우에도 나타나는 alt 텍스트가 있습니다. 이는 접근성을 위해 포함해야 하는 중요한 속성입니다. 접근성에 대해 더 배우려면 이후 강의를 참고하세요. 지금은 alt 속성이 느린 연결, src 속성의 오류, 또는 화면 판독기를 사용하는 경우와 같은 이유로 사용자가 이미지를 볼 수 없을 때 대체 정보를 제공한다는 점을 기억하세요. ✅ 각 이미지에 동일한 alt 태그가 있다는 것을 눈치챘나요? 이것이 좋은 관행일까요? 왜 그렇지 않을까요? 이 코드를 개선할 수 있을까요? --- ## 의미론적 마크업 일반적으로 HTML을 작성할 때 의미 있는 '의미론'을 사용하는 것이 좋습니다. 이것이 무엇을 의미할까요? 이는 데이터 또는 상호작용 유형을 나타내도록 설계된 HTML 태그를 사용하는 것을 의미합니다. 예를 들어, 페이지의 주요 제목 텍스트는 `

` 태그를 사용해야 합니다. 열리는 `` 태그 바로 아래에 다음 줄을 추가하세요: ```html

My Terrarium

``` 헤더를 `

`로, 순서 없는 목록을 `

`로 렌더링하는 것과 같은 의미론적 마크업을 사용하면 화면 판독기가 페이지를 탐색하는 데 도움이 됩니다. 일반적으로 버튼은 ``으로 작성되어야 하고 목록은 `
• `로 작성되어야 합니다. 클릭 핸들러가 있는 특별히 스타일링된 `` 요소를 사용하여 버튼을 모방하는 것이 _가능_하지만, 비활성 사용자가 페이지에서 버튼이 어디에 있는지 확인하고 상호작용할 수 있도록 기술을 사용하는 것이 더 좋습니다. 이러한 이유로 가능한 한 의미론적 마크업을 사용하도록 노력하세요. ✅ 화면 판독기가 [웹 페이지와 상호작용하는 방식](https://www.youtube.com/watch?v=OUDV1gqs9GA)을 살펴보세요. 의미론적 마크업이 없으면 사용자가 왜 좌절할 수 있는지 알 수 있나요? ## 테라리움 인터페이스의 마지막 부분은 스타일링되어 테라리움을 생성할 마크업을 추가하는 것입니다. ### 과제: 마지막 `