Web/CSS

CSS_Background

Jacob93 2017. 3. 21. 20:34

오늘은 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로 해볼게요!




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


감사합니다~~~^^