CSS Property - Background 이미지, 그라디언트 넣기

 

 

CSS Background

 

---

 

• CSS에서 Background관련된 속성은 정말정말 중요합니다.
• 그냥 배경이미지를 넣는것으로 생각할 수도 있지만, 웹페이지의 수많은 곳이 background-image로 표현되고 있습니다.

 

 

기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다.

 

Welcome to CODING HELL

Overview 

HTML element에 컨텐츠요소가 아닌 배경으로 이미지를 배치 할 수 있는 속성입니다. 작은 아이콘부터 배경까지 다양한방법으로 사용할 수 있습니다. 또한, 웹 접근성을 위한  IR(Image Replace)기법으로 사용이 많이 됩니다.

 

Background property - 주요 속성

- 굉장히 자주 사용이 된다.

property	{ value }	Description
background	gold url('') no-repeat center center/cover	축약형
background-color	gold
background-image	url('../images/photo.jpg');
background-repeat	no-repeat	이미지의 반복여부
background-position	center center	x, y축  중앙을 기준으로 배경이미지를 놓는다.
	right 10px top 20px;	우측에서 10px, 위에서 20px위치를 기준으로 배경이미지를 놓는다.
background-position-x; background-position-y;		두가지 방향을 각각 지정할 수 도 있다.
background-attachment	scroll	기본값이므로 생략가능하다. fixed일경우 body에 정렬되며, 스크롤이 되지 않는다.
background-size	cover	width height

 

 

Background property - 기타 속성

- 자주 사용하지는 않지만, 알아두어야 할 속성

property	{ value }	Description
background-origin		배경 기준점이 contents, padding,  border 의 어디가 될 지 결정한다. background-attachment:fixed일때에는 이 속성이 무시된다.
background-clip		배경이 contents, padding, border영역어디까지 포함할지를 결정한다.

 

 

Background Multi 지정

- 다중배경이미지로 지정이 가능하다. 축약형도 사용이 가능하다.

div {
    background-image:url('../images/photo1.jpg'), url('../images/photo2.jpg');
    background-repeat:no-repeat;
    background-size:200px auto, 30px 40px;
 }

 

 

 

Background Gradient, Blend mode 

- 그래픽 툴과 같은 효과를 넣을 수 있습니다.

property	{ value }	Description
background-blend-mode MDN 바로가기	multiply	그래픽 툴의 레이어 혼합모드처럼 위아래의 이미지나 컬러를 혼합모드로 지정하여 표현 할수 있는 기능이다.
background-image	linear-gradient(red,green,blue)	그라디언트로 지정 각도와 방향, 선형, 방사형등 다양하게 선택할 수 있습니다.

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.