이미지 다운로드 html

파일을 탐색 하는 대신 링크를 클릭 하면 파일 다운로드: 이미지 또는 html에 대 한 다운로드 링크를 만드는 가장 쉬운 방법은 다운로드 특성을 설정 하는 것 이지만이 솔루션은 최신 브라우저 에서만 작동 합니다. 특성의 값은 다운로드 한 파일의 이름이 됩니다. 허용 되는 값에 대 한 제한은 없으며 브라우저가 자동으로 올바른 파일 확장명을 검색 하 여 파일 (.img, .pdf, .txt, .html 등)에 추가 합니다. 당신은 순수한 html/자바 스크립트로 할 수 없습니다. 이는 별도의 파일 (이미지)을 검색 하는 웹 서버에 대 한 별도의 연결을가지고 있으며, 일반 웹 서버는 콘텐츠 헤더가 설정 된 파일을 제공 하 여 컨텐츠 유형을 읽는 브라우저가 해당 유형을 내부적으로 처리 할 수 있다고 결정 하기 때문입니다. . 이 활성 학습 섹션에서는 이전 활성 학습 섹션에서 완성 된 코드를 만들고 그림으로 변환 하 고 싶습니다. 다운로드 특성은 사용자가 하이퍼링크를 클릭할 때 대상이 다운로드 되도록 지정 합니다.

요소는 캡션이 요소의 다른 내용을 설명 하는 브라우저 및 보조 기술을 알려줍니다 …

이것은 괜찮습니다. 여기에는 필요한 콘텐츠가 포함 되어 있으며 CSS를 사용 하 여 멋지게 스타일을 사용할 수 있습니다. 그러나 여기에 문제가 있습니다: 시맨틱이 이미지를 캡션에 연결 하는 것은 없으며 화면 판독기에 문제가 발생할 수 있습니다.

예를 들어, 50 이미지와 캡션이 있는 경우 어떤 캡션이 어떤 이미지와 함께 이동 합니까? 요약: 이미지에 의미가 있는 경우 콘텐츠 측면에서 HTML 이미지를 사용 해야 합니다. 이미지가 순전히 장식 인 경우에는 CSS 배경 이미지를 사용 해야 합니다. 참고: css 주제에서 CSS 배경 이미지에 대해 더 많이 배우게 됩니다. HTML5를 사용 하는 경우 링크에 ` 다운로드 ` 속성을 추가할 수 있습니다. 이 특성은 href 특성이 설정 된 경우에만 사용 됩니다. 브라우저가 내부적으로 파일을 처리 하지 않도록 강제 하는 방법은 헤더가 내부적으로 파일을 처리 하려고 하지 않도록 헤더 (내용-처리를 선호 하거나 콘텐츠 형식)를 변경 하는 것입니다. 당신은 동적으로 헤더를 설정 하는 웹 서버에 스크립트를 작성 하 여이 작업을 수행 할 수 있습니다 (즉. php) 또는 다운로드 하려는 파일에 대 한 다른 헤더를 반환 하도록 웹 서버를 구성 하 여. 당신은 php 또는 자바 스크립트를 작성 하지 않고 멀리 얻을 수 있도록 웹 서버에 디렉토리 별로이 작업을 수행 할 수 있습니다-단순히 한 위치에 있는 모든 다운로드 이미지를가지고. 더 나은 솔루션은 HTML5 및 요소를 사용 하는 것입니다

. 이는 그림에 대 한 의미 체계 컨테이너를 제공 하 고 그림을 캡션에 명확 하 게 연결 하기 위해 정확 하 게이 목적으로 생성 됩니다. 위의 예제는 다음과 같이 다시 작성할 수 있습니다.

참고:이 섹션에서는 Github에서 실행 되는 완성 된 예제를 찾을 수 있습니다 (소스 코드도 참조). 결과적으로 포함 된 이미지는 HTML 이미지 보다 위치와 제어가 더 쉬울 수 있습니다. 왜 HTML 이미지를 귀찮게? 위의 암시로, CSS 배경 이미지는 장식만을 위한 것입니다. 시각적 개체를 향상 시키기 위해 페이지에 예쁜 것을 추가 하 고 싶다면 괜찮습니다. 하지만, 이러한 이미지는 전혀 의미 없는 의미가 없습니다. 텍스트에는 해당 하는 텍스트가 없으며 화면 판독기에는 보이지 않습니다. 이 빛이 HTML 이미지 시간입니다! 이제 플레이 할 차례입니다! 이 활성 학습 섹션에는 간단한 포함 연습을 통해 실행 됩니다.