HTML CSS 이미지 삽입 방법 예제

HTML에서 이미지를 삽입하는 방법을 알아보겠습니다.

그리고 CSS사용해 삽입한 이미지 크기를 조절하는 방법을 알아보겠습니다.

이미지 삽입하기

웹 사이트는 텍스트만이 아닌 이미지도 표시하는 경우가 많습니다.

다음은 페이지에 이미지를 삽입해 보겠습니다.

그러기 위해서는 우선 이미지를 준비해두어야 합니다.

[test] 폴더 안에 [img]라는 이름으로 폴더를 작성합니다.

다음에는 좋아하는 이미지를 준비하고 [imgage.png]라는 이름으로 저장해 둡니다.

저장 장소는 방금 전에 만들 [img] 폴더입니다.

다음으로는 html 파일에 코드를 작성해 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="kr">
  <head>
  <meta charset="UTF-8">
  <title>테스트</title>
  <link rel="stylesheet" href="style.css"> 
  </head>
  <body>
    <h1>웹 사이트</h1>
    <p>이 <span>웹 사이트</span>는 테스트를 위한 사이트입니다. 
       테스트 내용을 작성해주세요. 
       다음과 같이 작성 했습니다.</p>
    <!-- 나중에 삭제 예정  --> 
 	<h1 id="title">id를 사용한 제목</h1>
    <p class="text">이 내용은 class를 지정하여 작성하였습니다.</p>
    <p class="text">이 내용도 class를 지정하였습니다.</p> 
    <p>여기는 class를 지정하지 않았습니다.</p> 	
    
    <img src="img/image.png" alt="테스트 이미지"> 
  </body>
</html>

이미지가 테스트 페이지에 표시되었나요?

src로 이미지 파일의 장소와 파일명을 지정하고 있습니다.

alt 속성은 이미지를 읽어오지 못했을 경우나 이미지 표시를 off로 했을 경우에 표시되는 텍스트입니다.

그리고 음성으로 변환해서 이미지가 볼 수 없는 분들을 위한 것이기 때문에 작성을 하도록 합니다.

표시 예

이미지가 너무 크기 때문에 CSS로 이미지 사이즈를 수정해 보도록 하겠습니다.

@charset "UTF-8";
/* 텍스트 CSS */
h1 {
  color : #cc0033;
  font-size : 24px;
}
#title{
  color : #6600ff;
}
p {
  color: #666;
  font-size : 18px;
}
.text{
  font-size : 14px;
}
span{
  font-weight : bold;
}
img {
  width : 300px;
  height : auto;
}

width는 가로폭, height는 세로폭입니다.

width에 폭을 지정하고, height는 auto(자동)로 하는 것으로 가로 세로 비율을 일정하게 사이즈를 수정할 수 있습니다.

표시 예