Appia의 IT세상

[초보HTML배우기 06]HTML - HTML에 사진/이미지(Images) 삽입하기 본문

Programming/HTML&CSS

[초보HTML배우기 06]HTML - HTML에 사진/이미지(Images) 삽입하기

Appia 2020. 7. 19. 07:00
반응형

[초보HTML배우기 06]HTML - HTML에 사진/이미지(Images) 삽입하기

 

이전 포스팅에서는 코드에 대한 주석을 처리하는 방법을 살펴봤습니다. 이번 포스팅에서는 웹페이지에 이미지를 삽입하는 방법에 대해서 살펴보고자 합니다. 웹페이지에서 글자만큼 중요한 것은 사진 또는 이미지입니다. 그 이미지를 삽입하고 간단히 활용하는 방법에 대해서 살펴보도록 하겠습니다. 

 

이미지 삽입하기 

이미지를 입력하는 방식은 먼저 <img> 태그를 활용하는 것입니다. 먼저 다음 코드를 살펴보겠습니다. 

<!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 = "/imgs/ia001.png" />
    
</body>
 
</html>
 cs

 

위와 같은 코드를 실행했을 때 다음 화면과 같이 브라우저에 사진이 출력이 됩니다. 위에서 보시는 바와 같이 다음과 같은 형태로 <img> 태그를 사용하면 됩니다. 

<img src = "파일위치" 속성>

 

<사진 출력 결과>

위의 예시 <img>태그를 이용한 사진을 불러온 결과

여기에는 다양한 속성들을 추가할 수 있습니다. 다음과 같은 속성들을 한번 확인 하시길 바랍니다. 

alt 그림의 간단한 설명 및 대체 텍스트로 보시면됩니다. src의 위치가 잘못될 경우 입력된 속성을 나타냅니다. 
width 이미지의 넓이 지정
heigh 이미지의 높이 지정
border 이미지의 윤곽성 지정

그럼 위의 속성을 간단히 사용하여 다음 예시를 한번 만들어 보겠습니다. 

 

<alt 예시>

위에서 설명 드린 바와 같이 대체 텍스트를 입력하는 속성입니다. 이를 확인하기 위해서 잘못된 그림위치를 지정하여 여기에 설정된 텍스트가 표시가 되는지 확인할 수 있습니다.

<!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 = "/imgs/ia0011.png" alt="그림이 존재하지 않습니다."/>
    
</body>
 
</html>
 cs

일부로 잘못된 그림위치를 입력하였습니다. 다음과 같은 결과를 확인할 수 있습니다. 

위의 예시 <img>태그를 alt속성을 이용한 대체 텍스트 출력결과

 

<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>
 
    <img src = "/imgs/ia001.png" alt="그림이 존재하지 않습니다." width="100" height="100"/>
    
</body>
 
</html>
 cs

위의 코드를 실행하면 다음과 같은 결과가 나타납니다. 

위의 예시 <img>태그를 width, height속성을 이용한 그림의 크기 조정 결과

 

<border 예시>

불러온 이미지의 윤곽선을 지정할 수 가 있습니다. 여기에서 윤곽선에 대한 색깔을 수정이 불가합니다. 

<!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 = "/imgs/ia001.png" alt="그림이 존재하지 않습니다." width="200" height="200"
 
    border ="10"/>
    
</body>
 
</html>
 cs

위의 코드를 실행하면 다음과 같은 결과가 나옵니다. 

위의 예시 <img>태그를 border를 이용한 사진/이미지의 윤곽선 입력결과

 

이번 포스팅에서는 [초보HTML배우기 06]HTML - HTML에 사진/이미지(Images) 삽입하기라는 주제로 간단히 사진 및 이미지를 불러오고, 각 사이즈 및 속성을 설정하는 방법에 대해서 살펴봤습니다. 혹시 궁금하신 점이나 문의 사항이 있으시면 언제든지 댓글 및 방명록에 글 남겨주시길 바랍니다. 감사합니다. 

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

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

[초보HTML배우기 08]HTML - HTML에 리스트(List) 나열하기  (0) 2020.07.23
[초보HTML배우기 07]HTML - HTML에 표(Table) 입력하기  (0) 2020.07.21
[초보HTML배우기 05]HTML - HTML에 주석(Comment) 입력하기  (0) 2020.07.17
[초보HTML배우기 04]HTML - HTML에 메타 태그(meta tag)/메타 데이터(metadata) 입력하는 방법  (0) 2020.07.15
[초보HTML배우기 03]HTML - 글자 속성 스타일 적용  (0) 2020.07.13
'Programming/HTML&CSS' Related Articles more
Comments