이번 포스트에서는 웹사이트의 시각적 완성도를 높여주는 배경Background 관련 속성들과 이를 효율적으로 사용하는 단축 속성 기법까지 정리해 보겠다.
이전 포스트
CSS float와 clear 활용법: 이미지 옆으로 글자가 자연스럽게 흐르게 만들기
float 속성의 모든 것을 알아봅니다. 본래 목적은 '이미지 주변 텍스트 흐름' 용도였지만, flex가 없던 시절에 레이아웃을 잡아야 했던 과거를 소개합니다. clear: both 활용법과 추억의 float 기반 Holy Grail 레이아웃 코드도 확인해 보세요.
생활코딩 CSS 수업 영상: 배경
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 100px;
height: 1000px;
border: 5px solid gray;
/* background-color: tomato;
background-image: url('run.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: contain;
background-position: center; */
background: tomato url('run.png') no-repeat fixed center;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. >Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>수업 영상 속의 CSS 코드 중에서 background 관련 속성들을 살펴보겠다.
background-color: tomato;: 배경 색을 정한다. 배경 이미지를 지정하기 전이나, 투명한 이미지일 때 이 색상이 보인다.background-image: url('...');: 배경에 넣을 이미지의 경로를 지정한다. 이미지는 텍스트 뒤에 깔린다.background-repeat: no-repeat;: 배경 이미지가 요소보다 작을 때 이미지를 욕실 타일 붙이듯이 반복할지 정한다. 기본값은repeat이고,no-repeat;,repeat-x,repeat-y등이 있다.background-attachment: fixed;: 기본값은scroll이다.fixed는 페이지를 스크롤해도 배경 이미지는 화면에 고정되어 움직이지 않게 만든다. 고급스러운 시각 효과를 줄 때 자주 쓰인다.background-size: contain;: 배경 이미지의 크기를 지정한다.contain은 배경 이미지가 잘리지 않고 온전히 다 나오도록 크기를 조절한다. 이미지의 전체 모습은 다 보이지만, 박스 비율에 따라 배경의 일부가 비어 보일 수 있다.cover는 요소 안을 이미지로 가득 채운다. 이미지와 요소의 비율이 맞지 않을 경우엔 이미지가 잘린다.background-position: center;: 배경 이미지가 요소 내의 어느 지점에 놓일지를 결정하는 속성이다. 예를 들어 오른쪽 하단에 놓고 싶다면right bottom이라고 넣으면 된다.
이 여러 줄의 코드를 background라는 하나의 속성으로 합쳐서 쓸 수 있다. 코드 양이 많이 줄어들기 때문에 적극적으로 사용하자.
background: [색상] [이미지] [반복여부] [고정여부] [위치] / [사이즈];
일반적인 작성 순서는 이렇다.
위치position와 사이즈size를 넣을 때는 반드시 사이에 /를 넣어야 한다.
이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요.
(비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩