CSS ⑤

웹 페이지 배경 스타일링, 시각적 완성도 높이는 핵심 기법

배경색 및 적용 범위 제어

웹 요소에 색상을 입히는 것은 가장 기본적인 배경 스타일링이다. background-color 속성은 요소의 배경색을 지정하며, 기본값은 투명(transparent)으로 설정된다. 색상 이름, 16진수(HEX) 값, rgb() 또는 rgba() 함수를 포함한 다양한 방식으로 색상 지정이 가능하다. 특히 rgba() 함수는 색상과 함께 투명도(alpha)를 조절할 수 있어 활용도가 높게 평가된다.

배경색 또는 배경 이미지가 요소의 어느 영역까지 적용될지 제어하는 속성도 존재한다. background-clip 속성을 사용하면 배경이 콘텐츠 영역, 패딩 영역, 또는 테두리 영역 중 어디까지 확장될지 세밀하게 조절됨이 가능하다.

---

배경 이미지 활용 전략

단순한 색상 대신 이미지를 배경으로 활용하면 훨씬 더 다채로운 디자인 구현이 가능하다.

background-image 속성은 요소의 배경 이미지를 지정하며, 기본값은 none이다. url() 함수를 통해 이미지 파일의 경로가 지정될 수 있으며, 여러 이미지를 쉼표로 구분하여 동시 지정도 가능하다. 이때 가장 먼저 지정된 이미지가 최상단에 겹쳐서 표시된다.

배경 이미지가 반복되는 방식을 설정하려면 background-repeat 속성이 사용된다. 기본값은 가로와 세로로 모두 반복되는 repeat이지만, repeat-x (가로 반복), repeat-y (세로 반복), no-repeat (반복 없음) 등 다양한 옵션으로 원하는 반복 방식이 지정될 수 있다. 이미지가 잘리지 않으면서 반복되거나(space), 이미지 비율을 조절하여 공간을 채우는(round) 방식도 제공된다.

배경 이미지의 위치는 background-position 속성으로 설정된다. 기본값은 좌측 상단이며, left, top, right, bottom, center와 같은 키워드 또는 px, %, em과 같은 단위를 사용하여 정확한 위치가 지정될 수 있다.

background-origin 속성은 배경 이미지가 시작하는 원점(0,0)을 설정한다. 이는 배경 이미지가 테두리(border-box), 패딩(padding-box), 또는 콘텐츠(content-box) 영역 중 어디서부터 시작할지를 결정한다. 단, background-attachment 속성이 fixed로 설정된 경우에는 이 속성이 무시된다.

배경 이미지를 뷰포트에 고정할지, 요소와 함께 스크롤되게 할지는 background-attachment 속성으로 조절된다. scroll은 요소와 함께 스크롤되게 하고, fixed는 뷰포트에 고정되어 스크롤 시에도 움직이지 않도록 한다. local은 요소 내 콘텐츠와 함께 스크롤된다.

끝으로, 배경 이미지의 크기를 조절하는 background-size 속성이 있다. 기본값은 원본 크기(auto)이며, contain (이미지 비율 유지하며 요소 안에 모두 보이도록 확대), cover (이미지 비율 유지하며 요소를 완전히 덮도록 확대), 또는 특정 너비와 높이 값을 지정하여 이미지가 조절될 수 있다.

---

그러데이션 효과로 다채로운 배경 구현

CSS 그러데이션은 이미지 파일 없이도 부드러운 색상 전환 효과를 배경에 적용할 수 있는 강력한 기능이다. 이는 편집의 용이성과 함께 향후 애니메이션 등으로도 활용될 수 있다는 장점을 지닌다.

• 선형 그러데이션 (linear-gradient()): 일직선 방향으로 색상이 변하는 효과를 생성한다. to top, to right bottom과 같은 방향 키워드나 45deg와 같은 각도를 사용하여 그러데이션의 방향이 지정될 수 있다. 각 색상 뒤에 %나 px 값을 추가하여 색상 변화의 시작 및 끝 지점인 색상 중지점을 세밀하게 제어함이 가능하다.
• 원형 그러데이션 (radial-gradient()): 원형 또는 타원형으로 색상이 변하는 효과를 제공한다. 선형 그러데이션과 마찬가지로 모양, 위치, 색상 중지점 등을 다양하게 지정하여 활용될 수 있다.
• 반복 그러데이션 (repeating-linear-gradient(), repeating-radial-gradient()): 지정된 그러데이션 패턴을 반복하여 독특하고 규칙적인 배경 패턴을 생성할 수 있다. 여러 색상 중지점을 사용하여 더욱 복잡하고 흥미로운 패턴도 구현될 수 있다.

이러한 모든 배경 관련 속성들은 background라는 하나의 통합 속성을 사용하여 간결하게 작성될 수 있다. 예를 들어, background: url('이미지.jpg') no-repeat center / cover;와 같이 한 줄로 배경 이미지를 설정하고 반복하지 않으며 중앙에 배치하고 요소를 덮도록 크기가 조절될 수 있다. 더불어, CSS 그러데이션을 지원하지 않는 구형 브라우저를 위해, 그러데이션 속성보다 먼저 background-color를 지정하는 것이 권장된다.

 

출처: 

http://designer-ej.tistory.com/entry/CSS-background-%EC%86%8D%EC%84%B1-%EC%A0%95%EB%A6%ACcolor-image-position-repeat-%EB%93%B1

[CSS] background 속성 정리(color, image, position, repeat 등)

https://github.com/funnycom/doit-hcj-new/blob/main/09/results/bg-1.html