CSS3 background 색상과 이미지의 배경처리(포터블-컬러픽커와 다크네이머)

CSS3에는 배경을 처리하는 종합된 background와 가 있다.  이들을 이용해서 색상과 이미지의 배경처리하는 방법들을 소개한다.

 

 

https://www.w3schools.com/css/css_background.asp

CSS Backgrounds

 

 

 

하나뿐인 단색(Solid Color)과 입체적 그라디언트(Gradient)

아래 컬러픽커에서 단색과 그라데이션을 선택해서 적용 해보자

https://www.w3schools.com/colors/colors_picker.asp

HTML Color Picker

https://www.w3schools.com/colors/colors_gradient.asp

Colors Gradient

 

 

 

---

 

 

배경색+배경이미지=배경

배경색상과 이미지의 적용은 background-color와 background-image를 구분하지 않고 background 라는 것으로 사용하는 것을 권장한다.

body {background-color: lightblue;}
body {background-image: url("paper.gif");}

body {background: lightblue;}
body {background: url("paper.gif");}

 

배경이미지의 반복여부

배경이미지의 반복여부가 없으면 수평과 수직(X,Y)를 덮는 패턴이 된다. background-repeat : 뒤에 적용되는 속성은  repeat / no-repeat  / repeat-x / repeat-y 4가지가 있다. 고정된 위치에 반복없는 내용외에는 수평과 수직으로 반복되는 내용을 정하는 것이다.

body {background-image: url("gradient_bg.png");  background-repeat: repeat-x;}

 

 

 

배경이미지의 위치

배경이미지의 위치는 수평과 수직을 연결하여 콤마없이 아래와 같이 표기한다.
수평은 왼쪽/중앙/오른쪽을 left/center/right로, 수직은 위/중앙/아래를 top/center/bottom로 구분한다.

background-position: right top;

 

배경이미지의 스크롤 여부

배경이미지의 스크롤여부는 고정된것과 정상적인 스크롤 2개가 있다.

background-attachment: fixed; background-attachment: scroll;

 

 

간략한 배경스타일

1개의 박스단위별 배경을 다수의 스타일규칙이 긴 경우, 

body { background-color: #ffffff; background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; }

줄여서 하나로 표기하기도 한다.

body { background: #ffffff url("img_tree.png") no-repeat right top; }

 

 

2개의 배경을 지정하는 방법은 특수한 경우로 아래와 같이 지정가능하다.

<style>
html,body{height:100%;}

body { background-image: url(https://www.w3schools.com/css/img_flwr.gif), url(https://www.w3schools.com/css/paper.gif);

background-position: right bottom, center top;
/*수평과 수직 순서. 수평과 수직 중앙은 center*/

background-repeat: no-repeat, repeat-x;
/*repeat는 수평수직을 덮는 패턴이고 x, y 지정하면 해당방향만 패턴화*/
padding: 15px; }
</style>

 

---

 

포터블 01.  컬러픽커 JCP(jcpicker)

 

포토샵에서 해당 컬러를 Eyedropper 도구로 색을 클릭해 해당 컬러를 알 수 있지만, 무설치 이동형 즉 포터블 형태의 컬러픽커 JCP(jcpicker)가 있다.  공식사이트에서 다운로드 후 아래 그림과 같이 원하는 화면 위에 커서를 올리고  Alt+X를 누르면 16진수 컬러값이 복사된다. 발음상 컬러피커, 컬러픽커 혼용해서 표기해야 할 듯하다.

jcpicker.exe

3.65MB

 

 

 

포터블 02.  다크네이머(BatchNamer)

 

파일명이 한두개 일대는 이름 바꾸기로 할 수 있지만, 20~100개 이상의 파일명을 원하는 이름으로 앞과 뒤에 이름을 실제로 변경할 수 있는 배치네이머. 지금은 버전업되며 배치네이머 역시 포터블로 파일명을 일관 변경하는데 무척 용이햐다.

BatchNamer_v1.5_x64.zip

4.02MB