[HTML] 이미지 태그, 하이퍼링크 삽입

리버 River 2024. 3. 19. 11:22

2024. 3. 19. 11:22

1. 이미지 태그

1) 이미지 삽입 <img> 태그

<!-- 기본형 -->
<img src="이미지 파일 경로" alt="대체용 텍스트">

👩🏻‍🚀 src 속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려 주는 역할

👩🏻‍🚀 alt 속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력

💡 웹에서 사용하는 대표적인 이미지 파일 형식

종류	설명
GIF (graphic interchange format)	표시할 수 있는 색상 수는 최대 256가지. 작은 이미지에 주로 사용
JPG/JPEG (joint photographic experts group)	GIF 보다 색상과 명암을 다양하게 표현 가능. 이미지 수정하고 저장하는 작업 반복 시 화질이 떨어질 수 있다.
PNG (portable network graphics)	네트워크용으로 개발된 파일 형식. 색상을 다양하게 표현하면서도 투명한 배경도 만들 수 있어 웹에서 가장 많이 사용

💡 src 속성

· 파일 경로를 정확하게 입력하지 않으면 이미지가 화면에 나타나지 않는다.

· 웹 문서 파일의 위치를 기준으로 파일의 경로가 정해진다.

· 웹 문서 파일과 이미지 파일이 같은 경로에 있다면 src 속성에 이미지 파일의 이름만 적으면 된다

▶️ 하위 폴더에 이미지 파일이 있다면 src 속성에 하위 폴더와 함계 이미지 파일 이름을 적어야 한다.

💡 alt 속성

· alt 속성을 지정하면 인터넷이 불안정하거나 이미지 파일 경로를 잘못 넣었을 때 이미지 대신 텍스트가 표시

· 메뉴를 이미지로 삽입하는 경우와 같이 내용을 강조하기 위해 이미지로 처리할 때

alt 속성안에 들어갈 텍스트는 이미지를 부연설명 하는 것이 아닌 이미지 안에 포함된 텍스트를 알려줘야 한다.

💡 이미지 크기 조절 width, heigh 속성

· 웹 브라우저 창에서 보이는 이미지 크기만 조절하고 싶을 때 사용

· width는 너비, height는 높이를 지정. 둘 중 하나만 지정해도 나머지 속성 비율은 자동으로 계산하여 나타낸다.

💡 이미지 크기 표현 단위

종류	설명
%	웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정
px	이미지의 너비나 높이를 해당 픽셀 크기만큼 표시

<body>
    <!--
    이미지를 나타내주는 태그. 단독 태그.
    글자와 같이 나열되는 성격(inline 속성)

    <img src="이미지 파일의 1)경로 또는 2)url" alt="대체문자">
    alt: 주석문, 이미지가 안보일 때를 대비한 대체문자, html5 기본 규칙!

    이미지의 확장자(대표)
        jpg -> 가장 대표적인 이미지 표현방식, 이미지의 색상을 가장 잘 표현할 수 있는 확장자!
        gif -> 투명한 배경이 가능한, 색상이 256개의 표현만 가능~ 화질이 떨어져 보임 / 움짤, 움직이는 이미지
        png -> 이미지의 색상을 유지하며 투명한 배경을 나타낼 수 있는 확장자!

    이미지 파일의 경로 : * 작성하는 문서(html)의 기점으로부터.
    -->
    <!-- 경로에 맞게 불러온 이미지 -->
    <img src="./img/camera01.png" alt="카메라1"><br>

    <!-- 경로에 맞지 않게 불러온 이미지 -->
    <img src="../img/camera02.png" alt="카메라2"><br>

    <!-- 넓이 옵션을 적용한 이미지 (원 사이즈보다 크게 적용하면 이미지가 흐릿해짐) -->
    <img src="img/camera03.png" alt="카메라3" width="600"><br>

</body>

📍 웹 페이지의 이미지 주소 복사로 가져온 경우

<body>
    <!-- 이미지태그를 url로 연결하는 방법 -->
    <img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[30]_20210415144252425.jpg">
</body>

📍 figure 와 figcaption

<body>
    <!-- figure : 이미지, 사진, 삽화 같은 콘텐츠를 넣을 때 사용 -->
    <figure>
        <img src="img/camera01.png" alt="카메라1">
        <!-- figure 요소에 캡션을 넣을 때 사용하는 태그로 figure 안에서 사용, 제일 처음이나 마지막에 배치! -->
        <figcaption>카메라를 올바르게 촬영하는 방법</figcaption>
    </figure>
</body>

2. 하이퍼링크 삽입

1) 링크를 삽입하는 <a> 태그와 href 속성

<!-- 기본형식 -->
<a href="링크할 주소">텍스트 또는 이미지</a>

👾 한 번이라도 클릭한 링크는 자주색으로 변경

a. 텍스트 링크 만들기

👩🏻‍🚀 텍스트 링크는 <a>와 </a> 태그 사이에 링크로 만들 텍스트를 입력하고,

href 속성에는 텍스트를 클릭하면 연결할 문서의 경로와 파일명을 넣으면 된다.

b. 이미지 링크 만들기

👩🏻‍🚀 <a>와 </a> 태그 사이에 <img> 태그를 넣어 만든다.

c. 링크를 새 탭에서 열어주는 target 속성

👩🏻‍🚀 target 속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열린다.

<body>
    <!-- a 태그 : 웹페이지의 연결, url연결 시 사용
    1) 다른 페이지의 전환 (메뉴 표현) 2) 글자와 같이 나열되는 성격!(inline 속성)
    링크연결 시 기본 스타일 (글자색, 밑줄, 손모양의 커서) / 브라우저 내에서 바로 전환

    href = h + ref : h : hypertext, ref : reference
    -->
    <!-- 링크 target 값의 종류 -->
    <p>
        <!--target 값을 지정하지 않으면 _self와 같음 -->
        <a href="https://www.naver.com">네이버(none)</a>
    </p>

    <p>
        <!-- 현재 페이지에서 바로 페이지로 이동 -->
        <a href="https://www.daum.net" target="_self">다음(_self)</a>
    </p>

    <p>
        <!-- 현재 페이지는 그대로 두고 새로운 브라우저 창이나 탭을 열어 이동 -->
        <a href ="https://www.starbucks.co.kr/" target="_blank">스타벅스(_blank)</a>
    </p>

</body>

<body>
    <!-- 다양한 링크의 형태 -->
    <p>
        <!-- 같은 도메인이라도 http://와 https:// 의 홈페이지 주소가 다른 경우도 있음. 주의할 것
        -->
        <a href="https://www.naver.com">네이버</a>
    </p>

    <p>
        <!-- 같은 폴더 내의 html 페이지로의 이동 -->
        <a href="./04.html">메인페이지로</a>
    </p>

    <p>
        <!-- 아웃룩 메일 계정으로 연결할 때 -->
        <a href="mailto:webmaster@koreaedugroup.com">관리자</a>
    </p>

    <p>
        <!-- 빈 링크 또는 임시 링크로 표시 -->
        <a href="#">임시링크</a>
    </p>

    <!-- 빈 링크의 경우 문서의 탑으로 이동하는 성격이 있음 -->
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#">임시링크</a><br>
    <a href="#none">임시링크 2</a>

</body>

📍 링크 속성 변경

<style>
    a { /* 태그를 먼저 선택 후 속성명과 속성을 입력 */
        text-decoration: none; /* 텍스트 꾸미기 : 밑줄 사용 안함 */
        color: black; /* 텍스트의 색상을 검정색으로 */
    }
</style>

[ 내용 참고 : IT 학원 강의 및 책 'Do it 한권으로 끝내는 웹 기본 교과서']

저작자표시 비영리 변경금지

'HTML&CSS > HTML' 카테고리의 다른 글

[HTML] 표 만들기, 표 구조와 구성요소 (0)	2024.03.25
[HTML] input 태그 주요 속성, 폼에서 사용하는 여러가지 태그 (1)	2024.03.23
[HTML] 입력 양식 작성하기 \| 폼form 삽입하기, input태그와 type 속성 (2)	2024.03.23
[HTML] 웹 문서 초기화 스타일, 시맨틱 코드 (0)	2024.03.22
[HTML] 정의 및 기본구조, 텍스트 입력 태그, 순서 목록 태그 (2)	2024.03.18

ID_ allriver