CSS (4) COLOR와 BACKGROUND, BORDER

1.색 표현 법

(1) 색상 이름으로 표현

색 이름
aqua	blue	lime	purple	white	teal	olive	green
black	fuchsia	navy	silver	yellow	red	maroon	gray

사전 설정된 컬러 값으로 표현함. 위 표기는 html4.0에서 적용된 14개의 기본 컬러이다.

 

또한 웹 브라우저에는 별도로 여러 색상들이 정의되었으며, 특정한 브라우저에서는 이런 색상을 인식하지 못할 수도 있다.  그러므로 사용시에는 컬러 이름으로 지정하는 것 보다 hex코드로 입력하는 것을 추천한다.

 

 

---

(2) RGB 색상값으로 표현

RGB 표현 예시

h1{ color: rgb(0,128,0); }

h2{ color: rgb(192,192,192); }

RGB값으로 색을 표기하는 방식. 순서대로 red green blue로 표기한다.

---

 

(3) HEX코드(16진수 색상값)으로 표현

HEX코드(16진수 색상값) 표현 예시

h3{ color:#222); }

h3{ color: #68d7ds; }

#으로 시작하여 16진수(1~F까지) RED GREEN BLUE 값을 지정하여 표기하는 방식, 상대적으로 간단하며, 11,22,33등 동일 숫자가 반복되는 경우, 3글자로 줄여서 사용이 가능하다.

 

---

 

(4) 알파채널(투명도) 추가(RGBA)

표현 예시

.h2{ color: rgba(0,128,0,0.5); }

.h2{ color: rgba(192,192,192,0.1); }

RGB컬러에 Alpha 채널을 더하여 투명도를 표기하는 방식. 투명도가 100%일때는 1, 0%일때는 0으로 표기한다. 

 

---

 

2. 색과 관련된 속성 소개

(1) COLOR - text 컬러를 바꾸는 속성

{color:red;}
{color:#0f0;}
{color:#efefef;}
{color:rgba(255,255,255,0.7);}

{color:initial;}
{color:inherit}

 

background-color 속성	값
컬러 값 입력	이름 | 헥사코드(16진수 | rgba(255,255,255,1) |
initial	기본값
inherit	상속값

 

---

(2) BACKGROUND - 배경속성

 1) 배경 색 설정하기 

{background-color:red;}
{background-color:#0ff;}
{background-color:#242424;}
{background-color:#rgba(0,0,0,0.7);}

{background-color:none;}
{background-color:initial;}
{background-color:inherit;}

background-color 속성
컬러 값 입력	이름 | 헥사코드(16진수 | rgba(255,255,255,1) |
initial	기본값
inherit	상속값

 

---

2) 배경 이미지와 반복

div.class1{background-image:url("BACKGROUND_IMG.PNG"); background-repeat:repeat-x};
div.class2{background-image:url("BACKGROUND_IMG.PNG"); background-repeat:repeat-y};
div.class3{background-image:url("BACKGROUND_IMG.PNG"); background-repeat:no-repeat};

속성 이름	값 이름	설명
BACKGROUND-IMAGE:URL	("경로명")	"경로명"에 해당하는 이미지 불러오기
BACKGROUND-REPEAT	: REPEAT-X	X축으로 이미지 반복
	: REPEAT-Y	Y축으로 이미지 반복
	: NO-REPEAT	반복 안함.

---

3) 배경 이미지의 위치

div{
 width:500px;
 height:500px;
 background-image: url("/img/background.png");
 background-repeat: no-repeat;
 background-position: top right;
}

body {
     background-image: url("/img/background.png");
     background-repeat: no-repeat;
     background-position: 100px 200px;
     }

속성명	값	설명
BACKGROUND-POSITION :	수평설정 수직설정	배경 이미지의 위치 지정
수평설정 값	LEFT CENTER RIGHT	중 선택 1
수직설정 값	TOP CENTER BOTTOM	중 선택 1
	퍼센트 및 픽셀 위치 지정 (기준= LEFT TOP)	이미지 위치를 퍼센트 혹은 픽셀 수치로 지정. 예시 : 400PX 100PX; }

 

 

 

---

4) background-attachment - 배경 이미지 위치 고정

div {
     background-image: url("/img/background.png");
     background-repeat: no-repeat;
     background-position: left bottom;
     background-attachment: fixed;
        }

속성명	값	설명
background-attachment	: none	- 위치 고정하지 않음( = 창 크기가 바뀌면 자동으로 맞추어짐.)
	: fixed	- 위치를 고정함.( = 창 크기에 관계 없이 일정한 위치에 고정됨)

 

---

 

5) 최종 축약 표현

 

 body { background: #FFCCCC url("/img/background.png") no-repeat left bottom fixed; }

한줄로 쓰기(축약표현) : 위 모든 설정을 한번에 적용할 수 있다.

{ background : 색  경로  반복  위치지정  고정여부  ; }

 

---

 

3.BORDER 스타일 속성:"값";

(1) 선 스타일 : border-style 속성값 모음

.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: double;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.none {border-style: none;}
.hidden {border-style: hidden;}
.mix {border-style: solid dashed dotted double;}

border-style 속성값 모음
none	테두리 없음	double	이중 실선	outset	3차원인 외지로 끼운 선으로 설정하며
dotted	점선	groove	3차원 입체 선	hidden	테두리를 표현하지 않음
dashed	약간 긴 점선	ridge	3차원 능선효과
solid	실선	inset	3차원인 내지로 끼운 선으로 설정

 

---

 

(2) border 폭 설정.

   .solidThin { border-style: solid; border-width: thin; }
   .solidMedium { border-style: solid; border-width:medium; }
   .solidThick { border-style: solid; border-width:thick; }
   .solid10px { border-style: solid; border-width:10px; }
   .solid10em { border-style: solid; border-width:2em; }
   
   .solidMix{border-style: solid; border-width:1px 2px 10px thick;}
   

속성명	값	설명
border-width	단위 표기(px, em)	px, em(배수) 등으로 구체적인 수치로 설정.
	사전 설정(thin, medium, thick)	사전 설정 값(가늘게thin, 중간medium, 굵게thick )으로 설정

 

.red { border-color: red; }
.green { border-color: rgb(0,255,0); }
.blue { border-color: #0000FF; }
.mix { border-color: red green blue maroon; }
.color { color: teal; }

속성명	값	설명
border-color 속성	색 이름()	색 이름으로 설정
	HEX코드(#dfdfdf)	HEX코드로 설정
	rgb(0,255,1)	rgb값으로 설정
	rgba(0,255,1,0.8)	rgba값으로 설정

 

(3) border-방향-style : 값 - 방향에 따라 각각 설정 가능

mixA {
        border-top-style: dotted;
        border-right-style: double;
        border-bottom-style: dotted;
        border-left-style: double;
    }

.mixB { border-style: dotted double; }

* 테두리(border)의 개별 설정.
키워드 4개 입력시 위치	top  right  bottom  left
키워드 3개 입력시 위치	top  right&left  bottom
키워드 2개 입력시 위치	top&bottom  left&right
키워드 1개 입력시 위치	all

 

(4) border한줄로 쓰기(축약표현)

.oneline { border: 3px solid teal; }

border 한줄 표현

요소 { border : width  style  color  ;}

한줄로 쓰기(축약표현) : 위 모든 설정을 한번에 적용할 수 있다.  단, 반드시 스타일을 정의해야만 출력이 가능하다.