반응형웹이나 모바일웹에서 터치 슬라이드를 적용하는데 아주 유용한 플러그인을 소개해 드리겠습니다.플러그인의 사용이 무조건 좋다고 볼 수는 없으나 직접적인 소스를 만드는 시간에 대한 할애가 너무 많기 때문에 이런 플러그인을 잘 사용하는 것도 중요하다 생각합니다. 1. 사용방법위 사이트에서 Download 버튼을 클릭해 다운 받습니다.그럼 위사이트 전체적인 설명이 들어있는 폴더를 확인할 수 있는데요.아래의 파일을 찾아 원하는 경로위치에 넣어 줘야 하는데 정확히 어디 위치에 있는지 찾기 힘드실 수 있습니다.owl.carousel.min.css 와 owl.theme.default.min.css 는OwlCarousel2 > docs > assets > owlcarousel > assets 폴더 안에 있습니다.owl..

See the Pen CSS Marquee Logo Wall by Ryan Mulligan (@hexagoncircle) on CodePen.

문제 : 구글애드센스 인피드를 게시물 사이사이 출력되도록 작업함.@php $randomNumbers = [ 2, //rand(1, 6), rand(7, 12), rand(13, 20) ]; $counter = 0; @endphp @foreach ($document_list as $no => $document) @php $counter++; // 카운터 증가 @endphp 게시물 @if (in_array($counter, $randomNumbers)) // (adsbygoogle = window.adsbygoogle..

로딩페이지가 필요한 이유페이지가 로딩할 때 이미지들이 다운되는게 보여지기때문에 홈페이지의 오류처럼 받아들일 수 있다.이런경우에 하얀여백이나 로딩애니메이션을 넣어서 대응이 가능하다. html  JS CSS.loading{ width:100%; height:100%; position:fixed; left:0px; top:0px; background:#fff; z-index:100000000;}  이렇게하면 스레드 웹사이트 같은 로딩화면 가능하다예)

상품정보 더 보기 #detail{height: 500px;}#detail.hidden{height: 200px; overflow: hidden;}a#btnMore{margin: 30px auto; background-color:red; color:white;}.detailMore{position: relative;}.detailMore:before { content: ''; position: absolute; top: -125px; //맞게 조절 left: 0; display: block; width: 100%; height: 96px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), r..

DIV 영역 그 자체에 링크를 걸어서 DIV 영역을 클릭하면, 지정된 주소(URL)로 이동하도록 하려면 아래와 같이 스타일(style) 속성으로 지정해 주면 된다.[DIV 영역 자체에 링크 걸기]내용........ [실제 예제]http://moonhouse.co.kr';">이 곳은 DIV 영역이며, 영역 자체에 링크를 걸었다. DIV 영역을 클릭하면 지정된 주소로 이동한다. 이 곳은 DIV 영역이며, 영역 자체에 링크를 걸었다. DIV 영역을 클릭하면 지정된 주소로 이동한다.  p.s1. 현재페이지에 부를때onclick="location.href='목적지 링크주소(URL)'"2. 새 창에 열때onclick="window.open('목적지 링크주소(URL)')" [활용방법]- 모바일에서 제목부분만 Url을..

높이가 컨텐츠에 따라 조절되는 textarea는 다음과 같이 구현합니다.원리는 다음과 같습니다.사용자가 값을 입력할 때마다 height를 ‘auto’로 설정하여 scrollHeight가 컨텐츠 높이만큼 만듭니다.그 scrollHeight값을 height에 반영합니다.높이가 늘어나더라도 스크롤바가 생기지 않도록 overflow를 hidden으로 설정합니다.사용자가 수동으로 크기를 조절하지 못하게 하기 위해 resize를 none으로 설정합니다.  추가 css 스크롤 X,Y 축 overflow-x:hidden; overflow-y:auto; TEXTAREA 옵션  WRAP = VIRTUAL  --화면에 맞게 자동으로 줄바꿈, 전송시는 입력대로 전송WRAP = PHYSICAL  --화면..

js js 파일로 만들어서 html에 불러오기 const remainTime = document.querySelector("#remain-time"); function diffDay() { const masTime = new Date(); //시작일 const todayTime = new Date("2022-12-01"); // 오늘 const diff = masTime - todayTime; const diffDay = String(Math.floor(diff / (1000*60*60*24))); const diffHour =String( Math.floor((diff / (1000*60*60)) % 24)).padStart(2,"0"); const diffMin = String(Math.floor((..

https://moonformeli.tistory.com/11 jQuery를 이용한 메뉴 접었다 펼치기[더보기 기능] 간단하면서도 쉬운 메뉴 펼치기를 구현해보도록 하겠습니다. jQuery의 클래스 선택자만 이용하면 아주 간단하게 구현할 수 있는 기능입니다. 우선, jQuery의 선택자에 대해 모르시면 잠시 들렀다 moonformeli.tistory.com

제목 그대로 글 색상을 랜덤으로 출력하는 방법입니다. html파일에 script를 아래와 같이 작성 랜덤으로 출력하고자 하는 코드에 class를 random_colors 로 지정하면 됩니다. {$val->getTitle()}