Study Record

HTML 이미지와 하이퍼링크와 앵커 본문

웹/HTML + CSS

HTML 이미지와 하이퍼링크와 앵커

초코초코초코 2025. 1. 27. 16:27
728x90

웹 문서와 이미지

웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질은 좋게 유지해야 하기 때문에 몇 가지 파일 형식만 사용할 수 있다.

 

 

파일 형식

 

GIF : 표시할 수 있는 색상 수가 최대 256가지뿐이지만 다른 이미지 형식에 비해 파일 크기가 작다. 투명한 배경이나 움직이는 이미지를 만들 수 있다.

 

JPG/JPEG : 사진을 위해 개발된 형식으로 GIF보다 다양한 색상과 명암을 표현할 수 있다. 저장을 반복하면 화질이 떨어질 수 있

다. 투명한 배경을 만들 수 없다.

 

PNG : 투명 배경을 만들면서 다양한 색상도 표현할 수 있다. 네트워크용으로도 개발되었기 때문에 많이 사용된다.

 

 

<img> 태그

웹 문서에 이미지를 삽일할 때 사용한다.

- src 속성 : 이미지 파일 경로를 설정한다. 

- alt 속성 : 이미지 설명하는 대체 텍스트이다. 화면 낭독기에 이미지 대신 대체 텍스트를 읽어 준다. 이미지를 표시할 수 없는 상황일 때 대체 텍스트를 표시해준다. 텍스트 자체를 이미지로 만들었을 경우 대체 텍스트 안에 이미지 파일의 내용을 그대로 넣어주어야 한다.

- width, height 속성 : 이미지의 크기를 조정할 수 있다. 단, 이미지 파일의 용량은 그대로이다.

<img src="html5-book-9-master/html5-book-9-master/03/images/road.jpg" alt="자연 사진">
<img src="images/road.jpg" alt="자연 사진" width="250" height="90">

 

 

<figure>, <figcaption>  - 이미지에 설명글 붙이기

<figure> 태그는 설명글을 붙일 대상을 지정한다. <figcaption> 태그는 이미지를 설명하는 대체 텍스트를 넣을 수 있다.

<figure>
    <img src="../html5-css3-master/01/images/first.jpg", width="100px", height="100px">
    <figcaption>첫번째 이미지 입니다.</figcaption>
</figure>

 

 

SVG 이미지

벡터 그래픽을 사용한 이미지로 로고나 아이콘에서 많이 사용된다. 이미지를 확대하거나 축소하더라도 테두리가 원래의 깨끗한 상태가 유지된다. svg 라는 이미지는 픽셀이 아닌 소스이다. 그림 정보가 텍스트화가 되어있기 때문에 파일 용량도 적고 소스를 바꾸는 것으로 수정도 가능하다. <svg> 태그 안에 텍스트로 그림을 그릴 수 있다.

 

 

svg 파일 이미지 태그에 삽입하기

<img src="images/menu.svg" >

 

 

+ svg 파일을 지원하지 않는 브라우저 고려하기

svg 파일을 표시할 수 없는 경우 svg 이미지 파일 대신 png 파일을 이용해야 한다.

 

모더나이저(Modernizr)는 작은 크기의 자바스크립트 라이브러리로서, 사용자가 현재 이용중인 웹 브라우저에서 HTML5와 CSS3가 지원하는 기능 중 어떤 기능을 지원하는지 알아볼 때 사용한다. 모더나이저에서 SVG를 지원하는지 확인할 수 있는 기능을 가진 js 파일을 다운로드받는다. Build 버튼으로 다운받을 수 있다.

 

https://modernizr.com/download?svg-setclasses

 

Modernizr Download Builder

Detects support for the DOM Pointer Events API, which provides a unified event interface for pointing input devices, as implemented in IE10+, Edge and Blink.

modernizr.com

 

다운받은 파일(ex. modernizr-custom.js)을 <head> 태그 안에 웹 문서에 연결하여 svg 기능 지원 여부에 따라 파일을 다르게 표시할 수 있다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>Insert SVG</title>
	<script src="modernizr-custom.js"></script>
</head>
<body>
	<h1>SVG 이미지 삽입하기</h1>
	<img src="images/muffin.svg">
	<script>
		if (!modernizr.svg) {
			$("img").attr("src", "images/muffin.png");
		}
	</script>	
</body>
</html>

 

 

링크 만들기

 

하이퍼링크

다른 문서 혹은 다른 사이트로 바로 연결해 주는 기능으로 외부 사이트나 외부 페이지로도 연결이 가능하다. 메뉴 뿐만 아니라 원하는 곳에 링크를 만들 수 있다.

 

 

<a> 태그

하이퍼링크를 만드는 태그로 반드시 href 속성을 함께 사용하여 어떤 대상으로 연결하는지 알려주어야 한다.

<a href="http://www.naver.com">네이버</a>

<!-- 이미지로 표시 -->
<a href="http://www.naver.com">
    <img src="../html5-css3-master/01/images/petit.jpg">
</a>

 

- target 속성 

새 탭에서 링크를 연다. 다른 사이트로 링크하거나 현재 페이지를 유지한 상태에서 링크 페이지를 표시할 때 사용한다.

<!-- 링크 내용이 새 창이나 새 탭에서 열린다. -->
<a href="http://www.naver.com" target="_blank">naver</a>

<!-- 기본값으로 링크가 있는 화면(햔재 페이지)에서 열린다. -->
<a href="http://www.naver.com" target="_self">naver</a>

<!-- 프레임을 사용했을 때 링크 내용을 부모 프레인에 표시한다. -->
<a href="http://www.naver.com" target="_parent">naver</a>

<!-- 프레임을 사용했을 때 링크 내용을 전체 화면에 표시한다. -->
<a href="http://www.naver.com" target="_top">naver</a>

 

+ 텍스트 링크의 밑줄과 글자 색 바꾸기

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테스트 페이지 입니다.</title>
    <style>
         a {
            text-decoration: none;
            color: black;
         }
    </style>
</head>
<body>

    <a href="http://www.naver.com">네이버 가기</a>

</body>
</html>

 

앵커

한 페이지 안에서 링크를 만드는 기능을 앵커라고 한다. 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와준다. 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만든다. <a> 태그의 herf 속성을 사용해 링크한다.  단, 앵커 이름 앞에 #을 붙여 앵커를 표시한다.

<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>
<a herf="#앵커 이름"> 텍스트 또는 이미지 </a>

 

 

하나의 이미지에 여러 링크 연결하기

 

<map>, <area> 태그와 usemap 속성으로 이미지 맵 지정하기

한 이미지 상에서 클릭 위치에 따라 서로 다른 링크가 열리는 것을 이미지 맵이라고 한다. 일반적으로 웹 사이트보다 메일 등에서 사용한다. img 태그에 usemap 속성으로 이미지 맵을 지정한다.

<img src="images/kids.jpg"  alt="" usemap="#favorites">
<map name="favorites">
  <area shape="rect" coords="10,10,160,200" href="http://google.com" target="_blank" alt="구글">
  <area shape="rect" coords="220,10,380,200" href="http://www.naver.com" target="_blank" alt="네이버">
</map>

 

+ <area> 태그 속성

alt : 대체 텍스트를 지정한다
coords : 링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정한다
download : 링크를 클릭했을 때 링크 문서를 다운로드한다
herf : 링크 문서(사이트) 경로를 지정한다
media : 링크 문서(사이트) 어떤 미디어에 최적화시킬지 지정한다
rel : 현재 문서와 링크 문서 사이의 관계를 지정한다
shape : 링크로 사용할 영역의 형태를 지정한다
target : 링크를 표시할 대상을 지정한다
type : 링크 문서의 미디어 유형을 지정한다

 

 

+ 이미지 맵 좌표 알아내기

그림판에서 이미지를 불러내면 하단 바에 이미지 픽셀 값이 나온다. 

 

728x90

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

웹 호스팅 서비스  (0) 2025.02.04
HTML 특수기호와 특수문자 입력하기  (0) 2025.02.04
HTML5의 문서구조  (0) 2025.01.31
HTML 기본 구조와 텍스트 관련 태그  (0) 2025.01.26
HTML5과의 첫 만남  (1) 2025.01.26
'웹/HTML + CSS' Related Articles more