A sentimental robot

Html image 본문

HTML

Html image

GOD03219 2019. 4. 20. 16:25

웹 페이지에 이미지를 넣고 싶을 때는 이미지 태그를 이용하면 된다. <img src ='url' alt ='이미지 없다.'>  

이미지 태그는 비어있으며 속성 값만을 포함한다. 그렇기 때문에 태그를 닫지 않는다.  

이미지 태그의 속성에는 ...

  • src : 이미지의 경로를 명시한다. 보통 이미지들은 따로 폴더를 만들어서 저장해 놓고 그 경로를 참조한다.
  • alt : 느린 인터넷 연결, src 속성 에러, screen reader 사용자, 이미지 찾기 실패 등의 이유로 인해 이미지가 보여지지 않을 때 나오는 대체 문구 이다. 
  • style / width / height :속성들을 이용해 이미지의 크기를 조절한다. 하지만 HTML5는 style 속성을 사용하길 권장한다. style 속성은 가장 우선순위가 높기 때문에 스타일 시트에서도 이미지 크기를 중복으로 조절하게 되는 상황을 막을 수 있다.   

<map> 태그

이미지 맵 태그는 하나의 이미지를 클릭할 수 있는 영역으로 나눈다. 

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

 

map 태그의 name속성은 이미지 태그의 usemap 속성과의 연결을 나타낸다. 

map 태그는 area 태그들을 포함하는데 area 태그는 이미지에서 클릭할 수 있는 영역의 위치과 크기를 정의한다.

 

background-image 속성

특정 엘리먼트 배경을 이미지로 지정한고 싶다면 태그 안에 background-image 속성을 정의해준다.

<body style='background-image("url")';>

 

<picture> 태그

유연하게 이미지를 불러올 수 있는 태그이며 HTML5 부터 도입되었다.

<picture>태그는 <source>태그들을 포함하며 각 태그는 다른 이미지를 참조한다. 브라우저는 이미지를 불러올 때 사용자의 뷰포트와 디바이스에 가장 최적화된 이미지를 선택할 수 있다. <source>태그는 자신이 참조하는 이미지의 최적화된 크기를 정의한다. 브라우저는 첫번째<source>태그가 정의한 속성 값이 일치한다면 그 이후의 태그를 무시하고 첫번째 태그 이미지를 적용한다. 이미지 태그는 <picture>태그의 마지막 자식 태그로 선언되며 <picture>태그를 지원하지 않거나 조건에 부합한<source>태그가 하나도 없을 시  사용된다.

 

아래의 예제는 브라우저가 최소 650픽셀이며 465 픽셀이상이라면 첫번째 이미지를 보여준다

<picture>
  <source media="(min-width: 650px)"srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)"srcset="img_white_flower.jpg">
<imgsrc="img_orange_flowers.jpg"alt="Flowers"style="width:auto;">
</picture>

 

screen reader

스크린 리더는 시력이 손상된 사람들이나 글자를 읽을 줄 모르는 사람들을 위한 소프트웨어 프로그램이다. HTML 코드를 해석해서 사용자에게 웹 페이지 상의 문서를 읽어준다.

저작자표시

'HTML' 카테고리의 다른 글

HTML block elements  (0) 2019.04.20
HTML list  (0) 2019.04.20
HTML table  (0) 2019.04.20
HTML hyperlink  (0) 2019.04.17
HTML Basic  (0) 2019.04.16
'HTML' Related Articles more