Frontend/HTML

HTML(이미지 태그, 하이퍼링크 태그, 책갈피 태그)

code2772 2022. 10. 21. 17:24
728x90
반응형
3. 이미지 태그

1) 비트맵 이미지
- 픽셀이 모여 만들어진 정보의 집합
- "레스터 이미지"라고 부름
- 픽셀 단위로 화면에 랜더링함
- 그림판, 포토샵등 틀로 편집

2) 백터 이미지
- 수학적 정보의 형태들이 만들어내는 결과물
- 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
- 확대 및 축소를 해도 이미지가 깨지지 않음
- 일러스트 같은 툴로 편집

jpg(jpeg)
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포맷
- 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합
- 손실 압축

gif
- 이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
- 8비트 (256색상) 컬러만 지원

png
- gif의 대체 포멧으로 개발
- 8비트, 24비트 컬러 이미지 처리
- 알파 채널 지원

webp
- jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포멧
- gif 같은 애니메이션 지원
- 알파 채널 지원(손실, 비손실)
- 완벽한 포맷

참고
https://caniuse.com/ 

이미지 다운
https://www.iconfinder.com/


이미지 태그 <img>
- 인라인 태그 (자기 크기만큼만 사용)

    <img src="이미지가 위치하는 주소 또는 파일경로" alt="이미지를 대신할 문장">

✔ 파링 경로 작성 방법
1. 절대 경로
    - 물리적 경로
    - http, https, file
    https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png - 절대 경로

    C:\Java\HTML\Day2\sky1.png - 파일경로

     다음로고"> <!-- (O) --->

     <img src="C:\Java\HTML\Day2\sky1.png" alt="하늘 이미지"> <!-- (X) --->
     내 컴퓨터상에만 있기 때문에 옳지 않은 경로 지정방법이다. 내 컴퓨터상에는 문제없이 나옴!!!


 2. 상대 경로    
    - 이미지가 HTML 문서와 같은 폴더에 있는 경우
        <img src="파일명">, <img src="./파일명">
    - 이미지가 하위 폴더에 있는 경우
        <img src="폴더명/파일명">, <img src="./폴더명/파일명"> 
    - 이미지가 상위 폴더에 있는 경우
        <img src="../파일명", <img src="./../파일명">
    - 이미지가 상위 폴더의 하위 폴더에 있는 경우
        <img src="../하위폴더명/파일명">, <img src="./../하위폴더명/파일명">
예제 이미지 태그
 
<!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>
    <h2>이미지 태그</h2>
    <img src ="./sky1.png" alt="하늘">
    <img src ="./images/sky2.png" alt="하늘">
    <img src="../sky3.png" alt = "하늘">
    <img src="../images/sky4.png" alt = "하늘">

    <!-- 절대경로-->
        alt = "다음로고">
   
   

</body>
</html>

4. 하이퍼 링트 <a>
- 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지)

    <a gref="사이트 또는 문서의 경로">링크에 사용될 문자 또는 이미지</a>

 

예제 하이퍼링크 태그
 
<!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>
    <h2>하이퍼 링크</h2>
    <!--상대 경로-->
    <a href="./3_이미지태그.html">이미지 태그 연습</a>

    <br><br>

    <a href="./3_이미지태그.html"><img src="./sky5.png" alt="하늘"></a>

    <br><br>
   
    <!--절대 경로-->



</body>
</html>

5. 책갈피 <a>
<a> 태그의 name 속성 또는 특정 태그의 id 속성을 이용하여 책갈피 기능을 사용

    <a href="a 태그의 name 또는 특정 태그의 id값">링크에 사용될 문자 또는 이미지</a>

    <a gref="#book">이동</a>
    ..
    ..
    ..
    ..
     <a name="book">도착</a> 또는  <p id="book">도착</p>

예제 책갈피

 

<!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>
    <h2 id ="menu">책갈피</h2>
    <p><a href="#book">목적지로 이동</a></p>
   
   
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tempora numquam id voluptatem, suscipit reprehenderit ipsam! Aut distinctio, quia repellat a quaerat, minus officia consectetur ut minima nobis excepturi et.</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel tut minima nobis excepturi et.</p>

    <p><a name="book">도착지</a></p>
    <p><a href="#menu">위로</a></p>
   
</body>
</html>
 
반응형
저작자표시 비영리 변경금지 (새창열림)

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

홈페이지 만들기(파일질라, 닷홈, 비주얼스튜디오)  (0) 2022.10.26
HTML (뉴스, 이력서) 과제  (0) 2022.10.21
HTML 테이블(기본, colspan, rowspan, colgrop, caption)  (0) 2022.10.21
HTML (서식 태그, 목록 태그)  (0) 2022.10.21
HTML (Visual Studio Code 설치 및 기본)  (0) 2022.10.20

'Frontend/HTML'의 다른글

  • 현재글HTML(이미지 태그, 하이퍼링크 태그, 책갈피 태그)

관련글

티스토리툴바