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도의 방향으로 그라데이션을 만듭니다.
색은 여러개 입력할 수 있습니다. 입력한 순서로 설정한 방향으로 그라데이션을 만듭니다. 예를 들어
linear-gradient( to right, yellow, red )
는 왼쪽에서 오른쪽으로 노란색과 빨간색 순서로 그라데이션을 만듭니다.
예제 1
방향에 따라 그라데이션이 어떻게 만들어지는지 비교하는 예제입니다.
<!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% 이하에는 빨간색, 나머지는 보라색으로 그라데이션을 만듭니다.
예제 2
색 뒤에 길이를 정하여 그라데이션을 만드는 예제입니다.
<!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는 그라데이션을 반복합니다.
예제 3
그라데이션을 반복하는 예제입니다.
<!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>
버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...
CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성
개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정한다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둔다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앤다. 겹치는 부분은 한 줄로 나타낸다. initial : 기본값으로 ...
반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 ...
justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다. 기본값은 flex-start로 시작점부터 아이템을 배치합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { ...
구글에서 많은 웹폰트를 제공하고 있다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아본다. 웹폰트 선택하기 웹브라우저로 Google Fonts에 접속한다. 왼쪽에서 적절히 필터한다. 한글 글꼴이 필요하다면 Language를 Korean으로 한다. 원하는 글꼴을 클릭한다. 사용할 스타일을 선택한다. 오른쪽에 선택한 글꼴과 스타일이 나오고, 웹폰트를 사용하기 위한 코드 예시가 나온다. 여러 글꼴과 스타일을 선택할 수도 있다. 웹폰트 사용하기 예를 들어 Noto Sans Korean 100과 400을 ...
선택자 링크는 <a> 태그로 만듭니다. 따라서 <a> 태그를 선택하여 꾸밉니다. 예를 들어 a { color: red; } 는 링크의 색을 빨간색으로 만듭니다. 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. a:link - 방문하지 않은 링크 a:visited - 방문했던 링크 a:hover - 마우스가 올려진 링크 a:active - 클릭하는 순간 링크 주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 ...
CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성
개요 background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat : 가로 방향, 세로 방향으로 반복합니다. repeat-x : 가로 방향으로 반복합니다. repeat-y : 세로 방향으로 반복합니다. no-repeat : 반복하지 않습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> ...
CSS / 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법
순서 있는 목록은 ol 태그로 만듭니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-size: 40px; } ...
CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성
backface-visibility backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 backface-visibility: visible | hidden | initial | inherit visible : 보이게 합니다. 기본값입니다. hidden : 보이지 않게 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 180도 회전합니다. 첫 번째 박스는 앞면이 보이고, 두 번째 박스는 ...
CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성
개요 background-size로 배경 이미지의 가로 크기와 세로 크기를 정할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 background-size: auto | length | cover | contain | initial | inherit auto : 이미지 크기를 유지합니다. length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 ...