[CSS] background: 배경 이미지와 주요 속성, 배경 대체텍스트 IR 기법

웹 문서를 꾸미기 위해 특정 부분이나 글자 등 여러 요소에 배경을 넣을 수 있습니다. 배경에는 단순한 이미지부터 그레이디언트, 색상 등으로 효과도 넣을 수 있습니다. 웹 페이지에서 활용되는 배경 속성에 대해 알아보겠습니다.

 

---

1. background-: 주요 개별 속성

최근 웹 트렌드는 다양한 디지털 기기에 맞춰 개발을 진행하고 있으며, UIUX 발전을 통해 직관적인 컨셉으로 디자인 하고 있습니다. 배경 이미지 속성은 특정 태그의 배경 이미지 또는 배경 색상을 지정하는 스타일로, 사용 빈도가 높습니다. 배경 이미지의 기본 스타일 속성을 알면 이미지의 중요도에 따라 효과를 구현할 수 있습니다.

 

background 속성

속성	값	설명
background-color	색상 값	배경색
background-image	url(이미지 경로)	배경 이미지 경로
background-repeat	no-repeat, repeat-x, repeat-y	배경 이미지 반복
background-position	(숫자 px, 숫자 px), left, center, right, top, center, ...	배경 위치
background-size	100%, cover, contain, px...	배경 이미지 크기
background-attachment	fixed, scroll	스크롤에 따른 조정

 

 

1) background-color

배경색을 지정할 때 사용합니다. 기본값은 transparent로 투명이며 색상명 혹은 색상 코드를 사용하면 됩니다. 배경 이미지를 넣는다고 해도 클라이언트에서 이미지를 로딩할 수 없는 상황을 대비하여 가급적 배경색을 지정하는 게 좋습니다.

 

 

2) background-image

배경 이미지를 지정할 때 사용합니다. 기본값은 none(없음)이며, 이미지의 위치를 반드시 나타내야 합니다. 이미지 경로는 상대 경로 혹은 절대 경로로 나타낼 수 있습니다. 경로는 url()로 나타냅니다.

 

 

3) background-repeat

background-repeat 속성은 배경 이미지가 주어진 영역에서 이미지를 반복할 때 반복 방식을 결정합니다.

기본값은 repeat으로 가로와 세로 모든 방향으로 반복을 합니다. repeat-x는 x축인 가로 방향, repeat-y는 y축인 세로 방향으로만 배경 이미지를 반복합니다. no-repeat은 반복하지 않음을 의미합니다.

 

300 * 200 박스에 100 * 50 배경 이미지를 넣어 확인해보겠습니다.

 

 

위의 속성 말고도 space와 round라는 속성도 존재합니다.

background-repeat: space;는 영역 내에서 반복을 할 수 있을 만큼만 합니다. 남는 공간은 여백이 생길 수도 있습니다.

background-repeat: round;는 영역 내에서 이미지를 확대하여 반복합니다. 이미지 크기가 자동으로 변경되기 때문에 여백이 생기지 않습니다.

 

 

4) background-position

background-position은 배경 이미지의 위치를 결정합니다. 보통 다음과 같은 값으로 지정합니다.

• center, top, bottom, left, right 중 지정 가능
• x축, y축 크기를 px나 %로 지정 가능

background-position (가로 위치) (세로 위치)로 나타내며

가로 위치는 px, %, left, center, right이

세로 위치는 px, %, top, center, bottom이 들어갈 수 있습니다.

 

 

5) background-size

background-size 속성은 배경 이미지의 크기를 결정합니다. 기본값은 auto로 배경 이미지의 실제 크기를 사용합니다. 단위를 사용하여 특정 값을 지정할 수 있으며, 주어진 영역에 따라 크기가 자동으로 조절되는 값도 있습니다.

 

단위를 사용하여 지정할 때 값을 하나만 입력하면 다른 값도 비율이 맞게 자동 조정이되지만, 두 값 모두 입력하면 값이 지정되므로 비율 유지가 되지 않습니다.

 

• cover: 배경 이미지가 잘리더라도 주어진 영역을 덮을 수 있도록 크기 자동 조절
• contain: 빈 공간이 생기더라도 배경 이미지가 주어진 영역 안에 모두 들어올 수 있도록 크기 자동 조절

 

 

6) background-attachment

background-attachment 속성은 스크롤 시 배경 이미지가 주어진 영역과 함께 따라갈지 아니면 그대로 있을지 결정합니다. 이 속성은 화면에 텍스트를 비롯한 콘텐츠가 세로로 많이 있어야 확인 가능합니다. body 선택자에 높이를 강제로 지정하여 스크롤이 되도록 해보겠습니다.

 

 

스크롤을 내려도 배경이 고정되어 있는 것을 알 수 있습니다. fixed 키워드가 아닌 scroll 키워드를 사용하면

 

 

배경 이미지가 주어진 영역과 함께 스크롤이 되는 것을 볼 수 있습니다.

 

2. background 단축 속성

이러한 background 개별 속성을 모두 지정할 수 있는 속성이 바로 background 단축 속성입니다. CSS 코드를 한 번에 줄일 수 있다는 장점이 있습니다. 여러 가지 값을 순서에 상관 없이 입력해도 되지만, 예외가 있습니다.

 

position과 size를 한 번에 입력할 때에는 '위치/크기'로 작성해야 합니다.

 

또한 개별 값들은 띄어쓰기로 구분됩니다.

 

3. background 배경 이미지에 대체텍스트 - IR (Image Replacement) 기법

웹 설계를 할 땐, 웹 접근성을 고려해야 합니다. <img> 태그에서는 alt 속성으로 대체 텍스트를 입력하여 이미지를 설명하기도 했습니다. 그러나 CSS background 속성에서는 alt 속성 같은 방법이 없기 때문에 IR 기법을 이용하면 좋습니다.

 

IR 기법(Image Replacement)란, 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것으로 웹 접근성 준수를 위한 스크린 리더 사용자 뿐만 아니라 검색 엔진의 정보 수집을 위해서도 필요합니다.

 

텍스트는 스크린 리더에서만 읽히고 디자인 상으로 화면에 보이지 않아야 합니다. visibility: hidden, display: none처럼 스크린 리더가 읽지 못 하는 방법이 아니라 다른 방법으로 처리해야 합니다.

 

text-indent

: 들여쓰기, 내어쓰기 속성

값이 양수일 경우 들여쓰기, 음수일 경우 내어쓰기.

HTML
<div> div 태그 사이에 이미지 설명을 추가하자 </div>

CSS
div{
border: 5px solid #000;
width: 500px;
height: 250px;
background: url(청각적요소.png) no-repeat center/contain;
text-indent: -9999px;
}

 

 

 

들여쓰기 속성을 사용하여 텍스트를 영역 밖으로 밀어냈습니다. 굳이 text-indent:-9999px을 사용하지 않고도 들여쓰기 속성을 사용하여 텍스트를 보이는 영역 밖으로 밀어낸 뒤 넘치는 영역을 숨겨주는 overflow:hidden 처리를 해도 됩니다. 이때, white-space: nowrap과 같이 사용해야 줄바꿈이 되지 않으면서 넘치는 영역이 숨김 표시가 됩니다.

 

padding

비슷한 방법으로 최소한의 요소 높이 만큼 padding-top을 준 후 넘치는 영역을 overflow: hidden 처리를 할 수도 있습니다.

 

clip

clip을 이용하여 텍스트를 숨기는 방법도 있습니다.

 

일단 position: absolute로 다른 레이아웃에 영향을 주지 않도록 위치를 지정합니다. 다른 주변 요소들이 absolute된 속성을 무시하고 배치됩니다.

 

width, height 값을 1px로 설정해 아주 작은 영역으로 지정해주고 margin -1px로 화면에 안 보이도록 지정합니다.

 

clip과 clip-path는 요소의 특정 부분을 빼고 이미지를 자를 때 유용하게 사용하는 속성으로 본 코드에서는 clip-path: polygon( 0 0, 0 0, 0 0)으로 클리핑 범위를 지정하여 넘는 부분을 자르는 방법을 선택했습니다.

.