src 속성 확인

상대경로 : 현재 위치를 기준으로 경로 지정
.. : 상위 폴더
/ : 아래, 안쪽, 안에
./ : 현재 경로에서 이동

img 태그

• 웹 문서에 사진, 그림 같은 이미지를 삽입하는 용도의 태그

[속성]
1) src : 삽입할 이미지의 경로를 지정하는 속성(파일경로, 웹주소)
2) width / height : 이미지의 크기를 지정하는 속성을
3) alt : 이미지를 설명하는 속성 -> 이미지가 출력되지 않는 경우 화면에 직접 표시하는 (웹접근성)

<img src="./image/단비.jpg" alt="단비꺼야">

---

웹 이미지 경로(웹상 절대 경로)를 이용해서 이미지 출력

<img src="https://mblogthumb-phinf.pstatic.net/20160401_197/707tndus_14594776913178GJR1_GIF/2695ede320076e000238430f50053469.gif?type=w2" alt="초롱초롱">

---

width, height 속성을 이용한 크기 조절(고정/가변 크기)고정 크기

img 태그 inline 형식

고정 크기 단위(px)
화면에 크기 상관 없이 지정된 값의 크기를 갖는 단위
<img src="./image/1.avif" width="300px" height="240px" alt="풍경">

가변 크기 단위(%)
화면이나 영역 기준 사이트 크기에 따라 크기 변경되는 단위
<img src="./image/6.jpg" width="15%" alt="무슨사진이지">

---

---

하이퍼링크 관련 태그

하이퍼링크 관련 태그 : a(anchor)태그

        a태그는 현재HTML문서와 다른HTML 문서를 연결해서
        페이지 이동을 할 수 있게 하는 기능을 제공.
    -> 이 때, a태그로 감싸진 문자열 == 하이퍼링크

    * 하이퍼링크는 웹(HTML) 문서가 다른 문서와 구분될 수 있는
    핵심적인 기능.
    + 페이지 내에서 이동도 가능
</pre>

<hr>

<h2>a태그를 이용한 하이퍼링크 구현</h2>

<ul>
    <li>
        <a href="01_글자관련태그.html">01_글자 관련 태그</a>
    </li>

    <!-- target 속성 : 연결된 문서를 어디에서 열 것인지 지정하는 속성
                기본값 : 같은 탭
                _blank : 새 탭 == 비어있는 탭
    -->
    <li>
        <a href="02_목록관련태그.html" target="_blank">02_목록관련태그</a>
    </li>
</ul>

<li>
    <a href="https://www.naver.com" target="_blank">네이버로 이동</a>
</li>

<hr>

<h2>이미지 클릭 시 페이지 이동</h2>

<a href="https://www.naver.com" target="_blank">
    <img src="./image/3.jpg" alt="">이미지 눌러봐
</a>

<hr>

<h2>한 페이지 내에서 이동하기(점프)</h2>

<ul id="list">
    <li>
        <a href="#cat1">고양이1</a>
    </li>
    <li>
        <a href="#cat2">고양이2</a>
    </li>
    <li>
        <a href="#cat3">고양이3</a>
    </li>
</ul>

<h3 id ="cat1">고양이1</h3>
<img src="./image/4.jpg" width="500px" alt="">
<a href="#list">목록으로 이동</a>

<h3 id ="cat2">고양이2</h3>
<img src="./image/2.jpg" width="500px" alt="">
<a href="#list">목록으로 이동</a>

<h3 id ="cat3">고양이3</h3>
<img src="./image/3.jpg" width="500px" alt="">
<a href="#list">목록으로 이동</a>