7장 색상과 배경을 위한 스타일

웹에서 색상 표현하는 방법 

1. 16진수 표기법 #ffff

2. rgb (read, green, blue)

   rgba (read, green, blue, alpha)

 ( a =  alpha 투명도값 0에서 1로 커질수록 불투명)

3. hsl (hue색, saturation채도, lightness밝기)

  hsl (hue색, saturation채도, lightness밝기, alpha )

4. 색상 이름 표기법 16개 (+웹 안전 색상 = 216가지)

 

background-color 배경 색 지정 (상속X)

background-clip 배경 적용 범위 조절 

   border-box / padding-box / content-box

background-image -> url 사용

background-repeat 배경 이미지 반복 방법 지정 

  repeat 화면에 가득 차도록 이미지 전체 반복 

  repeat-x/-y 화면의 너비/높이와 같아질 때까지 반복 

  no-repeat 반복X

background-size 배경 이미지 크기 조절 

  contain 이미지의 비율은 그대로, 이미지가 다 나오게 조절 

  cover 이미지가 요소를 다 덮는다는 조건 하에 비율 정상 유지 (이미지 잘림 가능)

  <크기값> 

  <백분율>

background-position 배경 이미지 위치 조절 ->수평 위치와 수직 위치를 명시

  수평: left center right 백분율 길이값

  수직: top center bottom 백분율 길이값 

background-origin 배경 이미지 배치할 기분 조절 

  boder-box  boder가 기준(테두리에 이미지가 닿도록)

  padding-box   

  content-box 내용 부분이 기준이 됨(글을 쓰면 글 뒤에 이미지가 위치)

background-attachment 배경 이미지 고정 

  scroll 스크롤과 함께 이미지도 움직임(스크롤 내리면 배경 이미지 안보임)

  fixed 스크롤과 상관없이 배경 이미지 고정 

 

 

선형 그라데이션 linear-gradient

기본형  linear-gradient(  <각도> to <방향>, color-stop, [color-stop, ...] );

 

브라우저 접두사

-webkit- 사파리 예전 버전 : 시작 위치 기준 

-moz- 파이어폭스 예전 버전 : 끝 위치 기준, to 사용X

-o- 오페라 예전 버전 : 끝 위치 기준, to 사용X

 

 방향 (속성값은 끝지점을 명시)

to top (아래에서 위로), to left, to right, to bottom 

 

각도 (방향 대신 쓸 수 있음)

deg 사용 

 

색상 중지 점 (색상 바뀌는 지점의 위치, 색 지정)

color-stop이라고 부르지만 따로 표기는 안함. 

그라데이션 색 사이에 그냥 색상과 %를 써주면 된다.

 

원형 그라데이션 radial-gradient

radial-gradient( <최종 모양><크기> at<위치>,color-stop등 )

 

모양 

ellipse 타원형 (기본형)

circle 원형 

 

위치 (원의 중심의 위치)

키워드(top등) / 백분율 사용 

 

크기

키워드: cloest-side 가장 가까이 있는 변과 맞닿을 정도

        cloest-corner 가장 가까이 있는 코너와 맞닿을 정도 

        farthest-side /   farthest-corner

 

색상 중지 점 color-stop

선형 그라데이션과 같음

 

그라데이션으로 패턴 만들기 

선형 그라데이션 패턴 repeating-linear-gradient

원형 그라데이션 패턴 repeating-radial-gradient