반응형 CSS16 [HTML/CSS/JS] React를 통해 useState()를 사용해 보자 : 상태를 업데이트 해보자 usdState() 함수는 리액트에서 컴포넌트 요소들의 값을 간편하게 생성하거나 업데이트하는 도구를 제공한다. 아래의 예시를 보자. state라는 변수에 초기값을 0으로 설정 ex) const [state, setState] = useState(0); setState()를 통해 state의 값을 변경할 수 있다. ex) setState(state + 1); 실제 예시를 적용해 보자 See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. useState() 함수를 왜 사용하는 걸까? 그저 변수를 선언하고 변경할 뿐이라면 useState()를 사용할 필요가 있는지 의문이 들 수 있다. 하지만, 많이 사용하는 기존의 방식대로 let이나 var를 통해 변수를 선언하.. 2023. 8. 13. [HTML/CSS] :root를 통해 CSS에서 변수를 사용해 보자 : 가상 클래스의 활용 CSS를 통해 디자인을 하는 과정에서 페이지의 통일성을 위해 하나의 값을 여러 번 활용하는 경우가 많다. 이러한 경우 :root 가상 클래스를 활용하여 변수를 생성함으로써 코드의 유지·보수나 추가적인 확장을 쉽게 할 수 있다. 아래의 예시를 보자. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. :root 변수의 선언 변수의 이름 앞에는 --(하이픈 2개)를 붙여준다. :root { --width: 200px; --height: 100px; --box-color: #a6a5ff; --box-font-weight: bold; --box-font-size: 20px; } :root 변수의 적용 var() 함수를 통해 괄호 안에 적용할 변수를 입력한다. ... 2023. 6. 25. [HTML/CSS] cubic-bezier()를 통해 속성 변화를 조절해 보자 : 변화에 변화를 주자 cubic-bezier() 함수는 transition과 같이 속성에 변화를 나타내주는 속성에 추가적인 효과를 더해준다. 아래 예시를 보자. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. 위의 실행 결과를 살펴보자. 모든 게이지는 변화하는 과정이 다를 뿐, 결과적으로 과정이 완료되는 시점은 모두 동일한 것을 볼 수 있다. 이처럼 transition의 속성에 의해 변화하는 시간이 같더라도, cubic-bezier() 함수에 의해 각각 다른 효과를 줄 수 있다. 그렇다면 원하는 효과를 찾기 위해서는 cubic-bezier() 함수의 값을 일일이 조정하며 원하는 값을 찾아야 하는 걸까? cubic-bezier.com cubic-bezier.com 이에 위의.. 2023. 6. 23. [HTML/CSS] calc()를 통해 속성값을 계산해 보자 : 사칙연산을 통한 속성값 계산 calc() 함수는 다양한 속성들의 속성값 계산을 가능하게 만들어 준다. 아래 예시를 보자. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. 계산 법칙과 우선순위는 사칙연산과 동일하다. 괄호 안을 계산 곱셈과 나눗셈을 계산 덧셈과 뺄셈을 계산 동순위 연산이 2개 이상이면, 왼쪽부터 오른쪽 순으로 계산 계산의 대상으로 px, % 등을 함께 계산하는 것이 가능하다. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. calc() 함수를 통해 요소의 너비나 높이 뿐만 아니라 다양한 속성들의 속성값을 계산하는 것이 가능하며, 코드의 확장성을 위해 :root를 통한 변수를 통제하여 일정 값들을 계산하는 것 또한.. 2023. 6. 21. 이전 1 2 3 4 다음 반응형
