html / 01 / 기초-5

이미지를 삽입할 수 있는 태그 👉 img 태그

• 필수요소
  1) src 속성 : 파일의 경로를 작성하는 공간
  2) alt 속성 : 스크린 리더로 읽을 때,이미지가 없는 경우 대체 텍스트로 대체하는 공간

<img src="naverlogo.jpg" alt="네이버 로고 사진입니다.">

---

폴더 위치를 잘 설정해야 한다 !

./ 👉 현재 폴더 위치, 내 위치를 의미 (생략가능)
../ 👉 현재 폴더 위치 기준, 상위폴더
/ 👉 최상위 폴더(루트)

---

경로에 대해서 . . ①

• 경로의 마지막이 최종 목적지이다.
• 절대경로와 상대경로가 있다.

<img src="엄마폴더/자식폴더/dream.jpg" alt="꿈 사진입니다.">

<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAyMDNfNTYg%2FMDAxNjEyMzIzOTQyNzkw.c6HM-ExWnM8DobvOPs3G0eVKRlO3DD6NQ058TXyTNasg.baF6Px3-5rx0i7O8RKgQwX5vIV2rKcWzDPWEwhgfMDgg.PNG.u9ri%2Fgoogle_photos.png&type=a340">

• CDN(Content Delivery Network)을 통해 가져온 이미지

• CDN : 네트워크 서버를 통해 정적콘텐츠를 가져온다
  1)서버 이미지가 날라가면 나도 날라감 (종속적)
  2)어디서든 누구든 접속 가능 (≒ 절대경로)
  3)인터넷 안 되면 불가능
  4)코드를 공개, 배포, 공유 할 때 사용

---

경로에 대해서 . . ②

상대경로 : 내가 작업중인 파일을 기준으로,
내가 가지고 있는 파일들을 찾는 경로

• 경로를 작성할 때는 반드시 마지막 부분이 최종 목적지 파일
• 현재 폴더 위치, ./ 내 위치를 의미 (생략가능)
• 폴더를 들어가는 경우에는 / 기호를 통해서 폴더를 구분지어준다.
• 폴더를 나와야하는 경우에는 ../ 기호를 통해서 폴더를 나온다.
• 최상위폴더(root)로 한번에 이동하려면 맨 앞에 / 를 넣어준다.

절대경로 : 누구나 접속했을때,
똑같은 주소로, 똑같은 결과가 나오는 경로

• ex) URL, CDN

쉽게 설명하자면 !!

상대경로 : (우리집을 기준) " 민수집? 옆집 사는데?"
절대경로 : "민수집? 서울시 강남구 삼성로 212 은마아파트 23동 402호인데?"

---

이미지를 불러오는 방법 2가지

1. 내가 가진 로컬 파일을 불러드리는 방법
2. 네트워크를 통해서 다른 서버에 저장 된 이미지를 불러오는 방법 (CDN)

• 로컬방식 : 개발을 할 때 주로 사용 (나만 쓰면 되니까)
  1. 인터넷 없어도 사용 가능 (내 컴만 쓰니까)
  2. 데이터 ↑, 용량 ↑ (개발시)
     보통 서버 컴, DB컴, 미디어컴 나눠서 쓴다.

---

☑️ 하이퍼링크(a태그)에 사진을 넣을 수 있을까 ?!

하이퍼링크 a태그는 열린태그와 닫힌 태그가 존재하는 컨텐츠 이다.
이미지 태그(img)는 열린태그만 존재하는 태그이다.
하이퍼링크의 (컨텐츠영역에) 열린태그인 이미지태그를 넣을 수 있다.

<a href="www.naver.com">
  <img src="naverlogo.jpg" alt="네이버 로고 사진입니다.">
</a>