css 만을 이용하여 로딩 페이지 만들기!


처음에 gif 파일 이용하여 구현했으나


로딩 시에는 gif도 끊기는 현상이 있어서 의미가 없어 결국 css만으로 구현하니 부드럽게 잘 동작 하더군요


font-awesome이 당연히 있어야 font-awesome을 이용하실 수 있겠고요~


http://fontawesome.io/examples/



홈페이지 exmaples 페이지 중간에 보면 Animated Icons라고해서 


옆에 class만 추가하면 위 종류의 5가지 형식의 로딩 아이콘을 만드실 수 있습니다.


정말 잘 만들어 줬네요 font-awesome!


그 다음은 저걸 페이지에 적용 해야 합니다!




태그를 먼저 추가해 주시고요



다음으로 CSS 적용하면


로딩 페이지 구성 완료입니다!


로딩 완료 후 에는 



이렇게 두고 언제든 필요할 때 로딩 화면을 띄울 수 있습니다.




Posted by 건강코더 트랙백 0 : 댓글 0

댓글을 달아 주세요


ajax를 사용하다 보면 error : function 부분을 공통적으로 사용하게 되는데 

매번 설정 하지 않고 jquery를 이용해서 한번에 설정으로 공통으로 사용할 수 있다.




위 처럼 해두면 매번 설정 할 필요 없이 또는 따로 함수를 만들어서 호출할 필요도 없이 에러 타입에 따라 alert 창으로 

확인 가능하다.


Posted by 건강코더 트랙백 0 : 댓글 1

댓글을 달아 주세요

  1. addr | edit/del | reply 지나가던초급개발자 2019.06.28 11:10

    감사합니다!!

Posted by 건강코더 트랙백 0 : 댓글 0

댓글을 달아 주세요


(function($){


})(jQuery);




이 코드 처음 봐서 당황 했었습니다..

jquery를 사용할 때, $ 달러의 의미를 jquery에서 사용하겠다는 의미가 내포되어 있습니다.

즉, $를 jquery만 사용하는 것이 아니라 다른 라이브러리에서도 사용할 수 있기 때문이에요.

만약 prototype.js 랑 jquery를 같이 사용하는 경우에는  $가 충돌이 발생하는 것입니다.


출처: http://linuxism.tistory.com/666 [linuxism]


라고들만 써있었는데


위에 분의 예제를 응용하면 



한방에 이해가 갔다.


해당 문자를 어디에서 쓰겠다고 명시 하는 의미!



Posted by 건강코더 트랙백 0 : 댓글 0

댓글을 달아 주세요


여러 데이터를 한 태그 안에 저장해야 할 경우에 유용한 방법입니다.(개인적으로)



위와 같이 json타입의 array를 생성 하였는데 각 순서 별로 태그에 모든 값을 넣고 싶었습니다.


각 속성별로 하나씩 저장할 순 있지만 유지보수 측면에서 전체를 하나로 관리하고 싶어 고민중 


찾았습니다.


위를 console로 보게되면



아래와 같이 잘 나오지만


단순히 .attr로 저장하게 될 경우


$("#tag).attr("labRole", labRole);


위의 코드를 실행하여 console로 보게되면



단순히 Object란 것만 명시되게 됩니다.


하지만 jQuery의 data를 이용하게 되면 저장 전 그대로 사용할 수 있습니다.


$("#tag).data("labRole", labRole);


을 실행한 후 


selectedNode.data("labRole");


attr과 마찬가지로 data로 해당 속성 이름을 주게 되면 입력 전과 같은 형태로 리턴 값을 


받게 됩니다.

Posted by 건강코더 트랙백 0 : 댓글 0

댓글을 달아 주세요

테이블에서 헤드는 고정하고 밑 부분 body만 스크롤 하고 싶을때

여러 자료가 있는데 js파일을 이용하거나 테이블을 두개 만들어서 하는 방법 등이 있었는데

저의 경우 table이 tree grid 를 사용해서 js를 사용하다보니 css가 깨져버려서 다 실패를 했습니다.




출처: http://tessjds.tistory.com/52 [잘하고 싶은 웹개발자]


윗님의 페이지에서 나온 코드가 제일 깔끔하게 수정할것 많이 없이 잘 사용해서 퍼왔습니다.



Posted by 건강코더 트랙백 0 : 댓글 0

댓글을 달아 주세요

.replace(/(^\s*)|(\s*$)/g, "")

Posted by 건강코더 트랙백 0 : 댓글 0

댓글을 달아 주세요