📍 button

: 사용자가 클릭할 수 있는 요소이다.

<input type="button" value="버튼">
<button type="button">버튼</button>

: 버튼은 2가지 코드로 작성할 수 있다. input은 빈태그 요소이기 때문에 value 특성에 텍스트 값만 지정할 수 있다. button은 열고 닫을 수 있어 그 사이 여러 컨텐츠를 삽입하거나 가상요소를 사용할 수 있다.

a 태그와 button 태그의 차이
: a 태그는 다른 페이지 혹은 페이지 내의 특정 영역으로 이동하기 때문에 하이퍼링크 역할을 가지고 있다. button 태그는 브라우저 기본 동작이 없어 사용자의 동작 실행을 위한 트리거 역할을 한다.

---

📍 CSS 선택자

✅ 동적 가상 선택자

<!-- HTML -->
<button type="button" class="btn">Button</button>
<button type="button" class="btn" disabled>Button</button>

/* CSS */
button{
       width: 88px;
       height: 32px;
       background: #343F50;
       border: 1px solid #1A202C;
       margin: 10px auto;
       padding: 9px 25px;
       color: #CBD5DF;
       font-weight: bold;
       box-shadow: 1px 1px 0px 0px #888888 inset;
        }
.btn:hover{
       text-decoration: underline;
       color: #fff;
        }
.btn:active{
       text-decoration: underline;
       color:#fff;
       box-shadow: 1px 1px 0px 0px #262F3E inset;
        }
.btn:disabled{
       color:#4A5568;
        }

• hover : 마우스 커서를 요소 위에 올려두었을 때

• :active : 클릭 시 활성화

• :disabled : 비활성화

<button type="button" disabled>버튼</button>

✅ 속성 선택자

• [속성이름] : 해당 속성을 가진 모든 요소를 선택

• [속성이름 ~= "속성값"] : 특정 문자열로 이루어진 단어를 포함한 요소 모두 선택

• [속성이름 |= "속성값"] : 특정 문자열을 포함하거나 특정 문자열로 시작하면서 하이픈 기호가 있는 태그

• [속성이름 ^= "속성값"] : 특성 문자열로 시작하는 요소를 모두 선택

• [속성이름 $= "속성값"] : 특성 문자열로 끝나는 요소를 모두 선택

• [속성이름 *= 속성값] : 특정 문자열를 포함하는 요소 모두 선택

---

📍 CSS 속성

✅ transform

: 요소에 다양한 변형을 줄 수 있는 속성이다.

• scale: 요소의 크기를 조절할 수 있다.

/* x축 y축 별도로 크기를 지정*/
transform: scale(1.5 2.5); 
/* 기준점을 변경 */
transform-origin: top left;

• rotate: 요소를 회전 시킬 수 있다.

transform: rotate(45deg);

• translate: 자신의 위치에서 x,y축으로 이동시킬 수 있다.

transform: translate(20px, 40px);
/* 음수값도 가능 */
transform: translate(-20px, 40px);

• skew: 요소를 왜곡시키는 속성이다. 각도 단위를 사용한다.

transform: skew(30deg, 20deg);

• mix: 모두 합쳐서 사용할 수 있다.

transform: translate(20px, 40px) rotate(135deg) skew(30deg, 20deg);

✅ transition

: CSS 속성값이 변할 때 값의 변화가 일정 시간에 걸쳐 일어나도록 한다.
transition-property | transition-duration | transition-timing-function | transition-delay의 순서로 작성 가능한 단축 속성이다.

transition: background-position 0.8s linear 5s;

• transition-property: 전환 효과를 적용할 CSS 속성을 설정한다.

• transition-duration: 지속 시간을 설정한다.

• transition-timing-function: 진행 속도를 설정한다. 속성 값으로 ease, linear, step(int, start|end) 등이 있다.

• transition-delay: 지연시간을 설정한다.

•

✅ animation

: JavaScript 없이 요소에 애니메이션 효과를 적용할 수 있다. transition으로 애니메이션을 실행할 수 있지만 animation은 요소의 상태 변화와 상관없이 애니메이션 실행이 가능하다. @keyframes를 통해 animation을 실행할 수 있다.

.image{
	animation: animation 0.8s infinite steps(4);
|

@keyframes animation(){
	to{
    	background-position: right 0;
        }
}