이미지
웹에서 사용하는 이미지 형식
웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질이 좋아야하기 때문에 몇가지 파일 형식만 사용할 수 있다. 만약 다른 형식으로 된 이미지 파일에서 사용하려면 다음과 같은 파일 형식으로 변환해야 한다.
| 파일 형식 | 설명 |
| GIF(Graphic Interchange Form) | 표시할 수 있는 색상 수가 256가지 뿐이나, 다른 이미지 파일 형식에 비해 파일 크기가 작아 작은 이미지로 사용되며, 투명한 배경이나 움직이는 이미지를 만들 수 있다는 장점이 있다. |
| JPG/JPEG(Joint Photographic Experts Group) | 사진을 위해 개발된 형식으로 GIF보다 다양한 색상과 명암을 표현할 수 있다. 저장을 반복하다보면 화질이 떨어질 수 있다. |
| PNG(Portable Networt Graphics) | 투명 배경을 만들면서 다양한 색상도 표현할 수 있으며 네트워크용으로 개발되었기 때문에 최근 많이 사용된다. |
이제 이러한 형식의 이미지 파일을 준비하고, 태그와 속성을 배우며 웹 문서에 이미지를 넣어보자.
<img> 태그 - 이미지 삽입하기
웹 문서에 이미지를 삽입할 때는 <img> 태그를 사용한다. 이때 src 속성을 사용해 이미지 파일이 있는 경로를 알려주어야 화면에 이미지를 표시할 수 있다.
<img src="경로" [속성="값"]>실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>바빠 시리즈</h1>
<img src="images/cover.jpg" alt="빠른 연산">
</body>
</html>src 속성 - 이미지 파일 경로 지정하기
이미지를 웹 문서에 넣으려면 src 속성에 정확한 파일 경로를 지정해야 한다. 경로란, 현재에서 HTML 문서에서 이미지 파일까지 찾아가기 위한 길로 이 길이 정확하지 않다면 웹 문서에 이미지가 표시되지 않는다. 이 경로는 내 컴퓨터에 이미지 파일이 있는 경우와, 웹 상의 이미지 링크를 사용하는 경우에 따라 값이 다르다.
- 내 컴퓨터의 이미지 파일 경로 지정하기 : 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해진다. 웹 문서 파일과 이미지 파일이 같은 경로에 있다면, src 속성에는 이미지 파일의 이름만 적으면 된다. 반면, 웹 문서가 있는 폴더의 하위 폴더에 이미지 파일이 있다면 하위 폴더를 경로에 써주어야 한다. 또, 웹문서가 있는 폴더의 상위 폴더로 가야한다면 '..'을 사용하면 된다.
- 웹 상의 링크를 복사해 이미지 경로 지정하기 : 이미지를 삽입한 웹 문서를 다른 사람한테 공유할 때는 이미지 파일을 웹문서와 함께 전달하거나, FTP 서버에 웹 문서와 함께 이미지 파일을 올려야 한다. 웹 브라우저로 보여지는 페이지는 이미 인터넷에 올라와있는 이미지 링크를 복사해 이미지 경로를 지정한다. 웹 페이지에 올라온 이미지의 주소 복사를 하면 이미지의 경로를 알 수 있다. 이러헥 복사한 웹 이미지 파일의 경로를 src 속성의 값으로 지정한다.
<img src="http://www.easyspub.co.kr/upload/BOOK/337/20191204093031465610B.jpg">웹 사이트에서 이미지에 대해 컨텍스트 메뉴를 띄워서 속성을 선택하면 이미지의 주소와 이미지의 크기도 알 수 있다.
alt 속성 - 이미지를 설명해 주는 대체 텍스트
alt 속성은 이미지를 설명하는 대체 텍스트를 삽입할 때 사용한다. 대체 텍스트란, 시각 장애인들이 이미지의 내용을 알 수 있도록 화면 낭독기가 이미지 대신 읽을 수 있는 텍스트를 말한다. 또한 인터넷이 느리거나 이미지를 제대로 표시할 수 없는 상황에도 이미지 자리에 alt 속성에 쓴 내용이 표시되어 어떤 이미지가 사용되었는지 짐작할 수 있다. 따라서 텍스트나 메뉴, 로그 등의 내용이 포함된 이미지들은 alt 속성에 이미지 파일에서 보이는 글자들을 그대로 넣어주어야 한다. 그냥 불릿 이미지나 작은 아이콘처럼 특별한 의미 없이 화면을 꾸미기 위한 이미지라면 대체 텍스트를 지정하지 않아도 되므로 alt="" 이렇게 아무것도 지정하지 않으면 된다.
<img src="bulle.gif" alt="">width, height 속성 - 이미지 크기 조정하기
이미지를 브라우저 창에 원하는 크기로 저장해 넣고 싶다면 width 속성과 height 속성을 사용하면 된다. 만약 width 속성과 height 속성을 사용하지 않으면 원본 이미지 크기 그대로 화면에 표시된다.
실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>이미지 크기 조절</h1>
<img src="images/gugudan.jpg" alt="바빠구구단">
<img src="images/gugudan.jpg" width="250" height="250" alt="바빠구구단">
</body>
</html>다만 이 속성으로 작은 이미지를 크게 표시할 경우, 화질이 나빠질 수 있다. 이미지의 기본 크기와 어느 정도로 수정해야 하는 지를 알고 싶다면, 그림판을 이용해 볼 수도 있다. 이미지 파일을 불러오면 그림 아래의 상태 표시줄에 현재 이미지 크기와 용량이 나타난다. 그림 크기를 조절하려면 그림판 리본 메뉴 중 [이미지] 패널에서 [크기 조정]을 클릭하고, 그림 크기 기준을 [픽셀]로 선택하면 현재 크기가 픽셀로 표시된다.
<figure>, <figcaption> 태그 - 이미지에 설명 글 붙이기
HTML5 이전에는 이미지에 설명 글을 붙이기 위해 <p> 태그를 사용해 텍스트 단락을 표시한 후 위치를 조절해야 했다. 그래서 이미지의 위치를 조절하면 텍스트 단락도 함께 옮겨야 했다. HTML5에서는 이미지 뿐만 아니라 표나, 멀티미디어 요소 어디에나 설명글을 함께 붙일 수 있다.
<figure> 태그 - 설명 글을 붙일 대상 지정
<figure> 태그는 설명 글을 붙여야할 대상을 지정하거나 웹 문서에서 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용한다. 한 단위가 되는 요소를 나타내기 위해서는 <figure> 태그만 사용하고 설명 글을 사용하기 위해서는 <figure> 태그 안에 <figcaption> 태그를 사용해 설명 글을 표시한다.
<figure>요소</figure><figcaption> 태그 - 설명 글 붙이기
설명 글이 필요한 대상은 <figure> 로 묶고 설명 글은<figcaption> 태그로 묶는다. 설명 글을 붙일 수 있는 대상은 미디어 파일이 될 수도 있고, 텍스트 단락이나 표가 될 수도 있다. 또 여러개의 미디어 파일에 하나의 설명 글을 붙일 수도 있다.
<figure>
<p>요소</p>
<figcaption>설명 글</figcaption>
</figure>실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<figure>
<img src="images/prod.jpg" alt="예멘 모카 마타리">
<figcaption>예멘 모카 마타리</figcaption>
</figure>
</body>
</html>이미지 삽입하기
<aside>
<div id="namecard">
<img src="images/Java ☕️ -278.jpg" alt="" height="250" width="400">
<h1>Heejin Choi</h1>
<p>안녕하십니까~! 머릿속에 자바 밖에 없는 최희진입니다!</p>
</div>
<div id="detail">
<p>Seoul, Korea</p>
<p>https://eungeun506.tistory.com/category</p>
</div>
<div id="sns">
<h2>SNS</h2>
</div>
</aside>
링크 만들기
<a> 태그, href 속성 - 링크 만들기
링크를 만드는 <a> 태그는 텍스트와 함께 사용하면 텍스트 링크가 되고, 이미지와 함께 사용하면 이미지 링크가 된다.
<a href="링크할 주소" [속성="속성 값"]> 텍스트</a>
<a href="링크할 주소" [속성="속성 값"]> <img src="이미지 파일 경로"> </a><a> 태그 안에 사용할 수 있는 주요 속성은 다음과 같다.
| 속성 | 설명 |
| href | 링크한 문서나 사이트의 주소를 입력한다. |
| target | 링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정한다. |
| download | 링크한 내용을 보여주는 것이 아니라 다운로드한다. |
| rel | 현재 문서와 링크한 문서의 관계를 알려준다. |
| hreflang | 링크한 문서의 언어를 지정한다. |
| type | 링크한 문서의 파일 유형을 알려준다. |
링크를 이용해 다른 문서나 사이트로 연결하려면 기본적으로 href 속성을 이용해서 주소를 지정해야 한다.
실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>텍스트 링크 만들기</h1>
<a href="http://www.easyspub.com">이지스퍼블리싱 홈페이지</a>
<h1>이미지 링크 만들기</h1>
<a href="http://www.easyspub.com"> <img src="images/easyspub.jpg"></a>
</body>
</html>텍스트 링크의 밑줄과 글자 색 바꾸기
텍스트 링크는 기본적으로 밑줄이 있는 파란색 글자로 표시된다. 링크된 내용을 한번 살펴보고 나면 텍스트 링크 색은 보라색으로 바뀐다. 텍스트 링크를 눌러 링크를 활성화시키면 글자 색이 빨간색으로 바뀐다. 요즘에는 이러한 링크의 디자인이 디자인에 어울리지 않으므로 CSS를 이용해서 다음과 같이 텍스트 링크의 색을 바꾸고 밑줄을 없앨 수 있다.
<style>
a {
text-decoration:none;
color:black;
}
</style>target 속성 - 새 탭에서 링크 열기
앞에서 실습한 예제에서 텍스트 링크나 이미지 링크를 클릭하면 문서가 있던 현재 브라우저 창에 이지스퍼블리싱 홈페이지가 나타난다. 그리고 다시 예제 문서로 돌아가려면 이전 페이지 버튼을 눌러야 한다. 하지만 target 속성을 사용하면 현재 화면 뿐만 아니라 새로운 화면에서 링크를 열 수 있다. target 속성에서 사용할 수 있는 값은 다음과 같다.
| 속성 값 | 설명 |
| _blank | 링크 내용이 새 창이나 새 탭에서 열린다. |
| _self | target 속성의 기본 값으로 링크가 있는 화면에서 열린다. |
| _parent | 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다. |
| _top | 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시한다. |
실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>텍스트 링크 만들기</h1>
<a href="http://www.easyspub.com">이지스퍼블리싱 홈페이지(현재 화면)</a>
<a href="http://www.easyspub.com" target="_blank">이지스퍼블리싱 홈페이지(새 창 또는 새 탭)</a>
</body>
</html>아이프레임(iframe)과 target
링크 페이지를 현재 페이지나 새 탬에서 여는 것 외에도 다른 방법이 있다. 예를 들어 현재 페이지 안에 다른 페이지를 넣을 수 있는데, 이 때 사용되는 것이 아이프레임이다. 아이프레임은 프레임의 일종으로 프레임 중에서 문서 본문에 액자처럼 삽입하는 것을 말한다. 이를 사용해 현재 문서를 다른 문서에 포함시키거나 자바스크립트를 통해 팝업창을 열도록 했을 때, 현재 문서가 부모 문서가 되고, 삽입된 문서와 팝업 문서는 자식 문서가 된다. 자식 문서에서 링크할 때, _parent 속성으로 지정하면 부모 문서 창에 표시할 수 있다.
다음 예제는 parent.html 문서 안에 <iframe> 태그를 이용해 child.html 문서를 삽입하고 이지스 퍼블리싱 홈페이지를 링크한 것이다. 이 때 target 속성을 사용하지 않으면 아이프레임 화면에서 그대로 표시되지만, target="_top"으로 지정하면 프레임을 벗어나 브라우저 창 전체에 링크 내용이 표시된다.
<!-- parent.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="child.html" width="600" height="400"></iframe>
</body>
</html><!-- child.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>프런트엔드 웹 디자인 입문</title>
<style>
body {
background-color:#ffffff /* 문서 전체 배경색 */
}
img {
float:left; /* 왼쪽으로 배치 */
margin-right:20px; /* 이미지의 오른쪽 여백*/
}
</style>
</head>
<body>
<img src="images\git.jpg" alt="두잇, 지옥에서 온 문서 관리자 깃 and 깃허브 입문">
<br><br>
<h2>문서 지옥, 깃&깃허브로 하루 안에 탈출한다!</h2>
<p>1시간이면 초보 탈출, 5시간이면 기본 활용법 완전 정복!</p>
<p>자주 쓰는 기능을 모두 담아 한 권에 끝낸다!</p>
<p><a href="http://www.easyspub.co.kr/20_Menu/BookView/337">도서 상세 보기(현재 화면에)</a></p>
<p><a href="http://www.easyspub.co.kr/20_Menu/BookView/337" target="_top">도서 상세 보기(전체 화면에)</a></p>
</body>
</html>한 페이지 안에서 점프하는 앵커 만들기
다른 페이지 말고 한 페이지 내에서도 링크를 만들 수 있다. 앵커(anchor)라고 불리는 이 기능은 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한번에 이동하도록 도와준다.
앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만들고, 각각 다른 이름을 지정해야 한다. 이렇게 붙여놓은 앵커 이름들은 마치 링크를 만들 때처럼 <a> 태그의 href 속성을 사용하여 링크한다. 다만 앵커 이름 앞에 #을 붙여야 한다.
<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>
<a href="#앵커 이름"> 텍스트 또는 이미지 </a>실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="menu">
<li><a href="#content1">메뉴1</a></li>
<li><a href="#content2">메뉴2</a></li>
<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>웹 문서가 너무 길 경우 ....앵커(anchor)라고 합니다.</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용1</h2>
<p>웹 문서가 너무 길 경우 ....앵커(anchor)라고 합니다.</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용1</h2>
<p>웹 문서가 너무 길 경우 ....앵커(anchor)라고 합니다.</p>
<p><a href="#menu">[메뉴로]</a></p>
</body>
</html>링크 추가하기
- 현재 탭에서 링크 열기
<h2>SNS</h2>
<ul>
<li>
<a href="https://eungeun506.tistory.com/">tistory 블로그</a>
</li>
<li>
<a href="https://www.facebook.com/profile.php">facebook</a>
</li>
</ul>- 새 탭에서 링크 열기
<h2>SNS</h2>
<ul>
<li>
<a href="https://eungeun506.tistory.com/" target="_blank">tistory 블로그</a>
</li>
<li>
<a href="https://www.facebook.com/profile.php" target="_blank">facebook</a>
</li>
</ul>- 텍스트 링크에 스타일 추가하기 (style.css 코드 수정)
a, a:visited {
color:#222;
text-decoration: none;
}
#sns > ul {
padding-left:0;
}
#sns > ul > li {
display:inline-block;
width:80px;
}<map> 태그, <area> 태그, usemap 속성 - 이미지 맵 지정하기
하나의 이미지에서 여러개의 링크를 걸 수도 있다. 즉 한 이미지 상에서 클릭 위치에 따라 서로 다른 링크가 열리는 것이다. 이것을 이미지 맵이라고 한다. 웹 사이트보다는 메일 등에 자주 사용된다.
이미지 맵은 이미지에 영역을 만들고, 링크를 추가해야하므로 <map> 태그를 이용해 이미지 맵을 만들고 <img> 태그에서 usemap 속성으로 이미지 맵을 지정한다. 이미지 맵으로 사용할 이미지에 영역을 표시할 대는 <area> 태그를 사용한다.
<map name="맵이름">
<area>
<area>
</map>
<img src="이미지 파일" usemap="#맵이름"><area>에서 사용할 수 있는 속성은 다음과 같다.
| 속성 | 설명 | ||
| alt | 대체 텍스트를 지정한다. | ||
| coords | 링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정한다. | ||
| download | 링크를 클릭했을 때 링크 문서를 다운로드 한다. | ||
| href | 링크 문서(사이트) 경로를 지정한다 | ||
| media | 링크 문서(사이트)를 어떤 미디어에 최적화시킬지 지정한다 | ||
| rel | 현재 문서와 링크 문서 사이의 관계를 지정한다 | 속성 값 | iternate, bookmark, help, license, next, nofollow, noreferer, prefetch, prev, search, tag |
| shape | 링크로 사용할 영역의 형태를 지정한다 | 속성 값 | default, rect, circle, poly |
| target | 링크로 표시할 대상을 지정한다 | 속성 값 | _blank, _parent, _self, _top, 프레임 이름 |
| type | 링크 문서의 미디어 유형을 지정한다. | ||
(0,0)에서 (80, 100) 위치까지 사각 형태의 영역을 클릭했을 때 어떤 링크로 연결되게 하려면 coords ,shape, href 속성을 사용해서 다음과 같이 작성할 수 있다.
<map name="fb">
<area shape="rect" coords="0,0,80,100" href="https://www.facebook.com/" alt="페이스북">
</map>실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images/kids.jpg" alt="" usemap="#favorites">
<map name="favorites">
<area shape="rect" coords="10,10,160,200" href="http://cafe.naver.com/doitHTML5" target="_blank">
<area shape="rect" coords="220,10,380,200" href="https://www.facebook.com/" target="_blank">
</map>
</body>
</html>SVG 이미지
SVG 파일 형식이란?
요즘 웹 사이트를 표시할 화면 크기가 다양하기 때문에 같은 이미지라도 작게 표현해야할 때가 있고 크게 표현해야할 때가 있다. 그런데 정해진 크기의 이미지 파일을 크게 확대해 나타내면 이미지 테두리 부분이 울퉁불퉁해진다. 이런 이미지를 비트맵 이미지(bitmap image)라고 한다. 한편, 이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지(vector image)라고 한다. SVG 파일은 벡터 이미지이다.
SVG 이미지는 크기를 조정해도 이미지가 깨지지 않고, 깨끗이 유지되기 때문에 로고나 아이콘에서 많이 사용되며 차트나 다이어그램, 지도 등을 구현할 때에도 많이 사용된다.
복잡한 데이터를 웹에 표현해 주는 d3.js나 Raphael.js 같은 자바스크립트 라이브러리에서 차트나 그래프를 표현하는 방식이 SVG 이미지이다.
SVG 이미지는 <img> 태그를 이용해서 파일 형태로 삽입할 수도 있으나, 문서 편집기 내에서 태그를 이용해 직접 만들 수도 있다. 예를 들어 [03/images] 폴더에 있는 automobile.svg 파일은 이미지 파일이나 더블 클릭하면 웹 브라우저에서 즉시 확인할 수 있다. 또한 텍스트 편집 프로그램에서 파일을 열면 웹 문서와 비슷한 것을 확인할 수 있는데, SVG는 이미지이면서도 소스 코딩을 통해 만들고 편집할 수 있어 HTML5와 함께 많은 주목을 받고 있다.
SVG 이미지 삽입하기
SVG 이미지는 어도비 일러스트레이터 프로그램에서 벡터 이미지를 만든 후, SVG 파일로 저장해서 만들 수 있다. 이렇게 저장된 파일은 웹 문서에서 <img> 태그를 사용해 웹문서에 삽입할 수 있다.
<h1>SVG 삽입하기</h1>
<img src="images/muffin.svg">SVG 파일을 지원하지 않는 브라우저를 위해
대부분의 모던 브라우저에서 svg 파일을 지원하지만 인터넷 익스플로러 8이하, 혹은 안드로이드 2.3 이하 버전에서는 svg 파일을 표시할 수 없다. 이 경우에는 SVG 파일 대신 PNG 파일을 사용해야 한다.
사용자의 브라우저가 svg 파일을 지원하는지 테스트해 본 후, svg 파일을 지원하지 않는다면 <img> 태그의 src 속성에 png 파일 경로를 지정해줘야 한다. 브라우저에서 특정 기능을 지원하는지 테스트해주는 툴이 Modernizr이다. 해당 사이트로 가서, SVG as an <img> tag source를 선택하고 build를 누른 후, Build 항목 오른쪽의 Download 를 클릭하여 js파일을 다운로드 받는다. 다운로드한 파일을 사용할 폴더로 옮기고, <script> 태그를 이용해 웹 문서에 연결한다. insert-svg.html을 열어 다음 코드를 <head>태그와 </head> 태그 사이에 삽입한다.
<head>
<meta charset="utf-8">
<title>Insert SVG</title>
<script src="modernizr-custom.js"></script>
</head>이제부터는 자바스크립트를 이용해 웹 브라우저에서 SVG 기능을 지원하는지 여부에 따라 다르게 표시할 수 있다. 아래 두 소스 코드 중 하나를 사용하면 된다. 이렇나 자바 스크립트 소스는 웹 문서 어디에서나 추가가 가능한데, 주로 </head> 태그 직전이나 </body> 직전에 사용한다.
<script>
if (!Modernizr.svg) {
// 지원할 경우
}
</script><script>
if (Modernizr.svg) {
// 지원할 경우
} else {
// 지원하지 않을 경우
}
</script>실습
<!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>'Front-end > HTML&CSS' 카테고리의 다른 글
| Do it! HTML5 + CSS3 : 5장 CSS 기초 (0) | 2020.11.16 |
|---|---|
| Do it! HTML5 + CSS3 : 2장 텍스트 관련 태그들 (0) | 2020.10.26 |
| Do it! HTML5 + CSS3 : 1장 HTML 기본 다지기 (0) | 2020.10.19 |