Web16 간단한 javascript로 '커밍쑨 타이머' 만들기 최근 회사에서 핫 딜 컨텐츠를 준비하다보니 자주 사용하게 된 스크립트 하나를 오랜만에 포스팅 해볼 생각인데,우선 간단한 구조의 로직이니 대충 올려둬도 어느정도 날짜 시간계산이 된다면 이해하는데 전혀 어려움이 없다. 스크립트 구조 -일단위가 아닌 시간단위로 계산하고 싶을 경우 변수 hours의 24(하루 24시간) 을 7로 곱한 값즉, (1000 * 60 * 60 * (7 * 24))) / (1000 * 60 * 60)); 로 계산해준 뒤 days 변수를 지우거나 주석처리해줘도 된다. 자동적으로 현재 지정시간과 카운트다운의 남은 시간을 계산해주어 마지막 결과인 if ( distance < 0 ) 일 경우 #test_count의 html내용이 time out이 아웃풋된다.조금 응용하자면 여러가지 변수와 클래.. 2018. 11. 18. jQuery를 이용하여 슬라이드 애니메이션 만들기 최근 회사일 외로 여러가지 기업과 IC관계를 형성하면서 포스팅을 할 시간이 줄어서,사실상 블로그를 안한다고 볼 수 있는데 오늘은 조금 짬도 나는 듯하여, 앞으로는 시간 날때마다기억용도로 기록하고자 한다. 사이트 작업을 요즘들어 많이 하기 시작했는데, 이유는 즉슨 에이전시 쪽 개발 속도가 너무 느려서 일일히 세부적인 부분부터사실상 레이아웃만 업체가 작업하고 디자인, 애니메이션, 각종 스타일은 모두 내가 일일히 짜고있다 -_-;; 알아두면 요긴하게 쓰이는 jQuery 라이브러리를 이용한 slick 애니메이션을 간단하게 구현하는 방법을 대충코드만 공개해보겠다 대충은 보면 알거라 생각한다. (slick 자체가 어렵지 않아서.. ) 기본적으로 필요한건 slick.css | slick.min.js | slick-t.. 2018. 6. 23. CSS 애니메이션 라이브러리 간단하게 애니메이션 구현 퍼블리싱, 프론트, 백 어떠한 디벨롭 환경에서도 일일히 하드코딩 하기란 힘들다.그래서 존재하는 파일과 명령의 집합인 라이브러리를 대부분의 코더들이 많이 사용한다. 대표적으로 Jquery와 AngularJS, reactJS 등 무수히 많은 라이브러리들이 존재하고이들을 이용하면 조금 더 수월한 스크립트를 짤 수 있다. CSS3는 애니메이션을 주기위해선 일일히 키프레임으로 애니메이션 효과를 주어야만 했다.근데 사실상 화려한 애니메이션이 아닌 간단한 WAS환경에서의 애니메이션 효과는 정말 간단하기에이를 코딩할 필요없이 간단한 애니메이션 효과를 적용 시키고 싶은 사람들을 위한명령 집합 라이브러리이다. 실제로 내가 즐겨 쓰는 방법이다. animate.css는 정말 단순한 사이트로 구성되어있다. 다운로드 링크와 개발.. 2018. 3. 2. 페이스북 이미지 사이즈 디자인 총정리 엄마,아빠,동생,친구 심지어 할아버지,할머니 까지 이제는 페이스북을 모두가 한다.현재 바야흐로 대 SNS시대가 아닌가 싶다. SNS을 정복한 자가 못할 것은 없으니 말이다.이렇게 주목도가 높은 SNS 중 당연 최고로 노출과 홍보 및 사생활이 잘 노출되는 플랫폼은바로 FACEBOOK이다. 나도 평소에 페이스북 이미지 디자인을 해줄 때가 많아, 머릿속에 들어오질 않으니기록용으로 정리를 해보고자 한다. 1. 커버 사진 이미지 사이즈 개인 계정, 페이지, 그룹에서 통용되는 사이즈는 위의 그림과 같다.모바일이나 더 큰 기기에서는 자동으로 사이즈가 리사이징 된다. (반응형) 2. 프로필 사진 이미지 사이즈 프로필 사진 사이즈도 똑같이 기기 해상도에 따라 자동적으로 비율로 리사이징 된다.반응형 방식. 3. 앱 아이콘.. 2018. 2. 28. 폼메일 간단하게 만들기(php, html) 얼마전 외주 업무를 처리하던 중, 퍼블리싱 외주 요청 중 들어오는 빈도가 높은 랜딩페이지에관리자 메일로 연동되는 문의 폼을 제작해야 할 일이 생겼다. 문의폼은 일반적으로 메일서버를 연결하여 smtp를 이용한다.그리하여 메일이 지정된 이메일 주소로 전달되는 형식인데, 이 방법 외로도 또 한가지의 방법이 존재한다. 바로, HTML의 을 이용하는 방법이 있다. 대략적으로 간단하게, 을 비롯한 여러가지 php를 통해 서버로 보낼 데이터가 입력될 수 있으면 된다.이렇게 하면 서버를 통해 입력된 데이터가 설정된 메일로 보내지게된다. *이같은 방식은 스팸메일로 분류될 확률이 높다 smtp를 통해 직접적으로 수신메일 서버로 송신되는 방식이 아니기 때문에, 질이 그닥 좋은 방법으로 택해지진 않으나 비교적 smtp니 뭐니.. 2018. 2. 26. CSS를 이용한 하단 고정 배너를 만들어보자. 안녕하세요 도롱군입니다. 이번 포스팅은 CSS를 이용한 하단고정배너 (bottom fixed banner)를 만들어 보려고합니다.준비할 것 html와 css, 배너 닫기 기능을 넣기 위해 Javascript 약간의 지식? 이 필요합니다. 하단고정배너? 그게 뭔가요? 위의 사진과 같이, 스크롤 영역에 상관 없이 창의 하단부분에 고정되어 자리하는 배너입니다.많은 웹사이트에서 이를 이용한 웹디자인이 되어있고 광고 효과도 괜찮게 평가되는 알아두면 괜찮을 법 한 녀석입니다. 1. html 작성 모든 웹의 기초가 되어주는 html. 독타입 선언을 한, 이 들어가있는,기본적인 html 구조를 잡아주셔야합니다. 이제 html 문서의 몸체 부분의 내용을 기입해주어야 하는데요.기본적으로 레이아웃을 나눌때 자주 사용되는 태.. 2018. 2. 22. 이전 1 2 3 다음
