smarti,스마트아이

CSS 배경, 그라데이션

CSS 배경 (Background)

웹 페이지뿐만 아니라 HTML 요소는 모두 각자의 배경을 가지고 있다.
CSS의 background 속성은 이러한 각 요소의 배경에 다양한 효과를 줄 수 있게 해준다.

 

 

CSS background 속성

속성	설명
background	모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
background-color	HTML 요소의 배경색을 설정함.
background-image	HTML 요소의 배경 이미지를 설정함.
background-repeat	설정된 배경 이미지의 반복 유무를 설정함.
background-position	반복되지 않는 배경 이미지의 상대 위치를 설정함.
background-attachment	배경 이미지를 스크롤과는 무관하게 해당 위치에 고정시킴.

background-color 속성

background-color 속성은 해당 HTML 요소의 배경색(background color)을 설정한다.

body { background-color: lightblue; }
h1 { background-color: rgb(255,128,0); }
p { background-color: #FFFFCC; }

background-image 속성

background-image 속성은 해당 HTML 요소의 배경으로 나타날 배경 이미지(image)를 설정한다.
설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타낸다.

body { background-image: url("/images/img_background.png"); }

 

 

 

background-repeat 속성

배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타낸다.
background-repeat 속성을 이용하면 이러한 배경 이미지를 수평이나 수직 방향으로만 반복되도록 설정할 수 있다.

예 : 배경 이미지의 수평 반복

body { background-image: url("/images/img_back.png"); background-repeat: repeat-x; }

예 : 배경 이미지의 수직 반복

body { background-image: url("/images/img_back.png"); background-repeat: repeat-y; }

예 : 배경 이미지를 반복하지 않고 한번만 보이게

body { background-image: url("/images/img_back.png"); background-repeat: no-repeat; }

background-position 속성

background-position 속성은 반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정한다.

body {
    background-image: url("/images/img_back.png");
    background-repeat: no-repeat;
    background-position: top right;
}

이 속성에서 사용할 수 있는 키워드의 조합은 다음과 같다.

1. left top

2. left center

3. left bottom

4. right top

5. right center

6. right bottom

7. center top

8. center center

9. center bottom

또한, 퍼센트(%)나 픽셀(px)을 사용하여 상대 위치를 직접 명시할 수도 있다.
이때 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단(left top)이 된다.

다음 예제는 배경 이미지의 상대 위치를 픽셀 단위로 직접 명시한 예제이다.

body {
    background-image: url("/images/img_back.png");
    background-repeat: no-repeat;
    background-position: 100px 200px;
}

background-attachment 속성

background-attachment 속성을 사용하여 위치가 설정된 배경 이미지를 해당 위치에 고정시킬 수도 있다.
이렇게 고정된 배경 이미지는 스크롤과는 무관하게 화면의 위치에서 이동하지 않는다.

body {
    background-image: url("/images/img_back.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-attachment: fixed;
}

background 속성 한 번에 적용하기

위에서 언급한 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

body { background: #FFCCCC url("/images/img_back.png") no-repeat left bottom fixed; }

 

 

 

CSS3 배경 (background)

CSS3에서는 배경의 크기뿐만 아니라 위치까지도 마음대로 설정할 수 있다.
또한, 하나의 HTML 요소에 여러 개의 배경 이미지를 적용할 수도 있다.

CSS3에서 새롭게 추가된 background 속성은 다음과 같다.

속성	설명
background	모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
background-size	배경 이미지의 크기를 설정함.
background-origin	배경 이미지의 위치를 결정할 기준을 설정함.
background-clip	해당 요소의 배경을 어느 영역까지로 설정할지를 결정함.
background-image	하나의 요소에 여러 개의 배경 이미지를 설정함.

CSS3 background 속성 지원 버젼

CSS3 배경(background) 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성	ie	chrome	firefox	safari	opera
background-size	9.0	4.0 / 1.0 -webkit-	4.0 / 3.6 -moz-	4.1 / 3.0 -webkit-	10.5 / 10.0 -o-
background-origin	9.0	1.0	4.0	3.0	10.5
background-clip	9.0	4.0	4.0	3.0	10.5
여러 개의 배경 이미지	9.0	4.0	3.6	3.1	11.5

background-size 속성

background-size 속성은 배경 이미지의 크기를 설정한다.

CSS2에서 배경 이미지의 크기란 배경 이미지로 사용되는 이미지의 실제 크기와 같다. 하지만 CSS3에서는 배경 이미지의 크기를 마음대로 설정할 수 있다.

문법 :  background-size: 너비 높이 contain|cover ; 

배경 이미지의 너비와 높이를 명시할 때는 CSS 크기 단위를 사용한다.
CSS 크기 단위에는 픽셀 단위(px), 배수 단위(em), 백분율 단위(%) 등이 있다.

#origin { background: url(/images/img_test.png); background-repeat: no-repeat; }
#resize {
    background: url(/images/img_test.png);
    background-size: 200px 110px;
    background-repeat: no-repeat;
}

background-size 속성값은 contain과 cover 중에서 선택할 수 있다.

속성값을 contain으로 설정하면 이미지의 비율은 유지하면서, 크기를 가능한 한 크게 조절한다.
단, 배경 이미지의 크기가 해당 요소의 내용(content) 영역을 넘지는 않는다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 되며, 배경 이미지가 요소의 일부분은 가리지 못할 수도 있다.

 

 

속성값을 cover로 설정하면 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기를 조절한다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 되며, 배경 이미지의 일부분이 잘릴 수도 있다.

다음 예제는 background-size 속성값에 따른 차이점을 보여주는 예제이다.

#contain { background-size: contain; }
#cover { background-size: cover; }

background-size 속성을 사용하여 이미지의 비율을 유지하지 않고, 해당 요소의 전부를 가리도록 설정할 수도 있다.

html {  background: url(/images/img_test.png) no-repeat center fixed;  background-size: cover; }

background-origin 속성

background-origin 속성은 배경 이미지의 위치를 결정할 기준을 설정한다. 이 속성은 다음과 같이 세 가지 속성값을 사용할 수 있다.

1. border-box : 배경 이미지를 테두리(border) 영역의 왼쪽 위에 맞춘다.

2. padding-box : 기본 설정이며, 배경 이미지를 패딩(padding) 영역의 왼쪽 위에 맞춘다.

3. content-box : 배경 이미지를 내용(content) 영역의 왼쪽 위에 맞춘다.

다음 예제는 background-clip 속성값에 따른 차이점을 보여주는 예제이다.

#padding { background-clip: padding-box; }
#content { background-clip: content-box; }

background-image 속성 (여러 개의 배경 이미지 설정)

background-image 속성을 사용하면 하나의 요소에 여러 개의 배경 이미지를 설정할 수 있다.

각각의 배경 이미지는 쉼표(,)로 구분되며, 스택(stack)처럼 차례대로 쌓이게 된다. 배경 이미지들 간의 순서는 가장 처음 명시된 이미지가 가장 위에 나타난다. 즉 가장 나중에 명시된 이미지가 가장 아래쪽에 위치하게 된다.

다음 예제는 background-image 속성을 이용하여 여러 개의 배경 이미지를 설정하는 예제이다.

#origin {
    background-image: url(/images/img_back.png), url(/images/img_test.png);
    background-position: right top, left;
    background-repeat: no-repeat, repeat;
    background-size: 100px 233px, auto;
}

 

 

배경과 내용의 투명도

CSS의 opacity 속성으로 요소의 투명도를 정할 수 있다. opacity 속성은 선택한 요소의 배경과 내용 모두를 투명하게 만든다. 간단한 예제는 다음과 같다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div {
        padding: 40px;
        background-image: url( "images/bg-img.png" );
      }
      p {
        padding: 30px;
        font-size: 50px;
        font-weight: bold;
        text-align: center;
        background-color: #ffffff;
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div>
      <p>Lorem</p>
    </div>
  </body>
</html>

문단의 배경과 글자 모두가 투명 해진다.

배경의 투명도

만약 배경만 투명하게 하고 글자는 투명하지 않게 하려면 opacity 속성을 쓰지 말고, 배경색을 RGBA 색상을 이용하여 정한다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div {
        padding: 40px;
        background-image: url( "images/bg-house.png" );
      }
      p {
        padding: 30px;
        font-size: 50px;
        font-weight: bold;
        text-align: center;
        background-color: #ffffff;
        background-color: rgba( 255, 255, 255, 0.5 );
      }
    </style>
  </head>
  <body>
    <div>
      <p>Lorem</p>
    </div>
  </body>
</html>

RGBA 색상은 IE8 이하에서는 적용되지 않는다. 따라서 IE8 이용자를 고려한다면, 위의 예제처럼 배경색을 두가지로 정한다. (IE8로 접속하면 배경색이 하얀색이 됨)

 

 

CSS / 선형 그라데이션 효과(linear-gradient) 만들기

선형 그라데이션 효과 (linear-gradient)

linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만든다. 인터넷 익스플로러는 버전 10 이상에서 사용할 수 있다.

문법 :  linear-gradient( direction, color1, color2, …, color3 ) 

direction에는 그라데이션 방향을 입력한다.

 - to bottom : 위에서 아래로 그라데이션을 만듬 (기본값)
 - to top : 아래에서 위로 그라데이션을 만듬
 - to left : 오른쪽에서 왼쪽으로 그라데이션을 만듬
 - to right : 왼쪽에서 오른쪽으로 그라데이션을 만듬
 - ndeg : n도의 방향으로 그라데이션을 만듬

색은 여러개 입력할 수 있다. 입력한 순서로 설정한 방향으로 그라데이션을 만든다. 예를 들어

background: linear-gradient( to bottom, yellow, red );

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Gradient</title>
    <style>
      div {
        width: 100%;
        height: 100px;
        margin-bottom: 10px;
      }
      .jbGrad01 {
        background: linear-gradient( to bottom, yellow, red );
      }
      .jbGrad02 {
        background: linear-gradient( to top, yellow, red );
      }
      .jbGrad03 {
        background: linear-gradient( to right, yellow, red );
      }
      .jbGrad04 {
        background: linear-gradient( to left, yellow, red );
      }
      .jbGrad05 {
        background: linear-gradient( 45deg, yellow, red );
      }
    </style>
  </head>
  <body>
    <div class="jbGrad01">to bottom</div>
    <div class="jbGrad02">to top</div>
    <div class="jbGrad03">to right</div>
    <div class="jbGrad04">to left</div>
    <div class="jbGrad05">45deg</div>
  </body>
</html>

색이 사용하는 길이 정하기

색만 입력했을 때는 색을 균등하게 배분하여 그라데이션을 만든다. 색 뒤에 백분율 또는 픽셀 등으로 길이를 입력하면 그 길이까지 해당 색을 사용한다. 

linear-gradient( to right, yellow 50%, red 60%, purple );

해당 요소의 왼쪽에서 50%까지는 노란색, 50% 초과 60% 이하에는 빨간색, 나머지는 보라색으로 그라데이션을 만든다.

색 뒤에 길이를 정하여 그라데이션을 만드는 예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Gradient</title>
    <style>
      div {
        width: 100%;
        height: 100px;
        margin-bottom: 10px;
      }
      .jbGrad01 {
        background: linear-gradient( to right, yellow, red, purple, blue );
      }
      .jbGrad02 {
        background: linear-gradient( to right, yellow 50%, red, purple, blue );
      }
      .jbGrad03 {
        background: linear-gradient( to right, yellow 50%, red 60%, purple, blue );
      }
      .jbGrad04 {
        background: linear-gradient( to right, yellow 50px, red 300px, purple 90%, blue );
      }
    </style>
  </head>
  <body>
    <div class="jbGrad01">to right, yellow, red, purple, blue</div>
    <div class="jbGrad02">to right, yellow 50%, red, purple, blue</div>
    <div class="jbGrad03">to right, yellow 50%, red 60%, purple, blue</div>
    <div class="jbGrad04">to right, yellow 50px, red 300px, purple 90%, blue</div>
  </body>
</html>

그라데이션 반복

repeating-linear-gradient는 그라데이션을 반복한다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Gradient</title>
    <style>
      div {
        width: 100%;
        height: 400px;
      }
      .jbGrad01 {
        background: repeating-linear-gradient( yellow, red 10%, purple 20% );
      }
    </style>
  </head>
  <body>
    <div class="jbGrad01"></div>
  </body>
</html>

 

CSS / 원형 그라데이션 효과(radial-gradient) 만들기

원형 그라데이션 효과(radial-gradient)

radial-gradient로 원형 그라데이션 효과를 만들 수 있다. CSS3에서 추가된 것으로, 인터넷 익스플로러는 버전 10 이상에서 사용할 수 있다.문법 :   radial-gradient( shape size at position, color1, color2, ---, color3 )  - shape : 원 모양인지 타원 모양인지 정한다.
 - size : 크기를 정한다.
 - position : 중심의 위치를 정한다.
 - color : 색을 정한다.

예제1

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			div.jb {
				margin: 0px auto;
				width: 400px;
				height: 400px;
				background: radial-gradient( yellow, red, brown );
			}
		</style>
	</head>
	<body>
		<div class="jb"></div>
	</body>
</html>

노란색, 빨간색, 갈색으로 변하는 원형 그라데이션이다.

예제2

div.jb {
	margin: 0px auto;
	width: 400px;
	height: 400px;
	background: radial-gradient( yellow 10%, red 100px, brown 50% );
}

색 뒤에 길이를 넣어서 색이 차지하는 범위를 정할 수 있다.

예제3

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( ellipse, yellow, red, brown );
}

정사각형이 아닌 직사각형일 때 원 모양으로 채울지 타원 모양으로 채울지 정할 수 있다. 원일 때는 circle, 타원일 때는 ellipse를 입력한다. ellipse가 기본값이므로, 값이 없으면 타원 모양이 적용된다.

예제4

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( circle, yellow, red, brown );
}

직사각형에서도 원 모양으로 그라데이션을 만든다.

예제5

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( at 30% 20%, yellow, red, brown );
}

중심의 위치를 바꾼다.

 

 

예제6

크기를 정한다. 가능한 값은 farthest-corner, farthest-side, closest-corner, closest-side이고, 기본값은 farthest-corner 이다.

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( farthest-corner at 30% 20%, yellow, red, brown );
}

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( farthest-side at 30% 20%, yellow, red, brown );
}

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( closest-corner at 30% 20%, yellow, red, brown );
}

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( closest-side at 30% 20%, yellow, red, brown );
}

 

 

 

[세상살이] - [클로바 더빙] 유튜버, 온라인 강의영상 등 만들때 목소리가 자신 없다면

[클로바 더빙] 유튜버, 온라인 강의영상 등 만들때 목소리가 자신 없다면

[코딩공부] - CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드

CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드

 

[세상살이] - 색으로 대표되는 컬러푸드 - Red (레드푸드)

색으로 대표되는 컬러푸드 - Red (레드푸드)

[세상살이] - 플랩풋볼, 소셜 축구 풋살 용병 모임

플랩풋볼, 소셜 축구 풋살 용병 모임

[세상살이] - 네이버 스마트렌즈로 사진 찍어서 번역하기

네이버 스마트렌즈로 사진 찍어서 번역하기