- Today
- Total
목록Web/Front-End (27)
CODE CAVE
이젠 모바일 웹앱은 필수가 되면서 반응형은 필요요소가 되었습니다. 적응형으로 모바일 디자인을 따로 만든다고해도, 모바일 디스플레이가 워낙 크기가 다양해서 어쨌든 준(?) 반응형으로 만들어야 합니다. 적응형은 미디어쿼리를 쓰지 않을 뿐이지 각종 디스플레이 크기에 반응해야하기 때문에 고정값으로 가로세로 크기를 지정하면 안되니까요~ 적응형이라고 꼭 미디어쿼리를 쓰지 않는다는 것은 또 아니고, 결국 적응형도 반응형이나 다름 없다는 것이죠. 반응형은 반응하는 기기의 범위가 데스크탑 까지 가있는 것입니다. 뭔가 시작부터 되게 헷갈리게 만드는 말들을 주저리 주저리 했네요.. 아무튼 그래서 이번 포스팅에서는 반응형으로 동영상쪽 퍼블리싱+JavaScript 하실 때 참고하시라고 제가 작업했던 내용을 공유드리려고 합니다...
로그인 할때 아이디 저장 기능은 많이들 쓰죠!아이디 저장 기능을 제공하지 않는 사이트를 찾는게 더 힘든 요즘 입니다. 이번에 제가 값 저장 기능. 다시 한번 개발하면서 사용한 소스를 공유 하려고 합니다~ 값의 저장에는 여러가지 방법이 있죠.PHP의 세션으로 웹서버에 어떤 값을 키와 함께 저장할 수 있지만클라이언트 단에서 쿠키의 사용도 가능합니다! 자바스크립트가 있기에 가능한 일이죠. 이번에 포스팅 할 것은 이 쿠키를 사용하여 어떤 값을 키:값 형태로 브라우저에 저장해서 사용 해보는 것을 보여 드리려고 합니다. 일단 쿠키의 생성(setCookie), 삭제(deleteCookie), 얻기(getCookie)는 인터넷에 여기저기 퍼져있는 자바스크립트 소스 그대로 가져왔습니다! 뛰어나신 프로그래머들이 매우 많기..
이번 포스팅으로 공유드릴 내용은어떤 날짜가 있을 때, 그 날이 무슨 요일인지 구하는 코드 입니다. 왠지 많이들 필요하실 것 같아서 생각할 시간을 줄이고 복붙 하실 수 있게 도움이 되고자 공유드립니다!아래 제가 작성한 소스코드 3줄을 함수 하나를 만드시고 그 안에 붙혀 넣으시면 됩니다.마지막 코드에 보면 "return"이란게 있으니 함수라는 것은 말하지 않아도 아시겠죠?! 자바스크립트를 기초부터 다시 살펴보고 싶으신 분들은.. "자바스크립트 이야기"라고 제 블로그에서 검색하시면 다양한 이야기들이 나옵니다. ㅎㅎ var week = ['일', '월', '화', '수', '목', '금', '토']; var dayOfWeek = week[new Date('2016-07-28').getDay()]; return ..
웹을 개발하다보면 (웹이 아니여도) 여러모로 문자열 자르기는 거의 매번 하는 작업중 하나죠! 그래서 문자열을 자르는 상황을 대표적인 두가지로 정리해봤습니다! 1첫번째 문자열을 자르는 경우는 어떤 제목을 몇글자 출력하고 "..." 을 붙혀주고 싶은 경우.(substr 함수 사용) if(input.length >= 14){ return input.substr(0,14)+"..."; }위는 14글자 이상이면 첫번째 글자부터 14번째 글자까지 자르고 + 연산자로 뒤에 "..." 을 붙혀주는 내용입니다. 좀 더 상세하게 설명 드리자면 자바스크립트의 객체에는 기본적으로 length라는 프로퍼티가 있습니다. 이 프로퍼티는 그 객체가 문자열일 경우 그 문자열의 문자 갯수를 가지고 있습니다. 위 if 문에서는 이 프로퍼..
placeholder가 되게 간편한 기능 중 하나죠! 필수적인 기능이기도 하구요 ㅋㅋ 2009년도였나~ 그 때쯤 저는 placeholder 를 하기 위해서 홀더로 쓸 이미지를 자르고 input 에 onfocus등을 이용해서 개발했던 때가 떠오르네요.. 정말 귀찮고 힘들고 개발이 하기 싫은정도까지 만드는 작업이였습니다. 이럴 시간에 로직에 좀 더 고민을 하고 싶었는데 말이죠.. 그래서 placeholder라는 속성이 나와서 편해지긴 했습니다. 하지만 편리해지면 편리해지는 만큼 동시에 호환성은 항상 문제로 뒤따라오죠! placeholder를 IE8,9에서도 호환시키는 방법은 여럿 있겠지만 아마 제일 중요한 부분은 플랫폼에 독립적이고 (부트스트랩과의 충돌문제 제거) 사용하기가 쉬워야 하는 것이지 않을까요. 이..
jQuery로 화면 사이즈를 구해야 할 일은 많습니다. 특히 모바일은 디바이스가 워낙 다양해서 한 페이지가 디스플레이 크기에 따라서 변화하는 식으로 반응형 디자인을 하고, 그 것이 실제로 디바이스 크기에 반응하도록 하는 CSS 기능 중에 미디어 쿼리라는 기능이 있습니다. 자바스크립트로도 미디어 쿼리 처럼 화면 사이즈 별로 실행해야할 행위가 다를 경우에 할 수 있는 방법이 있습니다. 물론 jQuery로 하면 더 간단한 문법으로 적용할 수 있겠죠. 그래서 이번 포스팅에서는 jQuery로 화면 사이즈를 구하고 화면 사이즈에 따른 코드를 분기 해보겠습니다. function open_chatroom(){ var windowWidth = $( window ).width(); if(windowWidth < 500) ..
웹 사이트에 쿠키를 이용하면 여러가지 것들을 만들 수 있습니다~ 어떤 배너를 오늘 하루 보지 않기, 로그인 접속자만 보이기, 브라우저로 새 접속시에만 보기 등등.. 무언가 고유한 값을 저장해놓고 사용할 수 있게 됩니다. 변수는 프로그램이 실행될때 초기화가 되고 값이 부여되고, 프로그램을 닫으면 모두 소멸됩니다. 데이터베이스는 데이터를 지우지 않는 이상 계속 남아있게 되지만 전용 서버가 있어야 합니다. 하지만 쿠키는 일정 기간 동안 지워지지 않고 클라이언트 PC에 저장되게 됩니다. 즉, 유저 마다 고유한 어떤 값을 프로그램 종료시에도 보관하고 있게 되는 겁니다. 이런 쿠키는 여러 사이트에서 볼 수 있습니다. 이번에 제가 포스팅 해볼 것은 쿠키에 대한 것으로 브라우저로 새 접속시의 쿠키 사용 입니다. 예제는..
말풍선 스타일도 참 여기저기 많이 쓰이죠~ 저도 일반적으로 포토샵을 활용하여 이미지로 만들어서 썼었는데 이게 단점이 텍스트 양에 따라서 이미지 사이즈가 조정되어 좀 귀찮은 작업들을 해야한다는 단점과 위에서 색상이라도 바꾸자고 하면 포토샵에서 또 새로 색 입히고 다시 자르고 이미지 폴더에 덮어쓰기하고.... 별로 디자인 할 필요도 없는 간단한 말풍선이라면 더더욱 짜잘한 수정사항이 짜증나질 수 있죠.. 아무튼 여러모로 매우 귀찮습니다! 이런 말풍선 정도는 CSS로 만들 수 없을까?? 생각하다가 찾아봤는데 말풍선, CSS로 만들 수 있습니다!! 네! 찾았습니다! 그것도 바로 실무에서 복붙할 수 있도록 말풍선 CSS를 만들어주는 사이트가 있어서 소개해드립니다. 전 이 사이트의 스타일 고대로 가져와서 몇가지만 수..
이번에 소개 해드릴 것은 swiper 라는 라이브러리 인데요~ 간단하게 이미지 슬라이더를 구현 할 수 있는데 여기에 터치 스와이프 까지 지원해서 모바일에서 쓰기에도 매우 적합하다고 보여집니다~ 저도 실제로 한개의 데스크탑 슬라이드와 한개의 모바일 웹 사이트에 적용해봤는데 매우 자연스럽고 확장성도 좋았습니다. 공식 사이트는 여기 이구요. 스와이프 라이브러리 사용법은 아래와 같습니다. new Swiper('.container', { pagination: '.swiper-pagination', paginationClickable: true, spaceBetween:0, loop: true, }); 위 처럼 작성 해주시면 자바스크립트 쪽은 끝 입니다. 매우 직관적이죠? 객체를 생성하면서 생성자에 인수를 넘기는 ..