728x90

🟦 기본 환경: IDE: VS code, Language: CSS

 

 

CheckBox Customizing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.customized {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #a4a4a4;
  appearance: none;
 
}
.customized:checked {
  background: #a10820;
  border: none;
  background-image: url('icon_check.png');
  background-position: center;
  background-size: cover;
  filter: invert(1);
 
}
 
 
  

1. .customized 

 * border-radius: 원형 모양 설정

 * background-color: 기본 배경색

 * apprearance: 웹 브라우저에서 각 태그에 적용하는 기본 스타일 제거

⭐ border-radius만 조정하면 변경되지 않으므로 appearance 속성을 사용해야 함

 

2. .customized:checked

 * background-size: 배경 이미지 checkbox 내 크기 조정

 * filter: invert(): 이미지 또는 요소의 색상을 반전

 - 0~1 사이값 선택 가능(0: 유지, 1: 반전)

⭐ filter가 적용된 속성 내에서 전체 적용되므로 색상이 들어간 다른 요소의 색상 조정 필요

 

 

 

참고 자료

 

[CSS] checkbox 둥글게 만들기

코드 input[type="checkbox"] { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid #999; appearance: none; cursor: pointer; transition: background 0.2s; } input[type="checkbox"]:checked { background: #32e732; border: none; } 코드 풀이 해

gurtn.tistory.com

 

728x90
저작자표시

'HTML&CSS > CSS' 카테고리의 다른 글

[ReactJS_Complete] CSS: @media  (0) 2023.06.01
[ReactJS_Complete] CSS: transition  (0) 2023.05.31
728x90

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

 

1. CSS module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.button {
  width: 100%;
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
}
 
@media (min-width: 768px){
  .button {
    width: auto;
  }
}
 
 
 cs

 

2. styled

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Button = styled.button`
{
  width: 100%;
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
 
  @media (min-width: 768px) {
  /* 화면의 너비가 768px 이상일 때 */
    width: auto;
  }
}
 
 
 cs

 

@media

구문: @media (조건문) {실행문}

all: default(생략 가능), 모든 미디어 장치에 적용

print: 인쇄용 장치에 사용

screen: 화면 등에 사용하는 viewpoint size에 사용

speech: 스크린 리더기가 페이지를 소리내어 읽을 때 사용

 

 

 

참고 자료

 

[CSS3강좌] 35강 반응형웹을 위한 미디어쿼리(@media screen{ })

** 동영상으로 배우고 싶은 분은 아래 주소를 클릭하세요! https://youtu.be/uBrsPwzIZR0 1. 미디어 쿼리(Media Query) - 미디어 쿼리는 특정 조건이 true인 경우에만 코드 블록{ } 내부의 CSS 코드를 실행해주는

ossam5.tistory.com

 

728x90
저작자표시

'HTML&CSS > CSS' 카테고리의 다른 글

[CSS] CheckBox Customizing  (0) 2023.06.11
[ReactJS_Complete] CSS: transition  (0) 2023.05.31
728x90

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

transition

: 스타일 변화가 발생했을 때의 전환(transition) 효과를 지정

 

option, timing function

: ease-in

요소의 전환을 천천히 시작하고 빠르게 종료하는 방식
시작할 때는 천천히 움직이다가 점점 가속도를 높여서 종료할 때에는 빠르게 움직이는 효과 부여

 

: ease-out

요소의 전환을 빠르게 시작하고 천천히 종료하는 방식
시작할 때는 빠르게 움직이다가 점점 감속하여 종료할 때에는 천천히 움직이는 효과 부여

 

: ease-in-out

요소의 전환을 천천히 시작하고 천천히 종료하는 방식
시작할 때는 천천히 움직이다가 가속도를 높여 중간 지점에서는 빠르게 움직인 뒤, 종료할 때는 다시 천천히 움직이는 효과 부여

 

 

ease-out 예시

1
2
3
4
5
6
.chart-bar__fill {
    background-color: #4826b9;
    width: 100%;
    transition: all 0.3s ease-out;
}
 
 
 cs

728x90
저작자표시

'HTML&CSS > CSS' 카테고리의 다른 글

[CSS] CheckBox Customizing  (0) 2023.06.11
[ReactJS_Complete] CSS: @media  (0) 2023.06.01

티스토리툴바