배너 안에서 풍선이 떨어지는 효과를 자바스크립트를 통해 만들어보자.

 

배너 닫기 부분 구현 전까지.

풍선이 랜덤으로 내려오는 효과 구현

// 배너
// 이미지 10개 
// 사용할 예정
// 사운드를 삽입할 수도 있다. 이번에는 생략

// 필요한 부분들을 객체화
let banner = document.getElementById('banner');
let img = banner.getElementsByTagName('img'); // 베열형식, 동일한 태그를 배열로 가지고 온다
let toggle = document.getElementById('toggle');

// 배너의 높이 가지고 오기
// 높이에 따라 동작이 달라진다
// css 속성값을 가지고 올 수 있다
let banner_height = getComputedStyle(banner).height;

// 풍선을 객체형태로 만들어 관리해주기
// 여러가지 정보를 하나로 묶어서 실제 풍선이 움직일 때 동작을 해야한다.
// 전역변수
let cast = [];

// 객체생성방식
// 이렇게도 할 수 있지만 이번의 경우엔 다른 방식으로 해보겠다.
// let ballInfo = {
//     x : x,
//     y : y,
//     size : size,
//     angle : angle,
//     speed : speed
// }

// 풍선 객체 생성 함수
// num -> 인덱스 번호
function set_balloon(num){
    let x = Math.floor(Math.random() * (500 - 10) + 10); // x축 10 ~ 500
    let y = Math.floor(Math.random() * (400 - 120) + 120); // y축 120 ~ 400
    let size = Math.floor(Math.random() * (200 - 100) + 100); // 크기 범위  100 ~ 200
    let angle = Math.floor(Math.random() * (360 - 0) + 0); // 회전하는 각도 범위 0 ~ 360
    let speed = Math.random() * (2 - 0) + 0; // 속도 0 ~ 2

    cast[num] = { // cast = [{},{},{},{},... {}]
        x : x,
        y : -y, // y축은 -일 수록 올라가고, +일 수록 내려간다
        size : size,
        angle : angle,
        speed : speed
    }
}

// 각각의 풍선 초기화 함수
function ball_init() {
    for (let i = 0; i < img.length; i++) {
        // 풍선 객체들을의 속성 초기화
        set_balloon(i)
        img[i].style.left= '-9999px'; // 풍선의 최초 x좌표  Object.style.css 속성 = "값을 줄 땐 문자열처리"
        img[i].style.top = '-9999px'; // 풍선의 최초 y좌표
    }
}

function animate_balloon() {
    for (let i = 0; i < img.length; i++) {
        // 풍선 속성 변경
        img[i].style.left = cast[i].x + 'px'; // css 속성 문법에 맞춰 단위를 붙여야 함. 
        img[i].style.top = cast[i].y + 'px';
        img[i].style.transform = 'rotate(' + cast[i].angle + 'deg)'; // 회전각 초기화

        if (cast[i].y < parseInt(banner_height)){
            // 풍선이 화면에 보임
            // 1 ~ 3 하나의 풍선이 가지는 속도
            cast[i].y += 1 + cast[i].speed;
            cast[i].angle += cast[i].speed; 
        }else{
            // 풍선이 배너 영역을 지나서 화면 밖으로 나갔을 때
            set_balloon(i);
        }
    }
}

ball_init();

// (호출해서 실행하고 싶은 함수, 시간)
setInterval(function(){
    animate_balloon();
}, 1000 / 30);

 

배너 열기, 닫기 기능 추가

toggle.onclick = function(){
    // 속성(id, class 등) 중에 class 가 있으면 읽어와라
    let attr = banner.getAttribute('class'); // class 속성이 가지고 있는 값을 읽어온다
    if (attr === 'active'){
        // 베너닫기
        banner.removeAttribute('class'); // 해당 속성을 제거
        toggle.innerHTML = '배너 열기';
        return false; // a 태그에 링크속성 제거
    }else {
        banner.setAttribute('class', 'active'); // 해당 속성을 추가
        toggle.innerHTML = '배너 닫기';
        return false;
    }
};

 

 

브라우저 콘솔창을 열어보면 배너를 열고 닫았을 때 active 속성이 사라지고, 추가되며 글씨가 바뀌는 것을 알 수 있다.

 

 

전체 코드 :

// 배너
// 이미지 10개 
// 사용할 예정
// 사운드를 삽입할 수도 있다. 이번에는 생략

// 필요한 부분들을 객체화
let banner = document.getElementById('banner');
let img = banner.getElementsByTagName('img'); // 베열형식, 동일한 태그를 배열로 가지고 온다
let toggle = document.getElementById('toggle');

// 배너의 높이 가지고 오기
// 높이에 따라 동작이 달라진다
// css 속성값을 가지고 올 수 있다
let banner_height = getComputedStyle(banner).height;

// 풍선을 객체형태로 만들어 관리해주기
// 여러가지 정보를 하나로 묶어서 실제 풍선이 움직일 때 동작을 해야한다.
// 전역변수
let cast = [];

// 객체생성방식
// 이렇게도 할 수 있지만 이번의 경우엔 다른 방식으로 해보겠다.
// let ballInfo = {
//     x : x,
//     y : y,
//     size : size,
//     angle : angle,
//     speed : speed
// }

// 풍선 객체 생성 함수
// num -> 인덱스 번호
function set_balloon(num){
    let x = Math.floor(Math.random() * (500 - 10) + 10); // x축 10 ~ 500
    let y = Math.floor(Math.random() * (400 - 120) + 120); // y축 120 ~ 400
    let size = Math.floor(Math.random() * (200 - 100) + 100); // 크기 범위  100 ~ 200
    let angle = Math.floor(Math.random() * (360 - 0) + 0); // 회전하는 각도 범위 0 ~ 360
    let speed = Math.random() * (2 - 0) + 0; // 속도 0 ~ 2

    cast[num] = { // cast = [{},{},{},{},... {}]
        x : x,
        y : -y, // y축은 -일 수록 올라가고, +일 수록 내려간다
        size : size,
        angle : angle,
        speed : speed
    }
}

// 각각의 풍선 초기화 함수
function ball_init() {
    for (let i = 0; i < img.length; i++) {
        // 풍선 객체들의 속성 초기화
        set_balloon(i)
        img[i].style.left= '-9999px'; // 풍선의 최초 x좌표  Object.style.css 속성 = "값을 줄 땐 문자열처리"
        img[i].style.top = '-9999px'; // 풍선의 최초 y좌표
    }
}

function animate_balloon() {
    for (let i = 0; i < img.length; i++) {
        // 풍선 속성 변경
        img[i].style.left = cast[i].x + 'px'; // css 속성 문법에 맞춰 단위를 붙여야 함. 
        img[i].style.top = cast[i].y + 'px';
        img[i].style.transform = 'rotate(' + cast[i].angle + 'deg)'; // 회전각 초기화

        if (cast[i].y < parseInt(banner_height)){
            // 풍선이 화면에 보임
            // 1 ~ 3 하나의 풍선이 가지는 속도
            cast[i].y += 1 + cast[i].speed;
            cast[i].angle += cast[i].speed; 
        }else{
            // 풍선이 배너 영역을 지나서 화면 밖으로 나갔을 때
            set_balloon(i);
        }
    }
}

ball_init();

// (호출해서 실행하고 싶은 함수, 시간)
setInterval(function(){
    animate_balloon();
}, 1000 / 30);

toggle.onclick = function(){
    // 속성(id, class 등) 중에 class 가 있으면 읽어와라
    let attr = banner.getAttribute('class'); // class 속성이 가지고 있는 값을 읽어온다
    if (attr === 'active'){
        // 베너닫기
        banner.removeAttribute('class'); // 해당 속성을 제거
        toggle.innerHTML = '배너 열기';
        return false; // a 태그에 링크속성 제거
    }else {
        banner.setAttribute('class', 'active'); // 해당 속성을 추가
        toggle.innerHTML = '배너 닫기';
        return false;
    }
};

 

처음에 배울때는 같은 코드를 안보고 칠 수 있을 정도로 계속 쳐보는 것이 더 좋다.

그러면서 이해하는 것.

강사님이 주는 코드는 최대한 분석해 놓을 것.

 

 

이번에는 제이쿼리로 위 코드를 바꿔 볼 것이다.

 

제이쿼리 ver.

let $banner = $('#banner');
let $img = $banner.find('img');
let $toggle = $('#toggle');

let $banner_height = $banner.css('height');

let cast = [];

function set_balloon(num){
    let x = Math.floor(Math.random() * (500 - 10) + 10); // x축 10 ~ 500
    let y = Math.floor(Math.random() * (400 - 120) + 120); // y축 120 ~ 400
    let size = Math.floor(Math.random() * (200 - 100) + 100); // 크기 범위  100 ~ 200
    let angle = Math.floor(Math.random() * (360 - 0) + 0); // 회전하는 각도 범위 0 ~ 360
    let speed = Math.random() * (2 - 0) + 0; // 속도 0 ~ 2

    cast[num] = { // cast = [{},{},{},{},... {}]
        x : x,
        y : -y, // y축은 -일 수록 올라가고, +일 수록 내려간다
        size : size,
        angle : angle,
        speed : speed
    };
}

function ball_init(){
    // each 함수 사용 
    // 배열 $img 을 가지고 와 하나씩 확인 
    $img.each(function(i){
        set_balloon(i);
        $img.eq(i)
            .css('left','-9999px')
            .css('top', '-9999px')
    });
}

function animate_balloon(){
    $img.each(function(i){
        $img.eq(i)
        .css('left', cast[i].x + 'px')
        .css('top',cast[i].y + 'px')
        .css('transform', 'rotate(' + cast[i].angle + 'deg)');

        if (cast[i].y < parseInt($banner_height)){
            // 풍선이 화면에 보임
            // 1 ~ 3 하나의 풍선이 가지는 속도
            cast[i].y += 1 + cast[i].speed;
            cast[i].angle += cast[i].speed; 
        }else{
            // 풍선이 배너 영역을 지나서 화면 밖으로 나갔을 때
            set_balloon(i);
        }
    });
}

ball_init();

// (호출해서 실행하고 싶은 함수, 시간)
setInterval(function(){
    animate_balloon();
}, 1000 / 30);

 

문법을 익히기 위해 노력할 것.

스크립트에서 해당 메소드의 이름, 제이쿼리에서 메소드의 이름 이해

 

 

이걸 다 할 줄 알아야 진정한 기술탑재 프론트엔드 엔지니어

 

다음에 볼 시험) 자바스크립트로 프로그램짜기, 그걸 제이쿼리로 바꾸기

해 볼 것 : 계산기 자바스크립트 코드를 제이쿼리 방식으로 바꾸기

 

계산기 코드 :

// 변수 선언

//document.cal.result // 폼태그를 접근하는 방식 -> 여기서는 아이디나 클래스가 하나하나 선언되어있지 않아 사용 불가
let inp = document.forms['cal'];
let input = inp.getElementsByTagName('input'); // 배열형식으로 값을 가지고 온다
let cls_btn = document.getElementsByClassName('cls_btn')[0]; // 배열형식
let result_btn = document.getElementsByClassName('result_btn')[0]; //배열형식


// 버튼 3그룹 
// 1. clear
// 2. 숫자버튼
// 3. 결과버튼

// 계산기 초기화(clear)
function clr(){
  inp['result'].value = 0; // 결과창

}


// 계산기 입력 처리 함수
 function calc(value){
 // 입력이 들어가면 0을 지움
  if (inp['result'].value == 0){
    inp['result'].value = '';
  }

  // 입력값을 결과창에 출력
  inp['result'].value += value;
}
  

// 계산 결과 처리 함수
function my_result(){
 
  let result = inp['result'].value;
  let cal = eval(result)

  //결과창에 표시
  inp['result'].value = cal;
}


// 이벤트 핸들러
// -------------------------------------------------------------------
// 숫자 및 사칙연산 버튼
for(var i = 0; i < input.length;i++){

  // 숫자와 사칙 연산자만 입력 처리
 if(input[i].value != '=' && input[i].value != 'clear'){
  input[i].onclick = function(){
    calc(this.value); // 숫자의 속성값 의미
  };
 }

} // end for


// 초기화  버튼
cls_btn.onclick = function(){
  clr();
}

// 결과 버튼
result_btn.onclick = function(){
  my_result();
}

 

구현화면 :

계산이 잘 된다.

하지만 알아보니 eval 함수는 보안 이슈가 있어서 될 수 있으면 쓰지 말아야 한다고.

스스로 풀어볼땐 eval 함수를 쓰지 않는 방법으로 풀어야겠다.

작성 : 2024. 5. 14. 17:12

 

오늘은 '자바스크립트를 이용한 cbt (전자문제풀이기) 프로그래밍'으로 그동안 배운 css와 자바스크립트의 문법을 정리했다.

'자바스크립트는 백엔드든 프론트든 아주 유용하니 꼭 공부를 많이 해둘 것' 이라는 강사님의 조언도 계속되었다.

화면구현할때

  1. 요소구성
  2. css 디자인
  3. 스크립트 적용

위 순서로 진행되야 한다! 

 

이렇게 css 를 하나하나 정리하는 과정이 정말 필요했다.

 

 

오늘 만들어 볼 것은 이런 틀을 가진 html, css 를 자바스크립트를 이용해 문제를 내보내고, 바꾸고, 점수를 매기며 동적으로 변화시키는 것.

-> css 를 정렬할 때는 그리드, 플렉스, 마진 등 하나를 정해서 만들어야 혼선이 생기지 않는다.

-> 자바스크립트에서 이벤트 주는 방식을 정리할 것.

-> 객체에 대한 이해가 있어야 함.

객체는 속성과 메서드로 되어있다.

- 속성은 특징, 메서드는 행위

- 메서드를 함수형태로 처리하는 것이 ‘기능’

- 뭘 객체로 봐야하는지 알아야 한다.

- 정답은 없음

완성된 코드와 결과 화면 :

// 메소드를 만들 때 1 메소드, 1 기능 
// 너무 많은 메소드를 넣으면 유지보수가 어려움

// 문제 객체
// 세 개를 값으로 가지는 객체 생성
function Question(text, choice, answer){
    this.text = text;
    this.choice = choice;
    this.answer = answer;
}

// 퀴즈 정보 객체
// 문제를 푸는 동안 점수 누적, 몇 문제 남았는지, 진행상황 등 정보 관리를 위한 객체
// 점수, 질문, 질문순서, 정답 확인

function Quiz(questions) {
    this.score = 0; // 점수
    this.questions = questions; // 질문
    this.questionIndex = 0; // 질문 순서
    
    // 정답 확인 기능
    // 프로토타입으로 빼둔다.
    // 메모리 한 번만 할당, 동일한 타입의 객체가 공유해서 사용할 수 있도록 한다. -> 자바의 static과 같은 의미
    // 공유 -> 메모리 효율성이 높아진다
}

// 정답 확인 메소드
Quiz.prototype.correctAnswer = function(answer) {
    // 사용자의 답과 해당 문제의 답 비교
    return answer == this.questions[this.questionIndex].answer;
}

// 문제 데이터
// 배열로 만들어 값을 활용 -> text, choice, answer
// 배열은 세미콜론을 찍으면 안된다
let questions = [
    new Question('다음 중 최초의 사용 웹 브라우저는?', ['모자이크', '인터넷 익스플로어', '구글 크롬', '넷스케이프 네비게이터'], '넷스케이프 네비게이터'),
    new Question('웹 브라우저에서 스타일을 작성하는 언어는?', ['HTML', 'jQuery', 'CSS', 'XML'], 'CSS'),
    new Question('명령어 기반의 인터페이스를 의미하는 용어는?', ['GUI', 'CLI', 'HUD', 'SI'], 'CLI'),
    new Question('css 속성 중 글자의 굵기를 변경하는 속성은?', ['font-size', 'font-style', 'font-weight', 'font-variant'], 'font-weight')
];

// 퀴즈 객체 생성
let quiz = new Quiz(questions);

// 문제 출력 함수
// 문제를 계속 변경할 수 있어야 한다.
function update_quiz(){
    let question = document.getElementById('question');
    let choice = document.querySelectorAll('.btn'); // 배열 형식
    let idx = quiz.questionIndex + 1; // 문제의 번호

    // 문제 출력
    question.innerHTML = '문제' + idx + ' ) ' + quiz.questions[quiz.questionIndex].text;

    // 선택항목 출력
    for(let i = 0; i < 4; i++) {
        choice[i].innerHTML = quiz.questions[quiz.questionIndex].choice[i];
    }

    progress();
}

// 문제 진행 정보 표시(현재 문제 번호/총 문제수)
function progress(){
    let progress = document.getElementById('progress');
    progress.innerHTML = '문제 ' + (quiz.questionIndex + 1) + ' / ' + quiz.questions.length;
}

// 결과 표시
function result(){
    let quiz_div = document.getElementById('quiz');

    let per = parseInt(quiz.score*100) / quiz.questions.length;

    let txt = '<h1>결과</h1>' + '<h2 id="score"> 당신의 점수 : ' + quiz.score + '/' +
                quiz.questions.length + '<br><br>' + per + '점</h2>';

    quiz_div.innerHTML = txt; // 결과 출력

    if (per < 60){
        txt += '<h2 style = "color:red"> 좀 더 분발하세요 </h2>'
        quiz_div.innerHTML = txt;
    } else if (per >= 60 && per < 80){
        txt += '<h2 style = "color:red"> 무난한 점수입니다. </h2>'
        quiz_div.innerHTML = txt;
    } else if (per >= 80){
        txt += '<h2 style = "color:red"> 훌륭합니다. </h2>'
        quiz_div.innerHTML = txt;
    }
}

//-----------------------------------------------
let btn = document.querySelectorAll('.btn'); // 배열 형식

// 입력 및 정답 확인 함수
function checkAnswer(i) {
    btn[i].addEventListener('click',function(){
        let answer = btn[i].innerText;

        if(quiz.correctAnswer(answer)) {
            alert("정답입니다.");
            // 문제를 맞춘 갯수를 세서 *25로 점수를 환산할 예정
            quiz.score++;
        } else {
            alert("오답입니다.");
        }

        // 다음 문제로 진행 처리
        if (quiz.questionIndex < quiz.questions.length-1){
            quiz.questionIndex++;
            update_quiz();
        }else{
            result();
        }
            
    });
}

// 4개의 버튼 이벤트 처리
for (let i = 0; i < btn.length; i++) {
    checkAnswer(i)
}

update_quiz();

 

 

 

기본적인 코드이니 이 코드를 잘 이해하고 이해가 안되면 따라쳐서 어느정도 외워둘 것.

이날의 글이 없었던 이유는 종일 UIUX 화면설계 시험을 봤기 때문!

작성 : 2024. 5. 10.

 

오늘은 조을 나눠 종일 팀플을 했다.

오전에 잠깐 스토리보드를 마무리하고,,

이게 내가 썼던 description 이고

이게 강사님이 알려주신 방향으로 수정한거다.

 

내가 전에 만들다 만 것과 비교해보면 얼마나 홈페이지 동작에 대해 이해가 낮은지 알 수 있다..

조별 과제는 역할분담을 해서 스토리보드를 만드는 것이었다.

1. 한 쇼핑몰 선정, 할 수 있는 수준까지

2. 각자 화면설계 및 스토리보드 설명

3. 스토리보드 2장~3장씩 만들기

4. 하나의 ppt로 만들어 공유

5. 그 중 한 페이지를 html로 만들기 각자 한 장 화면 구현

오늘 하루의 과제. → 무리하지 말것

우리는 요기요를 구현해보기로 했다. 온라인숍은 따로 없고 모바일 버전만 있었지만 그래서인지 가장 간단해보였다. (아니었음;)

 

 

 

 

작성 :2024. 5. 9. 18:14

 

* 중복선택 가능 여부를 표기하는 것이 별것 아닌 것 같지만 굉장히 중요한 의미를 가진다.

* 스토리보드의 한줄 한줄은 우리가 구현해야 할 코드를 의미한다.

* 디자인 반영에 대한 요구사항도 기입 가능

 

아래는 같은 설명, 다른 느낌

위 쪽이 내가 썼던 description이고 아래 쪽이 강사님이 만든 description이다.

뭔가 아직 큰 틀을 못 읽겠다. 한 페이지, 한 페이지에서 정확히 어떤 일을 하겠다 하는 기준을 가지고 파악하지 않으면 이건 쓸 수가 없는 것 같다.

 

강사님이 만든 description으로 구현된 화면

오늘은 관리자가 보는 버전으로 스토리보드를 만들어보았다.

관리자 버전의 로그인 화면

 

GNB에서 이런 식으로 뒤에 덜 중요한 부분을 연하게 처리하니 가독성이 훨씬 더 좋아진다.

 

사용자 버전의 화면에만 익숙했지,, 내가 관리자가 되어 페이지를 관리한다는게 낯설고 뭘 해야 할지 정말 감이 안잡혔다.

 

밑에 두 화면설계는 스스로 해봤지만 description을 어떻게 써야하는지 모르겠다!

잘 쓰여진 화면설계도를 좀 구글링해봐야겠다.

어제의 키워드 :

와이어프레임

Gnb = 글로벌네비게이션바

Lnb = 로컬네비게이션바

어제에 이어 화면설계 스토리보드를 짠다.

유저 모드와 관리자 모드를 생각해 만들어야 함.

회사에서는 한 페이지를 만드는데 하루가 걸리기도.

아이디의 경우 모든 경우의 수를 생각해 문구를 만들어야 함.

정확한 약속 패턴이 있는건 아니지만 이해하기 쉽게 만들어져야 한다.

내용은 간결하면서도 자세하게 많이 쓰기!

상품소개 → 한 페이지에 다 들어갈 수 없어 주로 나눔

내일은 관리자 부분을 할 예정인데 프로젝트 할 때도 드러나게 하면 좋음

어제 만든 로그인의 정보 입력 화면을 마저 만들어보았다.

두 가지 버전으로 회원가입을 요구하는 사이트이기 때문에 신경 써야 할 부분이 더 많았다.

 

Alert 창이 많아지는 경우 한 화면에서 다 보여줄 수가 없을 땐 이렇게 표 방식을 사용한다고 한다.

 

회원가입을 하기 전이나 정보를 다 입력한 후에 보이는 보안 인증 절차 화면도 이렇게 만들어지는 거였다.

 

다음은 쇼핑몰의 상품 소개로 넘어갔다.

 

이렇게 정보가 많아질 땐 페이지를 나눠야 가독성이 좋아질것 같다.

 

허위 신고에 대한 팝업창으로 오늘 수업은 마무리가 되었다. 팝업창 부분의 description은 직접 짜보라고 해 alert창도 넣어봤는데 강사님이 쓰시는 설명보다 계획적이고 자세하진 않은 것 같다.

지금하고 있는 게 거의 ppt 수업같긴 하지만 그래도 프로그래밍에서 가장 중요한 협업을 위한 기초를 배우는 과정이니 정신 놓지 말고 잘 들어야겠다.

목업에 대해 배운다

금요일이나 월요일에 디자인 구현으로 시험을 볼 예정

조원과 함께 ppt로 파워목업을 사용해 홈페이지 구성 틀을 만들어볼 것이다.

 

스토리보드 짜는 법 참고 사이트 :

 

스토리보드 디스크립션 쓰는 방법

디스크립션(Discription)은 작업자에게 '다음 행동'을 암시하는 화면을 정의하는 문장이다. 즉, 기획한 웹사이트의 와이어프레임을 잡은 후에 그 화면에서 발생하는 액션을 이해관계자에게 설명하

lattediary.tistory.com

 

 

 

 

 

 

계속해서 제이쿼리의 이벤트에 대해 배운다.

 

change 이벤트

change 이벤트 : 요소의 변화 감지
$(this) = "#rel_site"
this 는 이벤트가 발생한 요소
<script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            
            $(function () {
                // change 이벤트 : 요소의 변화 감지
                // $(this) = "#rel_site"
                // this 는 이벤트가 발생한 요소
                $("#rel_site").on("change",function(){
                    $(".txt").text($(this).val())
                });     
            });
            
        </script>
    </head>
    <body>
        <select id="rel_site">
            <option value="">사이트 선택</option>
            <option value="www.google.com">구글</option>
            <option value="www.naver.com">네이버</option>
            <option value="www.daum.net">다음</option>
      </select>
      <p class="txt"></p>
    </body>

 

 

링크 속성 제거와 클릭이벤트 적용하기

<script>
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>

            $(function () {
                // 링크 속성 제거와 클릭이벤트 적용하기 
                // <a> <form> 태그
                // <a href="#"> <form action="#"> 링크 속성 제거
                // 스크립트에서는 아래 두가지 방법으로 링크 속성 제거, 클릭이벤트 적용
                // 1. return false
                // 2. e.preventDefault() -> 핸들러에 매개변수를 넣어야 한다.

                $(".btn1").on("click",function(e){
                    e.preventDefault();
                    $(".txt1").css({"background-color":"tomato"})
                });

                $(".btn2").on("click",function(){
                    $(".txt2").css({"background-color":"tomato"})
                    return false; // 링크 속성 차단
                });

                $(".btn3").on("click",function(){
                    $(".txt3").css({"background-color":"tomato"})
                });

            });
        </script>
    </head>
    <body>
        <p>
            <a href="http://www.easyspub.co.kr/" class="btn1">버튼1</a>
        </p>
        <p class="txt1">내용1</p>
        <p>
            <a href="http://www.easyspub.co.kr/" class="btn2">버튼2</a>
        </p>
        <p class="txt2">내용2</p>
        <p>
            <!-- 링크 속성이 없다 -->
            <button class="btn3">버튼3</button> 
        </p>
        <p class="txt3">내용3</p>
    </body>

참고 )

 

[자바스크립트 입문] 이벤트

이벤트 이벤트란 사용자가 웹 브라우저에서 취하는 모든 동작을 말한다. 웹 페이지에 접속하여 마우스 및 ...

blog.naver.com

 

 

📚 제이쿼리 이벤트 종류 & 설정 총정리

jQuery 이벤트 문법 웹 페이지는 사용자와 수많은 상호작용을 하게 된다. 사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작(action)을 수행한다.

inpa.tistory.com

 

 

이벤트를 복습하는 프로젝트

 

글자크기를 조절하는 프로그램

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            // 글자크기를 조절하는 프로그램

            $(function () {
                let baseFontSize = 14; // 기준값 : 원래 폰트 사이즈

                // 외부에 만들어진 함수를 쓸 때는 zoomInOut 처럼 함수의 이름만 사용, () 붙이지 않음 요소 선택을 그룹으로 한 경우, 자식들이
                // 요소를 적용받는다.
                $(".zoomBtnZone button").on("click", zoomInOut);

                // 별로도 정의한 핸들러
                function zoomInOut() {
                    if ($(this).hasClass("zoomOutBtn")) {
                        if (baseFontSize <= 8) { // 최소 크기
                            return false;
                        }
                        baseFontSize--;
                    } else if ($(this).hasClass("zoomInBtn")) {
                        if (baseFontSize >= 20) { // 최대 크기
                            return false;
                        }
                        baseFontSize++;
                    } else {
                        baseFontSize = 14;
                    }

                    $(".fontSize").text(baseFontSize + "px");
                    $("body").css({
                        fontSize: baseFontSize + "px"
                    })
                }

            });
        </script>
        <style>
            body {
                font-size: 14px;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            }
        </style>
    </head>
    <body>
        <p class="zoomBtnZone">
            <button class="zoomOutBtn">-</button>
            <button class="originBtn">100%</button>
            <button class="zoomInBtn">+</button>
        </p>
        <select>
            <option>맑은고딕</option>
            <option>헬베티카</option>
            <option>산들고딕</option>
        </select>
        <p class="fontSize">14px</p>
        <div id="wrap">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat
            consectetur nibh, ut luctus urna placerat non. Phasellus consectetur nunc nec mi
            feugiat egestas. Pellentesque et consectetur mauris, sed rutrum est. Etiam odio
            nunc, ornare quis urna sed, fermentum fermentum augue. Nam imperdiet vestibulum
            ipsum quis feugiat. Nunc non pellentesque diam, nec tempor nibh. Ut consequat
            sem sit amet ullamcorper sodales.
            
        </div>
    </body>
</html>

 

 

글자모양도 바꾸기 추가

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            // 글자크기를 조절하는 프로그램

            $(function () {
                let baseFontSize = 14; // 기준값 : 원래 폰트 사이즈
                let body = $("body");

                // 외부에 만들어진 함수를 쓸 때는 zoomInOut 처럼 함수의 이름만 사용, () 붙이지 않음 요소 선택을 그룹으로 한 경우, 자식들이
                // 요소를 적용받는다.
                $(".zoomBtnZone button").on("click", zoomInOut);

                // 별로도 정의한 핸들러
                function zoomInOut() {
                    if ($(this).hasClass("zoomOutBtn")) {
                        if (baseFontSize <= 8) { // 최소 크기
                            return false;
                        }
                        baseFontSize--;
                    } else if ($(this).hasClass("zoomInBtn")) {
                        if (baseFontSize >= 20) { // 최대 크기
                            return false;
                        }
                        baseFontSize++;
                    } else {
                        baseFontSize = 14;
                    }

                    $(".fontSize").text(baseFontSize + "px");
                    $("body").css({
                        fontSize: baseFontSize + "px"
                    })
                }

                // 글자 모양 변경
                $("#fontStyle").on("change", function () {
                    body.css("font-family", $(this).val());
                });

            });
        </script>
        <style>
            body {
                font-size: 14px;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-family:'Times New Roman', Times, serif  */
            }
        </style>
    </head>
    <body>
        <p class="zoomBtnZone">
            <button class="zoomOutBtn">-</button>
            <button class="originBtn">100%</button>
            <button class="zoomInBtn">+</button>
        </p>
        <select class="changeStyleZone" id="fontStyle">
            <option
                class="Lucida Sans"
                value="'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">맑은고딕</option>
            <option
                class="Segoe UI"
                value="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">헬베티카</option>
            <option class="Times New Roman" value="'Times New Roman', Times, serif">산들고딕</option>
        </select>
        <p class="fontSize">14px</p>
        <div id="wrap">
            내 생일 파티에 너만 못 온 그날 혜진이가 엄청 혼났던 그날 지원이가 여친이랑 헤어진 그날 걔는 언제나 네가 없이 그날
            너무 멋있는 옷을 입고 그날 Heard him say
        </div>
    </body>
</html>

 

 

글자 색 바꾸기 추가

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            // 글자크기를 조절하는 프로그램

            $(function () {
                let baseFontSize = 14; // 기준값 : 원래 폰트 사이즈
                let body = $("body");

                // 외부에 만들어진 함수를 쓸 때는 zoomInOut 처럼 함수의 이름만 사용, () 붙이지 않음 요소 선택을 그룹으로 한 경우, 자식들이
                // 요소를 적용받는다.
                $(".zoomBtnZone button").on("click", zoomInOut);
                $(".colors").on("change", colorChange);

                // 별로도 정의한 핸들러
                function zoomInOut() {
                    if ($(this).hasClass("zoomOutBtn")) {
                        if (baseFontSize <= 8) { // 최소 크기
                            return false;
                        }
                        baseFontSize--;
                    } else if ($(this).hasClass("zoomInBtn")) {
                        if (baseFontSize >= 20) { // 최대 크기
                            return false;
                        }
                        baseFontSize++;
                    } else {
                        baseFontSize = 14;
                    }

                    $(".fontSize").text(baseFontSize + "px");
                    $("body").css({
                        fontSize: baseFontSize + "px"
                    })
                }

                // 글자 모양 변경
                $("#fontStyle").on("change", function () {
                    body.css("font-family", $(this).val());
                });

                // 글자 색 변경
                function colorChange(){
                    $("body #wrap").css({color:$(this).val()});
                }

            });
        </script>
        <style>
            body {
                font-size: 14px;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-family:'Times New Roman', Times, serif  */
            }
        </style>
    </head>
    <body>
        <p class="zoomBtnZone">
            <button class="zoomOutBtn">-</button>
            <button class="originBtn">100%</button>
            <button class="zoomInBtn">+</button>
        </p>
        <select class="changeStyleZone" id="fontStyle">
            <option
                class="Lucida Sans"
                value="'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">맑은고딕</option>
            <option
                class="Segoe UI"
                value="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">헬베티카</option>
            <option class="Times New Roman" value="'Times New Roman', Times, serif">산들고딕</option>
        </select>
        <p class="fontSize">14px</p>
        <br>
        <br>
        <label>색상선택 : </label>
        <input type="color" class="colors">
        <br> <br>
        <div id="wrap">
            낭비하지 마, 네 시간은 은행 <br>
            서둘러서 정리해, 걔는 real bad 받아주면 안돼, no, you better trust me 답답해서, 그래 <br>
            저번에도 봤지만 너 없을 때 <br>
            걘 여기저기에 눈빛을 뿌리네 아주 눈부시게, honestly, <br>
            우리 사이에 He's been totally lying, yeah <br>
            내 생일 파티에 너만 못 온 그날 <br>
            혜진이가 엄청 혼났던 그날 지원이가 여친이랑 헤어진 그날 걔는 언제나 네가 없이 그날 <br>
            너무 멋있는 옷을 입고 그날 Heard him say
        </div>
    </body>
</html>

 

 

이제 애니메이션에 대해 배운다

정말 재미있는 개념이라 계속 만들어보며 공부하면 좋을 것! 게임 만들어보기!

 

 

제이쿼리의 애니메이션

애니메이션 효과

hide(), fadeOut(), slideOut() => 숨김
show(), fadeIn(), slideDown() => 노출
toggle(), fadeToggle(), slideToggle(), fadeTo(0 ~ 1)

효과시간
1. slow, normal, fast
2. 1000단위(밀리세컨즈)
$(요소선택).효과메서드(효과시간, 가속도, [콜백함수]) 
                                 콜백함수는 선택적으로 사용

 

버튼을 이용한 애니메이션 예제 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            
            $(function () {
                $(".btn2").hide();

                $(".btn1").on("click", () => {
                    $(".box").slideUp(1000,"linear", function(){
                        $(".btn1").hide();
                        $(".btn2").show();
                    });
                });

                $(".btn2").on("click",() => {
                    $(".box").fadeIn(4000,"swing",function(){
                        $(".btn2").hide();
                        $(".btn1").show();
                    });
                });

                $(".btn3").on("click",() => {
                    $(".box").slideToggle(2000,"linear");  // 반대 상태로 만들어준다
                });

                $(".btn4").on("click",() => {   
                    $(".box").fadeTo("fast", 0.3);  // 투명도 조절
                });

                $(".btn5").on("click",() => {
                    $(".box").fadeTo("fast", 1);
                });
            });
            
        </script>
        <style>
            .content{
               width:400px;
               background-color: #eee;
            }
         </style>
    </head>
    <body>
        <p>
            <button class="btn1">slideUp</button>
            <button class="btn2">fadeIn</button>
         </p>
         <p>
            <button class="btn3">toggleSide</button>
         </p> 
         <p>
            <button class="btn4">fadeTo(0.3)</button>
            <button class="btn5">fadeTo(1)</button>
         </p>   
         <div class="box">
            <div class="content">
                  Lorem ipsum dolor sit amet, 
                  consectetur adipiscing elit. 
                  Maecenas feugiat consectetur nibh, 
                  ut luctus urna placerat non. 
                  Phasellus consectetur nunc nec mi feugiat egestas. 
                  Pellentesque et consectetur mauris, sed rutrum est. 
                  Etiam odio nunc, ornare quis urna sed, fermentum fermentum augue. 
                  Nam imperdiet vestibulum ipsum quis feugiat. 
                  Nunc non pellentesque diam, nec tempor nibh. 
                  Ut consequat sem sit amet ullamcorper sodales.
            </div>
         </div>
    </body>
</html>

 

 

animate()을 쓰는 방법

animate() : 움직임 구현 
animate({스타일 속성}, 적용시간, 가속도, 콜백함수)
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>

            $(function () {
                // animate() : 움직임 구현 
                // animate({스타일 속성}, 적용시간, 가속도, 콜백함수)

                $(".btn1").on("click", function(){
                    $(".txt1").animate({
                        marginLeft:"500px",
                        fontSize:"30px"
                    },2000,function(){
                        alert("모션 완료");
                    });
                });
                
                $(".btn2").on("click", function(){
                    $(".txt2").animate({
                        // 한번에 50px 씩 더해나가라
                        marginLeft:"+=50px"  
                    },1000);
                });

            });
        </script>
        <style>
            .txt1{background-color: aqua;}
            .txt2{background-color: pink;}
         </style>
    </head>
    <body>
        <p>
            <button class="btn1">버튼1</button>
        </p>
        <span class="txt1">"500px" 이동</span>
        <p>
            <button class="btn2">버튼2</button>
        </p>
        <span class="txt2">"50px"씩 이동</span>
    </body>
</html>

 

 

stop(),  delay()

stop() : 현재 실행중인 애니메이트를 종료 후 다음 애니메이션 실행
stop(true, true) : 현재 실행중인 애니메이션 종료, 에니메이션의 끝 지점으로 이동한다
대기열을 삭제해 더 이상 애니메이션이 일어나지 않는다.
delay() : 일정시간 큐에서 대기 후 실행
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>

            $(function () {

                $(".txt1").animate({
                    marginLeft:"300px"
                },1000);

                $(".txt2").delay(3000).animate({
                    marginLeft:"300px"
                },1000);

                $(".btn1").on("click",moveElment);

                function moveElment(){
                    $(".txt3").animate({
                        marginLeft:"+=50px"
                    },800);

                    $(".txt4").animate({
                        marginLeft:"+=50px"
                    },800);

                    $(".txt4").stop();

                    $(".txt5").animate({
                        marginLeft:"+=50px"
                    },800);

                    $(".txt5").stop(true, true);
                }
            });

        </script>
        <style>
            p{width: 110px;text-align: center;}
            .txt1{background-color: aqua;}
            .txt2{background-color: pink;}
            .txt3{background-color: orange;}
            .txt4{background-color: green;}
            .txt5{background-color: gold;}
         </style>

    </head>
    <body>
        <p class="txt1">효과1</p>
        <p class="txt2">효과2<br> delay(3000)</p>
     
        <p><button class="btn1">50px 전진</button></p>
        <p class="txt3">효과3</p>
        <p class="txt4">효과4<br>stop( )</p>
        <p class="txt5">효과5<br>stop(true, true)</p>
    </body>
</html>

 

 

queue() 와 dequeue()

queue() : 함수를 사용해서 에니메이트 효과 구현, 자기 뒤에 있는 에니메이트 효과는 다 날려버림(나머지 대기열 삭제)
예) 게임에서 대빵을 죽였을 때 나머지 공격 효과 X
clearQueue() : 진행 중인 것을 제외하고 대기열 정보 모두 삭제
dequeue() : queue() 이후에 대기열의 정보를 정상적으로 실행시킨다
 <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>

            $(function () {
                // queue() : 함수를 사용해서 에니메이트 효과 구현, 자기 뒤에 있는 에니메이트 효과는 다 날려버림(나머지 대기열 삭제)
                // 예) 게임에서 대빵을 죽였을 때 나머지 공격 효과 X
                // clearQueue() : 진행 중인 것을 제외하고 대기열 정보 모두 삭제
                // dequeue() : queue() 이후에 대기열의 정보를 정상적으로 실행시킨다

                $(".txt1").animate({marginLeft:"200px"},1000)
                .animate({marginTop:"200px"},1000)
                .queue(function(){         // queue() 뒤에 대기열 삭제
                    $(this).css({background:"pink"});
                })
                .animate({marginLeft:"0px"},1000)
                .animate({marginTop:"0px"},1000);
                
            });

        </script>
        <style>
            *{margin:0;}
            .txt1{width:50px;text-align: 
            center;background-color: aqua;}
         </style>

    </head>
    <body>
        <p class="txt1">내용1</p>
    </body>

 

 

목업, 피그마 등등 디자인 잠깐 하고 자바2로 넘어간다.

자바 다시 복습하고 오기

 

지금까지 배운 이벤트를 사용해서 프로젝트 만들기

 

구현화면)

 

왼쪽 사이드바 없어졌다, 생겼다

 

 

응용해서 오른쪽으로 없어졌다, 생겼다

 

 

코드)

css

/*
 * Base
 */
html {
    font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

body {
    background-color: #656565;
}

img {
    vertical-align: middle;
}

button {
    outline: none;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

.page-header {
    background-color: #fff;
}

.page-header h1 {
    width: 976px;
    height: 80px;
    margin: 0 auto;
    padding-left: 10px;
    font-size: 20px;
    font-weight: normal;
    line-height: 80px;
    letter-spacing: 0.1em;
}

.page-main {
    position: relative;

}

.page-main > aside {
    background-color: rgba(0,0,0,0.8);
    width: 350px;
    height: 100%;
    top: 0;
    right: 0;
    /* right: -350px; */
    position: fixed;
}

.page-main > aside ul {
    margin: 0;
    padding: 0;
    top: 50px;
    right: 114px;
    position: absolute;
}

.page-main > aside li {
    margin: 0 0 20px;
    list-style: none;
}

.page-main > aside button {
    background-color: rgba(0,0,0,0.8);
    /* 인라인은  width, height 를 못쓴다. */
    display: block;   
    position: absolute;
    top: 150px;
    right: 350px;
    width: 52px;
    height: 132px;
    margin: 0;
    padding: 0;
    border: none;
}

.page-footer {
    background-color: #656565;
}

.page-footer small {
    display: block;
    color: #fff;
    font-size: 11px;
    text-align: right;
    width: 976px;
    margin: 0 auto;
    height: 120px;
    line-height: 120px;
    letter-spacing: 0.15em;
}

.page-footer a {
    color: #fff;
    text-decoration: none;
}

 

js

$(function(){
    let duration = 300;

    // $객체정보
    let $aside = $(".page-main > aside");
    let $asidButton = $aside.find("button").on("click",function(){
        $aside.toggleClass('open')
        if ($aside.hasClass('open')){
            // 화면에 보이게
            // 'easeOutBack' 가속 붙기
            $aside.stop(true).animate({right:"-350px"},duration,'easeOutBack');
            $asidButton.find('img').attr('src', 'img/btn_open.png');
        }else{
            // 화면에 숨기게
            $aside.stop(true).animate({right:"-70px"},duration,'easeOutBack');
            $asidButton.find('img').attr('src', 'img/btn_close.png');
        }
    });
});

 

html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Chapter 04-04 - jQuery 최고의 교과서</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/main.css">

<script src="./js/vendor/jquery-1.10.2.min.js"></script>
<script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
<script src="./js/main.js"></script>
</head>
<body>

<header class="page-header" role="banner">
    <h1>Creative jQuery Sample</h1>
</header>

<div class="page-main" role="main">
    <aside>
        <ul>
            <li><a href="#"><img src="img/01_aside.png"></a></li>
            <li><a href="#"><img src="img/02_aside.png"></a></li>
            <li><a href="#"><img src="img/03_aside.png"></a></li>
        </ul>
        <button><img src="img/btn_open.png"></button>
    </aside>
</div>

<footer class="page-footer" role="contentinfo">
    <small class="copyright">COPYRIGHT &copy; <a href="http://www.shiftbrain.co.jp" target="_blank">SHIFTBRAIN Inc.</a></small>
</footer>

</body>
</html>

+ Recent posts