[UI/UX]coding 기초(6) - HTML- 이미지 태그, 이미지 설명 태그, 하이퍼 링크

이미지를 사용하는 방법

• 이미지는 프로젝트 폴더 안에 'img' 또는 'image'라는 이름의 폴더를 만들어 모든 이미지 (동영상)들을 보관하여 관리한다.

• 또한 이미지의 이름은 html파일 명명 규칙과 동일하게 영문 소문자로 시작하고, 간결하고 직관적인 이름으로 지어주는 것이 좋다.
  

  [이미지 파일 이름 규칙]

1. 파일명은 영문 소문자로 저장하고 공백대신 -,_ 사용\
   2.이미지 폴더는 최상위 폴더 안에 있어야 한다.

2. 용량이 너무 크지 않은 파일을 사용하고 해상도는 72px

   [기본형]
   < img src='이미지 경로' alt='이미지 설명'/>

   [img태그에 쓸 수 있는 속성]

   1. src: 소스의 약자로 이미지 경로를 표현한다. 또한 URL을 넣어 출력도 가능하다.
      단 , 원본파일이 지워지거나 이미지명이 변경되면 html안 이미지가 사라진다.
   2. alt: 이미지에 대한 설명.설명은 직관적이고 간결하게 적는 것이 좋으며 시각장애인들에게 화면낭독기를 통해 이미지를 설명
   3. width: 이미지의 가로 넓이를 지정한다. 보통은 css로 처리한다.
   4. height: 이미지의 세로 높이를 지정한다. 보통은 css로 처리한다.

절대 경로와 상대 경로

• 절대경로는 최상위 폴더로부터 이미지의 위치까지를 /로 표현하여 불러오는 방법
• 상대경로는 현재 작성하고 있는 파일의 위치를 기준으로 .과 /를 이용해 경로를 표현하는 방법이다.
  -실무에서는 보안때문에 절대경로를 잘 사용하지 않는다.

[절대경로]
- 최상위 폴더 : /(=root)
- 폴더이름 /: ~폴더 안에

예시) 
<img src = "/img/이미지이름.jpg" alt= "이미지 설명" />

[상대경로]
- / : 최상위 폴더(=root)
- ./ : 현재 작성하고 있는 파일의 폴더.
- ../ : 한 폴더 위로

< figure>, < figcaption> : 이미지의 설명글을 표시하는 태그
html5 웹표준에서는 이미지 설명을 나타낼때 < figure>,< figcaption> 태그를 사용한다.

  [기본형]
  1. 
  <figure>
    < img src="경로" alt= "설명" /> 이미지 설명
    <figure />
    
 
 2.
  <figure> 이미지 설명 </figure>
  <img src ="경로" alt = "설명"/ >
  
  
 3.
  <figure>
    <img src= "경로" alt="설명" />
    <figcaption> 이미지 설명 </figcaption>
    </figure>

하이퍼링크의 이해
방문자가 글자나 이미지를 클릭하는 순간 링크를 통해 해상 페이지로 이동한다. 웹 사이트에서 가장 많이 사용되는 기능이며 , 웹페이지를 연결해주는 역할이다.

<a태그> : 링크를 연결하는 태그

• a태그는 '앵커'태그라고 부른다.
• 서로다른 웹 페이지를 연결하거나 전화를 연결하거나 메일을 연결할때에도 사용한다.
• a태그는 inline속설을 갖는다.

[기본형]
< a href="링크 경로" target="페이지 연결 방식" title="링크 설명"> 글자나 이미지< /a>

[속성]
1. target : 페이지가 열리는 방식을 지정하는 속성. 생략 가능

-target="_self" : 현재 탭에서 페이지를 연결한다. 기본값.
-target="_blank": 새 탭 열기
-target="_parent" : 프레임으로 나누어진 페이지 전체를 부모 프레임으로 이동시킨다.
(옛날에 많이 쓰이던 방식이며, 보통 iframe으로 광고영역을 보여줄때 사용, 지금은 잘 쓰이진 않는다.)

2. title = "링크 표시내용" : target = "_blank"로 지정했을 경우 title속성도 함께 넣어준다.
title은 링크위에 마우스를 올렸을때 뜨는 말풍선으로 링크에 대한 설명을 넣을 때 사용한다.

3. herf : 링크연결 주소. url을 넣거나 html페이지끼리 연결하는 역할을 한다.

링크의 종류

[종류]

• href ="웹 주소 url"
  : 해당하는 url주소로 링크를 연결한다.

• href="/"
  : 최상위 폴더 내의 index.html(메인페이지)로 연결한다.

• href=""./폴더이름/파일이름.html"
  : 해당하는 html페이지로 연결한다.

• href="mailto:이메일 주소"
  : 아웃룩을 통해 메일을 보낼 수 있다.

• href ="tel:전화번호"
  : 모바일 환경에서 해당 전화번호로 전화를 걸 수 있도록 화면을 전환해 준다.
  만약 pc에 인터넷 전화가 연결되어 있으면 pc에서도 동작할 수 있다.

  • href ="sms:전화번호"
    :모바일 환경에서 해당 전화번호로 문자를 보낼 수 있도록 화면을 전환해 준다.

• href ="#"
  : 임시경로, 페이지의 이동은 이루어지지 않지만 웹 페이지를 만들때 당장 연결할 페이지가 준비되지 않는 경우 임시로 넣어놓은 주소역할을 한다.