메인ITCSS background 속성 완벽하게 이해해보기

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}
거래소비트겟빙엑스MEXC바이비트
수수료0.02%, 0.04%0.045%0.01% 0.05%0.02%, 0.055%
순위3위5위7위2위
추천도가장 압도적으로 추천! (5/5)(5/4.5)(5/4)(5/4.5)
언어영어영어한국어영어
할인50%50%10%20%
대상단타, 스캘핑에 최적독특한 복사거래다양한 암호화폐유튜버가 추천하는 곳
가이드비트겟 가이드북빙엑스 가이드북MEXC 가이드북바이비트 가이드북
가입하기가입하기가입하기가입하기

공유하기

관련 가이드

여유로운 사람의 코인 블로그
여유로운 사람의 코인 블로그https://lifeblog.co.kr
여유로운 사람의 블로그의 비트코인 선물거래와 암호화폐 관련하여 다양한 정보를 전달합니다. 여유로운 사람의 블로그 운영진 경력 바이낸스 선물거래소 3년차 이용 경력 비트겟 선물거래소 2년차 이용 경력 비트겟 거래소 전문 인플루언서로 활동 중 과거 암호화폐 거래소 및 토큰 프로젝트 실행 경력

LEAVE A REPLY

Please enter your comment!
Please enter your name here

오늘의 인기 포스트

공유하기

같이 읽으면 유용한 콘텐츠

최신 기사