css 배경 제어 프로퍼티로 배경 제어하기

css 배경 제어 프로퍼티로 배경 제어하기

네 안녕하세요, 이번 포스팅에서는 css를 이용하여 배경을 제어해 보도록 하겠습니다.

css제가 css 포스팅 첫 시간에 맛보기로 보여드린 예제 중에 배경도 같이 제어를 했었는데,

이번 시간에는 그걸 좀 더 자세히 알아보고,

배경을 제어하도록 도와주는 기능들이 어떤 것들이 있는 지 한 번 살펴보는 시간을 가지도록 하겠습니다.

그럼 지금부터 같이 보시죠.

 

1. 배경을 다룰 때 쓰는 프로퍼티들(background-color, bacground-image, bakcground-position, background-size, background-repeat, background-origin)

배경을 다루는 프로퍼티들은 크게 6가지 입니다.

• background-color : 배경색 넣기
• background-image : 배경에 이미지 넣기
• background-position : 배경 이미지의 위치 지정하기
• background-size : 배경 이미지의 크기 지정하기
• background-repeat : 배경 이미지 반복 출력하기
• backgroud-origin : 배경을 우선적으로 채워 넣을 구역의 순서 지정하기

보통 이렇게 씁니다.

그럼 순서대로 어떤 식으로 사용을 할 수 있는지 한 번 보도록 하겠습니다.

 

1 - 1. 배경색 지정하기 : background-color 사용

우리가 배경색을 지정하지 않으면 그냥 기본적으로 흰 화면만이 나옵니다.

그래서 다른 색의 화면을 출력하고 싶다면 화면에 색을 입히는 css 프로퍼티를 작성을 해줘야 합니다.

배경색을 지정하는 프로퍼티는 이렇게 씁니다.

background-color : blueviolet;

이런 식으로 색을 지정해 줍니다.

그리고 여기에는 16진수의 컬러코드나 rgb 코드도 사용이 가능합니다.

 

1 - 2. 배경에 이미지 지정하기 : background-image 사용

배경에 우리가 넣고 싶은 이미지를 지정을 할 수도 있습니다.

우리가 특정 사이트들을 보면 색깔 대신 이미지가 배경으로 보이는 경우가 있는대,

이 경우들이 다 그런 경우입니다.

그리고 배경에 이미지를 넣는 프로퍼티는 background-image라는 프로퍼티를 쓰는데,

이 프로퍼티는 background-color 프로퍼티와 세트로 쓰입니다.

그 이유는 간혹 이미지가 출력이 되지 않는 오류가 생길 때가 있는대,

이를 대비한 대체화면으로 background-color로 지정을 한 화면을 띄우기 위해서입니다.

사용 방법은 이렇습니다.

backgrond-color : yellowgreen;
background-image : ("media/dog.png");

이런 식으로 지정을 합니다.

그리고 이미지나 영상 등을 삽입할 때의 주의사항이 있는데,

링크로 들여왔으면 그 링크의 url에 오타가 없어야 하며,

내부 파일에서 가져온 것이라면 경로 지정을 꼭 해줘야 합니다.

또한, 이미지 파일이 있는 폴더가 html 파일이 있는 폴더에 같이 존재하고 있어야

이미지가 보이니 주의를 해주셔야 합니다.

그래서 이러한 실수나 이미지 리딩과 로드 오류가 생길 수도 있기 때문에

그러한 경우를 대비한 대비책을 저렇게 씁니다.

반응형

 

1 - 3. 배경 이미지의 위치 지정하기 : background-position 사용

배경 이미지의 위치를 지정하는 것도 중요하겠죠?
배경 이미지가 화면 전체가 될 수도 있고,

그 일부를 사용할 수가 있어서 위치의 조정은 상당히 중요합니다.

그렇지 않으면 웹 페이지가 중구난방으로 보일 수가 있어서 시인성이 떨어질 수 있습니다.

그러면 어떻게 사용하는지 보도록 하겠습니다.

background-position : center center;

이런 식으로 쓸 수가 있습니다.

그리고 background-position에서 사용되는 속성이 꽤 다양해서 제가 표로 한 번 정리를 해봤습니다.

속성	기능
left top	좌측 상단
left center	좌측 중앙
left bottom	좌측 하단
right top	우측 상단
right center	우측 중앙
right bottom	우측 하단
center top	중앙 상단
center center	정중앙
center bottom	중앙 하단

이러한 키워드들이 존재하고요,

키워드를 하나만 쓸 수 있기는 하나,

center 말고는 쓸 수 없으니 기억해 두시면 좋습니다.

 

1 - 4. 배경 이미지의 크기 지정하기 : background-size 사용

그리고 배경 이미지의 크기도 지정을 적절히 해야 합니다.
그렇지 않다면 원본 이미지 그대로 출력이 되어서 위치가 조금 어정쩡해질 수 있습니다.

보통 제일 많이 쓰는 방법은 픽셀 단위로 입력하는 방법입니다.

사용하는 방법은 이렇습니다.

background-size : 200px, 200px; // 200 x 200 사이즈로 출력

이런 식으로 사용을 하며, 입력 순서대로 폭과 높이 순으로 지정이 됩니다.

 

1 - 5. 배경 이미지 반복 출력하기 : background-repeat 사용

그리고 배경 이미지를 반복적으로 출력하는 방식을 쓸 수도 있습니다.

간혹 개인 미니홈피 같은 곳을 들어가면 한 개의 그림이

연속적으로 쭉 붙어서 있는 것을 보신 적이 있으실 겁니다.

그런 경우가 바로 이미지를 반복 출력하도록 만들어둔 것입니다.

그리고 background-repeat에서도 속성을 지정을 해야 합니다.

가로로 출력을 할 것인지, 세로로 출력을 할 것인지 말입니다.

이 방법은 이렇습니다.

• repeat-x : x축(가로) 방향으로 출력
• repeat-y : y축(세로) 방향으로 출력

이러한 방법이 존재합니다.

그래서 사용 방법은 이렇습니다.

background-repeat : repeat-y;

이런 식으로 쓰실 수 있습니다.

 

1 - 6. 배경을 채워 넣을 구역 순서 지정하기 : background-origin 사용

html에는 여러 가지 구역이 존재합니다.

그래서 어디에 채워 넣을지를 지정도 할 수 있도록 하는 기능도 제공을 합니다.

그리고 그 프로퍼티의 이름은 background-origin입니다.

하지만 이 방법은 아주 많이 쓰는 방법은 아닙니다.

그래도 알아두면 나중에 쓰실 일이 있을 수 있으니, 제가 간단하게 예시를 보여드리겠습니다.

background-origin : initial; // 기본값으로 설정

이런 식으로 씁니다.

그리고 background-origin에서 쓰는 속성도 여러 개가 있습니다.

• border-box : 테두리 영역 왼쪽 위부터 채움
• padding-box : 안쪽 여백 영역 왼쪽 위부터 채움
• content-box : 내용 영역 왼쪽 위부터 채움
• initial : 기본값으로 설정함
• inherit : 부모 요소의 속성 값을 상속받음

이러한 속성 값이 존재합니다.

그리고 background-repeat 프로퍼티와 같이 쓰게 되면

이미지가 채워지는 시작점이 있는 바깥 부분에도 이미지가 채워집니다.

 

여기까지 배경 제어 프로퍼티의 종류와 사용 방법을 알아보았습니다.

다음 포스팅에서는 이 배경 제어 프로퍼티의 단축 프로퍼티를 사용하는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~