8.Background

1.Background

• Background

  • background-color

    • background-color : #fff00;

    • background-color : rgb(100,100,100);

    • background-color : rgba(100,100,100,1);

  • background-image : 배경으로 이미지를 넣고 싶을때 사용, 반드시 url을 사용해야한다.

    • background-color : url();

  • background-repeat

    • background-repeat : repeat; (default)

    • background-repeat : no-repeat;

  • background-position : x축으로 어느 지점에 y축으로 어느지점에 두는지 결정한다.

    • background-position : center center (주로 사용하는 속성값)

• background-size

  • background-size : contain; (주어진 사이즈에 이미지의 모든면이 들어감, 대신 이미지가 꽉 차게 안들어갈수도 있음)

  ;

  • background-size : cover; (주어진 사이즈에 이미지의 꽉 차게 들어감, 대신 이미지가 잘릴수도 있음)

  ;

  • background-size : custom; (내가 원하는 대로 지정해서 들어감 , 가로 세로 ; 으로 선언)

2.Background 활용 (1)

3.Background 활용 (1)