<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
이미지를 삽입할 수 있는 태그 -> img
필수요소
1) src속성 -> 파일의 경로를 작성하는 공간!
2) alt속성 -> 스크린 리더로 읽을 때 텍스트, 이미지가 없는 경우 대체 텍스트
이미지를 불러오는 방법 2가지
1) 내가 가진 로컬 파일을 불러드리는 방법
2) 네트워크를 통해서 다른 서버에 저장된 이미지를 불러오는 방법 (CDN)
* 로컬 방식 -> 개발 할 때 사용 / CDN -> 코드를 공개, 배포, 공유 할때 사용
파일을 불러드리는 경로 2가지
1) 상대경로 -> 내가 작업중인 파일을 기준으로 내가 가지고 있는 파일들을 찾는 경로
- 경로를 작성할 때는 반드시 마지막 부분이 최종 목적지 파일
- 폴더를 들어가는 경우에는 / 기호를 통해서 폴더를 구분지어 준다.
- 폴더를 나와야하는 경우에는 ../ 기호로 폴더를 나온다, 여러번이면 ../를 여러번 작성
- 최상위폴더(root)로 한번에 이동하려면 맨앞에 / 를 넣어준다!
- 나를 기준으로 내 위치를 의미하는 기호 ./ -> 생략해도 된다.
2) 절대경로 -> 누구나 접속했을 때 똑같은 주소로, 똑같은 결과가 나오는 경로(URL)
-->
<img src="/이미지/img.jpg" alt="뉴진스에서 제일 예쁜 민지입니다.">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzA2MTdfMjM1%2FMDAxNjg2OTkwNjQxODIx.FQodB_z6FUk3PiU70ZVTClFx1iSjWZSaaRla5f8GDNwg.oJNL8hOrOSPpW49IcJ25HmrYoAN1B-jCdkbIfAAaZAMg.JPEG.akrlfakrlf%2F1686989254834%25A3%25AD9.jpg&type=a340" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http://www.naver.com">
<img src="/이미지/naver.jpg" alt=""> #이미지 링크
</a>
</body>
</html>
개발자