#my-button{ }
글씨 색을 설정한다.
#my-button{
color:#ff0000;
}
요소 배경색을 설정한다.
#my-button{
background-color: #ff33ff;
}
요소 테두리 스타일을 설정한다.
dotted / dashed / solid / double / groove / redge / inset / outset / none / hidden
#my-button{
border-style: dashed;
}
요소 테두리 두께를 설정한다.
#my-button{
border-style: solid;
border-width: 10px;
}
요소 테두리 색깔를 설정한다.
#my-button{
border-style: solid;
border-width: 10px;
border-color: #ff00ff;
}
요소 테두리에 둥근 모서리를 설정한다.
#my-button{
/* border 관련속성은 묶어 쓸 수 있다 */
border: solid 10px #ff00ff;
border-radius: 20px;
}
요소 안쪽에 여백을 설정한다.
#my-button{
/* border 관련속성은 묶어 쓸 수 있다 */
border: solid 1px #000000;
padding: 20px;
}
#my-button{
border: solid 1px #000000;
/* padding 속성값을 2개주면 상하 좌우로 적용할 수 있다 */
padding: 20px 40px;
}
#my-button{
border: solid 1px #000000;
/* padding 속성값을 4개주면 위 오른쪽 아래 왼쪽 순서로 적용할 수 있다 */
padding: 20px 5px 10px 50px;
}
요소의 가로, 세로 폭을 설정한다.
#my-button{
border: solid 1px #000000;
width: 150px;
height: 200px;
}
요소에 그림자를 설정한다
#my-button{
border: solid 1px #000000;
background-color: white;
padding:20px;
/* box-shadow: x축 y축 색깔; */
box-shadow: 10px 10px #000000;
}
그림자의 흐림 정도를 조절할 수 있다.
#my-button{
border: solid 1px #000000;
background-color: white;
padding:20px;
/* box-shadow: x축 y축 흐림 색깔; */
box-shadow: 10px 10px 10px #000000;
}
요소에 배경이미지를 설정한다.
#my-button{
padding: 20px;
/* background-image: url( '이미지경로' ); */
background-image:url( ' pattern1.gif ' );
}
요소를 원래 위치에서 이동시킨다.
#my-button{
border: solid 1px #000000;
padding: 20px;
transform: translate(50px, 100px);
}
요소를 회전 시킨다.
#my-button{
border: solid 1px #000000;
padding: 20px;
transform: rotate(30deg);
}
요소를 기울인다.
#my-button{
border: solid 1px #000000;
padding: 20px;
transform: skewX(30deg);
}
#my-button{
border: solid 1px #000000;
padding: 20px;
transform: skewY(30deg);
}
요소를 크기를 키우거나 줄인다.
#my-button{
border: solid 1px #000000;
padding: 20px;
/* transform: scale(배율); */
transform: scale(3);
}
transform 안의 여러 속성값을 함께 쓸 수 있다.
#my-button{
border: solid 1px #000000;
padding: 20px;
transform: scale(3) rotate(-60deg) skewY(30deg);
}
요소에 커서가 닿았을 때 모양을 설정한다
#my-button{
border: solid 1px #000000;
padding: 20px;
cursor: pointer;
}
#my-button:hover{
background-color:green;
}
요소에 마우스를 올렸을 때의 상태를 설정한다.
#my-button{
border: solid 1px #000000;
padding: 20px;
}
#my-button:hover{
background-color:#000000;
color:#ffffff;
}
요소를 마우스로 눌렀을 때 상태를 설정한다.
#my-button{
border: solid 1px #000000;
padding: 20px;
}
#my-button:hover{
background-color:#000000;
color:#ffffff;
}
#my-button:active{
background-color:#ff00ff;
}
상태가 변할때 부드럽게 연결되어 적용되도록 한다/
#my-button{
border: solid 1px #000000;
padding: 20px;
/* transition: 적용속성 진행시간 속도변화; */
transition: all 0.5s linear;
}
#my-button:hover{
background-color:#000000;
color:#ffffff;
transition: all 0.5s linear;
}
#my-button:active{
background-color:#ff00ff;
transition: all 0.5s linear;
}
#my-button{
border: solid 3px #000000;
border-radius:20px;
padding: 20px;
cursor:pointer;
box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
/* transition: 적용속성 진행시간 속도변화; */
transition: all 0.3s ease-in-out;
}
#my-button:hover{
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
transition: all 0.3s ease-in-out;
}
#my-button:active{
background-color:#ddd;
box-shadow: 0 0 rgba(0,0,0,0.5);
transition: all 0.3s ease-in-out;
}
폰트 사이즈를 설정한다
#my-button{
border: solid 1px #000000;
padding: 20px;
font-size:30px;
}
폰트 두께를 설정한다.
normal / bold / bolder / lighter / number(100~900)
#my-button{
border: solid 1px #000000;
padding: 20px;
font-weight:bold;
}
폰트 종류를 설정한다. 원하는 폰트를 설정하기위해선 미리 불러와야한다.
구글 폰트에서 영문 폰트를 제공받을 수 있다. https://fonts.google.com/
/* CSS 최상단에 폰트를 import 한다. */
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
#my-button{
border: solid 1px #000000;
padding: 20px;
font-size:30px;
font-family: 'Permanent Marker', cursive;
}