퍼블리싱 2

이미지를 a태그로 감쌌을 때 여백이 생기는 이유

회사에서 마크업 작업을 하다가 아래와 같이 a태그 안에 이미지 태그를 넣으니 이미지 사이사이 여백이 생기는 현상이 생겼다.해당 작업을 하면서 새롭게 알게 된 사실을 정리해본다!    ✅ 여백이 생기는 이유1. 인라인 요소의 특성 태그는 기본적으로 인라인 요소.인라인 요소는 텍스트와 같은 방식으로 취급되어 베이스라인(baseline)을 기준으로 정렬된다. 2. 베이스라인과 여백 인라인 요소는 베이스라인 위에 배치되며, 베이스라인 아래에는 소문자 g, p, y 등을 위한 여분의 공간이 존재한다.이미지는 이 공간을 사용하지 않지만, 여전히 그 공간이 남아있어 여백으로 보이게 된다.  3. HTML 코드의 공백 여러 이미지를 나란히 배치할 때, HTML 코드에서 태그 사이의 줄바꿈이나 공백이 브라우..

[웹접근성] 대체텍스트 (인식의 용이성 Perceivable)

🔎 대체텍스트 : 시각장애인 등에게 웹상의 정보를 전달하기 위한 과정으로, 작성자가 대체 텍스트를 삽입시키면 스크린 리더기를 통해 청각적으로 정보를 전달 할 수 있게 해준다. 대체 텍스트를 삽입하면 사용자는 음성지원 서비스를 통해 음성으로 정보를 전달 받을 수 있다. 텍스트가 아닌 콘텐츠에는 의미나 용도를 이해할 수 있도록 대체 텍스트를 삽입해야한다. 1. 적절한 대체 텍스트 제공 📌 alt 속성 (alternative) : , , 등에서 사용 이미지 태그의 대체 텍스트가 너무 긴 경우에는 alt 값을 빈 값으로 제공하고, 마크업으로 대체 텍스트를 제공하기도 한다. 📌 의미 있는 이미지 대체 텍스트를 시각적으로 보는것 처럼 동일하게 제공해야한다. 📌 의미 없는 이미지 이미지태그에 alt속성을 아예 제공하..

반응형