CSS_Background

오늘은 CSS에서 Background 속성에 대해서 알아보도록 하겠습니다.

우선 코딩을 해보도록 할게요.

이렇게 기본적인 코딩을 합니다.

밑에화면과 같이 결과 화면이 나오겠죠?ㅎㅎ

그럼이제 속성들을 하나씩 알아보도록 하겠습니다.

처음에 알아볼것은 

background-color 입니다.

다음 코딩한것과 같이  background-color : 색깔;

로 표현할 수 있습니다.

위의 결과화면과 같이 박스안의 배경색깔이 skyblue로 나타나게 됩니다.

다음 속성은 background-image입니다.

background-image 속성 쓰는 법을 배워보겠습니다.

위의 화면과 같이 background-image : url(' 사진이 위치한 주소 ');

이렇게 쓰시면 됩니다.

이렇게 쓰게되면 밑의 화면과 같이 결과화면이 나오게됩니다.

png의 그림은 1개인데 화면에는 2개가 나타나 있습니다.

이것은 왜그런걸까요?

background-repeat 속성 때문입니다.

background-repeat의 기본값이 repeat로 되어있기 때문입니다.

위의 속성값에서 볼 수 있듯이 속성값이 여러가지가 있는데

그럼 원래 그림 1개만 쓰려면 어떻게 하면될까요?

no-repeat 속성값을 사용하면 됩니다.

결과 화면과 같이 background-repeat : no-repeat 값을 사용하자

한가지 그림만 background로 나타나게 됩니다.

repeat-x 는 행 반복, repeat-y 는 열 반복을 의미합니다.

다음 알아볼 속성은 background-attachment 인데요...

이건 배경이 스크롤 되지않고 고정할 수 있게 하는 속성이에요.

이건 직접 해보시고 깨닫는게 빠를것 같아요^^ㅎㅎ

다음은 background-position 속성이에요.

이 속성은 background의 위치를 지정해주는 속성이에요.

밑에서 보시는 바와 같이 left, center, right, bottom, top 이렇게 5가지로 정할 수 있어요.

저는 center로 해볼게요!

오늘 포스팅은 여기까지 하도록 하겠습니다.

감사합니다~~~^^