오늘 온라인 웹 페이지를 살펴보면 공통점을 공유하는 것을 알 수 있습니다. 이러한 공통된 특징 중 하나는 이미지입니다. 올바른 이미지는 웹 사이트의 프레젠테이션에 많은 영향을줍니다. 회사 로고와 같은 이미지 중 일부는 사이트에 브랜드를 지정하고 해당 디지털 법인을 실제 회사에 연결하는 데 도움이됩니다.
이미지, 아이콘 또는 그래픽을 웹 페이지에 추가하려면 페이지의 HTML 코드에서 태그를 사용해야합니다. HTML로 IMG 태그를 배치하여 그래픽을 표시 할 위치를 지정하십시오. 페이지 코드를 렌더링하는 웹 브라우저는 페이지를 보았을 때이 태그를 적절한 그래픽으로 바꿉니다. 우리 회사 로고 예제로 돌아 가면 이미지를 사이트에 추가하는 방법은 다음과 같습니다.
이미지 속성
위의 HTML 코드를 보면 요소에 두 개의 속성이 있음을 알 수 있습니다. 각각은 이미지에 필요합니다.
첫 번째 특성은 "src"입니다. 이것은 문자 그대로 페이지에 표시하고자하는 이미지 파일입니다. 이 예에서는 "logo.png"라는 파일을 사용하고 있습니다. 이것은 웹 브라우저가 사이트를 렌더링 할 때 표시 할 그래픽입니다.
이 파일 이름 앞에 "/ images /"라는 추가 정보가 추가되었음을 알 수 있습니다. 이것은 파일 경로입니다. 초기 슬래시는 서버에 디렉토리의 루트를 조사하도록 지시합니다. 그런 다음 "images"라는 폴더와 "logo.png"라는 파일을 찾습니다. "images"라는 폴더를 사용하여 모든 사이트의 그래픽을 저장하는 것은 매우 일반적인 방법이지만 파일 경로는 사이트와 관련된 모든 것으로 변경됩니다.
두 번째 필수 속성은 "alt"텍스트입니다. 이것은 이미지가 어떤 이유로로드되지 않을 때 표시되는 "대체 텍스트"입니다. 이 예에서는 이미지가로드되지 않으면 "회사 로고"라는 텍스트가 표시됩니다. 왜 그런 일이 일어 났을까요? 다양한 이유 :
- 잘못된 파일 경로
- 잘못된 파일 이름 또는 철자 오류
- 전송 오류
- 파일이 서버에서 삭제되었습니다.
이것들은 왜 우리가 지정한 이미지가 누락 될 수 있는지에 대한 몇 가지 가능성 일뿐입니다. 이 경우 Google의 대체 텍스트가 대신 표시됩니다.
대체 텍스트는 화면 판독기 소프트웨어에서 시각 장애가있는 방문자에게 이미지를 "읽는"용도로 사용됩니다. 그들은 우리가하는 것처럼 이미지를 볼 수 없으므로이 텍스트는 이미지 자체가 무엇인지 알 수있게 해줍니다. 이것이 대체 텍스트가 필요한 이유와 이미지가 무엇인지 명확하게 설명해야하는 이유입니다!
대체 텍스트에 대한 일반적인 오해는 검색 엔진 목적을위한 것입니다. 이것은 사실이 아닙니다. Google 및 다른 검색 엔진이이 텍스트를 읽고 이미지가 무엇인지 판단하지만 (이미지를 볼 수는 없음), 대체 텍스트를 작성하여 검색 엔진에만 호소해야합니다. 인간을위한 명확한 대체 텍스트를 작성하십시오. 검색 엔진에 호소하는 태그에 키워드를 추가 할 수도 있지만 그래픽 파일을 볼 수없는 사용자를 위해 대체 텍스트가 주 목적을 충족하는지 항상 확인해야합니다.
기타 속성
IMG 태그에는 너비와 높이와 같은 그래픽을 웹 페이지에 넣을 때 사용할 수있는 두 개의 다른 속성이 있습니다. 예를 들어, Dreamweaver와 같은 WYSIWYG 편집기를 사용하면이 정보가 자동으로 추가됩니다. 다음은 그 예입니다.
WIDTH 및 HEIGHT 속성은 브라우저에 이미지의 크기를 알려줍니다. 그런 다음 브라우저는 할당 할 레이아웃의 공간을 정확하게 알고 이미지가 다운로드되는 동안 페이지의 다음 요소로 이동할 수 있습니다. HTML에서이 정보를 사용하면 이미지가 정확한 크기로 표시되지 않을 수 있습니다. 예를 들어 방문자 화면과 기기 크기에 따라 크기가 변경되는 반응 형 웹 사이트 가있는 경우 이미지를 유연하게 만들 수도 있습니다. 고정 된 크기를 HTML에 명시하면 반응 형 CSS 미디어 쿼리 로 덮어 쓰기가 매우 어려워집니다. 이러한 이유로 스타일 (CSS)과 구조 (HTML)의 분리를 유지하려면 HTML 코드에 폭과 높이 속성을 추가하지 않는 것이 좋습니다.
한 가지 유의 사항 :이 크기 조정 지침을 사용하지 않고 CSS에서 크기를 지정하지 않으면 브라우저는 기본 네이티브 크기로 이미지를 표시합니다.
제레미 지라드 편집