일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- Logback
- EC2 HTTP 호스팅
- Linux 디렉터리 구조
- EC2 Apache2
- Linux cat
- Linux rmdir
- UNPROTECTED PRIVATE KEY FILE
- EC2 oh my zsh
- 서버의 서비스 방식
- Linux apt-get
- Linux oh my zsh
- linux foreground
- javascript 정렬
- HTTP Web Server
- Linux 디렉터리 명령어
- Linux 파일 관리 명령어
- Linux mkdir
- AWS EC2 서버 만들기
- Linux apt
- EC2 zsh
- Linux 디렉터리 역할
- Linux ls
- ec2 ssh unprotected private key file
- javascript scope
- 아비트럼 새폴리아 이더 받는법
- Navigation Pattern
- Linux cd
- Linux pwd
- arbitrum sepolia eth
- linux background
- Today
- Total
HyunJun 기술 블로그
CSS background 관련 속성, <img>와 다른 점 본문
1. CSS background
css background는 배경 화면(background)을 표현할 수 있고, 배경화면에 쓰이는 이미지를 어떠한 형식으로 표현할 것인지 설정할 수 있다.
1) 이미지 파일 준비하기
일단 가로로 긴 이미지 파일과, 세로로 긴 이미지 파일을 저작권 무료 이미지 파일로 구한다.
2개의 파일을 다운로드하여 실습할 html 파일이 있는 동일한 위치에 저장하면 된다.
2) background-image
요소 내의 뒷 배경 화면 이미지를 선택하여 표현할 수 있다.
파일을 직접적으로 가지고 오려면 background-image: url(image-name.jpg);를 사용하면 되고,
https://.... url을 사용하여 web 상에 있는 이미지도 가지고 올 수 있다.
실습을 하기 위한 기본 세팅으로 가지고 온 가로 이미지, 세로 이미지를 넣어 보자.
기본적으로 이미지의 가로, 세로의 정확한 값을 알아내고
아래처럼 정확한 size를 설정해 주면 div의 background image가 정확히 나온다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.width-image {
background-image: url(stockholm-1576558.jpg);
width: 1600;
height: 1200px;
}
.height-image {
background-image: url(big-apple-1056753.jpg);
width: 1704;
height: 2272;
}
</style>
</head>
<body>
<div class="width-image"></div>
<div class="height-image"></div>
</body>
</html>
하지만 실제 이미지의 크기가 크기 때문에 일반적인 환경에서의 브라우저로 접속하면 브라우저 상에서 아래처럼 나온다.
아래는 브라우저를 축소한 결과이다.
이것을 실제 웹 문서에서 사용하기에는 무리가 있어 보이지 않는가? 이것을 지정하기 위해 많은 속성들이 존재한다.
일단은 기본 설정을 이미지들이 한눈에 들어오도록 다시 바꿔 보았다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 800px;
height: 800px;
display: inline-block;
}
.width-image {
background-image: url(stockholm-1576558.jpg);
}
.height-image {
background-image: url(big-apple-1056753.jpg);
}
</style>
</head>
<body>
<div class="width-image"></div>
<div class="height-image"></div>
</body>
</html>
브라우저를 축소하거나 확대하지 않은 결과물이다. 하지만 실제 이미지가 매우 크기에, 이미지의 좌측 상단에 맞추어 width:800px, height:800px이 적용된 걸 확인할 수 있다.
3) background-size
그렇다면 상식적으로 봤을 때 이미지를 일단 축소시켜야 한다. 이럴 때 사용하는 것이 background-size이다.
이제부터는 코드가 길기 때문에 기존의 베이스 코드에서 수정된 부분만 올리도록 하겠다.
contain.
기존의 div 태그 선택자에 있던 내용들은 놔두고, background-size: contain;이라는 속성만 추가해 주었다.
div {
background-size: contain;
}
그 결과, 이미지들이 아래처럼 구현된다. 특징을 간단하게 보자면
- div의 width, height에 맞게 이미지들이 축소되어 들어간다.
- 가로의 이미지는 가로가 길기에 가로에 맞추어 div를 꽉 채웠다.
- 당연히 div의 height 부분이 남고, 이 부분은 이미지로 다시 채운다.
- 세로의 이미지는 세로가 길기에 세로에 맞추어 div를 꽉 채웠다.
- 당연히 div의 width 부분이 남고, 이 부분도 이미지로 다시 채운다.
- 가로의 이미지는 가로가 길기에 가로에 맞추어 div를 꽉 채웠다.
cover.
cover를 사용하게 되면, background-image를 사용하는 요소의 크기에 맞게 이미지가 해당 요소 안에 전부 채워지게 보이게 된다. 또한 이미지를 요소에 전부 채워지도록 맞추기 때문에 남는 가로 부분이나 세로 부분은 잘리게 된다.
div {
background-size: cover;
}
4) background-repeat
그렇다면 현재 설정한 div 크기 내에서 하나의 이미지를 잘리지 않게 보이게 하려면 어떻게 해아 할까?
div에 맞게 이미지를 다 채우기 위해 contain을 사용하고, 이미지 반복을 제거하기 위해 background-repeat를 사용한다.
div {
background-size: contain;
background-repeat: no-repeat;
}
5) background-position
그리고 div의 가운데에 맞추어 표현하고 싶다면 background-position을 사용한다.
div {
background-color: bisque;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
정사각형의 사이즈를 가진 요소 안에 가로가 긴 이미지나 세로가 긴 이미지를 꽉 차게 삽입하려고 하면 원본 비율이 달라지기 때문에 이미지가 깨지게 된다.
2. img 태그와 다른 점
- SEO에 있어서 background-image보다 <img>가 유리하다.
- <img>는 alt 텍스트를 활용하여 어떠한 이미지인지를 명시하거나, 이미지를 불러오지 못했을 경우 표기할 수 있지만
- background-image는 이미지를 불러오지 못했을 경우 아무것도 보이지 않는다.
기본적으로 background-image는 이미지로 인식하지 못하여 이미지를 다운로드하는 등의 행위가 불가능하다.
결론적으로 이미지가 사용자에게 내용을 이해하는 데 도움을 준다면 <img> 태그로 사용하는 게 맞고, 그렇지 않고 큰 의미가 없는 정말로 뒷 배경으로서의 이미지라면 background-image로 사용하면 된다.