Html #4 - 태그 종류 <a>,<img>

하이퍼 링크를 걸어주는 태그 -<a>

• a태그는 앵커(anchor)의 약자로, 글자 또는 이미지를 통해 해당 페이지로 연결해주는 태그.
• 반드시 href 속성을 이용해 연결하고자 하는 사이트의 주소나 페이지의 주소를 연결해줘야 함.

===========<기본형>===========
<a href="링크 또는 파일경로 등" target="파일을 전환시
보여주는 방식" title="링크 설명"></a>

- target속성 : _blank  - 새창으로 링크 연결
- 시각장애인들에게 title 문구 읽힘.
- 특히 이미지에 링크 걸경우 title 쓰는거 권장됨!

==========+======+==========

href의 속성값과 기능

1. 일반적인 사이트 링크 : http로 시작하는 링크 주소를 입력하면 해당 사이트로 이동함.
2. file_name.html : 해당 file_name.html 파일로 연결해줌. 이때 절대경로나 상대경로를 이용해야 함.
3. mailto : 이메일 주소 : 해당 이메일 주소로 이메일을 보낼 수 있게 아웃룩이 연결됨.
4. tel:전화번호 : 링크를 클릭하면 컴퓨터에 연결된 인터넷 전화로 전화를 걸 수 있음.
5. sms:전화번호 : 링크를 클릭하면 모바일에서 문자를 보낼 수 있음.
6. # : 당장 연결할 링크가 없는 경우 임시로 링크를 걸어주는 속성값.

 <!-- 일반적인 사이트 링크 -->
     <a href="https://naver.com" target="_blank">네이버</a>
     <a href="https://daum.net">다음</a>
     <a href="https://google.com" title="구글로 가기">구글</a>
     
    <!-- 작업 폴더에 있는 파일로 이동 -->
     <a href="/test.html" target="_blank">테스트</a><br>

    <!-- 이메일 보내기 -->
    <a href="mailto:email_address@aaa.com">이메일 보내기</a>

    <!-- 전화걸기 -->
    <a href="tel:02-1234-5678">전화걸기</a>

    <!-- 문자보내기 -->
    <a href="sms:010-1234-5678">문자보내기</a> <br>

    <!-- sub01.html로 이동하기  -->
    <a href="sub/sub01.html">sub01.html로 이동하기</a>
    
    <!-- <a href="#"> : 링크는 있지만 현재 경로가 없는 임시경로 표시 -->
    <a href="#">임시경로</a> <br>

    <!-- link.html로 연결 -->
    <a href="./sub/sub3/sub4/link.html">link로 이동</a>
    

이미지 태그 - <img>

• 이미지를 불러오는 태그. inline-block속성의 대표 태그로 여러개를 출력하면 이미지가 가로로 출력되고, 이미지 사이에 공백 1칸이 생김.
• 이미지는 이미 사각형의 형태를 가지고 있기 때문에 너비 높이를 조절할 수 있다.
• 이미지를 불러올 때에는 src 속성에 이미지 경로를 절대경로나 상대경로로 불러올 수 있다.
  - alt 속성을 이용하여 간단한 이미지 설명을 넣어주어야 함.(웹표준 문법) ★★★
• alt에 쓰여진 값은 화면낭독기를 통해 시각장애인들에게 해당 이미지를 설명하기도 하고, 이미지 경로가 틀렸을 경우 해당 이미지가 어떤 이미지인지 파악하는 용도로 사용된다.
• width와 height속성을 이용해 이미지의 사이즈를 조절할 수 있는데, 이 때 이미지 비율을 정비율로 조절하고 싶다면 width만 사용하는 것이 좋다. width와 height의 값은 숫자를 입력하면 되고, px단위일 경우 단위는 생략하고 숫자만 입력한다.
  px이외의 단위를 입력하고자 하는 경우에는 단위까지 함께 작성해 주어야 한다.

===========<기본형>===========
<img src="이미지 경로" alt="이미지 설명" width="숫자" height="숫자"/>
==========+======+==========

     <!-- 이미지 경로가 올바른 경우 -->
     <img src="./img/dog.jpg" alt="강아지" width="300" />
     <img src="./img/sheep.jpg" alt="양" width="300"/>
     <img src="./img/cup.jpg" alt="컵" width="200"/>
     <!-- 이미지 경로가 틀린 경우 -->
     <img src="dog.jpg" alt="강아지">