수학과의 좌충우돌 프로그래밍

[html] 이미지를 만드는 태그 본문

웹프로그래밍/html,css

[html] 이미지를 만드는 태그

ssung.k 2019. 1. 22. 01:31

안녕하세요 강민성입니다.


오늘은 html 에서 이미지 넣는 법에 대해서 배워보도록 하겠습니다.


웹 페이지에서 이미지 없이 줄글만 있다고 생각하면...


들어올 사람도 도망치고 말 것 입니다.


그 만큼 중요한 이미지! 어렵지 않으니 알아보도록 합시다.


표를 만드는 태그

이미지를 만드는 태그



이미지도 파일 형식이 굉장히 다양합니다.


하지만 아쉽게도 웹에서는 모든 이미지 파일 형식을 지원하지 않습니다.


아래와 같은 3개의 파일 형식을 제공하고 이에 대해서 간단하게 알아보겠습니다.


파일형식 

장점

단점 

GIF

(Graphic Interchange Form)

  • 파일 크기가 작음
  • 투명한 배경이나 움직이는 이미지를 만들 수 있음


  •  표시할 수 있는 색상수는 256가지 

JPG/JPEG

(Joint Photographic Experts Group)
  • 사진을 위해 개발한 형식
  • GIF 보다 다양한 색상과 명암 표현 
  •  저장을 반복할 시 화질 저하 우려

 PNG

(Portable Network Graphics)
  • 투명 배경을 만들면서 다양한 색상도 표현
  • 네트워크용으로 개발 되었기 때문에 최근에 많이 사용 
 




이미지를 삽입하는 <img> 태그


웹에 이미지를 삽입하기 위해서는 <img> 태그를 사용합니다.


<img> 태그는 무조건 src 속성과 함께 쓰이는데 이 속성은 이미지 파일의 경로를 지정해줍니다.


파일의 경로를 지정하는 것도 몇 가지 규칙이 있으므로 이에 대해서 알아보겠습니다.



파일 경로 지정하기


딱 3가지만 기억하시면 됩니다.


1. 같은 경로에 있다면 단순히 이름만


2. 하위 폴더에 있다면 ' / ' 를 사용


3. 상위 폴더에 있다면 '  ..  ' 을 사용


이 3가지만 기억하고 계시면 경로를 지정하는데 아무런 어려움이 없을 겁니다.


아래 예시를 통해 살펴보겠습니다.


현재 상황은,



다음과 같이 blog.html 과 images 라는 폴더가 같은 경로에 있고


images 라는 폴더 안에는 원하는 이미지 html_cssm.png 가 있습니다.


먼저 blog.html 입장에서 images 폴더는 같은 경로에 있습니다.


따라서 그냥 images 폴더의 이름을 적어줍니다.


다음으로 폴더 안으로 들어가기 위해서는 위에서 배운대로 / 를 추가해줍니다.


폴더 안으로 들어갔다면 html_css.png 파일이 있을 꺼고 


폴더로 들어간 현 시점, 같은 경로에 있으므로 파일 이름을 그대로 써줍니다.


그 결과 다음과 같은 경로가 완성입니다.


images/html_css.png



1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
</head>
<body>
    <h1>html-css 이미지</h1>
    <img src="images/html_css.png" alt="">
</body>
</html>
cs

 

 



다음으로는 내 로컬에 있는 이미지가 아닌 웹상에 있는 이미지 링크를 복사해보도록 하겠습니다.


구글로고를 복사한다고 생각하면 



다음과 같이 구글 로그 이미지에 오른쪽 마우스를 클릭한 후 


이미지 주소 복사를 해주시면 됩니다.


그 후 붙여넣기하면 다음과 같이 이미지를 불러 올 수 있습니다.


 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
</head>
<body>
    <h1>google 이미지</h1>
    <img src="https://www.google.co.kr/
images/branding/googlelogo/2x/
googlelogo_color_272x92dp.png" alt="">
</body>
</html>
cs

 




이미지를 설명해주는 alt 속성


다음에 알아볼 것은 태그가 아닌 속성입니다.


바로 이미지 태그에서 볼 수 있는 속성인데 사실 지정을 하지 않더라도


아무 문제 없는 걸 알 수 있을 겁니다.



alt는 이미지를 설명해주는 역할을 하기 때문에 그렇습니다.


하지만 그림을 보지 못하는 시각장애인 분들을 위해서


화면 낭독기가 이미지가 어떤 이미지인지 알 수 있도록


속성을 꼭 넣어주는 것은 중요하며, 이미지를  불러오지 못할 경우에는


이 설명이 이미지를 대신하게 됩니다.


경로를 잘못 지정했을 경우에 어떻게 표시되는지 예시를 통해 살펴보겠습니다.


 

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
</head>
<body>
    <img src="html_css.png" alt="html-css 이미지">
</body>
</html>
cs

 


다음과 같이 이미지 대신 대체 텍스트로 표시됩니다.




이미지에 설명글을 달아주는 <figure>,<figcaption> 태그


figcaption은 앞에서도 한 번 다룬 적이 있습니다.


간단히 설명하면 figure 태그를 이용하여 이미지와 figcaption 태그를 묶어주고


figcaption 태그 안에 설명글을 넣어주면 되겠습니다.



 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
    <style>
        img {
            width: 400px;
        }
    </style>
</head>
<body>
   <figure>
      <img src="images/html_css.png" 
alt="html-css 이미지">
      <figcaption>html-css 이미지</figcaption>
    </figure>
    
</body>
</html>

cs

 



다음을 보시면 처음 보는 코드를 볼 수 있을 겁니다.


width: 400px;


이라는 코드인데 그림의 크기를 조절할 수 있는 방법입니다.


뒤의 css를 배울 때 다시 한 번 배울테지만 


간단하게 설명을 드리자면


width를 이용해 가로 길이를 height를 이용해 세로 길이를 조절 할 수 있습니다.


단위는 px , % 등을 쓰며 뒤에서 다시 자세히 소개하도록 하겠습니다.




마무리


오늘은 img를 넣는 img 태그에 대해 알아보았습니다.


이제 만드는 페이지에는 딱딱한 텍스트 뿐만 아니라 


시선을 끄는 이미지도 넣으실 수 있을 겁니다.


보다 나은 페이지를 위해 하나씩 배워가보도록 합시다.



저작자표시

'웹프로그래밍 > html,css' 카테고리의 다른 글

[css] css 선택자(selector) 의 종류와 예시  (3) 2019.03.24
[html] vs code extension, Highlight Matching Tag  (0) 2019.02.25
[html] 2.텍스트 관련 태그들 (3) 표를 만드는 태그  (0) 2019.01.19
[html] 2.텍스트 관련 태그들 (2) 목록을 만드는 태그  (0) 2019.01.18
[html] 2.텍스트 관련 태그들 (1)  (0) 2019.01.15
'웹프로그래밍/html,css' Related Articles more
Comments