Background: 배경 이미지 속성
- 배경 이미지 속성은 배경으로 활용할 이미지를 출력하는 속성이다.
컨텐츠로 활용하는 용도가 아닌 배경을 꾸미기 위한 용도로 사용한다.
[기본형]
1. background-image: url(이미지 경로)
: 배경 이미지를 경로로 불러온다. 그라디언트 배경을 채울때도 사용한다.
2. background-repeat: no-repeat / repeat-x / repeat-y;
: 배경이미지의 반복 여부를 지정한다. 배경이미지는 바둑판 배열로 반복되어 출력되는게
기본값이다. 만약 1장만 보여주고 싶을때는 no-repeat 속성값을 지정하고,
가로로만 반복시킬때는 repeat-x, 세로로만 반복시킬때는 repeat-y을 사용한다.
3. background-attachment: fixed / scroll;
: 배경 고정 여부를 뜻한다. 기본값은 scroll로 스크롤을 아래로 내리면 이미지가 위로
올라가고, fixed를 설정하면 배경이 항상 같은 자리로 고정된다.
4. background-position: px / left, center, right, top, center, bottom
: 배경 위치를 지정한다. 배경 위치를 지정할때에는 값을 2개써야 한다. 만약 하나만
쓴다면 x축과 y축에 동일한 px만큼 떨어져 위치하게 된다. 또는 키워드를 사용하여
위치를 지정할 수 있다.
5. background-size: 100% / cover / contain / px값
: 배경이미지의 사이즈를 지정한다. cover를 지정하면 배경영역의 가로 사이즈에 맞춰 사진을 채우고
contain을 지정하면 배경영역의 세로 사이즈에 맞춰 이미지를 채운다.
6. background: 하위 속성들을 한꺼번에 선언
: background속성은 1번부터 5번까지의 배경 하위속성들을 한꺼번에 선언할때 사용한다.
한꺼번에 선언할때에는 공백으로 구분할 수 있고 필요 없는 속성은 생략할 수 있다.
7. background-origin
:박스에 패딩이나 테두리가 있다면 배경이미지를 어느 영역까지 보여줄 것인지
결정하는 속성.
Color 속성
다양한 색상 단위 :코드로 색상을 표현하는 다양한 단위가 있다. 이 단위들을 사용하면 배경에 그라디언트를 넣거나 투명하게 처리할 수 있다.
-
hex
: 앞에 #을 붙인 16진수로 색상을 표현하는 단위이다. 가장 많이 쓰이며, 보통 디자인 단계에서 해당 코드를 공유하여 웹을 디자인한다.2.색상명
: red,blue처럼 정해진 색상의 이름으로 색을 표현하는 단위이다. 보통 임시로 영역을 확인하기 위해 사용된다.-
rgb(red,green,blue)
: rgb색상단위로 뒤에 소괄호가 붙는다. 소괄호 안에는 0~255까지의 숫자를 입력할 수 있다. red,green,blue색상을 조합하여 빛의 색상을 표현하는 단위이다. -
rgba(red,green,blue,alpha)★
: rgba의 a는 alpha값을 말하며 투명도를 뜻한다. 투명도를 표기할때에는 0~1까지의 값을 쓸 수 있다.
투명도에 만약 0.5를 쓰면 50%투명한 색상이 나온다. 0은 완전히 투명한 상태를 말하고 1은 완전히 불투명한 상태를 말한다. -
hsl(hue,saturation,lightness)
: hue는 색상을 뜻하고 saturation은 채도, lightness는 밝기를 뜻한다. 해당 색상단위는 %를 쓴다.
hsl색상 단위는 사람이 손으로 조색하는 색상과 가장 비슷하다고 하여 포토샵과 같은 디자인툴의 기본 색상 단위이다. 코드로는 많이 쓰이진 않는다. -
hsla(hue,saturation,lightness,alpha)
: hsl단위에 투명도인 alpha값을 추가한 색상 단위이다.
투명도는 마찬가지로 0~1까지의 값을 쓸 수 있다. -
opacity(속성명)★
투명도를 뜻하는 속성. 값은 0 ~ 1사이의 값을 쓸 수 있다.
단위는 쓰지 않는다. opacity는 '속성명' 으로 해당 박스의
컨텐츠 내용과 border까지 모두 투명하게 만든다.hsla,rgba는 '속성값'이며, 컨텐츠는 투명하게 만들지 않고
배경색만 투명하게 만든다.
-
