본문 바로가기
반응형

CSS2

px을 vw 단위로 변환해주는 사이트 - PUBLISHING px을 vw단위로 그리고 vw를 px단위로 변환해 주는 '' 단위계산을 일일이 하는 게 정말 힘들었었는데 유용한 사이트가 있더라고요. 사이트 사용법을 알아보도록 하겠습니다. 왼쪽은 px에서 vw단위로 변환, 오른쪽은 vw에서 px로 변환해 주는데요. 사용법은 같아서 px에서 vw단위로 변환하는 걸로 보여드리도록 할게요. 위에서 왼쪽부터 차례대로 [창의 넓이 값], [결과값에 대한 소수점 단위], [변환하려는 px값]을 넣어주면 됩니다. 값을 입력했다면 [계산하기] 버튼을 눌러주세요. 그럼 vw로 변환된 값을 볼 수 있답니다. 그리고 css코드를 넣어서도 변환할 수 있는데 그것도 한번 보여드리도록 할게요. 넣고자 하는 css코드를 빨간 테두리로 표시한 부분에 입력한 뒤 [계산하기] 버튼을 눌러주세요. 그럼.. 2024. 2. 12.
css animation으로 깜빡이는 버튼 만들기 css의 animation을 사용하여 위 사진처럼 깜빡이는 버튼을 만드는 방법입니다. 코드는 아래와 같이 사용 해 주시고 변경하고자하는 부분은 수정해서 사용 해 주세요. 버튼 추가로 ' animation: blink .6s step-end infinite alternate;' 코드를 풀어 쓸 경우 아래와 같습니다. animation-name: blink; _애니메이션 이름을 blink로 지정. animation-duration: 0.6s; _애니메이션 동작 시간 6초로 지정. animation-timing-function: step-end; _중간 상태들의 전환을 종료시점에 진행하도록 지정. animation-iteration-count: infinite; _애니메이션 재생 횟수를 무한반복으로 지정. a.. 2023. 10. 18.
반응형