html 웹페이지에 이미지를 표현하는 방법은 배경이미지 속성인 background-image 를 사용할 수 있다. 태그가 가진 높이와 너비에 따라 이미지가 보여주기 때문에 스타일 사용시 태그에 높이와 너비를 지정할 필요가 있다. img 태그가 이미지의 크기에 따라 보여주는 것에 비해 배경이미지 스타일 속성은 이미지 크기가 아닌 태그의 크기에 따라 보여주기 떄문에 조절이 필요하다.
html 배경 이미지 사용하기
using html background image
html 웹페이지에 이미지를 표현하는 방법은 css 스타일을 이용하는 방법이 있다.
img 태그를 사용하여 화면에 이미지 등을 표현할 수 있지만 html 태그에 이미지 속성을 가진 스타일을 이용하여 배경화면과 같이 사용할 수 있다.
다만 태그의 성질상 지정한 너비와 높이만큼 이미지가 표현된다는 점에서 img 태그와는 다른 특성을 보인다.
background image 스타일 사용
태그에 배경처럼 백그라운드 이미지를 사용하려면 css 스타일 속성의 background-image 속성을 이용할 수 있다.
이 속성은 어떤 태그에도 적용되며 너비와 높이가 이미지 만큼 충분하다면 정확한 이미지가 표현된다.
다만 배경처럼 동작하기 때문에 태그의 크기만큼 이미지가 보인다는 단점이 있다.
아래는 태그에 배경 이미지를 지정하는 방법을 보여준다.
<style>
선택자 {
background-image: url('이미지 파일');
}
</style>
<태그명 style="background-image: url('이미지 파일');">
내용
내용
</태그명>
<태그명 id="" class="">
내용
내용
</태그명>샘플코드
위의 방법으로 html 태그에 배경이미지를 추가하는 html 예제를 만들어 본다.
스타일에 선택자를 지정하여 내부 css 스타일을 이용하여 태그에 배경이미지를 추가해 보도록 한다.
배경 이미지가 적용되는 태그는 body, div, p 태그이며 이미지가 하나씩 적용되는 모습을 볼 수 있을 것이다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<style>
#bgBody {
background-image: url('space.jpg');
}
#bgDiv {
background-image: url('hud.jpg'); width:500px; height:300px;
}
#bgP {
background-image: url('operator.png'); width:180px; height:150px;
}
</style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body id="bgBody">
<div id="bgDiv">
<p id="bgP">
</div>
</body>
<!-- // -->
</html>
<!-- // -->코드를 보면 body , div , p 태그 각각에 background-image 속성을 이용하여 서로 다른 이미지를 적용하고 있다.
가장 마지막에 적용된 이미지가 가장 최상단 위쪽에 적용되는 것 또한 차이이다.
선택자는 id 형식을 사용하였으며, 공통된 이미지를 적용할 경우 class 형식을 사용하면 된다.
background-image 의 속성 중 반복속성인 repeat 는 기본값이기 때문에 body 태그에 적용된 이미지는 반복해서 보여지고 있다.
div 와 p 태그에 적용된 이미지는 이미지를 보여주기 위해 굳이 너비와 높이 값을 설정하였다.
결과화면을 보자.
'programming > web' 카테고리의 다른 글
| html 이미지 picture 태그 사용 해상도별 여러 이미지 표시하기 using html picture tag (0) | 2022.06.13 |
|---|---|
| html 태그 배경 이미지 반복 속성하기 using html tag background image repeat attribute (0) | 2022.06.09 |
| html 이미지 맵 사용 using html image map (0) | 2022.06.03 |
| html 이미지에 링크 연결 하기 how to link image to link in html (0) | 2022.06.01 |
| html img 태그 이미지 경로 지정 방법 Specifies img src path (0) | 2022.05.30 |
댓글