CSS background 속성
CSS background 속성 가지고 사용할 수있는 것은 내 웹사이트나 블로그의 각 레이아웃 색상을 변경할 수있습니다.
html div 속성 값만 알고있다면, 내가 원하는 세부적인 부분 하나하나, 내 입맛대로 모두 변경할 수있는데요. 그 트릭을 여기서 한번 설명드려보겠습니다.
손쉽게 div 속성값 알아내보기
div 속성값은 각 브라우저에 있는 개발자도구를 통해 쉽게 알아낼 수있습니다만, 개인적으로는 크롬 브라우저를 통해서 작업하는 것이 가장 편리하다고 생각하는 편입니다.
제 블로그 홈페이지를 예시로 들어보겠습니다. 메인 홈페이지에 가면, 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}
