이미지
이미지는 웹페이지에서 가장 많이 사용되는 미디어 표시 입니다.
단일테그
이미지를 출력을 할때에는 img테그를 사용합니다. 하지만, 이미지는 단일 테그로 구성이 되어 있다는 특징이 있습니다.
종료 테그가 없고, 내용물이 존재 하지 않습니다.
<img>
또는
<img />
모두 사용이 가능합니다.
이미지 경로
이미지 테그는 내용물을 담고 있지 않습니다. 대신에 출력될 이미지의 정보를 속성을 이용하여 출력을 합니다.
src
이미지 테그는 이미지의 정보를 경로 주소로 표시를 합니다.
먼저 출력할 이미지를 준비합니다. 이미지의 경로를 src 속성값으로 입력을 합니다.
<img src="http://placehold.it/200x200">
임시이미지
임시로 특정 사이즈의 이미지를 출력할 수 있도록 임시 이미지를 제공하는 서비스가 있습니다. placehold.it 사이트 입니다. 사이트 주소 뒤에 사이즈를 입력하면 임시 이미지를 출력합니다. http://placehold.it/200x200 임시 이미지를 확인 할 수 있습니다.
실습확인
지정한 이미지를 확인하기 위해서 실제 브라우저에서 해야 합니다.
지금까지 실습한 vscode의 html preview로는 확인을 할 수 없습니다.
alt
이미지가 출력이 되지 않을때 대체 처리되는 문자열을 말합니다.
<img src="abcd.png" alt="이미지가 존재하지 않습니다.">
최근에는 alt는 이미지의 간략한 정보를 알려주는 용도로 사용이 되고 있습니다.
크기지정
추가 속성으로 width와 height를 통하여 이미지의 크기를 지정할 수 있습니다. 크기를 지정하지 않으면, 원본 크기의 이미지를 출력을 합니다.
최근에는 직접 이미지의 속성을 이용하는 대신에 css를 이용하여 크기를 지정하는 방식을 많이 사용을 합니다.
테두리
border 속성을 이용하여 이미지의 외각선을 출력할 수 있습니다. border 속성 또한 css를 이용하여 처리를 할 수 있습니다.
주소
이미지를 출력할데 uri와 url을 사용합니다.
uri : uniform resource identitier url : uniform resource localtion