웹/css

배경

hihijh826 2023. 8. 2. 23:44
728x90
반응형
SMALL

(1) 배경색과 배경 범위 지정

1-1) background-color

background-color: #00000;
background-color : rgb(0,0,0);
background-color:green;
background-color:inherit;  //전역값
background-color : currentcolor; // 특정 키워드 값 지정

1-2) background-clip

: 배경색의 적용 범위 조절

  • border-box : 박스 모델의 가장 외곽(테두리) 까지 (기본값) (테두리 영역과 그 안쪽 영역을 채움 ) 
  • padding -box : 박스 모델에서 테두리를 뺀 패딩 범위 까지 적용
  • content-box: 내용(콘텐츠) 부분에만 적용

(2) 배경 이미지 지정

2-1) background - image

background-image:url('이미지 파일 경로');

2-2) background-repeat

repeat: 브라우저 화면에 가득 찰 때 까지 가로와 세로로 반복 (기본값)

repeat-x: 브라우저 화면 너비에 가득 찰 때까지 가로로 반복

repeat-y: 브라우저 화면 높이에 가득 찰 때까지 세로로 반복

no-repeat: 한번만 표시하고 반복x

 

2-3) background-position

: 배경 이미지의 위치 조정

background-position: <수평위치> <수직 위치>;
수평 위치 : left | center | right | <백분율> | <길이 값>
수직 위치 : top | center | bottom | <백분율> | <길이 값> 

background-positoin : left 10px right 20px;

백분율 : 배경 이미지를 넣을 요소의 백분율로 계산

속성값이 하나 : 수평 위치로 인식하고 수직 위치는 브라우저의 값으로

 

2-4) background-origin

: 배경 이미지의 적용 범위 조절

content - box : 박스 모델에서 내용 부분에만 배경 이미지 표시 ( 기본값)

padding-box : 박스 모델에서 패딩까지 배경 이미지 표시

border-box : 박스모델에서 테두리까지 배경 표시

2-5) background-attachment

:

scroll : 화면 스크롤시 배경 이미지도 스크롤(기본값)

fixed : 화면 스크롤시 배경 이미지 고정, 내용만 스크롤

 

2-6) background 속성 하나로 사용하기

background : url('images/url') no-repeat center bottom fixed;

2-7) background-size

: 배경 이미지 크기 조절

 

auto : 원래 배경 이미지 만큼 표시(기본값)

contain : 이미지가 잘리거나 찌끄러지지 않는 선에서 제일 크게 설정 

cover: 이미지가 잘리거나 찌끄러지지 않는 선에서 제일 크게 설정 . 이미지의 가로세로비가 요소와 다르다면 이미지를 가로세로로 잘라내어 빈공간이 생기지 않도록 설정 (많이 사용 ) 

<length> : 이미지의 너비/높이 지정 . 값이 하나 → 너빗값으로 인식하고 높잇값 자동 계산

<percentage> : 배경 이미지가 들어갈 요소의 크기 기준 백분율

 

2-8)  background-attachment 

 :  배경 이미지를 뷰포트 내에서 고정할지 말지 결정

 

scroll  : 선택한 요소와 같이 움직임. 내용을 스크롤하면 배경이미지는 스크롤 되지 않음 (기본값 ) 

fixed : 움직이지 않음

local :  선택한 요소와 같이 움직임 . 내용 스크롤시 배경도 스크롤 

initial : 기본값으로 설정

inherit : 부모값으로 설정 

 

2-9) overflow

overflow : hidden 

-  배경보다 데이터의 양이 많을 때 배경만큼만 보이게

 

overflow : scroll

-배경보다 데이터의 양이 많을 때 넘어가면 스크롤 생성해서 넘어가도록 

(3) 그라데이션 효과

3-1) 선형 그라데이션

linear-gradient(to <방향> 또는 <각도> , <색상 중지점> , [<색상 중지점>,.......]);

 

방향 :

  • to 예약어와 함께 사용
  • 수평 : left,right

ex ) to right : 왼쪽에서 오른쪽으로

  • 수직 : top,bottom

ex ) to right top / to top right : 왼쪽 아래에서 오른쪽 위로

  • 생략시 to bottom으로 인식

각도 :

  • 색상이 바뀌는 방향을 알려줌
  • deg으로 표시
  • ex ) 왼쪽 아래에서 오른쪽 위 방향 : 0도와 90도 사이인 45

색상 중지점 :

  • 2가지 이상의 색상의 선형 그라데이션 생성시 색상 바뀌는 부분 지정해주어야 함
  • 색상만 지정 하거나 색상과 중지점의 위치도 함께 지정 가능
background : linear-gradient(to bottom,시작색상 , white 30% , 끝 색상);

3-2) 원형 그라데이션

raidal-gradient(<모양> <크기> at <위치> , <색상 중지점 > ,[<색상 중지점>,..]);

모양 :

  • 원형 or 타원형(기본값)

크기 :

closest-side :

closest-corner :

farthest-side :

farthest-corner

위치 :

  • at 키워드 사용
  • left,center,right / top,center,bottom / 백분율
  • 생략시 가로 세로 모두 중앙
background: radial-gradient(circle at 20% 20%, white,blue);

색상 중지점:

background: radial-gradient(yellow,white 10%,orange 60%)
//중앙에서 퍼져 나감

3-3) 패턴 만들기

  • repeating-linear-gradient : 선형 그라 반복
  • repeating-radial-gradient : 원형 그라 반
728x90
반응형
LIST