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(자동)로 하는 것으로 가로 세로 비율을 일정하게 사이즈를 수정할 수 있습니다.
표시 예
이미지가 비율이 망가지지 않고 사이즈 변경이 되었습니다.
댓글