1. <img>
속성 src="이미지 파일 주소 또는 이미지 파일 이름.확장자"
컴퓨터에 저장된 이미지를 사용하려면
html 만든 폴더와 같은 폴더에 이미지 파일이 있어야 인식하고 파일을 열 수 있다.
다른 공간에 이미지 파일이 저장되어 있으면 파일이 열리지 않는다.
속성값 title / alt 차이
title: 그림에 마우스를 올렸을 때 그림에 대한 설명을 넣을 수 있다.
alt: 이미지를 표시할 수 없는 경우 이미지의 대체 텍스트를 보여준다.
alt 속성은 느린 네트워크 환경이나 src 속성값의 오류,
시각 장애인용 스크린 리더의 사용 등 어떤 이유로든 사용자가 이미지를 볼 수 없을 때
이미지 대신 제공할 대체 정보를 제공한다.
개념확실히 알고가기!
1. 이미지, title 태그
2. 이미지, alt 태그
- 둘 다 이미지가 안보일 때 :
1번 빈 이미지, "X이미지에 마우스 올렸을 때 문구출력", "문구출력"
2번 빈 이미지, "문구출력"
| 속성 | 이미지 | 이미지 마우스 문구출력 | 문구출력 |
| 1번 | x | o | o |
| 2번 | x | x | o |
- 1번 이미지는 안보이고 2번은 보일 때 :
1번 빈 이미지, "X이미지에 마우스 올렸을 때 문구출력", "문구출력",
2번은 이미지만 출력 (이미지에 마우스 올려도 문구 출력 안 됨)
| 속성 | 이미지 | 이미지 마우스 문구출력 | 문구출력 |
| 1번 | x | o | o |
| 2번 | o | x | x |
- 1번 이미지 보이고 2번은 안 보일 때 :
1번 이미지, "이미지에 마우스 올렸을 때 문구출력"
2번 빈이미지, "문구출력"
| 속성 | 이미지 | 이미지 마우스 문구출력 | 문구출력 |
| 1번 | o | o | x |
| 2번 | x | x | o |
- 둘다 이미지 보일 때 :
1번 이미지, "이미지에 마우스 올렸을 때 문구출력"
2번은 이미지만 출력 (이미지에 마우스올려도 문구 출력 안 됨)
| 속성 | 이미지 | 이미지 마우스 문구출력 | 문구출력 |
| 1번 | o | o | x |
| 2번 | o | x | x |
2. <a> 태그
하이퍼링크 속성
href="연결하고 싶은 링크 주소"
웹문서에서 다른 웹문서로 이동하는 기능
같은 폴더에 있으면 sample1.html과 sample2.html을 연결시킬 수 있다.
다른 공간에 저장되어 있으면 파일이 열리지 않는다.
속성 target
속성값
_self : 현재 창이 링크로 연결된다.
_blank : 새 창에서 링크가 연결된다.
예시>
<!DOCTYPE html>
<!--sample1.html 이라고 가정하자-->
<html>
<head>
<meta charset="utf-8">
<title>이미지, 하이퍼링크 첨부</title>
</head>
<body>
<!--컴퓨터에 저장한 이미지 파일 첨부 시 html파일과 같은 폴더 안에 있어야 한다
2번 그림은 안보이고 글자만 옆에 나오는 것이 맞다.-->
1. <img src="https://cdn.pixabay.com/photo/2017/01/12/18/07/ears-1975279_960_720.png" title="귀여운 토끼랍니다~"><br>
2. <img src="cat2.jpg" alt="귀여운 고양이랍니다~"><br>
<!--연결하려는 html파일과 같은 폴더 안에 있어야 한다.
3번은 안 열리는 게 맞다.-->
3. <a href="sample2.html" target="_self">여기를 눌러보세요.</a><br>
4. <a href="http://www.naver.com" target="_blank">네이버</a>
</body>
</html>
'Front-End > HTML' 카테고리의 다른 글
| HTML - Favicon이란? (0) | 2023.02.08 |
|---|---|
| HTML 태그 - 서식에 사용되는 태그들 (0) | 2023.02.06 |
| HTML 요소 - inline-element, block-element (0) | 2023.02.05 |
| HTML 태그 보충 설명 (0) | 2023.02.01 |
| HTML이란? (0) | 2023.01.19 |
