이미지와 하이퍼링크 - html 배우기

이미지와 하이퍼링크

이미지

https://www.w3schools.com/html/html_images.asp

이미지를 삽입하는 태그는 <img> 태그이다.

<img src="이미지 경로" alt="이미지 설명" />

이미지 경로

이미지 경로는 이미지가 저장된 위치를 의미한다.

절대 경로

절대 경로는 이미지가 저장된 위치를 표시하는 경로이다.

• 절대 경로는 http:// 또는 https://로 시작한다.

<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="이미지 설명" />

상대 경로

상대 경로는 현재 파일이 저장된 위치를 기준으로 이미지가 저장된 위치를 표시하는 경로이다.

하위 폴더 경로

• ./는 현재 파일이 저장된 위치를 의미한다.

폴더 구조

root
├── index.html
├── banner1.jpg
└── images
    └── banner2.jpg
    └── main
        └── banner3.jpg

<!-- index.html 기준 -->
<img src="./banner1.jpg" alt="이미지 설명" />
<img src="./images/banner2.jpg" alt="이미지 설명" />
<img src="./images/main/banner3.jpg" alt="이미지 설명" />

상위 폴더 경로

• ../는 현재 파일이 저장된 위치의 상위 폴더를 의미한다.

폴더 구조

root
├── sub
    ├── index.html
├── images
    └── banner1.jpg
    └── main
        └── banner2.jpg

<!-- sub/index.html 기준 -->
<img src="../images/banner1.jpg" alt="이미지 설명" />
<img src="../images/main/banner2.jpg" alt="이미지 설명" />

root 폴더 경로

• 서버의 root 폴더를 기준으로 이미지 경로를 지정할 때는 /를 사용한다.
• /는 root 폴더를 의미한다.

폴더 구조

root
├── index.html
├── images
    └── banner1.jpg
    └── main
        └── banner2.jpg

<!-- index.html 기준 -->
<img src="/images/banner1.jpg" alt="이미지 설명" />
<img src="/images/main/banner2.jpg" alt="이미지 설명" />

이미지 설명

• 이미지 설명은 이미지가 표시되지 않을 때 대신 표시되는 텍스트이다.
• 웹접근성 관점에서 이미지 설명은 필수적이다.
• 이미지 설명은 alt 속성으로 지정한다.

<img
    src="https://ssl.pstatic.net/melona/libs/1378/1378592/cf26f9d7266c745b0ddb_20231122163935097.png"
    alt="검색어 고민 없이, 떠오르는 질문 그대로! cue 붕어빵 잉어빵 다른 게 뭐야?"
/>

이미지 크기

이미지 크기는 이미지의 가로 크기와 세로 크기를 의미한다.

• 이미지 크기는 원본 이미지 크기로 표시되기 때문에 원하는 크기로 표시하려면 width와 height 속성을 사용해서 크기를 지정해야 한다.

<img src="이미지 경로" alt="이미지 설명" />

img {
    width: 100px;
    height: 100px;
}

picture 태그

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_picture1

picture 태그는 미디어 쿼리를 사용해서 이미지를 선택하는 태그이다.

<picture>
    <!-- 650px 이상일 경우 -->
    <source media="(min-width: 650px)" srcset="img_food.jpg" />
    <!-- 465px 이상일 경우 -->
    <source media="(min-width: 465px)" srcset="img_car.jpg" />
    <!-- 기본 이미지 -->
    <img src="img_girl.jpg" />
</picture>

미디어 쿼리

• 미디어 쿼리는 미디어 타입과 미디어 특성을 기반으로 미디어를 선택하는 방법이다.

하이퍼링크

https://www.w3schools.com/html/html_links.asp

하이퍼링크를 삽입하는 태그는 <a> 태그이다.

<a href="링크 경로">링크 텍스트</a>

링크 경로

• 링크 경로는 링크가 연결되는 위치를 의미한다.

절대 경로

• 절대 경로는 링크가 연결되는 위치를 표시하는 경로이다.

<a href="https://www.w3schools.com/html/">HTML</a>

상대 경로

• 상대 경로는 현재 파일이 저장된 위치를 기준으로 링크가 연결되는 위치를 표시하는 경로이다.

<a href="./html/">HTML</a>

root 폴더 경로

• 서버의 root 폴더를 기준으로 링크가 연결되는 위치를 표시하는 경로이다.

<a href="/html/">HTML</a>

링크 텍스트

• 링크 텍스트는 링크를 클릭했을 때 이동하는 위치를 표시하는 텍스트이다.

<a href="https://www.w3schools.com/html/">HTML</a>

링크 타겟

• 링크 타겟은 링크를 클릭했을 때 이동하는 위치를 표시하는 방법이다.

새 창

• 새 창은 링크를 클릭했을 때 새 창에서 이동하는 방법이다.
• 새 창은 target 속성을 _blank로 지정한다.

<a href="https://www.w3schools.com/html/" target="_blank">HTML</a>

현재 창

• 현재 창은 링크를 클릭했을 때 현재 창에서 이동하는 방법이다.

<a href="https://www.w3schools.com/html/">HTML</a>

링크 제목

• 링크 제목은 링크에 마우스를 올렸을 때 표시되는 텍스트이다.
• 웹접근성에서 새창 열림을 표시하기 위해 사용한다.

<a href="https://www.w3schools.com/html/" title="새창 열림">HTML</a>

mailto, tel

• mailto는 이메일 주소를 표시하는 방법이다.
• tel은 전화번호를 표시하는 방법이다.

<a href="mailto:mail@mail.com">메일 보내기</a> <a href="tel:010-1234-5678">전화 걸기</a>

실습 예제

• 구글, 네이버, 카카오 로고 이미지를 다운 받은 후 이미지를 삽입하고, 이미지를 클릭했을 때 해당 사이트로 새창으로 이동하도록 하세요.