메모장이나 웹 개발 소프트웨어와 같은 텍스트 편집기에서 이미지를 추가하려는 웹 페이지의 HTML 파일을 엽니다.
파일에 태그를 추가합니다. HTML 파일이 브라우저에서 열릴 때 이미지를 표시할 요소 뒤에 태그를 배치합니다. 태그에는 별도의 닫는 태그가 없습니다. 태그 내에서 인터넷상의 이미지 위치를 src 기인하다. 이미지가 HTML 파일과 같은 폴더에 저장되어 있는 경우 이미지의 이름과 확장자를 입력합니다. 이미지가 다른 곳에 저장된 경우 이미지의 전체 URL을 입력합니다.
추가 대체 태그에 속성을 부여합니다. HTML5에서는 alt 속성이 필요합니다. 로드할 수 없는 경우 이 속성을 사용하여 이미지를 설명합니다. 이미지를 로드할 수 없는 경우 브라우저는 alt 속성 뒤에 입력한 텍스트를 표시합니다. 또한 alt 속성은 시각 장애가 있는 사용자가 사용하는 화면 판독기 소프트웨어에 중요합니다. 소프트웨어는 웹사이트를 보는 시각 장애가 있는 사람이 볼 수는 없지만 그림에 있는 내용을 들을 수 있도록 alt 속성의 텍스트를 읽습니다.
다음을 사용하여 이미지의 크기를 픽셀 단위로 지정합니다. 키 그리고 너비 속성. 크기를 지정하지 않으면 브라우저는 페이지가 로드될 때 이미지를 위해 남겨둘 공간을 알지 못합니다. 그 결과 텍스트가 먼저 로드될 때 페이지가 고르지 않게 로드되어 이미지를 위한 작은 공간을 남겼고, 이미지가 로드되면서 공간이 확장되고 공간이 확장됩니다. 크기가 지정되면 브라우저는 로드가 완료되었을 때 이미지가 채울 수 있도록 페이지의 다른 요소 사이에 정확한 양의 공간을 남겨둡니다.
브라우저에서 HTML 파일을 열어 이미지가 올바른 위치에 표시되는지 코드를 테스트합니다.
CSS를 사용하여 이미지를 화면의 왼쪽이나 오른쪽으로 이동하거나 텍스트를 둘러싸도록 합니다. 예를 들어 style="float: left;"를 사용할 수 있습니다. 또는 style="float: 오른쪽;" 태그 내.
이미지의 높이와 너비를 모두 모르는 경우 height 또는 width 속성만 사용하는 것이 좋습니다. CSS를 사용하여 높이와 너비를 지정할 수도 있습니다. 예를 들어 100x100픽셀 이미지의 경우 스타일 속성을 사용합니다. style="height: 100px; 너비: 100픽셀."
"a href" 태그 쌍 내에 태그를 배치하여 이미지를 클릭 가능한 링크로 만드십시오. 예를 들어 이미지를 Facebook에 연결하려면 다음을 입력합니다.
페이지의 SEO를 향상시키기 위해 alt 속성을 사용하지 마십시오. 검색 엔진은 일부 웹 디자이너가 alt 속성을 추가 키워드로 채우려고 하므로 Alt 속성의 텍스트를 무시한다는 사실을 오랫동안 알고 있었습니다.
