javascript (6) 썸네일형 리스트형 [youtube] 동영상 플레이 하는 목록 / 화면 만들어보기 구현된 페이지 캐나다온라인 수업캐나다온라인 수업, 캐나다고등학교 내신관리, 수학, 과학,영어,사회 토플 SAT 시험대비http://online.ige.kr/?page=sample 기본 개념은 이러합니다. #1 Youtube의 영상 공유하기에서, 코드를 선택하면 Iframe 형태로 공유할 수 있습니다. #2 그 코드에서 고유 콘텐츠 값 만을 변경하여, 플레이 리스트를 만들어 봅니다. 공유하기에서 코드를 선택하면 대략적으로 저런 코드가 나옵니다. 여기서 src="https://www.youtube.com/embed/yvg6m2ZUoHg" 이 코드가 콘텐츠에 대한 주소이고, 여기서 yvg6m2ZUoHg 이 코드가 고유 콘테츠 코드라 할 수 있겠습니다. 그럼 여기서 부터 시작합니다. 수학강의 ( Grade 10.. [js/jquery] div 화면에 나왔는지 확인하는 함수 다른 lib 를 사용해서도 충분히 구현가능하다만, 그냥 필요에 의해서 한번 만들어본 코드 일단 필요할 것이라 판단되는 상황은 아래와 같다. 스크롤을 하다, 특정 영역에 도달했을 때 뭔가 동작이 일어나야함 상단 네비게이션에 특정 영역에 메뉴 On 시킬 때 css animation을 실행시키는 시점(?) 이건 개인적인 걸로,, 암튼 등등의 경우에 사용된다. 공식은 이러하다. #1 현재 위치 값을 알아낸다. - 현재 위치를 알아야, 특정 DIV의 위치와 비교를 할 수 있다. #2 특정 DIV 위치를 알아야한다. - #1과 같은 맥락이네.. 암튼 함수는 이러하다 function setVisible(a){ if( a.length > 0 ){ var stdPos = $(window).scrollTop() + $(w.. [js/jquery] 스크롤 Top 버튼 만들기 참 안외워 진다. 웬만하면 외워서 직접 작성하고 싶은데 매번 검색해서 쓰기되는 코드 TOP 이제는 외워서 써보자 background image slide tip! Vegas Background SlideShowDon't waste your precious time, support is available for 24$. Ask your question and quickly receive a ZIP file with a clear running example with commented code and assets solving your problem.http://vegas.jaysalvat.com [css/js] 로딩화면 만들기 로딩화면을 만드는 방법 간단하게.. #1 먼저 css 로 로딩중에 보여줄 화면을 만듭니다. 보통 화면을 덮어서, 만듭니다. .loading{ width:100%; height:100%; position:fixed; left:0px; top:0px; background:#fff; z-index:1000; /* 이 값으로 레이어의 위치를 조정합니다. */ } #2 로딩으로 보여줄 div 를 화면에 넣습니다. 보통 body 바로 담에 넣으면 됩니다. #3 페이지가 로드되었을 때 로딩화면을 감춥니다. 이렇게하면, 일단 페이지가 로드되면 하얀 loading div 가 보이고, 페이지가 로드되면, 그 div 가 사라집니다. [js/javascript] 동적으로 meta tag (opengraph) 설정하기 오픈 그래프기존의 웹사이트를 소셜네트워크 서비스와 연동하여 사업자와 고객들과의 관계를 강화하고 마케팅 플랫폼으로 활용하는 기법. 신규고객 확보나 차별화된 사용자경험(UX)을 고객에게 제공할 수 있으며 외부 유입 트래픽을 증대하거나, 입소문(구전) 효과, 마케팅 홍보 채널의 활용, 고객과의 관계 강화나 신뢰도 증가, 고객에게 차별화된 쇼핑경험을 제공할 수 있는 기법이다.https://terms.naver.com/entry.nhn?cid=42346&docId=2070920&categoryId=42346 Open Graph protocolThe Open Graph protocol enables any web page to become a rich object in a social graph.http://ogp.. 이전 1 다음