이번 포스트에서는 웹사이트의 시각적 완성도를 높여주는 배경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를 넣을 때는 반드시 사이에 /를 넣어야 한다.
다음 포스트
CSS 이미지 필터 효과: filter 속성과 transition으로 부드러운 애니메이션 만들기
이미지를 포토샵 없이 보정하는 방법! CSS filter 속성으로 이미지에 흑백, 흐림 등의 효과를 주는 법을 알아봅니다. 현재 브라우저 지원 현황에 맞춘 깔끔한 코드 정리와, 스타일 변화를 부드럽게 만들어주는 transition 속성 활용법까지 확인해 보세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩