오봉이와 함께하는 개발 블로그

이미지 태그 본문

FE/HTML

이미지 태그

오봉봉이 2021. 12. 2. 16:35
728x90

FrontEnd_day1 정리 (2021.12.02 목요일)

이미지 태그

  • <img> 태그
  • 인라인 태그로 이미지 바로 옆에 다른 요소가 나란히 배치
  • 여러 개의 태그를 사용하면 계속해서 오른쪽에 표시
  • 속성
    • src : 이미지 경로(필수)
    • align : 정렬 방식
    • alt : 이미지 출력 안될 때 대체 텍스트
    • title : 마우스 위치에 출력되는 툴 팁 설명
    • width : 가로 길이
    • height : 세로 길이
    • border : 테두리
    • hspace : 좌/우 여백
    • vsapce : 상/하 여백
  • 경로
    • HTML 파일과 같은 폴더에 있는 경우
      • 이미지 파일명만 적으면 됨
      • <img src=”사진.jpg”>
    • 하위 폴더에 있는 경우
      • 폴더명/이미지 파일명
      • <img src=”image/사진.jpg”>
    • 상위 폴더에 있는 경우
      • ../폴더명/이미지 파일명
      • <img src=”../image/사진.jpg”>
이미지 + 테이블 연습 문제
  • img.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{width:200px;}
        th{width:150px;}
    </style>
</head>
<body>
    <a href="list.html">
    <img src="image/그림.PNG" border="1"
    width="300" height="200"
    alt="조르주 쇠라"title="그랑 차트 섬의 일요일 오후">
    </a>

    <br>

    <table border="1">
        <thead align="center">
        <tr><td rowspan = "8"><a href="table.html"><img src="image/모나리자.jpg" width="200" height="300"></a></td>
        <th>작품명</th><td colspan="2">모나리자</td></tr>
        <tr><th>화가</th><td colspan="2">레오나르도 다 빈치</td></tr>
        <tr><th>시대</th><td colspan="2">15세기경</td></tr>
        <tr><th>기법</th><td colspan = "2">패널에 유채</td></tr>
        <tr><th>크기</th><td colspan = "2">77 x 53</td></tr>
        <tr><th rowspan="2">가<br>격</th><th>정가</th><td>700억원</td></tr>
        <tr><th>판매가</th><td>500억원</td></tr>
        <tr><th>소장기관</th><td colspan="2">루브르박물관</td></tr>
        </thead>
    </table>
</body>
</html>

이미지 맵

  • 하나의 이미지에 여러 개의 링크를 만들어 놓고 각 영역마다 다른 링크 연결
  • <img> 태그의 usemap속성
    • 이미지 맵 지정
    • 사용방법
      • <map> 태그를 이용해 이미지 맵을 만들고
      • <img> 태그의 usemap 속성으로 이미지 맵 지정

이미지맵 예제

  • imgmap.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 맵</title>
</head>
<body>
    <div id="wrap">
        <img src="image/메인.png" border="1" usemap="#cityMap">
        <map name="cityMap">
            <area shape="rect" coords = "60, 90, 250, 150" href="newyork.html">
            <area shape="rect" coords = "310, 90, 500, 150" href="paris.html">
            <area shape="rect" coords = "560, 90, 750, 150" href="roma.html">
            <area shape="rect" coords = "810, 90, 1000, 150" href="beijing.html">            
        </map>        
    </div>
</body>
</html>
728x90
저작자표시

'FE > HTML' 카테고리의 다른 글

미디어 태그  (0) 2021.12.02
문서 삽입 태그  (0) 2021.12.02
테이블 태그  (0) 2021.12.02
목록태그  (0) 2021.12.02
하이퍼링크 태그  (0) 2021.12.02
'FE/HTML' Related Articles more
Comments