HTML5로 배경 꾸미기

 

 

오늘은 HTML 태그에 배경을 칠하거나 혹은, 배경 이미지를 출력하는 방법을 알아보자.

 

 

[배경에 색 칠하기 & 이미지로 그리기]

- 'background-color', 'background-image' 프로퍼티는 각각 배경색과 배경 이미지를 지정한다.

- 만약 위의 두 프로퍼티가 동시에 지정된다면 배경색을 우선적으로 적용시킨 후에 배경 이미지를 배치하게 된다.

- 이와 관련된 예시 코드는 아래와 같다.

div { 
	background-color : skyblue;
    	background-image : url("(경로입력)/(이미지 파일명));
}

 

 

[배경 이미지의 위치]

- 'background-position' 프로퍼티는 박스 내의 이미지의 시작 위치를 지정한다.

- left top(디폴트), left center, left bottom, right top, right center 등, 여러 위치를 통해 이미지의 위치를 지정할 수 있다.

- 아래는 예시 코드이다.

background-position : center center; /*박스의 중간에 이미지를 출력*/

 

 

[배경 이미지의 크기]

- 'background-size' 프로퍼티를 활용해서 이미지의 실제 크기와는 다른 직접 조정한 크기로 출력이 가능하다.

- 아래는 해당 프로퍼티를 이용한 예시이다.

background-size : 100px 80px; /* 100 X 80의 크기로 이미지 출력*/

 

 

[배경 이미지의 반복 출력]

- 'background-repeat'프로퍼티를 통해서 배경에 들어가는 이미지의 반복 출력 방식을 지정할 수 있다.

- 'no-repeat', repeat(디폴트), repeat-x, repeat-y 중에서 선택하여 사용할 수 있다.

- repeat-x or y에 따라 'x' 혹은, 'y' 두 방향으로 출력하거나 한 방향으로만 출력하게 하는 것이 가능하다.

- 아래는 해당 프로퍼티를 이용한 예시 코드이다.

/*background-position에 지정된 위치로 부터 이미지를 위 > 수직방향으로 출력*/
background-repeat : repeat-y;

 

 

 

 

 

 

 

 

★해당 게시물은 "HTMl5 + CSS3 + Javascript 웹 프로그래밍"도서를 참고하여 작성되었습니다.★