🟣 링크 (link)
문서와 문서 간 연결을 의미
기본으로<a>태그를 사용
사진과 같은 이미지 객체 삽입은<img>태그를 사용
🟣 a 태그
HTML 에서 내부나 외부 링크를 생성함
다른 문서로 점프할 수 있는 단어나 이미지
<a href = "대상 경로" target = "링크 연결 방식" title = "링크 설명"> </a>- href 속성
링크의 목적지를 나타냄
링크의 대상 경로 ( URL ) 를 입력할 때 사용
- targer 속성
링크가 클릭되었을 때, 새로운 페이지가 어디에 열리는지 지정
_black 새로운 윈도우에서 새로운 페이지를 여는
_self 현재 윈도우에서 새로운 페이지를 적재
_parent 부모 프레임에서 새로운 페이지를 적재
_top 현재 윈도우에서 새로운 페이지를 적재하고 모든 프레임을 취소
- title 속성
링크를 설명할 수 있는 텍스트를 작성
<a href = "https://velog.io/" target = "_black" title = "좋아요"> 벨로그는 사랑 </a>- 만약 대상 경로가 명확하지 않을 때
연결해야 하는 대상의 주소가 불분명한 경우 href 속성에 " # " 사용하면 됨
<a href = "#" target = "_black" title = "주소가 아직 없어요"> </a>🟣 img 태그
HTML 에서 이미지 객체를 삽입하고 싶을 때 사용
<img src = "이미지 경로" alt = "이미지 설명">- src 속성
삽입하려는 이미지의 경로를 입력하는 속성
- 경로를 입력할 때 경로 입력에서만 사용할 수 있는 약속된 기호가 있음
./현재 폴더
../상위 폴더
경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 이미지 경로 입력하기 </title>
</head>
<body>
<img src="images/lovedog.jpg">
</body>
</html>- alt 속성
삽입한 이미지 객체를 설명할 수 있는 텍스트를 넣는 속성
이미지가 제대로 로드가 될 경우엔 alt 속성 값은 웹 브라우저에 보이지 않음
하지만 alt 속성은 이미지를 보지 못하는 분들이 봄
시각 장애인분들은 이미지를 볼 수 없기 때문에 alt 속성을 스크린 리더로 들음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 이미지 경로 지정하고 텍스트 넣기 </title>
</head>
<body>
<img src="image/lovedog.jpg" alt="강아지는 사랑이에요">
</body>
</html>🔽 이미지 로드가 안됬을 경우에도 alt 속성이 출력된다 🔽
🟣 이미지 링크
img 태그를 a 태그 안에 사용해서 이미지를 클릭하면 a 링크에 지정한 링크로 이동 가능하게 하는
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 이미지 경로 지정하기 </title>
</head>
<body>
<a href="http://www.naver.com" target="_blank" title="새 창에서 열어요">
<img src="images/lovedog.jpg" alt="강아지는 사랑이에요">
</a>
</body>
</html>🔽 이미지를 누르면 웹 브라우저의 새 탭에서 네이버를 열게 했을때 🔽
공부 중. !!! !