32. CSS - 색상과 배경을 위한 스타일

1. 색상과 배경을 위한 스타일

1. 웹에서 색상 표시하기

1. 16진수 표기법
   • #과 함께 16진수 값으로 6자리를 표기하는 방식
   • 앞 두자리는 빨간색, 가운데 두자리는 초록색, 마지막 두자리는 파란색의 양을 결정
   • 하나도 색상이 섞이지 않은 값은 00, 가득 섞였을 때는 ff
   • 사용가능한 범위의 값: 000000(검은색) ~ ffffff(흰색)
   • 두 자리씩 값이 중복될 때는 세자리로 축약해서 표현가능. 같은 색상의 값이 중복일 때만 가능
     ex) #ffff00 -> #ff0, #cccccc -> #ccc, #aaff33 -> #af3
2. rgb와 rgba 표기법
   • rgb(빨간색, 초록색, 파란색), rgba(빨간색, 초록색, 파란색, 투명도)로 사용가능
   • 투명도를 제외한 빨간색, 초록색, 파란색의 값은 0 ~ 255까지 사용가능. 0이면 하나도 섞이지 않음을 나타내고 255 최대로 섞인것을 의미한다.
   • rgba에서 투명도는 0~1까지의 사이의 실수로 지정을 할 수 있다. 1은 완전 불투명, 0은 완전투명을 나타냄.
3. 색상이름 표기법
   • 해당 색상의 지정된 이름을 사용하여 색상을 결정하는 방식. red, green, blue, ... 해당 색상의 이름을 영문으로 지정하면 된다.

2. 배경색을 지정하는 background-color

1. 배경색을 지정할 때 사용하는 속성
2. background-color: 색상(16진수, rgb, rgba, 색상이름);
3. 배경색도 구조나 위치관련 스타일이기 때문에 상속되지 않는다.

3. 배경 적용 범위를 지정하는 background-clip

1. 배경을 테두리까지 지정할 것인지 padding까지 지정할 것인지 내용에만 지정을 할 것이지 결정하는
2. padding: 테두리와 내용 사이의 거리를 조절하는 속성
3. margin: 다른 태그와의 거리를 조절하는 속성
4. 지정가능한 속성 값
   • border-box: 테두리까지 배경색 적용
   • padding-box: padding부분까지 배경색 적용
   • content-box: 내용부분에만 배경색 적용

4. 배경에 이미지를 넣어주는 background-image

1. 배경 이미지를 넣을 때 사용하는 속성
2. background-image: url(이미지경로);

5. 배경 이미지의 반복여부를 지정하는 background-repeat

1. 배경 이미지의 반복여부 및 반복방향을 지정.
2. 지정가능한 속성 값
   • repeat: 브라우저 화면에 가득 찰 때까지 배경이미지를 가로와 세로로 반복. 기본값
   • repeat-x: 브라우저 창의 가로길이와 같아질 때까지 가로로 반복
   • repeat-y: 브라우저 창의 세로길이와 같아질 때까지 세로로 반복
   • no-repeat: 배경이미지를 한 번만 표시하고 반복하지 않음

6. 배경 이미지의 크기를 지정하는 background-size

1. 배경이미지를 여러 크기로 조절할 때 사용하는 속성
2. 지정가능한 속성 값
   • auto: 원본 이미지 크기로 표출. 기본 값.
   • contain: 태그 안에 이미지가 다 들어오도록 확대/축소 후 이미지 표출
   • cover: 배경 이미지로 태그를 모두 덮도록 이미지 확대/축소 후 표출
   • 크기: 단위와 함께 절대적인 크기 지정
   • 백분율: 원본 이미지 크기 기준의 백분율 값을 지정

7. 배경 이미지의 위치를 지정하는 background-position

1. 배경 이미지의 위치를 조절할 때 사용하는 속성
2. background-position: 수평위치 수직위치;
3. 지정가능한 속성 값
   • 키워드
     • 수평위치: left, center, right
     • 수직위치: top, center, bottom
   • 백분율
     • 해당 태그의 가로길이와 세로길이 기준으로 위치의 퍼센테이지를 지정
   • 길이(px)
     • 위치를 길이로 직접 지정. px단위로 지정한다.

8. 배경 이미지 배치할 기준을 지정하는 background-origin

1. 배경이미지를 배치하기 위한 기준을 설정할 때 사용하는 속성
2. 지정가능한 속성 값
   • border-box: 테두리 기준으로 배경이미지 배치
   • padding-box: padding 기준으로 배경이미지 배치
   • content-box: 내용 기준으로 배경이미지 배치

9. 배경 이미지를 고정해주는 background-attachment

1. 배경 이미지 고정할 때 사용하는 속성
2. 배경 이미지가 스크롤 움직임에 따라 사라지는 게 아니고 항상 그 자리에 고정되어 나타나게 설정한다.
3. 지정가능한 속성 값
   • scroll: 화면 스크롤과 함께 배경 이미지도 스크롤 됨. 기본 값.
   • fixed: 화면이 스크롤 되더라도 배경이미지는 그 위치에 표시

10. 배경 관련 속성 묶어서 지정하는 background

1. 배경관련 속성을 묶어서 지정할 때 사용하는 속성
2. 지정가능한 속성들
   • background-image
   • background-repeat
   • background-attachment
   • background-position
   • background-clip
   • background-origin
   • background-size

11. 그라데이션 효과

1. 한 가지 색상에서 다른 색상으로 점점 변해가는 효과를 그라데이션 효과라고 한다.
2. background 속성으로 지정한다.
3. 그라데이션 효과는 아직 표준화 작업이 덜 진행된 브라우저가 있어서 접두사를 이용해서 속성값들을 지정한다.

12. 선형 그라데이션

1. 수직이나 수평방향으로 색상이 점점 변해가는 것을 의미한다.
2. 선형 그라데이션 지정 시 방향과 색상을 필수로 지정해야 한다.
3. linear-gradient(각도 to 방향, 색상1, 색상2, 색상3, ...);
4. 각도는 생략 가능하고 방향은 to 키워드와 함께 지정
5. 방향으로 지정할 수 있는 값
   • to top: 아래에서 시작해 위로 그라데이션 생성
   • to left: 오른쪽에서 시작해 왼쪽으로 그라데이션 생성
   • to right: 왼쪽에서 시작해 오른쪽으로 그라데이션 생성
   • to bottom: 위에서 시작해 아래쪽으로 그라데이션 생성
6. 각도
   • 그라데이션이 끝나는 각도 지정
   • 단위는 deg. 12시가 0도 시계방향으로 각도값이 증가
7. 색상 중지점(color-stop)
   • 색상이 바뀌는 지점을 지정
   • 색상만 지정해도 되고 색상과 함께 중지점의 위치도 지정할 수 있다.

13. 원형 그라데이션

1. 원이나 타원 중심부터 동심원을 그리며 바깥 방향으로 색상이 점점 바뀌는 효과
2. 색상이 바뀌는 원의 중심과 크기를 지정하고 그라데이션의 모양을 지정해야 한다.
3. radial-gradient(모양 크기 at 위치, 색상1, 색상2, 색상3 ...);
4. 모양
   • 타원이나 원 모양을 지정할 수 있다.
   • 타원은 ellipse, 원은 circle로 지정한다.
   • 기본 값은 ellipse로 지정하지 않으면 타원 모양으로 그라데이션 생성
5. 위치
   • at 키워드와 함께 지정
   • 모양, 크기 값 다음에 지정
   • 그라데이션이 시작하는 원의 중심 지점을 지정
   • 사용한 값은 키워드(left, center, right | top center, bottom)나 백분율
6. 크기
   • 그라데이션의 크기를 지정한다.
   • 지정가능한 속성 값
     • closest-side: 그라데이션의 가장자리가 중심에서 가장 가까운 모서리와 만나는 크기로 만들어짐
     • closest-corner: 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 꼭지점에 닿는 크기로 만들어짐
     • farthest-side: 그라데이션 가장자리가 그라데이션 중심에서 가장 먼쪽 모서리와 만나는 크기로 만들어짐
     • farthest-corner: 그라데이션 가장자리가 그라데이션 중심에서 가장 먼쪽 꼭지점과 닿는 크기로 만들어짐
     • 

14. 그라데이션의 반복

1. 그라데이션의 반복은 단순하게 색상을 반복하는 게 아니고 그라데이션의 패턴을 반복하는 것을 의미한다.
2. 선형 그라데이션의 반복은 repeating-linear-gradient를 사용하고 원형 그라데이션의 반복은 repeating-radial-gradient를 사용