코딩85 loading css animation 코딩/CSS 2024. 12. 12. 진행중입니다~ 하면서 로딩이미지 뜰 때 쓸만한 애니메이션을 css로 구현해 봄.점 3개가 뱅글뱅글 돌아가는 액션. .loader {position:relative;display:flex;align-items:center;width:38px;height:24px;}.dot{display:block;position:absolute;left:0;width:12px;height:12px;background:blue;border-radius:14px; aspect-ratio:1;animation:dot1 2.6s infinite, dot1-1 2.6s infinite;}.dot2 {animation-delay: -0.86s;}.dot3 {animation-delay: -1.73s;}@keyframes dot1 .. scrollbar css 코딩/CSS 2024. 12. 6. scrollbar 디자인 바꾸는 css 예시.background 투명이 안먹어서 검색해보니body 에 overflow:overlay를 해주면 크롬에서 스크롤바 배경이 투명하게 잘 나온다.엣지도 잘 나오고 파이어폭스는 자체스크롤을 써서 적용이 안됨.::-webkit-scrollbar{width:14px;height:14px;background-color: rgba(0,0,0,0%);}::-webkit-scrollbar-thumb{ background-color: #CFCFCF; border: 4px solid transparent; background-clip: padding-box; border-radius:100px;}body{overflow:overlay} focus 그라데이션 효과 코딩/CSS 2024. 12. 3. .form-control:focus { background-color: #fff; border-color: rgba(87, 79, 236, .5); box-shadow: 0 0 25px rgba(87, 79, 236, .1); color: #222; outline: 0;} 피그마 corner smoothings css로 주기 코딩/CSS 2024. 11. 26. Figma에는 Corner Smoothings 라는 기능이 있다.이게 뭐냐면 박스의 라운드를 줄 때, 좀 더 부드럽게 가장자리 처리를 해주는 것이다.위 그림에서 왼쪽은 일반적으로 radius 10을 준 것이고,오른쪽은 radius 10에다가 corner smoothings라고 되어있는 곳에 iOS값을 100%로 더 준 것이다.언뜻 보면 티가 안 날 수도 있지만 자세히보면 라운드의 가장자리 처리가 살짝 더 곡선으로 되어있다. 그래서 이것을 css로 구현할 수 있는가에 대해 검색해봤는데아직 css3에는 이런 기능은 없고 스크립트의 사용으로 구현이 가능했다. 아래는 관련 질문에 대한 글.https://www.reddit.com/r/FigmaDesign/comments/stf1hq/rounded_corners_.. [웹스퀘어] 페이지 설명 보이게 코딩/웹스퀘어 2024. 10. 17. 페이지 설명 추가하는 방법.1. Project > Properties 클릭 2. Websquare > W-Docs > 체크박스 체크 조금 기다리면 이렇게 설명이 짠~ 하고 나옴. 웹스퀘어 스크립트 코드 코딩/웹스퀘어 2024. 9. 10. 제이쿼리랑은 다른 명령어를 쓴다.// $ =getQuelrySelector(".btn");// $(this).parent() =this.getParent();// $(this).parent().toggleClass("active") =this.render.parentNode.classList.toggle("active");scwin.btn_disclosure_onclick = function (e) { this.getParent().toggleClass("active");};// 토글에 따라 높이값 변경if (triggerbtn.hasClass("on") === true) { ID.setStyle("height","160px");} else { gridFull.setStyle("height","43.. [웹스퀘어] 이클립스 프로그램 폰트 크기 설정 코딩/웹스퀘어 2024. 9. 5. 웹스퀘어 Ai 스튜디오를 딱 깔았는데..듀얼모니터로 서로 해상도가 달라서 그런지.. 프로그램의 폰트 사이즈가 요상하게 설정이 됐다.딱 봐도 메뉴폰트 사이즈보다 왕따시만하게 커진 탭 폰트들.. 원래 폰트 사이즈로 되돌려보자~! 1. 프로그램 우클릭으로 속성을 선택한다. 2. 호환성 탭으로 들어가서 [높은 DPI 설정 변경] 클릭 3. 하단에 [높은 DPI 동작을 재정의합니다.] 체크 선택하고 셀렉트박스의 [시스템] 클릭. 4. 프로그램 종료 후 재시작 하면 따란~ 정상적인 폰트로 돌아왔다. 눈이 편안... 이클립스 폰트크기 이상할 때, 이클립스 폰트 크기, 웹스퀘어 폰트 크기, 프로그램 폰트 크기 조절 [jquery] 부드럽게 화면 상단으로 이동하는 버튼 만들기 코딩/제이쿼리 2024. 9. 2. 웹페이지에서 흔히 볼 수 있는 화면 상단 이동 버튼.본문 내용이 길어 스크롤바가 길 때, 최상단으로 한번에 이동할 수 있어서 매우 편리한 기능.거의 모든 사이트나 앱에서 필수적으로 들어가는 버튼이다.보통은 그냥TOP이렇게 쓸 수도 있지만..이대로 쓰면 갑자기 뿅~ 하고 최상단으로 이동해 버리게 된다. 보기 좋지 않음..그래서 보통은 부드럽게 스크롤이 이동하도록 스크립트를 겸해서 쓴다. jquery$(".btn_top").on('click', function(){ $('body, html').animate({ scrollTop: 0 }, 300 ); return false;});이렇게 하면 스르륵 스크롤 되면서 최상단으로 이동 함. 근데 여기서 한 단계 더 나아가스크롤이 최상단일때는 btn_to.. [웹스퀘어] resize 스크립트 (모바일 반응형) 코딩/웹스퀘어 2024. 8. 9. scwin.onpageload = function() { // 모바일 메뉴 임시삭제 $(window).resize(function(){ var winSize = $(window).width(); if (winSize 스크립트 짤 때 웹스퀘어에서는 resize 함수 안에 변수를 설정해야 함. 전역변수가 안먹음. [웹스퀘어] 모바일 meta tag 설정하기 코딩/웹스퀘어 2023. 1. 25. 웹스퀘어에서 모바일 화면을 미리볼 때 설정에서 간혹 mete tag가 빠져있어서 모바일화면이 제대로 안나올 때가 있다. 일일이 페이지마다 넣지 않고 공통으로 meta tag를 넣어서 한번에 설정하는 방법. 1. 웹스퀘어 메뉴 > Window > Preference 클릭 2. 아래 화면과 같이 WebSquare > Engine Modification 선택 3. Engine Resource 에서 websquare.html 선택 후 아래 meta tag 추가 이전 1 2 3 4 ··· 9 다음
euntori
Comments