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 );
}
표와 관련된 정렬 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 표 : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬 입니다. <!doctype html> <html lang="ko"> <head> ...
CSS / border-width / 테두리 두께 정하는 속성
개요 border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성이다. border-top-width border-right-width border-bottom-width border-left-width 문법 border-width: medium | thin | thick | length | initial | inherit; initial : 기본값으로 설정한다. 기본값은 medium이다. inherit : 부모 요소의 속성값을 상속받는다. 속성값은 한 개에서 네 개까지 정할 수 있다. 다음은 모든 테두리의 두께를 xx로 만든다. border-width: xx 다음은 위쪽과 아래쪽 테두리의 두께는 xx로, 왼쪽와 오른쪽의 두께는 yy로 ...
CSS / 표(table) 꾸미기 / 반응형 표 만들기
데이터를 잘 정리해서 보여줄 때 표를 이용한다. 표는 일정한 가로 크기를 갖고 있어야 보기 좋다. 그런데, 모바일 접속자를 위해서 가로 크기를 100%로 하면 문제가 발생한다. 다음은 가로 크기가 100%인 간단한 표이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 100%; } td { padding: 20px; border: 1px solid #444444; } </style> </head> <body> <div> <table> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> <tr> <td>Lorem</td> <td>Lorem Ipsum Dolor Lorem Ipsum Dolor</td> <td>Dolor</td> </tr> </table> </div> </body> </html> 웹브라우저의 가로 크기가 클 때는 ...
이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다. 두 방법 모두 아래처럼 이미지를 가운데에 놓습니다. 방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="images/200x200.png" alt=""> </div> </body> </html> 방법 2 부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 ...
짧은 밑줄 만들기 밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 그런데 그렇게 만든 밑줄은 선택한 요소 전체에 적용됩니다. 즉, 요소가 길면 밑줄도 길게 만들어지고, 요소가 짧으면 밑줄도 짧게 만들어집니다. 요소보다 짧은 밑줄을 만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을 만들고 위치와 길이를 정해주면 됩니다. 예를 들어 h1 요소에 짧은 밑줄을 만들고 싶다면 다음과 ...
flex-direction으로 Item의 배열 방향을 정합니다. 기본값은 row로, 왼쪽에서 오른쪽으로 배열합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { height: 400px; padding: ...
반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 ...
CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수
개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수이다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 설정한다. 문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈이다. 곱셈과 나눗셈의 좌우에는 공백이 없어도 된다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 한다. 계산 순서 왼쪽에서 오른쪽으로 계산한다. 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 나중에 한다. 괄호가 있으면 ...
CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성
개요 HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-origin: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역 왼쪽 위부터 채웁니다. padding-box : 안쪽 여백 영역 왼쪽 ...
CSS / clip / 요소의 특정 부분만 보이게 하는 속성
개요 clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2 문법 clip: auto | shape | initial | inherit auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 ...