[html&css] html 기본 개념 정리_2

1st revised - 2022년 9월 16일

💡이미지 태그

img태그는 html에 이미지를 삽입한다.

<img src="images/apple.jpg" alt="사과">

• alt : 필수는 아니지만 스크린 리더가 alt의 값을 읽어
  사용자에게 이미지를 설명하므로 웹 접근성에서 아주 유용하다.
  이미지를 표시할 수 없는 경우에 이 값이 보여짐.
  
  
  
  

💡절대경로 / 상대경로

• 절대경로 : 말 그대로 리소스의 절대적인 경로를 뜻함.
  절대경로를 이용하면 웹에서 이미지가 사라지거나 내 컴퓨터에서 만든 파일을 다른 곳으로 옮길 때 해당 절대경로를 다시 수정해야 하는 단점이 있다.
  ►작업중인 폴더에 이미지를 옮기고 상대적인 위치를 가리킴으로써 이러한 불편함을 해소할 수 있음.

-웹 이미지 절대경로 
예) http://www.naver.com/apple.png
원격의 다른 사이트를 의미

-웹 이미지 절대경로  
예) /apple.png
루트('/') 디렉터리 부터 시작하는 경우, 현재 도메인이 자동으로 앞에 붙음
최상위경로 (root path) 에서 찾는다.

-PC 컴퓨터 절대경로 
예) C:\user\gymcoding\apple.png

• 상대경로 : 현재 문서를 기준으로 경로를 인식함.

- `index.html` 에서 동일한 위치에 있는 apple.png를 가져오는 방법 → `src="apple.png"` 또는 `src="./apple.png"`
- `index.html` 의 상위 폴더에 이미지가 있는 경우 → `src="../apple.png"`
- `index.html` 의 하위 폴더에 이미지가 있는 경우 → `src="하위폴더/apple.png"`

💡하이퍼링크 태그

<a> 태그는 href 속성을 사용하여 다른 페이지나 같은 페이지의 특정위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.
target="_blank" 속성을 사용하여 새탭에서 화면을 열 수 있다.

• 같은 폴더안에 있는 다른 페이지로 이동

<a href="inner.html">다른 페이지 이동</a>
<a href="inner.html" target="_blank">새탭으로 페이지 열기</a>

• 이미지에 하이퍼 링크 걸기

<a href="inner.html"><img src="apple.png" alt="사과" width="200"></a>

속성

href : 하이퍼링크가 가리키는 URL. 링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있다.

• tel: URL을 사용하는 전화번호
• mailto : URL을 사용하는 이메일 주소