박민섭

박민섭

어제보다 더 나은 코드를 위해!

html/css - 색상과 배경을 위한 스타일

업데이트:

웹에서 색상 표현하기

rgba 표기법

color : rgba(red, green, blue, alpha)

맨 끝의 값 alpha는 불투명도 값을 나타내는 것으로 0부터 1까지의 값 중에서 투명도를 표현할 수 있다.

색상 추출 사이트

이 사이트를 통해 16진수 색이나 rgb값 등 원하는 형태로 색을 추출할 수 있다.

배경 색과 배경 이미지

background-color속성 - 배경 색 지정하기

background-color:#00ff00;
background-color:rgb(0,255,0);
background-color:green;

background-color값은 상속되지 않는다. 페이지 전체에 색을 지정한 뒤 표나 목록 등 따로 배경색을 지정하고 싶다면 각 요소에서 직접 background-color 속성을 이용해 배경 색 값을 지정해야 한다.

image

background-clip속성 - 배경 적용 범위 조절하기

박스 모델 관점에서 배경 적용 범위를 조절할 수 있다. 박스 모델의 가장 외곽인 테두리(border)까지 적용할지, 테두리를 빼고 패딩(padding) 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있다.

속성 값 설명
border-box 박스 모델의 가장 외곽인 테두리(border)까지 적용한다.
padding-box 박스 모델에서 테두리를 뺀 패딩(padding)범위까지 적용한다.
content-box 박스 모델에서 내용 부분에만 적용한다. 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
      width: 300px;
      padding: 35px;
      border: 5px dotted #222;
      background:skyblue;
	  margin-bottom:20px;
    }
    .bg1 { background-clip:border-box;}
    .bg2 { background-clip:padding-box;}
    .bg3 { background-clip:content-box;}
    </style>
</head>

실행결과 (순차적)

image-20201127001029942

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

배경이미지는 배경색과 마찬가지로 문서 전체에 이미지를 지정하고 싶다면 body태그안에 지정하고 특정 영역에 배경 이미지를 만들고 싶다면 클래스 셀렉터나 id셀렉터를 이용해 태그에 배경 이미지를 지정하면 된다.

body {background-image: url('bg1.png');}
#area {background-image: url('bg2.png');}

주의!

background이미지가 채우려는 요소 크기보다 작을 경우, 해당 요소를 가득 채울 정도로 가로와 세로로 반복된다.

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

속성 값 설명
repeat 브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복한다.(기본값)
repeat-x 브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복한다.
repeat-y 브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복한다.
no-repeat 배경이미지를 한번만 표시하고 반복하지 않는다.

background-size 속성 - 배경이미지 크기 조절

속성 값 설명
auto 원래 배경 이미지 크기만큼 표시한다.(기본 값)
contain 요소 안에 배경 이미지가 다 들어가도록 이미지를 확대/축소한다.
cover 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소한다.
<크기 값=""> 너비 값과 높이 값을 지정한다. 너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정한다.
<백분율> 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고 그 크기에 맞도록 배경 이미지를 확대하거나 축소한다. 
<head>
  <meta charset="utf-8">
  <title>배경 이미지</title>
  <style>
    div{
      width:500px;
      height:500px;
      border:2px double black;
			margin-bottom:20px;
    }
    .bg1{
      background:url('images/bg4.jpg') no-repeat left top;
      background-size:auto;
    }
    .bg2 {
      background:url('images/bg4.jpg') no-repeat left top;
      background-size:200px 150px;
    }
    .bg3 {
      background:url('images/bg4.jpg') no-repeat left top;
      background-size:60% 40%;
    }
    .bg4 {
      background:url('images/bg4.jpg') no-repeat left top;
      background-size:contain;
    }
     .bg5 {
      background:url('images/bg4.jpg') no-repeat left top;
      background-size:cover;
    }
    .bg6{
      background:url('images/bg4.jpg') no-repeat left top;
      background-size:100% 100%;
    }
  </style>
</head>
<body>
  <div class="bg1"></div>
	<div class="bg2"></div>
	<div class="bg3"></div>
	<div class="bg4"></div>
	<div class="bg5"></div>
	<div class="bg6"></div>
 </body>

bg1

image

bg2, 3

image-20201127084941280

bg4, 5

image

bg 6

image-20201127085039007

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

키워드 표시법, px표시법

  • 수평위치는 left, right, center중에서 선택할 수 있다.

  • 수직 위치는 top, bottom중에서 표시할 수 있다.
  • px로 위치를 직접 지정할 수도 있다.
  <style>
    div {
      position: relative;
      margin-bottom:20px;
    }
    button {
      left:20%;
      width:140px;
      height:50px;
      background-color: rgb(0, 110, 255);
      border:1px solid rgb(0,110,255);
      border-radius:8px;
      color:#fff;
      font-weight:bold;
   }    
    #bg1 {
      background-image:url('images/light.png');
      background-repeat:no-repeat;
      background-position:5px 7px;
    }
    #bg2 {
      background-image:url('images/light.png');
      background-repeat:no-repeat;
      background-position: right center;      
    }
  </style>

image

첫번째 이미지는 px로 위치를 지정한 것이고 아래쪽 이미지는 키워드로 위치를 지정한 것이다.

백분율(%) 표시법

백분율로 표시하는 것은 주어진 요소의 해당 위치에 배경 이미지의 위치를 백분율로 맞춘다는 뜻이다. background-position: 30% 60%;라면 배경 이미지 요소의 왼쪽 모서리로부터 가로 30%, 세로 60%에 배경이미즈의 위치를 맞춘다.

background-origin속성 - 배경 이미지 배치할 기준 조절하기

속성 값 설명
border-box 박스 모델의 가장 외곽인 테두리(border)가 기준이 된다.
padding-box 박스 모델에서 테두리를 뺀 패딩(padding)이 기준이 된다.(기본 값)
centent-box 박스 모델에서 내용 부분이 기준이 된다.

image

다음 예제는 너비 400px의 박스 모델에서 테두리를 15px로 하고 패딩을 35px로 했을 때 bacground-origin속성 값에 따라 배경 이미지가 어디서부터 시작되는지를 비교한다.

  <style>
    div {
      width:400px;
      height:200px;
      padding: 35px;
      border: 15px  solid #ccc;        
			margin-bottom:20px;
    }
    .bg1 { 
      background:url('images/bg3.jpg') no-repeat;    
      background-origin:padding-box;
    }
    .bg2 { 
      background:url('images/bg3.jpg') no-repeat;     
      background-origin:border-box;
    }
    .bg3 { 
      background:url('images/bg3.jpg') no-repeat;    
      background-origin:content-box;
    }
  </style>
</head>
<body>
  <div class="bg1"></div>
	<div class="bg2"></div>
	<div class="bg3"></div>
 </body>

bg1 - background-origin:padding-box

배경 이미지가 패딩 영역부터 시작한다.

image

bg2 - background-origin:border-box

배경 이미지가 테두리부터 시작된다.

image

bg3 - background-origin:content-box

배경 이미지가 콘텐트 영역부터 시작된다.

image-20201127091357256

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

스크롤을 내렸을 때 배경 이미지도 함께 이동되는 것을 막고싶다면 background - attachment 속성을 이용한다.

속성 설명
scroll 화면 스크롤과 함께 배경 이미지도 스크롤된다. (기본 값)
fixed 화면이 스크롤되더라도 배경 이미지는 고정된다.

background - attachment : fixed; 로 설정하면 웹 문서 화면을 아래로 스크롤하더라도 배경 이미지는 고정되고 내용이 이미지 위에 떠 있는 것처럼 보인다.

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

입력 순서에 상관 없이 배경 이미지 관련 속성을 background라는 하나의 속성으로 줄여 사용할 수 있다.

background:url('images/bg3.jpg') no-repeat fixed right bottom

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

그라데이션과 브라우저 접두사, 선형 그라데이션

  • 그라데이션은 구현이 복잡하여 브라우저 사이의 지원 방법이 모두 달랐다. 현재는 많이 표준화 되었지만 아직 웹상에는 이전 버전의 브라우저가 남아있으므로 현재의 표준화된 구문 외에도 그라데이션을 지원하지 않는 브라우저를 모두 고려하여 함께 소스를 입력해야 한다.

  • 방향을 지정할때는 끝 지점을 기준으로 ‘to’ 키워드와 함께 사용한다. 선형 그라데이션의 위치나 각도 옵션을 생략하면 ‘to bottom’으로 인식한다.

속성 값 설명
to top 아래에서 시작해 위로 그라데이션이 만들어진다.
to left 오른쪽에서 시작해 왼쪽으로 그라데이션이 만들어진다.
to right 왼쪽에서 시작해 오른쪽으로 그라데이션이 만들어진다.
to bottom 위에서 시작해 아래로 그라데이션이 만들어진다. 
<style>
    .grad {
        background : blue; /*그라데이션을 지원하지 않는 브라우저용*/
        /*사파리 5.1 ~ 6.0*/
        background : -webkit-liner-gradient(left top, blue, white);
        /*파이어폭스 3.6 ~ 15*/
        background : -moz-liner-gradient(right bottom, blue, white);
        /*오페라 11.1 ~ 12.0*/
        background : -o-liner-gradient(right bottom, blue, white);
        /*표준 구문*/
        background : liner-gradient(right bottom, blue, white);
    }
</style>

image

각도를 사용해 선형 그라데이션 만들기

image

  <style>
		div {
			width:500px;
			height:300px;
			border-radius:10px;
		}
  	.grad { /* 45도 (오른쪽 위) 방향으로, 빨강에서 흰색으로 */
  		background: #ff0000; /* CSS3 미지원 브라우저*/
  		background: -webkit-linear-gradient(45deg, #ff0000, #ffffff); /* 초기 모던 브라우저 */
  		background: -moz-linear-gradient(45deg, #ff0000, #ffffff); /* 초기 모던 브라우저 */
  		background: -o-linear-gradient(45deg, #ff0000, #ffffff); /* 초기 모던 브라우저 */
  		background: linear-gradient(45deg, #ff0000, #ffffff); /* 최신 모던 브라우저 */
  	}
  </style>

linear-gradient(45deg, #ff0000, #ffffff)

image

순서대로 끝부분 각도, 시작 색상, 끝 색상을 의미한다.

색상 중지 점(color-stop)

색상 중지 점을 지정할 때는 색상만 지정할 수도 있고 색상과 함께 중지 점의 위치도 함께 지정할 수도 있다.

image

 <style>
		div {
			width:500px;
			height:300px;
		}
  	.grad {
  		background: #06f; /* css3 미지원 브라우저 */
  		background-image: -webkit-linear-gradient(top, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
  		background-image: -moz-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
  		background: -o-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
  		background: linear-gradient(to bottom, #06f, white 30%, #06f); /* 최신 모던 브라우저 */
  	}
  </style>

linear-gradient(to bottom, #06f, white 30%, #06f);

괄호안의 속상값이 순서대로 시작 위치, 시작 색상, 중지 점 색상과 위치, 끝 색상이다.

원형 그라데이션

원형 그라데이션에서는 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그라데이션의 모양을 지정해야 한다.

모양

원형 그라데이션으로 만들어지는 모양은 circle(원형)과 elipse(타원)이다. 따로 지정하지 않으면 elipse(타원)로 인식한다.

image

  <style>
		div {
			width:500px;
			height:300px;
			margin:10px;
		}
		.grad1{
			background:red;
			background:-webkit-radial-gradient(white, yellow, red);
			background:-moz-radial-gradient(white, yellow, red);
			background:-o-radial-gradient(white, yellow, red);
			background:radial-gradient(white, yellow, red);
		}
		.grad2{
			background:red;
			background:-webkit-radial-gradient(circle, white, yellow, red);
			background:-moz-radial-gradient(circle, white, yellow, red);
			background:-o-radial-gradient(circle, white, yellow, red);
			background:radial-gradient(circle, white, yellow, red);
		}
  </style>

위치

그라데이션이 시작하는 원의 중심도 지정할 수 있다. 선형 그라데이션과 마찬가지로 ‘위치’속성 부분은 표준 구문과 이전 구문 사이에 큰 차이가 있기 때문에 주의해야 한다. 표준 구문에서는 ‘모양’과 ‘크기’속성 다음에 at키워드와 함께 위치 값을 지정하는데 브라우저 접두사를 붙이는 구문에서는 at키워드 없이 구문의 맨 앞부분에 위치를 표시한다.

사용할 수 있는 위치 값은 키워드(left, center, right중 하나, top, center, bottom중 하나)나 30%, 20%와 같은 백분율이다. 생략하면 가로 세로 모두 중앙인 center로 인식한다.

image

  <style>
	div {
		width:500px;
		height:300px;
		margin:10px;
	}
  	.grad {
  		background: blue;
  		background: -webkit-radial-gradient(10% 10%, circle, white,blue);
  		background: -moz-radial-gradient(10% 10%, circle,white,blue);
  		background: -o-radial-gradient(10% 10%, circle, white,blue);
  		background: radial-gradient(circle at 10% 10%,white,blue);
  	}
  </style>

크기

그라데이션 원의 크기도 지정할 수 있다.

  1. closet-side 속성 값

    이 속성 값을 사용하면 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 모서리와 만난다.

    image

  2. closet-corner 속성 값

    그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 코너에 닿도록 한다.

    image-20201128124530344

  3. farthest-side 속성 값

그라데이션 중심에서 가장 먼 모서리와 만나게 한다.

image

  1. farthest-corner 속성 값

    그라데이션 가장자리가 그라데이션 중심에서 가장 먼 코너에 닿도록 한다. 기본값

    image

색상 중지 점(color-stop)

그라데이션에서 색상이 바뀌는 부분을 색상 중지 점(color-stop)이라고 하는데

image-20201128131552726

  <style>
	div {
		width:500px;
		height:300px;
		margin:10px;
	}
    .grad1{
		background:skyblue;
	  background:-webkit-radial-gradient(red, yellow, skyblue);
		background:-moz-radial-gradient(red, yellow, skyblue);
		background:-o-radial-gradient(red, yellow, skyblue);
		background:radial-gradient(red, yellow,skyblue);
    }
    .grad2{
		background:skyblue;
	    background:-webkit-radial-gradient(red, yellow 20%, skyblue);
		background:-moz-radial-gradient(red, yellow 20%, skyblue);
		background:-o-radial-gradient(red, yellow 20%, skyblue);
		background:radial-gradient(red, yellow 20%, skyblue);
    }
  </style>

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

선형 그라데이션을 반복할 때는 repeating-linear-gradient를 사용하며 원형 그라데이션의 반복은 repeating-radial-gradient를 사용한다.

image

  <style>
		div {
			width:500px;
			height:300px;
			border-radius:10px;
      margin:10px;
		}

		.grad1 {
			background: red; /* css3 미지원 브라우저 */
			background: -webkit-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */
			background: -moz-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */
			background: -o-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */
			background: repeating-linear-gradient(yellow, red 20px); /* 최신 모던 브라우저 */
		}

  </style>

반복되는 선형 그라데이션을 만들 때 시작 색상과 끝 색상을 명확히 구분해 주면 색상이 중간에 섞이지 않고 두 개 이상의 색상을 반복적으로 표시할 수 있다.

image-20201128132000598

  <style>
		div {
			width:500px;
			height:300px;
			border-radius:10px;
      margin:10px;
		}

		.grad2 {
			background: red; /* css3 미지원 브라우저 */
			background: -webkit-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); /* 초기 모던 브라우저 */
			background: -moz-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); /* 초기 모던 브라우저 */
			background: -o-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); /* 초기 모던 브라우저 */
			background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); /* 최신 모던 브라우저 */
		}
  </style>

원형 그라데이션의 경우도 같은 방법으로 그라데이션 반복을 활용한다.

image-20201128132050358

 <style>
		div {
			width:500px;
			height:300px;
			border-radius:10px;
      margin:10px;
		}
		.grad1 {
			background: #ccc; /* css3 미지원 브라우저 */
			background: -webkit-repeating-radial-gradient(circle, white, #ccc 10%); /* 초기 모던 브라우저 */
			background: -moz-repeating-radial-gradient(circle, white, #ccc 10%); /* 초기 모던 브라우저 */
			background: -o-repeating-radial-gradient(circle, white, #ccc 10%); /* 초기 모던 브라우저 */
			background: repeating-radial-gradient(circle, white, #ccc 10%); /* 최신 모던 브라우저 */
		}
		.grad2 {
			background: #ccc; /* css3 미지원 브라우저 */
			background: -webkit-repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); /* 초기 모던 브라우저 */
			background: -moz-repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); /* 초기 모던 브라우저 */
			background: -o-repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); /* 초기 모던 브라우저 */
			background: repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); /* 최신 모던 브라우저 */
		}
  </style>

태그: ,

카테고리: ,

업데이트:

댓글남기기

참고