[CSS] 색상 스타일, 배경 스타일

색상(Color) 스타일

• RGB 색상 적용 : CSS는 RGB 색상 사용가능, HTML은 사용 불가

div {width: 300px; height: 30px;}
div.c1 {background: rgb(150,20,20);}
div.c2 {background: rgb(250,200,25);}
div.c3 {background: rgb(25,50,200);}

 

• RGBA 값을 이용하여 투명도 설정 : 0.0 (투명) ~ 1.0 (불투명)

div {width: 300px; height: 30px;}
div.a1 {background: rgba(255,70,10,1.0);}
div.a2 {background: rgba(255,70,10,0.8);}
div.a3 {background: rgba(255,70,10,0.6);}
div.a4 {background: rgba(255,70,10,0.4);}
div.a5 {background: rgba(255,70,10,0.2);}

 

• opacity 속성을 이용하여 투명도 설정

div.a1 {background: rgb(255,70,10); opacity: 1.0;}
div.a2 {background: rgb(255,70,10); opacity: 0.8;}
div.a3 {background: rgb(255,70,10); opacity: 0.6;}
div.a4 {background: rgb(255,70,10); opacity: 0.4;}
div.a5 {background: rgb(255,70,10); opacity: 0.2;}

 

• HSL 색상 적용
  ⭐ 색조(Hue), 포화(Saturation), 밝기(Lightness)로 색을 표현하는 방식

div {width: 300px; height: 30px;}
div.c1 {background: hsl(320,100%,25%);}
div.c2 {background: hsl(320,100%,50%);}
div.c3 {background: hsl(320,100%,75%);}

 

 

배경(Background) 스타일

• background-image 속성 : 배경 이미지 지정

background-image: url(../bgimg.jpg);

 

• background-size : 배경 이미지의 사이즈 지정(넓이, 높이)

background-size: 150px;

 

• backgroun-repeat 속성 : 배경 이미지의 반복 방식 지정

background-repeat: repeat-x;    /* 가로 반복 */
background-repeat: no-repeat;   /* 반복안함 */

 

• background-position 속성 : 배경 이미지의 위치 지정

background-position: 100px 100px;    /* x축 y축 */
background-position: center center;  /* 디바이스의 중앙 */

 

• background-attachment 속성 : 배경 이미지 고정/스크롤 여부

background-attachment: fixed;   /* 스크롤 시 배경이미지 고정 */