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

CSS

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

CSS / 표(table) 꾸미기 / 크기 정하기

표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...

CSS / Flex / align-content

flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다. 기본값은 stretch로, 높이를 꽉 채웁니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 구글 웹폰트 사용하는 방법

구글에서 많은 웹폰트를 제공하고 있다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아본다. 글꼴 선택하고 코드 얻기 구글 웹폰트에 접속한다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정한다. + 버튼을 클릭하여 글꼴을 선택한다. 여러 개를 선택해도 된다. 아래에 있는 검은 색 바를 클릭한다. 구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 ...

CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기

웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소 ::selection입니다. 다음은 텍스트를 선택했을 때 배경은 검은색으로, 글자는 노란색으로 만드는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ::selection { background-color: black; color: yellow; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. ...

CSS / float와 overflow

float float는 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성입니다. float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 됩니다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용합니다. overflow overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. ...

CSS / 양쪽 배분(균등 분할) 정렬 방법

문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다. 하지만 CSS에는 그러한 정렬이 없습니다. text-align 속성의 justify가 있지만, 그건 빈 공간을 늘려서 양 끝으로 맞추는 게 아닙니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> ...

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 사용합니다. turn은 1회전, 즉 360deg를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 ...

CSS / 기초 / !important

CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙인다. property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만든다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 ...

CSS / 도형 만들기 / 삼각형

CSS로 삼각형을 만들 수 있습니다. 사용하는 속성은 border입니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아보겠습니다. 삼각형 만들기 기본 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. <div class="triangle"></div> 가로와 세로의 크기를 0으로 만듭니다. 아래쪽, 왼쪽, 오른쪽에 테두리를 추가하면 사각형을 만들 수 있습니다. .triangle { width: 0px; height: 0px; border-bottom: 360px solid ...

CSS / font-weight / 글자 굵기 정하는 속성

CODING FACTORY