본문 바로가기

분류 전체보기407

프론트엔드6-3. [jquery 예제] review 기능과 게시판 기능 만들기 1. review 기능 textarea를 이용해서 100글자를 넘어가면 못쓰게 한다. 1. HTML 파일 남은 문자 수 : 100 textarea의 maxlength 값을 이용하면 손쉽게 제어할 수 있다. 2. js 파일 $(function(){ $("#review").keyup(function(){ let textlen = 100 - $("#review").val().length; $("#cnt").text(textlen); //$("#cnt").html(textlen); }); }); 입력할 때 이벤트 실행! keyup 2. board 기능 1. HTML 파일 게시판 목록 전체선택 번호 제목 작성자 조회수 등록일 100 제목1 sweet potato 0 02-16 12:10 101 제목2 potato.. 2022. 2. 17.
프론트엔드6-2. [jquery 예제] jquery를 이용해서 글자 크기 변경 단위가 px이든, em이든, cm이든 컴퓨터는 모두 px로 인식한다. 버튼을 눌러서 글자 크기를 작게 하거나 기본 크기로 하거나 크게 한다. 1. HTML 파일 - 0 + 게임·웹툰 등 일부 앱들은 이용자가 광고 영상을 수십초 재생하면 서비스를 무료로 제공한다.이 광고 모델을 기반으로 스마트폰 카메라를 이용해 사용자 눈을 추적한 뒤, 화면을 보지 않으면 광고 영상이 일시 정지되는 앱이 등장해 눈길을 끌고 있다. 바이스닷컴·기가진 등 외신에 따르면 ‘무비패스’라는 앱은 월정액 요금을 내면 하루 1개 영화를 볼 수 있는 서비스다. 하지만 회사가 어려워지면서 2019년 9월 서비스가 종료되고, 회사는 2020년 파산을 선언했다. 그 뒤 회사에서 쫓겨났던 공동 창업자인 스테이시 스파이크 씨가 무비패스를 인수, .. 2022. 2. 17.
프론트엔드6-1. [jquery 예제] 영화포스터 움직이는 바 만들기-2 2022.02.11 - [멀티캠퍼스 풀스택 과정/프론트엔드] - 프론트엔드4-0.[javascript] 영화포스터 움직이는 바 만들기 프론트엔드4-0.[javascript] 영화포스터 움직이는 바 만들기 웹 창을 열면 바로 움직이다가 끝까지 가면 다시 또 반대쪽으로 움직이고 마우스를 올리면 멈춘다. 구조 구분하기 구조: 전체를 싸고 있는 빨간색 div / 왼쪽 버튼 ◁ 과 오른쪽 버튼 ▷ / 그림 를 everysmallstep.tistory.com -> 라이브러리 없이 만든 영화포스터 움직이게 하는 것을 jquery를 사용해 좀 더 간단하게 나타낼 수 있다. 1. HTML 구조 2. js 파일 1. 이미지를 먼저 imgList에 넣기 $(()=>{ // 포스트 이미지 목록 만들기 let tag=""; f.. 2022. 2. 17.
프론트엔드5-10. jquery animate( ) .animate( )는 여러 CSS 스타일 속성을 이용해 새로운 이펙트 효과를 만들어준다. [animate의 속성] properties 이펙트 효과를 구성할 CSS 스타일 속성 duration (default:400) 이펙트 효과가 지속될 시간 easing function (default:swing) 이펙트 효과의 시간당 속도를 전달 callback함수 이펙트 효과의 동작이 완료된 후에 실행할 함수 정의 1. HTML 파일 ANIMATE 2.-1 js파일 .animate( {옵션}, 이동시간 ) 첫번째 매개변수로 json형식으로 된 옵션, 두 번째 매개변수로 이동시간(slow, fast, ms..) $(()=>{ $("#i1").animate({marginLeft:"1000px" //(1) ,width:.. 2022. 2. 17.
프론트엔드5-9. jquery의 effect(숨김,표시)slide, fade 1. HTML파일 숨기기(hidden) 보여주기(show) toggle(hidden,show) 숨기기(fadeOut) 보여주기(fadeIn) fadeToggle(fadeOut,fadeIn) 숨기기(slideUp) 보여주기(slideDown) slideToggle(slideUp,slideDown) 1. 요소의 숨김과 표시 : hide( ), show( ), toggle( ) .hide( ) 선택한 요소를 사라지게 한다. .show( ) 선택한 요소를 나타나게 한다. .toggle( ) 선택한 요소에 .show( ) 메서드와 .hide( ) 메서드를 번갈아가며 적용한다. 1-1. 효과 속도 설정 : "slow", "fast", "normal" "밀리초(ms)" 이미지가 사라지는 시간을 매개변수로 받는다. 모.. 2022. 2. 16.
프론트엔드5-8. jquery trigger() trigger( ): 이벤트 핸들러 없이도 함수를 실행시켜준다. 1. HTML 파일 2. js파일 $(()=>{ // 수동으로 첫 번째 이미지를 클릭 시 클릭이벤트를 처리할 부분 let n = 1; $("img:first").on("click", function(){ // 첫 번째 이미지를 클릭했을 때 실행할 함수 $("body").append(""); if(n>=4){ // 이미지가 4개여서 4까지만 돌고 다시 이미지 1번으로 n=1; } }); }); 더보기 더보기 맨처음 이미지를 클릭할 때 마다 이미지가 생긴다. $(()=>{ // 자동으로 첫 번째 이미지를 클릭이벤트 발생시키기(1초마다) setInterval(function(){ // 함수를 바로 setInterval 안에 만들기 $("img").. 2022. 2. 16.

티스토리툴바