gif
jpg/jpeg
png
<img>
<img src="경로" [생략 가능한 속성="값"]>
<img src="images/lotus.jpg">
<img src="" alt="이미지를 표현하는 단어"/>
이미지 로딩 실패 시 설명할 단어로써 쓰인다.
시각장애가 있는 사람들을 위해 이미지를 음성으로 설명해줄 경우 필요하다.
SEO에 노출되어 더 잘 검색될 수 있도록 한다.
<figure>
<figcaption>
<figure> <img src="경로" alt="설명글"> <figcpation>설명글</figcpation> </figure>
<a>
<a href="링크 주소"> 텍스트 혹은 이미지 <img src=""> </a>
속성
href - 링크한 문서나 사이트의 주소
target - 링크한 내용이 현재 창 혹은 새 창에서 뜰지 지정
download - 다운로드 링크
rel - 현재 문서와 링크된 문서의 관계
hreflang - 링크된 문서의 언어 지정
<iframe> 태그
<iframe>
<iframe src="child.html" width="" height=""></iframe>
<p><a href="" target="_parent(부모 문서 창) 혹은 _top(브라우저 창 전체)"></p>
텍스트 링크 디폴트 디자인 없애기 a { text-decoration:none; color:black; }
a { text-decoration:none; color:black; }
페이지 내에서 링크 <a href="#id"> 텍스트 혹은 이미지 </a>
<a href="#id"> 텍스트 혹은 이미지 </a>
<map>
<area>
기본형 <map name="맵이름"> <area> <area> ... </map>
<img src="이미지 파일" usemap="#맵이름">
Add your detects
SVG as an <img> tag source
Build
Download 'Build'
사용할 폴더로 파일 옮기기
<head>태그 안에 <script> 태그를 이용해 웹 문서에 연결
<head> <meta charset="utf-8"> <title>Title</title> <srcipt src="modernizr-custom.js"></script> </head>
<body> ... <script> if (!Modernizr.svg) { //지원하지 않을 경우 } </script> </body>
or
<body> ... <script> if (Modernizr.svg) { //지원할 경우 } else { //않을 경우 } </script> </body>
* 문서에 이미지가 많다면 id 선택자로 다른 이미지와 구별해 주어야 한다.
<script src="js/script.js"></script>
body { background-image: url("../images/background.png"); }
출처 : Do it! HTML5+CSS3 웹 표준의 정석