웹퍼블리셔-입문]background

오늘은 웹브라우저의 배경에 색이나 이미지, 사진을 넣는

background 태그에 대해 공부하려 합니다.

1. background-color

- 배경색상
- 16진수, 영문법, rgb, rgba로 넣어줌

 

2. background-image : url(  );

- 배경이미지
- 기본적으로 반복된다!!
- url로 이미지를 불러온다
  ▶ a : href로 불러옴
  ▶ img : src로 불러옴 

※ img태그와 다른점
- img태그는 이미지 자체를 불러오고 background-image는 요소 안쪽으로 이미지를 삽입(클리핑마스크와 비슷)

 

3. background-repeat : no-repeat;

- 배경 이미지 반복 제어
- repeat : 반복(기본값)
- no-repeat : 반복안함

 

4. background-size : 100% 100%;

- 배경이미지 크기

background-size : 100%;
=> 하나만 작성하면 가로값(세로는 자동 비율 조절)
background-size : 100% 100%;
=> 순서대로 가로값 세로값
=> 빈 공백으로 구반
=> px단위 / %단위

 

이렇게 작성하면 어떻게 웹브라우저에 나타날까요?

먼저 보기 쉽게 박스를 만들어줍니다.

원하는 background 속성을 작성합니다.

1. background-image : url(a.jpg);
=>a.jpg를 url을 통해 background-image로 넣어준다.

2. background-repeat : no-repeat;
=> image를 반복하지 않는다.

3. background-size : 100% 100%;
=> image는 가로/세로 100%로 가득차게 만들어준다.

이렇게 넣어주고 확인하면 완성입니다.