버튼 만들기

김형진·2024년 8월 12일

A 버튼 만들기(class 속성, transition)

class 속성

CSS로 특정 요소를 대상으로 지정할 수 있음

여러 요소가 동일한 클래스를 가질 수 있음

<button class="button_a">ButtonA</button>
    <button class="button_a">ButtonB</button>
    <button class="button_a">ButtonB</button>

요소는 공백으로 구분된 클래스를 여러개 자질 수 있음
```
    <button class="button_a button_b">ButtonA</button>
```

transition

스타일 변경 시 부드럽게 전환하게 함
선택자가 변화되는 것을 시간의 흐름을 줘서 변환

	transition: (속성) (속도 지연 시간)
  transition: opacity 0.2s;
  
  <!--속성 두개 사용-->
    transition: opacity 3s, background-color 3s;
    
  <!--모든 변화 사용-->
  transition: all 3s ease-in;

transition
ease	기본값, 느리게 시작한 다음 빠르게 전환 다음 천천히 종료
linear	처음부터 끝까지 같은 속도로 전환
ease-in	가속
ease-out	감속
ease-in-out	느린 시작, 느린 끝
cubic-bezier(n,n,n,n)	3차 베지어 함수에서 자신의 값을 임의적으로 정함

 transition: opacity 0.2s ease-in;

가상 클래스 & 가상 요소

가상 클래스: 별도의 class를 지정하지 않아도 지정한 것처럼 요소를 선택 할 수 있음

가상 클래스 & 가상 요소
:hover	마우스를 롤오버 했을 때
:active	마우스를 클릭했을 때
:focus	input태그 등이 포커스 되었을
:first-of-type	모든 자식 요소 종에서 첫 번째 등장하는 특정 요소를 선택
:last-of-type	모든 자식 요소 종에서 마지막으로 등장하는 특정 요소를 선택
:first-child	모든 자식 요소 중에서 첫 번째 위치하는 자식을 선택
:last-child	모든 자식 요소 중에서 마지막에 위치하는 자식을 선택
:nth-child(n)	모든 자식 요소 중에서 n에 해당하는 자식 선택

가상 요소: 가상 클래스처럼 선택자에 추가되며 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택 가능

가상 요소
::before	요소의 콘텐츠 시작 부분에 생성된 콘텐츠를 추가
::after	요소의 콘텐츠 끝 부분에 생성된 콘텐츠를 추가
::selection	마우스 드래그로 선택한 텍스트 콘텐츠 영역을 선택
::marker	목록 아이템 앞에 붙는 마커를 선택
::first-letter	현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 콘텐츠 첫 글자를 선택
::first-line	현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 콘텐츠 첫 줄 내용을 선택

버튼 A

 <button class="button_a">ButtonA</button>

.button_a {
  background-color: rgb(20, 40, 192);
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  margin-right: 10px;
  margin-left: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 16px;
  padding-right: 16px;
  transition: opacity 3s, background-color 3s;
  vertical-align: top;
}

.button_a:hover {
  opacity: 0.7;
  background-color: black;
}

.button_a:active {
  opacity: 0.1;
}

B 버튼 만들기

    <button class="button_b">ButtonB</button>

.button_b {
  background-color: white;
  border-color: 1px solid rgb(212, 6, 64);
  color: rgb(6, 95, 212);
  border-radius: 2px;
  cursor: pointer;
  padding: 16px 9px 16px 9px;
  transition: border-color 3s, color 0.15s;
}

.button_b:hover {
  background-color: rgb(6, 95, 212);
  color: white;
}

.button_b:active {
  opacity: 0.7;
}