배경늘리기, 그라데이션 등 자주 쓰일법한 CSS문법
1.배경설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Order </title>
<style>body {
background-image: url("images/bg.jpeg");
background-color: #93B874;
}
</style>
background-color: green; -> 영어를 사용한 단색배경설정,
background-color: #93B874; -> 컬러 코드를 사용한 단색 배경설정,
그런데, 초록도 여러 초록색이 있기에..
수많은 색깔 가운데 단하나의 원하는 컬러를 찾고 싶은경우,
아래의 사이트에 들어가서 원하는 색의 컬러코드를 찾아보도록 하자.
HTML 컬러 코드
HTML 컬러 차트 사각형 모양의 컬러버튼을 클릭하여 HTML 컬러 코드를 찾으세요. HTML 컬러 코드 이론 "이 이상한 기호와 숫자와의 조합이 어떤 의미가 있을까?" 하고 궁금하신가요. 그 답은 "예" 입
html-color-codes.info
2. 배경 이미지 확대하기
배경을 지정하면 바둑판식 배열로 따다닥 붙여진 걸 볼수가 있다.
이걸 전체화면으로 확대를 해주려면 cover를 사용하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Order sushi Button</title>
<style>body {
background-image: url("images/bg.jpeg");
background-size: cover;
}
</style>
background-image: url("images/bg.jpeg");
-> 지정한 이미지 파일을 배경으로 씀
background-size: cover;
->지정한 이미지 파일을 전체화면으로 변경해줌.
3. 배경겹치기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Order</title>
<style>body {
background-image: url("images/tamago.png"),url("images/bg.jpeg");
background-color: #93B874;
}
</style>
background-image: url("images/tamago.png"),url("images/bg.jpeg");
-> 첫번째 url가 제일 앞에 오고, 두번째가 그 뒤에
background-color: #93B874;
-> 한번더 배경화면을 설정해주는 것은 사진경로가 잘못되었을 경우를 대비해서 깔아두는 것.
4. 그라데이션
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Order</title>
<style>body {
background: linear-gradient(#EBA9DB, #CCB1DA, #A6CAF4, #ADF1D3);
background-color: #93B874;
}
</style>
background: linear-gradient(원하는색1, 원하는색2, 원하는색3..........);
-> 원하는 글자색을 찍어넣으면 색1~색2~색3 을 자연스럽게 그라데이션 하면서 이어지게 해준다.
예)
나는 분홍, 보라, 파랑, 초록 네가지 색을 찍어넣었고, 위의 사진과 같이 자연스럽게 그라데이션 됨.
이 그라데이션의 방향도 설정할수 있는데, 각도로 설정하는 방법과 영어로 설정하는 방법이 있음
설정법은 원하는 색을 적기 전에 제일 처음에 원하는 방향을 써주는 것이다.
background: linear-gradient(원하는 방향,원하는색1, 원하는색2, 원하는색3..........);
방향설정을 안 하면 기본적으로 위에서 밑으로 내려가는 방향으로 설정됨.
처음에 적은 색1(분홍)이 위에있고 마지막으로 적은 색4(초록색)이 제일 밑에있음.
영어로 설정하는 법 : to right / to left / to bottom / to top이있다.
background: linear-gradient(to right,원하는색1, 원하는색2, 원하는색3..........);
->그라데이션이 -----> 이 방향으로 진행됨.
색1이 제일 왼쪽에서 시작되고, 제일 마지막 색깔이 오른쪽에서 끝남.
background: linear-gradient(to left,원하는색1, 원하는색2, 원하는색3..........);
->그라데이션이 <----- 이 방향으로 진행됨.
색1이 제일 오른쪽에서 시작되고, 제일 마지막 색깔이 왼쪽에서 끝남.
background: linear-gradient(to top,원하는색1, 원하는색2, 원하는색3..........);
->그라데이션이 ↑ 이 방향으로 진행됨.
색1이 제일 밑에서 시작되고, 제일 마지막 색깔이 제일 위에서 끝남.
background: linear-gradient(to bottom,원하는색1, 원하는색2, 원하는색3..........);
->그라데이션이 ↓ 이 방향으로 진행됨.
색1이 제일 위에서 시작되고, 제일 마지막 색깔이 제일 밑에에서 끝남.
기본적으로 방향설정을 안하면 to bottom으로 설정됨.
각도로 설정하는 법 : 원하는 진행각도 + deg
0deg = 0도 방향, to top이랑 똑같음, 밑에서 위로 ↑진행됨.
180deg = 180도 방향, to bottom이랑 똑같음, 위에서 밑으로 ↓진행됨.
90deg = to right랑 똑같음, 왼쪽에서 오른쪽으로 →진행됨.
270deg = to left랑 똑같음. 오른쪽에서 왼쪽으로 ←진행됨
45deg = 대각선방향, 왼쪽아래에서 오른쪽 위로 ↗ 진행됨
-45deg = 대각선방향, 오른쪽 아래에서 왼쪽 위로 ↖ 진행됨
135 deg = 대각선 방향, 왼쪽위에서 오른쪽 아래로 ↘ 진행됨.
-135deg = 대각선 방향, 오른쪽 위에서 왼쪽 아래로 ↙진행됨