[CSS] 배경색 꾸미기(background, 그러데이션)

html, css, js 2023. 2. 15. 21:11

#배경색과 배경 범위지정하기

배경색을 지정하는 background-color 속성

16진수나 rgb, 색상이름을 사용해서 지정합니다.

중요! background-color속성은 상속되지 않는다.!!

background-color: #008000;
background-color: rgb(0,128,0);
background-color: green;

배경색의 적용 범위를 조절하는 background-clip 속성

박스모델의 테두리까지 적용할지, 패딩까지 적용할지, 컨텐츠에만 적용할지 등을 선택할 수 있다.

border-box : 테두리까지 적용된다. 기본값
padding-box : 패딩까지만 적용된다.
content-box : 콘텐츠에만 적용된다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    .desc {
      border:5px dotted #222;
      background-color:#ffd9a0;
      width:350px;
      padding:20px;
      margin-right:20px;
      float:left;
    }
    #clip-border {
      background-clip: border-box;
    }
    #clip-padding {
      background-clip: padding-box;
    }
    #clip-content {
      background-clip: content-box;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="desc" id="clip-border">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </div>
    <div class="desc" id="clip-padding">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </div>
    <div class="desc" id="clip-content">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </div>        
  </div>
</body>
</html>

#배경 이미지 지정하기

웹 요소에 배경 이미지를 넣는 background-image 속성

background-image: url('이미지 파일 경로')

데스크탑 내부에 저장된 이미지 파일을 경로로 설정할수도있고, http://로 시작하는 절대경로를 사용할수도있다.
배경을 넣을때 요소보다 이미지 크기가 작으면 이미지가 가로와 세로로 반복되면서 요소의 배경을 가득 체운다.

body{
      background-image: url('./apple.png');
    }

배경 이미지의 반복 방법을 지정하는 background-repeat 속성

배경이미지를 가로와 세로 중에서 어떤방향으로 반복할지 정하거나, 반복하지 않고 한번만 나타나게 할수도있음.

repeat 브라우저 화면에 가득찰때까지 가로오 세로를 반복, 기본값
repeat-x 브라우저 화면 너비에 가득찰때까지 가로를 반복
repeat-y 브라우저 화면 높이에 가득찰떄까지 세로를 반복
no-repeat 한번만 표시하고 반복하지않음

배경 이미지 위치를 조절하는 background-position 속성

배경이미지의 수평위치, 수직위치를 값을 지정할수있다.

background-position: <수평 위치> <수직 위치>;
수평위치 : left | center | right | <백분율> |<길이 값>
수직위치 : top | center | bottom | <백분율> |<길이 값>

속성값을 하나만 지정하면 지정한 값을 수평위치값으로 간주하고, 수직위치값을 50%로 간주한다.

배경 이미지의 위치를 지정하는 방법

1. 키워드

left, center, right. / top, center, bottom

2. 백분율

요소가 있는 해당 위치에 배경 이미지의 위치를 백분율로 계산하여 맞춘다.
background-position: 30% 60% 라면, 왼쪽 모소리로부터 가로30% 세로60%위치에 배경이미지의 왼쪽 상단 모소리를 맞춤.

3.크기

background-position: 30px 60px이라면 가로 30px 세로 60px위치에 배경이미지의 왼쪽 상단 모소리를 맞춤

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>불릿 바꾸기</title>
  <style>
    ul {
      list-style:none;   /* 불릿 없앰 */
      margin-left:-30px;  /* 왼쪽 여백 줄임 */
    }
    li {
      background-image:url('./book-icon.png');  /* 배경 이미지 파일 */
      background-repeat:no-repeat;  /* 배경 이미지 반복 안함 */
      background-position:left center;  /* 배경 이미지 위치 */
      padding-left:50px;  /* 왼쪽 패딩 (박스 모델) */
      line-height:40px;  /* 줄간격 */
    }
  </style>
</head>
<body>
  <h1>이지스퍼블리싱</h1>
  <ul>
    <li>회사소개</li>
    <li>도서</li>
    <li>자료실</li>
    <li>질문답변</li>
    <li>동영상강의</li>
  </ul>
</body>
</html>

배경 이미지의 적용 범위를 조절하는 background-origin 속성

박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수도 있음.
배경 색의 적용 범위를 조절하는 background-clip 속성과 유사하지만 기본값과 적용 대상이다름.

border-box : 테두리까지 적용된다. 
padding-box : 패딩까지만 적용된다.
content-box : 콘텐츠에만 적용된다.기본값

배경 이미지를 고정하는 background-attachment 속성

배경 이미지가 있는 웹문서를 열고 스크롤 막대를 위아래로 조절하면 문서 전체가 움직이므로 배경 이미지도 함께 이동한다.

abckground-attachment속성을 사용하면 배경 이미지를 고정할 수 있음

scroll  화면을 스크롤하면 배경 이미지도 스크롤됨. 기본값
fixed   화면을 스크롤해도 배경이미지는 같은 위치에 고정되어있고 내용만 스크롤

background 속성 하나로 배경 이미지 제어하기

지금까지 설명한 background-image, background-repeat, background-position, background-attachment속성을 background속성 하나로 묶어서 쓸 수가있음. 속성값이 다르므로 입력 순서는 상관없다.

background: url('이미지경로') no-repeat center bottom fixed;

배경 이미지 크기를 조절하는 background-size 속성 !

배경을 채울 요소인 div태그나 ur태그 등 크기에 비해, 이미지가 작거나 클경우 전 게시물에서는 position:relative와 absolute를 사용했다. 하지만 bacground-size속성을 사용하면 더 유용하게 이미지 크기를 조절할수있다.

auto  원래 배경 이미지 크기만큼 표시. 기본값
contain 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 축소함
cover 배경이미지로 요소를 모두 덮도록 이미지를 확대 축소함
<크기> 이미지의 너비와 높이를 지정함. 값이 하나만 주어질경우 너비로 인식하며 이미지의 너비와 너빗값에 맞춘 높이값도 자동계산
<백분율> 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>배경 이미지</title>
  <style>
    #container{
      width:1100px;
      margin:50px auto;
    }
    .box{
      float:left;
      border:1px solid #222;
      width:300px;
      height:300px;      
      margin:20px;
      background:url('./apple.png') no-repeat left top;
    }
    #bg1 { background-size:auto;}  /* 원래 배경 이미지 크기로 표시 */
    #bg2 { background-size:200px;}  /* 너비는 200px, 높이는 자동 계산 */
    #bg3 { background-size:50%;}  /* 배경 이미지 너비는 요소 너비의 50%, 높이는 자동 계산 */
    #bg4 { background-size:100% 100%;}  /* 배경 이미지 너비와 높이는 요소 너비의 100%, 요소 높이의 100% */ 
    #bg5 { background-size:contain;}  /* 요소 안에 배경 이미지가 다 보이도록 표시 */
    #bg6 { background-size:cover;}  /* 요소를 완전히 덮도록 배경 이미지 표시 */
  </style>
</head>
<body>
  <div id="container">
    <div class="box" id="bg1"></div>
    <div class="box" id="bg2"></div>
    <div class="box" id="bg3"></div>
    <div class="box" id="bg4"></div>
    <div class="box" id="bg5"></div>
    <div class="box" id="bg6"></div>
  </div>
 </body>
</html>

#그라데이션 효과로 배경 꾸미기

선형 그러데이션을 만드는 linear-radient함수

선형 그러데이션이란? 색상이 수직, 수평, 대각선 방향으로 일정하게 변하는 것을 말한다.

linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, ....] );

방향

그러데이션 방향을 지시할때는 끝 지점을 기준으로 to 예약어와 함께 사용합니다.

to 다음에는 방향을 나타내는 예약어(left,right,top,bottom)를 최대 2개까지 사용가능
예를 들어 색상이 왼쪽아래에서 오른쪽 위로 변하는 그러데이션의 경우 to right top 혹은 to top right로 사용
선형 그러데이션의 위치나 각도 옵션을 생략하면 to bottom으로 인식함

다음예는, 왼쪽에서 아래쪽 방향 ,, 파랑에서 흰색으로 이동하는 그러데이션을 나타낸 예제이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>선형 그러데이션</title>
  <style>
	div {
		width:500px;
		height:300px;
		border-radius:10px;
	}
  	.grad {
  		background: blue;
      background: linear-gradient(to right bottom, blue, white);  /* 왼쪽 위에서 오른쪽 아래 방향으로, 파랑에서 흰색으로 */
  	}
  </style>
</head>
<body>
  <div class="grad"></div>
</body>
</html>

각도

각도는 선형 그러데이션에서 색상이 바뀌는 방향을 알려주는 방법이다. 이때 각도는 그러데이션이 끝나는 부분이고 deg로 표기한다.

CSS에서 각도는 맨 윗부분이 0deg 시계방향으로 회전하면서 90deg, 180deg가 된다.
만약 왼쪽아래에서 오른쪽 위방향을 각도로 지정하는 경우 background:linear-gradinet(45deg,#f00,#fff)로 지정하면 되겠다.

색상 중지점

2가지 색 이상의 선형 그러데이션을 만들려면 색상이 바뀌는 부분을 지정해주어야하는데 이 부분의 색을 색상 중지점이라한다.

linear-gradinet(to bottom, #06f, white 30%, #06f)의 경우 시작색상 06f로 부터 30%되는 지점에 흰색을 두었고 끝 색상을 다시 06f로 설정했음

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>선형 그러데이션</title>
  <style>
		div {
			width:500px;
			height:300px;
		}
  	.grad {
  		background: #06f; /* css3를 지원하지 않는 브라우저용 */
  		background: linear-gradient(to bottom, #06f, white 30%, #06f);  /* 위에서부터 30% 위치에 색상 중지점 지정 */
  	}
  </style>
</head>
<body>
  <div class="grad"></div>
 </body>
</html>

원형 그러데이션

원형 그러데이션은 원도는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다. 따라서 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그러데이션 모양을 선택해야한다.

radial-gradient(<모양> <코기> at <위치>, <색상 중지점> , [<색상 중지점>, ...])

모양

원형 그러데이션에서 만들어지는 모양은 원형(circle), 타원형(ellipse, 기본값)이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>원형 그러데이션</title>
  <style>
		div {
			width:500px;
			height:300px;
			margin:10px;
		}

		/* 타원형 원형 그러데이션 */
		.grad1{
			background:red;
			background:radial-gradient(white, yellow, red); /* 타원형으로 흰색, 노란색, 빨간색으로 바뀌는 그러데이션 */
		}

		/* 원형 그러데이션 */
		.grad2{
			background:red;
			background:radial-gradient(circle, white, yellow, red);  /* 원형으로 흰색, 노란색, 빨간색으로 바뀌는 그러데이션 */
		}
  </style>
</head>
<body>
  <div class="grad1"></div>
  <div class="grad2"></div>
</body>
</html>

크기

원형 그러데이션을 지정할때 원의 크기도 정할 수 있다.

background:radial-gradient(circle closest-side at 30% 40%, white, yellow, green);  /* 그러데이션 중심에서 가장 가까운 측면에 닿을 때까지 */
    }

closet-side : 그라데이션 중심에서 가장 가까운 요소의 가로 측면이나 세로 측면에 닿을때까지 그린다.
closet-corner : 그라데이션 가장자리가 중심에서 가장 가까운 코노에 닿도록 그린다.
farthest-side : 그러데이션 가장자리가 그러데이션 중심에서 가장 멀리떨어져 있는 측면에 닿을때까지 그린다.
farthest-corner : 크러데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어져있는 코너에 닿을때까지 그린다, 기본값

위치

at키워드를 사용한다. 그러데이션이 시작하는 원의 중심을 나타낸다.

위치 속성값은 키워드(left,center,right or top,center,bottom)또는 백분율을 사용한다. 속성값을 생략하면 가로 세로 모두 center로 인식
background: radial-gradient(circle at 20% 20%, white, blue) 20% 20% 너비 높이 위치로 부터 흰색 -> 파란색으로 변하는 원형 그러데이션

색상중지점

선형 그러데이션처럼 색상이 바뀌는 부분이 색상중지점이다, 다만 원형 그러데이션에서는 색상과 어느부분에서 색상을 바꿀지 위치도 함께 지정할수있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>원형 그러데이션</title>
  <style>
		div {
			width:500px;
      height:300px;
			margin:10px;
		}
		.grad1{
			background:skyblue;  /* css3를 지원하지 않는 브라우저용 */
			background:radial-gradient(yellow, white, orange);  /* 노란색에서 흰색을 거쳐 주황색으로 바뀌는 타원형 그러데이션 */
		}
		.grad2{
			background:skyblue;  /* css3를 지원하지 않는 브라우저용 */
			background:radial-gradient(yellow, white 10%, orange 60%);   /* 노란색에서 10% 위치의 흰색, 60% 위치의 주황색으로 바뀌는 타원형 그러데이션 */
		}
	</style>
</head>
<body>
  <div class="grad1"></div>
  <div class="grad2"></div>
 </body>
</html>

그러데이션을 사용해 패턴 만들기

선형 그러데이션 반복 : repeating-linear-gradient

원형 그러데이션 반복 : repeating-radial-gradient

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>그러데이션 반복</title>
  <style>
		div {
			width:500px;
			height:300px;
			border:1px solid #222;
			border-radius:10px;
      margin-bottom:30px;
		}
		.grad1 {
			background: red; 
			background: repeating-linear-gradient(yellow, red 20px); 
		}
		.grad2 {
			background: #ccc; 
			background: repeating-radial-gradient(circle, white, #ccc 10%); 
		}
  </style>
</head>
<body>
	<div class="grad1"></div>
	<div class="grad2"></div>
 </body>
</html>

그러데이션을 반복해서 패턴을 만들떄는 각 색상 중지점의 위치를 적절하게 조절해야한다.

시작 색상과 끝 색상을 명확하게 구분해 줘야 중간에 섞이는 현상이 없다.

다음 예제는 각각 색상 중지점을 red 20px , #ccc 10%로 지정하여 중간에 색이 겹치는일 없이 명확한 패턴을 만든예이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>원형 그러데이션 반복</title>
  <style>
		div {
			width:500px;
      height:300px;
      border:1px solid #222;
			border-radius:10px;
      margin-bottom:30px;
		}
		.grad1 {
			background: red; 
			background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); 
		}
		.grad2 {
			background: #ccc; 
			background: repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); 
		}
  </style>
</head>
<body>
  <div class="grad1"></div>
  <div class="grad2"></div>
</body>
</html>

마무리문제1

이미지 삽입 x축만 반복, 왼쪽 아래 위치에 이미지 넣음, 배경이미지 위치 고정, 배경색 회색

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 1</title>
  <style>      
    body{
      color:white;
      background: url('./apple.png') repeat-x left bottom fixed;
      background-color: grey;
    }
	  h1 {
      margin-top:50px;
		  font-size: 20px;
		}
		p {
			font-size: 16px;
			line-height: 25px;
		}
  </style>
</head>
 <body>
	<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
	<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>					
 </body>
</html>

마무리문제 2

배경색은 검은색으로 글자색은 흰색으로, rgb표기법이용

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UFT-8">
  <title>연습문제 2</title>
  <style>
		.container {
			width:500px;
			padding:10px;
			border:1px solid #ccc;
      background: rgb(0, 0, 0);
      color:rgb(255, 255, 255);
		}
		h1 {
			font-size: 17px;
		}
		p {
			font-size: 16px;
			line-height: 25px;
		}

  </style>
</head>
 <body>
	<div class="container">
		<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
		<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>		
	</div>
</body>
</html>

마무리문제3

background 를 이용하여 배경색과 배경 이미지를 한번에 지정할수도있다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">    
  <title>연습문제 3</title>
  <style>   
		#container{
      background: white url('./apple.png') no-repeat right bottom fixed;
			margin:0 auto;	
			width:600px;
			height:700px;
			border:1px dotted gray;
			padding:20px;
      
		}
		img {	
			margin:30px 10px 30px 180px;
		}
		h1 {
      background: #004344;
      color: white;
			text-align:center;
			padding:20px;
		}
		h2 {
			text-align:center;
			font-style:italic;
			margin-bottom:50px;
		}
		h3 {
			color:#cf3b00;
		}
		ul{
			margin:20px;
      list-style-type:none;
		}	      
		li {
			line-height:30px;
		}
    body{
      background: #02233b;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>대학언론사 수습기자 모집</h1>
    <h2>신입생 여러분을 기다립니다</h2>
    <article>
      <h3>모집분야</h3>
      <ul>
        <li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
        <li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
        <li>엔지니어(0명) : 라디오 방송 녹음 및 편집 </li>
      </ul>
      <h3>혜택</h3>
      <ul>
        <li>수습기자 활동 중 소정의 활동비 지급</li>
        <li>정기자로 진급하면 장학금 지급</li>
      </ul>
    </article>
  </div>
</body>
</html>

'html, css, js' 카테고리의 다른 글

[CSS] transform속성, 트랜지션, 애니메이션 (0)	2023.02.17
[CSS] 고급 선택자(연결선택자,속성선택자,가상클래스 선택자) (0)	2023.02.16
[CSS] 박스모델(content,padding,border,margin) (0)	2023.02.14
[CSS] display 속성 (0)	2023.02.14
[CSS] 스타일 속성 모음 (0)	2023.02.14

ABOUT ME

lee-ding lee-ding

#배경색과 배경 범위지정하기

배경색을 지정하는 background-color 속성

배경색의 적용 범위를 조절하는 background-clip 속성

#배경 이미지 지정하기

웹 요소에 배경 이미지를 넣는 background-image 속성

배경 이미지의 반복 방법을 지정하는 background-repeat 속성

배경 이미지 위치를 조절하는 background-position 속성

배경 이미지의 위치를 지정하는 방법

배경 이미지의 적용 범위를 조절하는 background-origin 속성

배경 이미지를 고정하는 background-attachment 속성

background 속성 하나로 배경 이미지 제어하기

배경 이미지 크기를 조절하는 background-size 속성 !

#그라데이션 효과로 배경 꾸미기

선형 그러데이션을 만드는 linear-radient함수

방향

각도

색상 중지점

원형 그러데이션

모양

크기

위치

색상중지점

그러데이션을 사용해 패턴 만들기

'html, css, js' 카테고리의 다른 글

티스토리툴바

ABOUT ME

#배경색과 배경 범위지정하기

배경색을 지정하는 background-color 속성

배경색의 적용 범위를 조절하는 background-clip 속성

#배경 이미지 지정하기

웹 요소에 배경 이미지를 넣는 background-image 속성

배경 이미지의 반복 방법을 지정하는 background-repeat 속성

배경 이미지 위치를 조절하는 background-position 속성

배경 이미지의 위치를 지정하는 방법

배경 이미지의 적용 범위를 조절하는 background-origin 속성

배경 이미지를 고정하는 background-attachment 속성

background 속성 하나로 배경 이미지 제어하기

배경 이미지 크기를 조절하는 background-size 속성 !

#그라데이션 효과로 배경 꾸미기

선형 그러데이션을 만드는 linear-radient함수

방향

각도

색상 중지점

원형 그러데이션

모양

크기

위치

색상중지점

그러데이션을 사용해 패턴 만들기

'html, css, js' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바