CSS background 속성 완벽하게 이해해보기

도움이 되셨으면 공유하기!

CSS background 속성

CSS background 속성 가지고 사용할 수있는 것은 내 웹사이트나 블로그의 각 레이아웃 색상을 변경할 수있습니다.

html div 속성 값만 알고있다면, 내가 원하는 세부적인 부분 하나하나, 내 입맛대로 모두 변경할 수있는데요. 그 트릭을 여기서 한번 설명드려보겠습니다.

손쉽게 div 속성값 알아내보기

div 속성값은 각 브라우저에 있는 개발자도구를 통해 쉽게 알아낼 수있습니다만, 개인적으로는 크롬 브라우저를 통해서 작업하는 것이 가장 편리하다고 생각하는 편입니다.

CSS background 속성

제 블로그 홈페이지를 예시로 들어보겠습니다. 메인 홈페이지에 가면, Blog란 타이틀이 있습니다. 이 곳에다가 마우스 우클릭하고, 검사(N) 버튼을 누르시면, 해당 타이틀에 대한 속성값을 쉽게 알아내실 수있습니다.

제 홈페이지 뿐만아니라, 여러분들이 가지고 있는 티스토리 블로그나, 워드프레스 사이트에서도 똑같이 적용하시면 됩니다.

타이틀의 div 속성값은 page-title입니다. 크롬 브라우저 우측에 보시면, 템플릿 페이지와 페이지 타이틀이란 두가지 속성값이 있네요. 여기에다가 background 속성 값을 레드색상으로 줘봤습니다.

그럼, 위 이미지와 같이 타이틀 색상이 빨간색으로 바뀐 모습을 확인할 수있습니다. 이 처럼, 내 블로그의 대한 css 코드 연습을 해볼 수있습니다. 그리고, div 속성 값에 알맞은 css코드를 입력해서, 적용시킬 수있구요.

.page-title {background:#f00;}

최종적으로는 위와 같은 css 코드를 style.css 파일에 삽입을 하시거나, 별도로 css 파일을 생성해서 넣으시면 됩니다.

CSS background 속성 종류들

background-color 속성

말그대로, 배경에다가 알맞은 색상을 넣는 속성값입니다. 그런데, 굳이 background-color 풀네임으로 입력해줄 필요는 없습니다. 제가 위에서 했던 내용처럼, 색상코드를 넣으시면 됩니다.

.page-title {background-color:#fff}

background-image 속성

background-image 속성은 배경에다가 적절한 이미지를 삽입하는 속성입니다. 별도로, 저장된 이미지 파일의 url 값을 삽입해주셔야 합니다.

.page-title {background-image:url(https://lifeblog.co.kr/images....)}

background-repeat 속성

지정된 이미지의 대해 적절한 값을 넣어주는 속성입니다. repeat는 디폴트(기본)값이며, no-repeat는 이미지를 반복하지 않음, repeat-x 가로로 반복함, repeat-y 세로축으로 반복함 입니다.

.page-title {background-repeat:no-repeat}

background-size 속성

이름에서도 알 수있듯이, 이미지의 대한 사이즈를 조절할 수있는 속성입니다. 이 값에는 auto(자동 맞춤), cover(한 이미지로 다 덮겠다), px(사용자 임의 크기로 사이즈 조절), %퍼센테이지(퍼센테이지로 사이즈 임의 조절) 등 정도입니다.

.page-title {background-size:cover}

회신을 남겨주세요

귀하의 의견을 입력하십시오!
여기에 이름을 입력하십시오.

관련 콘텐츠

ghost cms를 통해 블로그 셋팅 및 사용해본 후기

ghost CMS란? 국내에서는 워드프레스, 그누보드, XE보드 CMS를 주로 사용하고 있기 때문에 ghost CMS 플랫폼이 생소하게 보이시는 분들이 많으실거라 생각합니다. 워드프레스와 마찬가지로,...

More Articles Like This