HTML DIV tag: 영역 배경 색상과 배경그림(이미지) 넣기와 반복/위치 속성주기 - Background-image, Background-color

[태그 모양]

<div style="
background-image: URL(이미지 주소) ;
background-color: 색상이름 또는 코드;
">
</div>

1. 영역에 바탕 색깔 넣은 모습

<div style="background-color: gold; height: 100px; width: 100%;">
이곳은 DIV영역이며, 바탕색을 금색(gold)으로 지정한 실제 모습이다. 
</div>

2. 영역에 바탕 그림 넣기 코드 모습

<div style="
background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4OKTkRfSS-YnWjSSA6sitWiJtP2SUzxSdAN9tnPe3DsQep5ojH2H3FobDJdNwGYhI285nZQ1NWvIjo8aE_PG5L9hxM30NXaSsKHg95K-R0a6idta8do0T7CYZm7sgpzTZPtWS2pgr-YCd/s1600/howways-logo2-94x94.png); 
height:150px;
width:100%;
">
</div>

[영역에 그림을 넣은 실제 모습]

여기는 DIV영역이며, 바탕그림의 크기가 DIV영역보다 작기때문에 그림이 자동으로 반복되면서 DIV영역을 채우게 된다.

2-1. 바탕그림의 반복(repeat)

바탕그림(background-image) 태그는 기본적으로 그림을 반복한다. 즉,
그림의 크기가 영역의 크기보다 작으면, 그림을 가로로 반복하고 또 세로로도 반복하여 영역을 꽉채우게 된다. 바탕그림의 반복을 제어하는 태그는 아래와 같다.

[background-repeat: ]

repeat: 바탕그림을 x축 및 y축으로 반복하여 영역에 채운다. 즉, 가로.세로 모두 반복한다
repeat-x : x축으로만 반복한다. 즉, 가로로만 반복한다
repeat-y : y축으로만 반복한다. 즉, 세로로만 반복한다
no-repeat : 가로.세로 모두 반복하지 않는다

2-11. [바탕그림을 반복으로 지정한 태그모양]

<div style="
background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4OKTkRfSS-YnWjSSA6sitWiJtP2SUzxSdAN9tnPe3DsQep5ojH2H3FobDJdNwGYhI285nZQ1NWvIjo8aE_PG5L9hxM30NXaSsKHg95K-R0a6idta8do0T7CYZm7sgpzTZPtWS2pgr-YCd/s1600/howways-logo2-94x94.png);
background-repeat: repeat;
height: 150px;
width: 100%;
">
</div>

※ 바탕그림의 기본 속성이 반복(repeat)이기 때문에, 지정을 하지 않은 것과 같은 결과가 된다.

[바탕그림을 반복(repeat)로 지정한 모습]

2-12. [바탕그림을 x축(가로)으로만 반복하도록 지정한 태그모양]

<div style="
background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4OKTkRfSS-YnWjSSA6sitWiJtP2SUzxSdAN9tnPe3DsQep5ojH2H3FobDJdNwGYhI285nZQ1NWvIjo8aE_PG5L9hxM30NXaSsKHg95K-R0a6idta8do0T7CYZm7sgpzTZPtWS2pgr-YCd/s1600/howways-logo2-94x94.png);
background-repeat: repeat-x;
height: 150px;
width: 100%;
">
</div>

[실제 적용한 모습]

※ 바탕그림이 가로로만 반복하여 채워지고 영역의 아랫쪽은 그냥 비어 있다.


2-13. [바탕그림을 y축(세로)으로만 반복하도록 지정한 태그모양]

<div style="
background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4OKTkRfSS-YnWjSSA6sitWiJtP2SUzxSdAN9tnPe3DsQep5ojH2H3FobDJdNwGYhI285nZQ1NWvIjo8aE_PG5L9hxM30NXaSsKHg95K-R0a6idta8do0T7CYZm7sgpzTZPtWS2pgr-YCd/s1600/howways-logo2-94x94.png);
background-repeat: repeat-y;
height: 150px;
width: 100%;
">
</div>

[실제 적용한 모습]

※ 바탕그림이 세로로만 반복하여 채워지고 영역의 오른쪽(가로쪽)은 그냥 비어 있다.


2-14. [바탕그림을 반복하지 않도록(no-repeat) 지정한 태그모양]

<div style="
background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4OKTkRfSS-YnWjSSA6sitWiJtP2SUzxSdAN9tnPe3DsQep5ojH2H3FobDJdNwGYhI285nZQ1NWvIjo8aE_PG5L9hxM30NXaSsKHg95K-R0a6idta8do0T7CYZm7sgpzTZPtWS2pgr-YCd/s1600/howways-logo2-94x94.png);
background-repeat: no-repeat;
height: 150px;
width: 100%;
">
</div>

[실제 적용한 모습]

※ 바탕그림이 가로.세로 어느쪽도 반복하지 않았다.
이와 같이 영역보다 그림이 작을 경우에, 그림의 위치를 지정할 수도 있다. 방법은 아래와 같다.


2-2. 바탕그림 위치 지정(position)

[background-position: ]

1. 퍼센트(%)로 지정하기
1) 모양: background-position: x% y%;
2) 의미: DiV영역의 왼쪽 위 꼭지점의 좌표를 (0% 0%)로 한 상대적 좌표를 지정하는 방법이다. 첫번재의 X%는 X축(가로)의 상대적 위치를 말하고, 두번째의 y%는 y축(세로)의 상대적 위치를 말한다. 따라서, 오른쪽 아래 꼭지점의 좌표값은 (100% 100%)가 되고, 영역의 한 가운데 좌표는 (50% 50%)가 된다.

2. 픽셀(pixels)로 지정하기
1) 모양: background-position: xpx ypx;
2) 의미: DiV영역의 왼쪽 위쪽 꼭지점의 좌표를 (0px 0px)로 한 상대적 좌표를 지정한다. 위에서와 마찬가지로 앞쪽은 x축(가로)를 뜻하고 뒷쪽은 y축(세로)를 뜻한다.

3. 문자로 지정하기
1) 모양: 좌우지정문자 상하지정문자;
2) 의미: 앞쪽은 좌우의 위치를 말하고, 뒷쪽은 상하위치를 말한다. 지정하는 문자는 아래와 같다.

left top     
left center 
left bottom

center top
center center
center bottom

right top
right center
right bottom

left top	center top	right top
left center	center center	right center
left bottom	center bottom	right bottom

4. 바탕그림의 위치를 지정하지 않을 경우에는 기본값인 (0 0)이 적용된다. 즉, 영역의 왼쪽 위 꼭지점에 위치한다.

※ 픽셀은 고정된 절대위치이고, 나머지는 유동적인 상대위치이므로, 브라우저의 가로폭에 따라 조절 된다.
영역의 기본위치 점은 영역의 왼쪽 위 꼭지점(0 0)이고, 그림의 위치를 나타내는 기준 점은 그림의 왼쪽 위 꼭지점이다.
즉, (50px 100px)은, 영역의 왼쪽 끝선에서 그림의 왼쪽 위 꼭지점까지의 픽셀피치가 50픽셀이고, 영역의 위쪽 끝 선에서부터 그림의 위쪽 꼭지점까지의 픽셀피치가 100픽셀임을 말한다.

2-21. [바탕그림위치를 50% 50%로 준 태그 모양]

<div style="
background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4OKTkRfSS-YnWjSSA6sitWiJtP2SUzxSdAN9tnPe3DsQep5ojH2H3FobDJdNwGYhI285nZQ1NWvIjo8aE_PG5L9hxM30NXaSsKHg95K-R0a6idta8do0T7CYZm7sgpzTZPtWS2pgr-YCd/s1600/howways-logo2-94x94.png);
background-repeat: no-repeat;
background-position: 50% 50%;
height: 200px;
width: 100%;
">
</div>

[적용한 모습]

2-22. [바탕그림위치를 50px 50px로 준 태그 모양]

<div style="
background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4OKTkRfSS-YnWjSSA6sitWiJtP2SUzxSdAN9tnPe3DsQep5ojH2H3FobDJdNwGYhI285nZQ1NWvIjo8aE_PG5L9hxM30NXaSsKHg95K-R0a6idta8do0T7CYZm7sgpzTZPtWS2pgr-YCd/s1600/howways-logo2-94x94.png);
background-repeat: no-repeat;
background-position: 50px 50px;
height: 200px;
width: 100%;
">
</div>

[적용한 모습]

2-23. [바탕그림위치를 center center로 준 태그 모양]

<div style="
background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4OKTkRfSS-YnWjSSA6sitWiJtP2SUzxSdAN9tnPe3DsQep5ojH2H3FobDJdNwGYhI285nZQ1NWvIjo8aE_PG5L9hxM30NXaSsKHg95K-R0a6idta8do0T7CYZm7sgpzTZPtWS2pgr-YCd/s1600/howways-logo2-94x94.png);
background-repeat: no-repeat;
background-position: center center;
height: 200px;
width: 100%;
">
</div>

[적용한 모습]

※ 여기에서 살펴본 배경 색상과 그림에 관한 모든 태그는 DIV태그가 아닌 다른 태그들에서도 마찬가지로 적용이 됩니다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...