Scikit Web

프론트 엔드 영역을 개발하다보면 ajax를 많이 사용하게 됩니다. 요즘은 fetch 라는 것도 나와서 fetch도 많이 사용하는 추세 입니다. ajax를 쓰던 fetch를 쓰던 .. 1번 ajax 안에 2번 ajax, 2번 ajax 안에 3번 ajax 를 써서 문자 그대로 Callback 지옥을 만들게 됩니다. 이런 Callback 사용은 좋은 프로그래밍이 아니며 나중에 유지보수 할때도 난이도를 어렵게 만드는 요소가 됩니다. 이런 상황을 피하고자 나온 방법들이 Promise 와 Asyc await 입니다. 2개는 각각 다른 기능이지만 아래와 같은 상황에서 콜백 지옥을 피하기 위해서 두 기능을 같이 사용하여 풀어낼수 있습니다. $( document ).ready(async function() { const..

홈페이지에 찾아온 사람들에게 보여줄 광고 팝업 에제 입니다. 정적인 위지에 띄우는 팝업 예제 입니다. CodePen이라는 글자를 클릭하시면 동작 확인을 더 원활하게 하실 수 있습니다. HTML 삽입 미리보기할 수 없는 소스

Bootstrap에서 제공해주는 Bootstrap Icon을 사용하는 예제 입니다. 정의 되어 있는 아이콘들은 아래 사이트에서 확인가능합니다. https://icons.getbootstrap.com/ Bootstrap Icons 사이트에서는 CDN 주소를 제공하고 있습니다. Bootstrap Icons 라이브러리를 추가하고 i Tag를 선언해서 사용하는 법과 SVG를 선언하여 사용하는 방법 2가지를 제공하고 있습니다. i Tag를 선언해서 안보이는 아이콘들이 있는데.. SVG를 사용하는 방법으로 사용하시면 됩니다. HTML 삽입 미리보기할 수 없는 소스

요즘은 모니터 해상도 및 크기가 너무 커지면서 홈페이지 디자인을 고려할 사항이 더 많아 졌습니다. 네이버의 경우에도 모니터 화면이 아무리 가로로 크게 늘어나도 모니터 중간에 일정 사이즈를 고정 시켜서 유지하고 있습니다. Bootstrap 을 이용하여 네이버 처럼 화면 중간 고정 화면을 만드는 예제입니다. non-reponse css의 경우 bootstrap3.4 에 최적화된 버전만 있는 듯 합니다. HTML 삽입 미리보기할 수 없는 소스

html5 의 element(div, label 등)에 애니메이션 효과를 넣어주는 유용한 라이브러리 입니다. https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style 무료 라이브러리 이며 사용법도 상당히 간단합니다. 아래 예제와 같이 라이브러리를 추가합니다. 사용가능한 기능들은 라이브러리 홈페이지..

현재 진행률을 표시 할때 많이 사용하는 방법입니다. 현재 진행률을 표시할때는 Progressbar 안에 들어가는 글자의 가로 세로 중앙 정렬이 필수 입니다. div 안에 있는 글자를 가로 세로 중앙 정렬 하는 방법이 많이 있지만 저는 display: flex 와 justify-content, align-items 라는 CSS 속성을 이용하여 구현하였습니다. 각각의 아이템에 top, bottom 등의 값도 사용할 수 있어 원하는 위치에 따라 변경하여 사용하면 되겠습니다. HTML 삽입 미리보기할 수 없는 소스