이미지관련 태그
img: 이미지를 삽입할 때 사용합니다.
※figure과 figcaption태그로 사진에 제목을 넣을수 있습니다.
속성
src :사진의 경로를 적을 때 사용합니다.
alt :인터넷이 느리거나 사진이 사라졌을때 대체되는 텍스트로 사진을 짐작가게 해줍니다.
width :사진의 가로길이를 조정합니다.
height :사진의 높이를 조정합니다.
이때 src의 경로는 두가지로 표현할 수 있는데 절대경로와 상대경로가 있습니다.
절대경로는 C:\User\사용자1\Desktop\사진.png같이 전체를 쓰는 것입니다.
상대경로는 html파일이 있는곳에서 그파일까지의 경로입니다. 예를 들어 html파일이 Desktop\a
사진이 Desktop이라면 상대경로 ../사진.png
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>html 문서</title> </head> <body> <h2>검은 사진</h2> <img src="C:\Users\user\Desktop\사진.png" alt="검은사진"><!--절대경로 입니다.--> <hr> <img src="..\..\사진.png" alt="검은사진"><!--상대경로 입니다.--> <hr> <figure> <figcaption> <h2>밑은 연습을 위한 검은사진입니다.</h2> </figcaption> <img src="..\..\사진.png" alt="검은사진" width="300" height="100"> <figcaption> <h2>위는 연습을 위한 검은사진입니다.</h2> </figcaption> </figure> </body> </html> | cs |
링크관련 태그
a :텍스트나이미지를 링크한주소로 이동시켜줍니다.
속성
href:링크할 이미지나 사이트주소를 입력합니다.
target:주소로 이동할때 창이나 새창을 지정합니다.
기본적인 target속성_blank :새탭으로 사이트를 엽니다._self :지금의 창에서 사이트를 엽니다.
download:사이트이동이 아닌 파일을 다운로드합니다.
rel:파일의 종류를 알려줍니다.
hreflang:문서의 언어를 알려줍니다.
type:문서의 파일유형을 알려줍니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>html 문서</title> </head> <body> <a href="https://www.naver.com" target="_blank" rel="bookmark" hreflang="ko" type="text/html"><img src="..\..\사진.png"></a> <a href="..\..\사진.png" download="사진.png">다운로드</a> </body> </html> | cs |
위와같은 결과가 나오게 됩니다.
앵커
앵커는 긴 문서같은곳을 보게되면 내용2 이런식으로 바로 그내용으로 이동하는 문서를 보신적이 있을것 입니다.
태그는 id와 a href로 가능합니다.
먼저 글을쓸때 id로 아무거나 지정하고 a href="#id이름"이런식으로 적으면 됩니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>html 문서</title> </head> <body> <a href="#third">3으로</a> <h2 id="first">첫번째 내용</h2> <br><!--br을 추가로50개 더 넣어 줍니다.--> <h2 id="third">세번째 내용</h2> <a href="#first">1로</a> </body> </html> | cs |
이미지 맵 지정
태그는 map, area, usemap이 있습니다.
map:name으로 맵이름을 지정합니다.
area:이미지의 영역을 지정합니다.
속성coords :수4개로 x,y좌표를 표시합니다.shape :영역의 모양을 정합니다.(circle, rect, poly, default)
usemap:맵이름으로 이미지맵을 지정합니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>html 문서</title> </head> <body> <map name="practice"> </map> <img src="..\..\사진.png" width="160" height="100" usemap="#practice"> </body> </html> | cs |
위와같이 됩니다.
그럼 여기까지 포스팅을 마치도록 하겠습니다.