탐구하는 취르미

background-image와 img는 모두 이미지를 웹 페이지에 표시하는 데 사용되는 요소들이지만, 사용되는 목적에 따라 다르게 활용됩니다. 마크업(markup)할 때, img vs background-image 선택하는 기준에 대해서 알아봅시다. img img는 주로 콘텐츠 내에 이미지를 전경으로 표시하는 데 사용됩니다. 주로 콘텐츠의 중요한 부분으로 사용되며, HTML 코드 내에 태그를 사용합니다. 이미지 처리가 서버에서 호출되어 개발 처리가 돼야 하는 경우 img 태그를 권장합니다. 태그는 srcset 속성을 통해 다양한 해상도의 이미지를 제공하고, 브라우저가 적절한 이미지를 선택할 수 있도록 합니다. img 요소는 대체 텍스트(alt 속성)를 제공할 수 있기 때문에 시각적으로 콘텐츠를 이해할 ..

웹접근성을 높이기 위해 키보드 탐색을 사용하는 사용자들을 위한 중요한 기능 중 하나는 Tab 키를 통한 요소 간의 이동입니다. 이를 시각적으로 확인하기 위한 하이라이트 표시 설정에 대해 알아보겠습니다. Safari 브라우저 설정 확인하기 대부분의 웹 브라우저는 기본적으로 Tab 키를 사용하여 요소에 포커스를 이동할 수 있게 지원하며, 이때 기본적인 시각적 표시를 제공합니다. 그러나 이 기능이 제대로 동작하지 않을 경우, 브라우저 기본 설정(단축키 cmd + , )을 확인해 보세요. 고급 탭을 클릭하여 Tab을 눌러 웹 페이지에 있는 각 항목을 하이라이트를 체크해 줍니다. 설정을 적용한 후에는 실제로 브라우저에서 테스트를 진행해 봅시다. Tab 키를 사용하여 요소 간에 포커스를 이동하면서 설정한 하이라이..