CSS background 약식 속성이란?
CSS의 background 속성은 배경 이미지, 위치, 반복 여부, 고정 여부 등 배경과 관련된 모든 하위 속성을 한 번에 설정할 수 있는 약식(shorthand) 속성입니다. 개별 속성을 하나씩 작성하는 대신 하나의 선언으로 처리할 수 있어 코드가 간결해지고 유지보수가 쉬워집니다.
약식 속성으로 설정할 수 있는 항목
- background-color – 배경 색상
- background-image – 배경 이미지
- background-repeat – 이미지 반복 방식
- background-attachment – 스크롤 시 배경 고정 여부
- background-position – 배경 이미지 위치
사용 예제
<html> <head> </head> <body> <p style = "background:url(/images/pattern1.gif) repeat fixed;"> 이 단락은 반복되며 고정된 배경 이미지를 가집니다. </p> </body> </html>
위 예제에서는 /images/pattern1.gif 이미지를 배경으로 지정하고, 이미지가 패턴처럼 반복되며(repeat) 페이지를 스크롤해도 화면에 고정되도록(fixed) 설정했습니다.
작성 시 주의 사항
약식 속성에서 값의 순서는 비교적 자유롭지만, 위치 값은 가로·세로 순서로 함께 작성하는 것이 좋습니다. 또한 일부 값을 생략하면 해당 항목은 기본값으로 자동 적용되므로, 의도한 스타일이 나오도록 필요한 값을 명확히 지정하는 것이 안전합니다.