그냥 그래

최근 회사에서 핫 딜 컨텐츠를 준비하다보니 자주 사용하게 된 스크립트 하나를 오랜만에 포스팅 해볼 생각인데,우선 간단한 구조의 로직이니 대충 올려둬도 어느정도 날짜 시간계산이 된다면 이해하는데 전혀 어려움이 없다. 스크립트 구조 -일단위가 아닌 시간단위로 계산하고 싶을 경우 변수 hours의 24(하루 24시간) 을 7로 곱한 값즉, (1000 * 60 * 60 * (7 * 24))) / (1000 * 60 * 60)); 로 계산해준 뒤 days 변수를 지우거나 주석처리해줘도 된다. 자동적으로 현재 지정시간과 카운트다운의 남은 시간을 계산해주어 마지막 결과인 if ( distance < 0 ) 일 경우 #test_count의 html내용이 time out이 아웃풋된다.조금 응용하자면 여러가지 변수와 클래..

최근 회사일 외로 여러가지 기업과 IC관계를 형성하면서 포스팅을 할 시간이 줄어서,사실상 블로그를 안한다고 볼 수 있는데 오늘은 조금 짬도 나는 듯하여, 앞으로는 시간 날때마다기억용도로 기록하고자 한다. 사이트 작업을 요즘들어 많이 하기 시작했는데, 이유는 즉슨 에이전시 쪽 개발 속도가 너무 느려서 일일히 세부적인 부분부터사실상 레이아웃만 업체가 작업하고 디자인, 애니메이션, 각종 스타일은 모두 내가 일일히 짜고있다 -_-;; 알아두면 요긴하게 쓰이는 jQuery 라이브러리를 이용한 slick 애니메이션을 간단하게 구현하는 방법을 대충코드만 공개해보겠다 대충은 보면 알거라 생각한다. (slick 자체가 어렵지 않아서.. ) 기본적으로 필요한건 slick.css | slick.min.js | slick-t..

퍼블리싱, 프론트, 백 어떠한 디벨롭 환경에서도 일일히 하드코딩 하기란 힘들다.그래서 존재하는 파일과 명령의 집합인 라이브러리를 대부분의 코더들이 많이 사용한다. 대표적으로 Jquery와 AngularJS, reactJS 등 무수히 많은 라이브러리들이 존재하고이들을 이용하면 조금 더 수월한 스크립트를 짤 수 있다. CSS3는 애니메이션을 주기위해선 일일히 키프레임으로 애니메이션 효과를 주어야만 했다.근데 사실상 화려한 애니메이션이 아닌 간단한 WAS환경에서의 애니메이션 효과는 정말 간단하기에이를 코딩할 필요없이 간단한 애니메이션 효과를 적용 시키고 싶은 사람들을 위한명령 집합 라이브러리이다. 실제로 내가 즐겨 쓰는 방법이다. animate.css는 정말 단순한 사이트로 구성되어있다. 다운로드 링크와 개발..

엄마,아빠,동생,친구 심지어 할아버지,할머니 까지 이제는 페이스북을 모두가 한다.현재 바야흐로 대 SNS시대가 아닌가 싶다. SNS을 정복한 자가 못할 것은 없으니 말이다.이렇게 주목도가 높은 SNS 중 당연 최고로 노출과 홍보 및 사생활이 잘 노출되는 플랫폼은바로 FACEBOOK이다. 나도 평소에 페이스북 이미지 디자인을 해줄 때가 많아, 머릿속에 들어오질 않으니기록용으로 정리를 해보고자 한다. 1. 커버 사진 이미지 사이즈 개인 계정, 페이지, 그룹에서 통용되는 사이즈는 위의 그림과 같다.모바일이나 더 큰 기기에서는 자동으로 사이즈가 리사이징 된다. (반응형) 2. 프로필 사진 이미지 사이즈 프로필 사진 사이즈도 똑같이 기기 해상도에 따라 자동적으로 비율로 리사이징 된다.반응형 방식. 3. 앱 아이콘..

나는 정말 바보가 아닌가 싶다.아직도 이렇게 편한 것이 있는 줄 몰라서 스크린샷, gif로 일일히 코드를 공유했었는데 그럴 필요 없이 쉽게 html로 넣어서 소스를 공유할 수 있는 방법이 있다.. 바로 Color Scripter라는 Codepen과 흡사한 무료 웹 툴이 있다는 사실을 -_-.. 자연스럽게 indent가 되고 구문을 자동으로 분석해서 어떤 언어로 작성되었는지 스스로가 판단한다. 오히려 다른 웹 툴보다 훨신 라이트하고 인식이 빨라 딱히 설정할 필요도 없다..예제로 jquery를 복사하여 붙혀넣기를 하였는데 정말 괜찮지 않나 싶다. 예제 소스 보기 대박 편리하다.앞으로의 팁 공유는 해당 스크립터를 이용해서 공유하려고 한다. PC 다운로드 버전도 있으니 아무쪼록 많이 애용할 것 같은 툴이다.

얼마전 외주 업무를 처리하던 중, 퍼블리싱 외주 요청 중 들어오는 빈도가 높은 랜딩페이지에관리자 메일로 연동되는 문의 폼을 제작해야 할 일이 생겼다. 문의폼은 일반적으로 메일서버를 연결하여 smtp를 이용한다.그리하여 메일이 지정된 이메일 주소로 전달되는 형식인데, 이 방법 외로도 또 한가지의 방법이 존재한다. 바로, HTML의 을 이용하는 방법이 있다. 대략적으로 간단하게, 을 비롯한 여러가지 php를 통해 서버로 보낼 데이터가 입력될 수 있으면 된다.이렇게 하면 서버를 통해 입력된 데이터가 설정된 메일로 보내지게된다. *이같은 방식은 스팸메일로 분류될 확률이 높다 smtp를 통해 직접적으로 수신메일 서버로 송신되는 방식이 아니기 때문에, 질이 그닥 좋은 방법으로 택해지진 않으나 비교적 smtp니 뭐니..

안녕하세요 도롱군입니다. 이번 포스팅은 CSS를 이용한 하단고정배너 (bottom fixed banner)를 만들어 보려고합니다.준비할 것 html와 css, 배너 닫기 기능을 넣기 위해 Javascript 약간의 지식? 이 필요합니다. 하단고정배너? 그게 뭔가요? 위의 사진과 같이, 스크롤 영역에 상관 없이 창의 하단부분에 고정되어 자리하는 배너입니다.많은 웹사이트에서 이를 이용한 웹디자인이 되어있고 광고 효과도 괜찮게 평가되는 알아두면 괜찮을 법 한 녀석입니다. 1. html 작성 모든 웹의 기초가 되어주는 html. 독타입 선언을 한, 이 들어가있는,기본적인 html 구조를 잡아주셔야합니다. 이제 html 문서의 몸체 부분의 내용을 기입해주어야 하는데요.기본적으로 레이아웃을 나눌때 자주 사용되는 태..

안녕하세요, 도롱군 입니다.금일 포스팅은 포토샵 기초부터 실무까지 1편 레이어의 기초에 대해 알아보도록 하겠습니다. 필자는 참고로 Adobe Photoshop CS6을 사용하고 있습니다.따라서, 모든 포스팅은 CS6에 초점이 맞추어져 진행될 예정입니다. 오늘 금일 포스팅 주제는 레이어의 기초와 유용한 되돌리기 단축키에 대해서 알아보도록 하겠습니다. 레이어? 그게 뭐지? 오늘의 주인공은 귀여운 강아지가 되겠습니다.해당 포스트를 보고선, 이게 어딜봐서 레이어와 연관있는지 잘 모르실 수도 있습니다. (오로지 포토샵을 처음 입문하시는 분들을 위한 포스트입니다, 심화 부분은 차후 포스트하도록 하겠습니다.) 그렇다면, 레이어는 도대체 무엇일까요?쉽게 레이어는 파일의 순서라고 생각하시면 쉽게 이해하실 수 있습니다.우..

안녕하세요, 도롱군 입니다.가상머신에 대해 짧게 고찰해보며, 설치하는 부분까지 진행 해보도록 하겠습니다. 가상머신? 그게 뭐야, 가상화? IT업계 종사하시는 분들 중, 시설 주요 시스템 관리자들은 알겠지만 모르는 분들도 꽤 많은 기술인데요.가상머신은 기존의 물리적 컴퓨팅 환경에서 논리적인 부분으로 나뉘어서 물리 서버와 같은 환경으로 사용할 수 있는,컴퓨터 안의 컴퓨터 정도로 알고 계시면 되겠습니다. 가상머신을 이용하여, 하드웨어의 물리적 리소스를 할당하여 기존 인프라의 고도화를 진행할 수도 있으며,데이터 이중화를 통하여 더욱 안정적인 데이터 인프라 구축이 가능해집니다.또한, 가상머신에 대한 Third Party Solution들이 많이 있어 기존 가상머신 솔루션에 확장성을 더 해줄 수 있고,국내 사업체에..

안녕하세요 도롱군 입니다.1편, 2편에 이어서 3편에 들어갑니다.이제 어느정도 CSS 배열에 대해서 어떤 느낌인지 감이 오는 수준입니다. 이전 게시물 CSS 기초부터 활용하기 1편 CSS 기초부터 활용하기 2편 (스타일 시트 편) 오늘은 CSS의 색상에 대해서 알아보도록 하겠습니다.색은 사전 뜻과 같이 서로 구별되는 특성이라 합니다, 시각적인 요소가 포함되어 각 색상마다의 여러가지 의미를 갖기도 합니다.그 만큼 스타일을 표현할 때 정말 중요한 요소 중 하나입니다. CSS에서의 색상을 표현하는 방법은 많습니다, CSS 내에서만 3가지 방법으로 낼 수 있으며 CSS3를 통하여 opacity(투명도)를줄 수도 있습니다. 아래와 같이 3가지 방식으로 색상을 표현 할 수 있습니다.CSS 내 유효 색상 이름 : "..