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

웹에서 색상 표현하기

1. 16진수 표기법
2. rgb와 rgba 표기법
3. 색상 이름 표기법

배경 색과 배경 이미지

1. background-color
2. background-clip
   • border-box
   • padding-box
   • content-box
3. background-image→ url 경로
4. → 배경 이미지
5. background-repeat
   • repeat : 좌우, 상하 반복 → 기본값
   • repeat-x : 좌 → 우 반복
   • repeat-y : 위 → 아래 반복
   • none : 반복 없음
6. background-size
   • auto : 이미지 원본 그대로 출력
   • contain : 이미지를 영역 안으로 축소/확대
   • cover : 이미지를 영역 안으로 채우기
   • 크기값
   • background-size: 너비 높이;
   • 백분율
     • 너비, 높이를 함께 지정 → 이미지 왜곡 가능성
     • 너비 하나만 지정하면 높이는 자동으로 계산
   • background-size: 너비 높이(생략 가능);
7. background-positionbackground - position : 좌 → 우 위 → 아래;위 → 아래 : 수치, top - 위 | bottom - 아래 | center - 가운데
8. 좌→우 : 수치(px, left-왼쪽 | right- 오른쪽 | center - 가운데
9. → 배경 이미지 배치
10. background-origin : 이미지 배치 기준
    • border-box : 경계선부터 배치 - 기본값
    • padding-box : 내부 여백부터 배치
    • content-box : 내용 영역부터 배치
11. background-attachment
    • fixed : 배경 이미지 고정 - 기본값
    • scroll : 배경 이미지도 스크롤
12. background색상, 이미지 → 둘 중 한 개는 필수
13. background: 색상 이미지(url(…)) 반복(repeat) attachment 배치(position);

참고)

여백

margin : 영역 외부 여백

padding : 영역 내부 여백