개발하는 루루언니

버튼 효과 만들기 ✅ css를 사용하면서 라이브러리만 사용하다보니 직접 만들어 보는 연습이 필요하여 작성하게 되었다. .btn:hover{ box-shadow: 0 5px 10px rgba(0,0,0,0.1); transform: translateY(-3px); transition: 0.5s; } 1. hover는 버튼을 올렸을때 효과가 발생한다. (사용할 버튼에 hover 주기) 2. box-shadow는 버튼의 그림자 효과를 줄 수 있고 색상도 지정이 가능하다. 3. transform 에 translateY 는 폼에 위 아래 효과를 줄 수 있는데 -3px 을 할경우 위로 3px이 올라간다. 4. transition은 부드러운 효과를 주기위한건데 0.5초의 시간을 주어 부드럽게 위로 올라가며 쉐도우가 ..

📙 CSS를 작업하다보면 자주 사용하는 값이 있는데 초기에 미리 셋팅을 해주면서 CSS를 더 간편하게 작성할 수 있다. @font-face { font-family: 'NEXON Lv1 Gothic OTF'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff'); font-weight: normal; font-style: normal; } /* Reset Css */ *{ box-sizing: border-box; } a ,Link{ text-decoration: none; color:#222; } button, input{ outline: none; }..

✅ 사용하는 이유 : html을 작성할때 많은 데이터를 넣을경우 스크롤이 생긴다. 맨마지막에 작업한 html의 css를 작업하고 자동 저장하게 되는순간 스크롤이 맨위로 올가가는 현상이 일어나게 되는데 해상 셋팅을 해주게 되면 Full Reload 되는 현상을 막을 수 있다. 설정 > 확장(Extensions) > Live Server config > Settings : Full Reload 체크박스에 체크

hover는 마우스를 올렸을때 active는 마우스를 누르고 땟을때 발생하는 효과 .manimg:active{ box-shadow: 1px 1px 0 rgb(0,0,0,0.5); position: relative; top:2px; } 위에는 그림자가 되어있는데 눌렀을때 그림자가 사라지면서 누른 효과가 날수있게 css를 짜놓은 것이다.