커머스에서도 사용가능한 오픈 라이센스(MIT) 슬라이더를 소개한다. 예전의 owl-carousel에 비해 더욱 새로워진 owl-carousel2 링크 : http://www.owlcarousel.owlgraphic.com/ 내가 아주 자주 애용하는 플러그인이다.이 플러그인 말고 메이슨리도 아주 유용하게 사용한다. 이 플러그인은 그냥 메인 슬라이더나 갤러리 이미지 뿐만아니라다양한 형태로 응용가능하고카페24/워드프레스/티스토리 같은 솔루션에서도 쉽게 사용할 수 있다. 하나씩 차근차근 포스팅 하겠다. 먼저 사이트내의 Installation을 참고하여 설치를 해야한다. 1. JS와 CSS 파일을 다운로드 받는다.2. 서버, 호스팅 또는 블로그에 업로드 후 삽입한다. // CSS는 둘중에 하나만 해도 상관없다. ..
한가지 배경색이나 한가지 콘텐츠의 색이 지루하다고 느껴질때또는 콘텐츠의 내용을 랜덤으로 바꾸고자 할때 사용하는 스크립트를 작성해 보겠다 이 기능은 이 블로그의 상단 제목에 적용된 스크립트다. HTML 작성 // 배경색으로 바꾸고자 하는 엘리먼트에 ID를 지정해 준다. 여기는 내용입니다. CSS 작성* { margin:0; padding:0; } #wrap { width:100%; height:300px; text-align:center; vertical-align:middle; } // 배경색은 JS가 작동안하는 브라우저에서 기본으로 나타날 속성을 지정해 놓는것이 좋다. #wrap p { color:white; font-size:60px; line-height:300px; } JS 작성var color ..
쇼핑몰이나 블로그에 어떤 메뉴를 구상해놓고클릭값을 빼놓는 경우가 있다. 나같은 경우 어떤 메뉴를 넣고 싶은데 까먹을까봐 그냥 메뉴명부터 넣어놓곤 하는데그럴때 그냥 두면 허전하니 방문자가 클릭 했을 때 알럿창을 띄워 놓는다. 먼저 스크립트를 작성한다. function alert_event() { alert("여기 메시지가 들어간다"); }; 알림창이 뜨는 기능을 alert_event로 지정했다.줄바꿈을 하고싶다면 HTML에서 을 입력하는것 처럼 \n을 입력하면 된다 매우 간단한 구조의 스크립트다복사해놓고 두고두고 쓰자 다음은 버튼 클릭 액션을 만들자 클릭 아까 작성한 스크립트를 href에서 javascript:alert_event() 를 이용해서 실행하면 된다. 아래는 실행된 모습 See the Pen 버..
이 블로그를 보면 스크롤을 내렸을때 헤더가 숨겨지고 스크롤을 올리면 다시 헤더가 나타나는걸 볼 수 있다. 이 기능의 장점은 일반적으로 이용자는 스크롤을 내리면서 콘텐츠를 보는데 헤더가 숨겨지면 모바일에서 훨씬 더 넓은 영역으로 콘텐츠를 볼 수 있다는 거다. 이 기능은 자바스크립트로 스크롤 값을 받아서 제이쿼리로 그 값에 맞게 CSS 값을 변경해 준다. 먼저 HTML을 작성해 본다. ID 값이 header인 div 안에 헤더에 필요한 내용을 작성하면 된다. 그 다음은 CSS를 작성한다. #header { width: 100%; height: 50px; z-index: 10; top: 0px; position: fixed; background-color: #3591FE; border-bottom: 1px s..
이 블로그 우측 상단의 버튼을 누르면 우측에 슬라이드 메뉴가 튀어나온다. 사실 여기까지 구현하는데는 정말 간단하다. 특정 클래스의 엘리먼트를 클릭했을때 슬라이드 메뉴에 클래스를 하나 생성하는 것만으로 구현이 가능하다. 제이쿼리의 경우 모바일에서 동작할 때 프리징이 생기는 경우가 많다. 특히 많은 엘리먼트가 움직여야 하는 경우 끊김 현상은 더욱 심각해 진다. 따라서 만약 슬라이드 메뉴안에 엘리먼트가 많이 존재한다면 과감하게 애니메이션 효과를 없애버리는 것을 추천한다. (나같은 경우는 편법을 사용한다. 애니메이션이 없는 슬라이드 메뉴는 못 견디겠다) 슬라이드 메뉴 만들기 간단하게 슬라이드 메뉴를 만들어 보자. 먼저 HTML을 작성한다. 그다음 CSS를 작성한다. .btn { width : 50px; heig..
라라벨은 블레이드(blade)라는 템플릿으로 프론트엔드를 구현한다. 블레이드는 .blade.php 확장자를 사용하며 '상속' 과 '섹션' 이라는 개념이 존재한다. master.blade.php 생성하기 블레이드는 /layouts/master.blade.php 의 레이아웃 틀을 상속받아 페이지 뷰를 구성한다. 마스터 레이아웃의 작성 예시는 다음과 같다. @yield('header') // 헤더 영역 @yield('container') // 콘텐츠 영역 @yield('footer') // 푸터 영역 @yield('import_js') // 스크립트 영역 예시를 보면 @yield 라는 명령을 볼 수 있다. @yield는 한마디로 '여기 들어가는 내용을 상속한다'는 것을 의미한다. 자세한 내용은 뷰페이지를 만들..
브라우저마다 각자의 스타일을 조금씩 가지고 있어서 CSS를 초기화 하지 않으면 올바른 모양으로 표현되지 않는다. CSS를 초기화하는 방법으로는 대표적으로 Reset CSS와 Normalze가 있는데 나같은 경우는 아무 속성도 없는 상태에서 코딩하는것이 편해서 두가지 다 사용하지 않는다. 내가 사용하는 소스는 아래와 같다. @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); * { margin: 0; padding: 0; text-decoration: none; font-family: '나눔고딕', 'Nanum Gothic', sans-serif;; font: 13px '나눔고딕', 'Nanum Gothic', sans-serif;;..
HTML 문서를 새로 만들때마다 부터 을 작성하는게 보통 귀찮은 일이 아니다.보통 비슷한 양식으로 작성이 되는데 나는 쓸때마다 기본 양식으로 정해놓고 복붙(Ctrl+C > Ctrl+V) 한다. 기본적인 HTML 형태는 다음과 같다. // DTD 선언 : 이 문서의 종류를 선언한다. // HTML 문서의 시작을 알리는 태그 // 문서의 내용을 작성하는 영역 // HTML 문서가 끝났다는것을 알리는 태그 DTD(Document Type Definition) : 문서 종류 선언하기 HTML 문서 제일 위에 작성되는 것으로 이 문서가 어떤 규칙에 의해서 작성 되었는지를 브라우저에게 알려주는 역할을 하며 브라우저는 DTD 선언에 따라서 문서의 해석을 다르게 한다. 선언을 하지 않아도 브라우저는 알아서 태그를 해석..