정리공간

아래와 같이 상황에 따라 길이를 다르게 적용해야할때가 있다. C가 있다면 보여주고, 없으면 안보여주는 상태. 비율로해서 없는 부분이 채워지게 할 수 도 있겠지만, C가 있는지 없는지에 대한 조건을 달아서 width값을 다르게 적용해보자. 방법은 간단하다. "[ ]" 로 감싸고 그 안에 삼항 연산자 형식으로 입력하면된다. :style = "[countC > 0 ? 'width: 33.3%' :'width: 50%']" ** 주의할 점. 여기서는 css와는 다르게 카멜표기법이 아닌, 스네이크형식으로 입력해야한다. ex) backgroundColor (X), background-color (O) Vue 2 버전 방식 문법이 조금 다르니 참고하기! :style = "[countC > 0 ? {'width': '..

내가 하고싶은것은 넓이가 유동적으로 변하는 값에 따라 높이를 맞추고 싶었다. 그냥 간단히 말해 vue단에서 선언한 변수를 css에 적용하고 싶었다. 여러가지 구글링 했을때는 css변수 사용해서 :root에 변수를 선언하라고 되있는데, 나는 css에서 새로운 변수를 만드는게 아니라 자바스크립트 단에서 만든 변수를 사용하고 싶었다. 방법은 생각보다 간단! Vue3 1) 변수 선언 data() { return { hhhhh : '', }; }, 2) 변수에 값 넣기 mounted(){ this.hhhhh = 50 * 10 + "px"; }, 3) 변수를 style에 적용 변동css 변동css Vue2 Vue2는 3과 적용 방법이 살짝 다르다.

keyframes : 애니메이션이 동작할 전체 영역(시작과 끝) keyframes을 지정한 그 영역 안에서 애니메이션이 작동한다. => 전체적인 틀을 만듦! 특징 시작과 끝 사이에 중간 상태를 원하는 만큼 지정할 수 있다. 입력없이 스스로 작동할 수 있다. 반복이 가능하다. keyframes 사용방법 CSS 파일에 @keyframes 애니메이션이름 { } 형태로 작성한다. 시작과 끝은 퍼센트(%)와 from~to 두 가지 방법으로 지정할 수 있다. @keyframes ballBounce { 0% { top: 20px; } 50% { top: 400px; } 100% { top: 20px; } } Animation 속성 name : 내가 만들 애니메이션의 이름 duration : 애니메이션 작동 시간. 단..