색깔
https://www.w3schools.com/colors/colors_picker.asp
https://www.webfx.com/web-design/color-picker/

CSS스타일

1. text 정렬,간격

(1)정렬

	<style>
       	.rtl { direction:rtl;} /* 오른쪽 정렬 */
        .ltr { direction:ltr;} /* 왼쪽 정렬 */
        .a{text-align:left;} /* 왼쪽 */
        .b{text-align:right;} /* 오른쪽 */
        .c{text-align:center;} /* 중앙 */
        .d{text-align:justify;} 
  	</style>

(2)줄 간격

	<style>
        .small-line{line-height: 0.7;} /* 줄 사이 간격 좁게 */
        .big-line{line-height: 2;}/* 줄 사이 간격 넓게 */
    </style>

2.list-style

(1)ul

ul: square | desc | circle | none
-ul태그 앞 모양을 바꿀 수 있다.

	<style>
        .s1{list-style-type:none;} /* 지우기 */
        .s2{list-style-type:circle;} /* 빈동그라미 */
        .s3{list-style-image: url(./images/dot.png);} /* 이미지 */
	</style>

(2)들여쓰기, 내어쓰기

들여쓰기, 내어쓰기 : inside | outside

    <style>
		.s5{list-style-position: inside;}
        .s6{list-style-position: outside;}
    </style>

3.background

(1) background-position

-<수평위치>: left | center | right | <백분율> | <길이값>
-<수직위치>: top | center | bottom | <백분율> | <길이값>

    <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;}
    #bg3{background-image:url(./images/light.png);
        background-repeat: no-repeat;
        background-position: 0% 0%;}
    </style> 

(2)background-attachment

-background-attachment: fixed | scroll

   <style>
        body{
            background:url(./images/bottom-bg.jpg) no-repeat center bottom;
            background-attachment: fixed; /* 배경이 고정됨 */
        }
        div{width:500px; height:auto; margin:0 auto;}
        h1{background-color:black;
        color:white; text-align: center; /*text를 중앙에 위치*/
        padding:10px}
    </style>

4. 그라데이션

선형 : 색상이 수직,수평,대각선 방향으로 일정하게 변하는 것
linear-gradient(<각도> to <방향>, color-stop[,color-stop,..])
to top: 아래 -> 위
to left: 오른쪽 -> 왼쪽
to right: 왼쪽 -> 오른쪽
to bottom: 위 -> 아래