마크업 개발 레벨 테스트

서핑중에 흥미로운 테스트가 있어 해보고, 가져왔음
나름 마크업을 할줄 안다고 생각했는데, 처참히 발렸다..

프론트를 주력으로 하고있다면 아래의 링크로 가서 한번쯤 테스트 해보면 좋을 것 같음

마크업 테스트 출처
답안 참조

위 : 작성한 답
아래 : 검색 결과 (없을 시 답이 맞은것)

HTML

  1. Doctype을 사용하지 않을 때는 무슨 일이 발생할까요?

    HTML5이전 버전으로 렌더링되어 레이아웃이 깨짐

    웹이 quirks mode로 작동해 구형 브라우저에서 동작하던 것과 같이 동작함

  2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요?

    <strong>, ?

    <strong>, <em>

    <b>,<i>는 표준에 맞지 않는것을 알고 있어서 사용을 안좋아했는데 <em>을 처음 알고 표준에 맞다는 사실도 알았음

  3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요.

    div, p, a, h1, nav… / span, strong, li…

    블록 : div, p, h1~h6, ul, li…
    인라인 : a, img, span, select, td…

    몇개 잘못알고있었다.

  4. blockquote 태그는 어떤 용도로 사용해야 할까요?

    인용구 사용시

  5. 인라인 스타일(style=“property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요?

    유지보수가 힘들어짐

    구조와 표현의 분리를 위함

  6. myPhoto.jpg 파일을 img 태그로 작성해보세요.

    <img src="myPhoto.jpg" alt="myPhoto">

  7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?

    태그에 고유 id를 붙여 스타일링할때, class보다 우선순위로 적용되는 부분을 주의해야함

    페이지 당 한번만 써야함 / 알고있었지만 기억이 안났음

  8. ‘TopArea’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?

    script단과 맞춰주려면 kebab-case로 작성해야해야함

    Top이라는 방향성을 가지고 있어서, 접근성 차원에서도 방향은 의미가 없음

  9. ‘blue-box’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?

    음..클래스 이름이 의미하는것이 분명하지 않은 것 같다.

    색상이 CSS에서 변경될 수 있음

  10. HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?

    이름그대로 사이드에있는 nav라고 이해하고 있음

    컨텐츠의 주요 내용이 아니고 부수적인 내용일 때

  11. input 태그와 항상 함께 사용해야 할 태그는 무엇일까요?

    <button>

    <label>

    꼭 필요한건지 몰랐는데 처음 알았다

  12. 모바일 웹 또는 반응형웹디자인 프로젝트에서 각 기기에 적합한 화면을 보여주기 위해 필요한 meta 태그는 무엇일까요?

    device ~~ 속성을 썼는데 정확히는 모르겠다

    <meta name="viewport" content="width=device-width">

    보니까 알것같다

CSS

  1. 화면 상에는 보이지 않으나, 스크린 리더에서 읽혀야 하는 요소에 주어야 할 스타일링을 작성해보세요.

    img alt속성, html lang속성, 태그의 name속성 밖에 모르겠다

    IR기법이라 부르며 display: nonez-index는 잘못된 방법임. text-indentz-index를 활용

    처음봄. 자세히 알아봐야 할 필요가 있음

  2. float 속성을 가진 자식을 품은 부모요소는 높이 값이 0이 되는 때가 있습니다. 이 현상을 해소하는법(clearing)을 알고 있나요?

    부모요소:after에 content: ''; display: table; clear: both 적용

  3. border-box와 content-box의 차이점은 무엇일까요?

    width, heigth 기준(box-sizing)을 border와 content로 지정

  4. position: relative는 어떤 경우에 사용 하나요?

    부모요소를 기준으로 요소를 배치하고 싶을 때

    좌표를 재정의할 때

  5. CSS Reset은 무엇이며 왜 사용할까요?

    리셋하지 않으면 기본적으로 태그가 가진 속성이 스타일링에 포함되어 레이아웃이 뭉개질 수 있음

    크로스 브라우징(브라우저마다 약간씩 차이가 있으므로)

  6. Sass, less, Stylus와 같은 CSS 프리프로세서를 사용해본적이 있나요?

    Sass 공부중

  7. id, class, inline style, !important를 우선순위 순으로 나열해보세요.

    !important, inline, id, class

  8. CSS에서 상속이 되는 속성을 2개만 꼽아보세요.

    width, height? 잘모르겠다

    color, size가 상속

  9. Sprite image 기법을 사용하는 이유는 무엇일까요?

    처음 들어봤다

    로딩 속도 감소, 서버로의 요청 횟수 최소화
    이미지를 한개의 파일로 합쳐 background-image로 적용 후에 해당 이미지 위치에 레이아웃을 배치하는 방법, 자동화 툴도 존재함

    이것역시 공부해야 함

  10. Sprite image 기법을 사용하는데 필요한 CSS 속성들을 꼽아보세요.

    역시 모른다

    background-position

  11. 점진적 향상(Progressive Enhancement)의 뜻을 설명 할 수 있나요?

    이것도 모른다..3연속 blank..

    내용이 길어 다른 링크로 첨부

  12. 웹폰트를 적용하기 위해서는 어떤 확장자의 폰트 파일들이 필요할까요?

    ttc, ttf

    ttf,eot,svg 왼쪽 두개만 있어도 대부분 지원된다고 한다

  13. 개발사 접두어(vendor prefix)를 꼭 사용해야 할 CSS 속성(property)를 2개만 꼽아보세요.

    잘 모르겠다

    앞에 webkit(크롬,사파리), moz(파폭), o(오페라), ms(IE) 등이 붙는것

  14. 반응형웹디자인의 3가지 요소를 꼽아보세요.

    grid, …

    Media Query, Flexible Image, Fluid Grid

  15. 모바일기기를 대응할 때 기준으로 삼는 해상도 사이즈는 몇이며 그 이유는 무엇인가요?

    560px..? 잘 모르겠다

    320px!

  16. :first-child와 :last-child가 지원하는 IE의 버전명을 적어보세요.

    모르겠다

    7, 9(first-child로 예외처리를 많이 한다고 함)

  17. 포토샵(또는 다른 그래픽툴)에서 이미지를 자를 때 어떤 기능을 사용하나요? (메뉴명, 단축키 등)

    ?

    cmd + t

  18. jpg, gif, png의 차이점을 설명해보세요.

    png가 화질이 짱이다(주륵)

    jpg: 손실 압축, 용량을 줄임, 가장 널리 쓰임
    png: 비손실 압축, 투명 가능
    gif: 비손실 압축, 움직이는 이미지 제작 가능

  19. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?

    clearfix시 사용하기도 하고, 버튼으로 토글시에 사용함

  20. 블럭요소 안의 어떤 자식 요소를 정중앙에 놓는 방법을 알고 있습니까?

    부모요소에 position: absolute, 자식요소에 position: relative; top: 50%; left: 50%; 맞나..

    그냥 flexbox 쓰는게 짱인것 같다.

후기

모르는걸 많이 배운 것 같다. CSS는 진짜 알다가도 모르겠다

Graceful Degration 과 Progressive Enhancement

포스팅 참고 출처

Graceful Degration

우아한 낮춤? 적절한 퇴보 등으로 해석되며, 최신 기술 기반 또는 기기에서 동작하는 기능을 만들고 나서 오래된 기술 기반 혹은 기기에서도 유사한 성능으로 동작하도록 조치하는것

예를들어 자바스크립트가 동작하지 않는 브라우저에서 접속 했을 때 “자바스크립트를 지원하는 브라우저를 사용하거나, 자바스크립트를 활성화해주세요”같은 메세지를 띄우는 것이다.

이는 자바스크립트를 모르는 사람에게 어리둥절을 선사하는 방법이다
이와 반대하는 개념이 Progressive Enhancement!

Progressive Enhancement

점진적 향상이라 부르며, 말 그대로 가장 기초적인 기술을 기반으로 점차 향상시키는 방법이다.

웹을 예시로 들면 HTML로 마크업 후, CSS효과를 주고, JS를 적용시키는 단계로 구성하는 것이다.

정리

요즘 시대에서 Progressive Enhancement로 웹을 구성하기는 Graceful Degration과 비교해서는 시간과 노력을 훨씬 더 필요로 하는 매우 비효율적인 일이지만,

웹을 구성함에 있어 잊으면 안되는 원칙 “Web for All”을 생각한다면 충분히 가치가 있는 방법이라고 생각한다.

Nuxt Toy Project

문서를 한번씩 훑었다고 생각되어 혼자서 웹페이지를 만들어보려 함(많이 부족한건 팩트 ㅜㅜ)

디자인을 따로 하긴 힘들어 https://startbootstrap.com/template-overviews/grayscale/ 템플릿의 레이아웃을 그대로 하드코딩해서 만들어 볼 예정

틀린 내용이 있을 수 있으니 피드백 부탁드립니다

참고 사이트

Nuxt 공식 한글 문서

Vue 공식 한글 문서

github 주소

진행과정

찾아본 내용과 찾아봐야 할 내용을 정리

2017.05.04

시작 / Nuxt starter로 프로젝트 생성 및 nav바 생성

2017.05.05

프로젝트 구조에 대해 이해할 필요를 느껴 샘플 사이트 코드 분석하려 함
백엔드는 알고있는게 루비온레일즈 밖에 없기 때문에 루비온레일즈의 프로젝트 구조와 비교해 예제 사이트 와 공식문서를 참고해 알게된 내용을 정리

  1. layouts폴더의 dafult.vue
    application.html 파일 처럼 페이지 전역에서 보여줄 기본 레이아웃을 설정하는데 사용 / 예를들어 전역에서 상단에 띄워놓을 navbar를 dafault.vue에다가 삽입
    default.vue의 <nuxt/> 태그가 <%= yield %> 같은 기능을 하는 태그 같음

  2. nuxt-link
    다른 vue파일로 이동할 때 a태그와 같은 용도로 사용되는것 같음 >> 알아보니 렌더링 되면 a태그가 된다 함

  3. middleware
    레이아웃이 렌더링되기 전에 사용할 함수를 정의할 수 있음(js파일), 사용예를 보니 vue파일에 methodscomputed에 필요한 함수를 middleware에 정의하고 import하는 식으로 사용

2017.05.06

결국 자료를 읽어보고 프로젝트 엎고 다시 시작함.
nav바 및 intro 구현

  1. assets 디렉토리
    컴파일되지 않은 LESS, SASS, JavaScript 등을 포함하는 디렉토리, 레일즈에서의 assets과 같은 역할인 듯 함. 예를들어 이미지 파일을 assets에 넣으면 nuxt는 file-loaderurl-loader를 통해 자동으로 url주소를 변경해 파일을 불러옴. webpack을 거치지 않고 static파일을 사용할 수도 있는데 둘의 정확한 차이를 모르겠음. 어떨때 assets을쓰고 어떨때 static을 쓰는지..궁금하다

  2. cover
    단순한 CSS문제 / 뷰포트에 이미지 cover 방법 찾기

2017.05.07

  1. Component화의 문제
    큰일났다. 컴포넌트를 그냥 편한대로 semantic tag에 따라서 쪼갰는데 막상 만들고나서 생각해보니까 컴포넌트는 기능별로 나눠야 한다는 부분에서 현자타임이 왔다..
    일단 쪼개놓고 완성은 해놓고 나중에 실력이 늘었을 때 보면서 반성하는 용으로 완성은 해놓고 생각해야겠다.

  2. fontawesome icon
    살짝 픽셀이 밀려서 원하는 모양이 안나오는데 해결 방법을 모색해봐야 할 듯

  3. 전역 CSS
    nuxt 가이드대로 CSS를 설정했는데 적용이 안돼서 결국 scoped로 적용하고 있는데 방법을 찾아야 함.

  4. 레이아웃 완성 / 자바스크립트 효과 넣으면 끝!

2017.05.08

  1. store
    React의 Flux처럼 Vue에서 상태관리를 위해 사용.
    대충 흐름은 파악해 놓았지만 어떻게 사용하는지는 잘 모르겠다.

  2. 자바스크립트 구현
    어떻게 어떤 디렉토리에 JS파일을 만들고 불러와야하는지 잘 모르겠다 ㅜㅜ 유튜브 강의 뒤져볼 예정

'개발 > Vue.js' 카테고리의 다른 글

Nuxt 토이 프로젝트(포트폴리오 페이지)  (0) 2017.05.08
Vue.js 정리  (0) 2017.04.25
Vue 기본자료 포스팅 완료!  (0) 2017.04.06
10. 컴포넌트  (0) 2017.04.06
9. 폼 입력 바인딩  (0) 2017.03.31
8. 이벤트 핸들링(v-on)  (0) 2017.03.31

http://flexboxfroggy.com/


개구리를 플렉스속성으로 배치하면서 쉽게 익혀볼 수 있습니다.

마지막까지 깬다면 고수로 거듭날 수 있습니다ㅋㅎ


'개발 > CSS' 카테고리의 다른 글

CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09
CSS flex-box 재미있게 익히기  (0) 2017.04.24
CSS / float를 clear하는 방법 네가지(clearfix)  (5) 2017.04.13

1회로는 부족하지만 우선은 끝까지 완주했음
빨리 끝내고 싶단 마음에 뒷부분은 제대로 포스팅을 못했지만, 다시 공부할 때 보충해서 써야겠다.

Vue공부하러 가야겠당


'개발 > JavaScript30' 카테고리의 다른 글

31. JavaScript30 완료  (2) 2017.04.21
30. Whack A Mole  (0) 2017.04.21
29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
  1. 아르 2017.04.26 22:08

    안녕하세요. 우연히 JavaScript30으로 검색하여 왔습니다.
    영어가 부족해서 뭘 만들어야 하는지 파악하는데도 시간이 걸렸는데 좋은 포스팅 감사합니다.

    • BlogIcon takeu takeU 2017.04.26 22:17 신고

      감사합니다 아직많이부족하니 피드백주시면 반영해보겠습니다!

Whack A Mole

목표

두더지잡기 게임을 만듬

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Whack A Mole!</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Whack-a-mole! <span class="score">0</span></h1>
  <button onClick="startGame()">Start!</button>
  <div class="game">
    <div class="hole hole1">
      <div class="mole"></div>
    </div>
    <div class="hole hole2">
      <div class="mole"></div>
    </div>
    <div class="hole hole3">
      <div class="mole"></div>
    </div>
    <div class="hole hole4">
      <div class="mole"></div>
    </div>
    <div class="hole hole5">
      <div class="mole"></div>
    </div>
    <div class="hole hole6">
      <div class="mole"></div>
    </div>
  </div>
<script>
</script>
</body>
</html>

과정

  1. 변수, 상수 생성
  2. 게임 진행 시간 설정
  3. 두다지가 올라올 구멍을 정하는 함수 생성
  4. 두더지가 올라오고 내려가도록 하는 함수 생성
  5. 게임을 시작하기 위한 함수 생성
  6. 두더지를 잡았을 때의 함수 생성
  7. 두더지를 클릭하면 bonk 실행

코드 분석

  1. 변수, 상수 생성

    const holes = document.querySelectorAll('.hole');
    const scoreBoard = document.querySelector('.score');
    const moles = document.querySelectorAll('.mole');
    let lastHole;
    let timeUp = false;
    let score = 0;
    

    두더지 잡기 게임을 하기 위한 변수, 상수 생성

  2. 게임 진행 시간 설정

    function randomTime(min, max) {
     return Math.round(Math.random() * (max - min) + min);
    }
    

    randomTime에 랜덤으로 진행될 시간이 min과 max사이에서 랜덤으로 정해지도록 담는다

  3. 두더지가 올라올 구멍을 정하는 함수 생성

    function randomHole(holes) {
     const idx = Math.floor(Math.random() * holes.length);
     const hole = holes[idx];
     if (hole === lastHole) {
         console.log('Ah nah thats the same one bud');
         return randomHole(holes);
     }
     lastHole = hole;
     return hole;
    }
    

    전체 6개의 구멍에서 랜덤으로 한개를 정하는 함수를 생성, 이때 중복되지 않도록 if문을 달아 다시 함수가 실행되도록 하고 마지막에 hole을 반환하도록 한다.

  4. 두더지가 올라오고 내려가도록 하는 함수 생성

    function peep() {
     const time = randomTime(200, 1000);
     const hole = randomHole(holes);
     hole.classList.add('up');
     setTimeout(() => {
         hole.classList.remove('up');
         if (!timeUp) peep();
     }, time);
    }
    

    선택된 holeup 클래스를 달아 두더지가 올라오도록 하고, 시간이 지나면 제거하도록 함.
    만약 timeUp이 true가 되면 끝남

  5. 게임을 시작하기 위한 함수 생성

    function startGame() {
     scoreBoard.textContent = 0;
     timeUp = false;
     score = 0;
     peep();
     setTimeout(() => timeUp = true, 10000)
    }
    

    게임을 시작할 때의 조건들과 위에서 만든 peep함수를 실행하도록 설정하고 timeUp이 true가 되거나 시간이 10초가 흐르면 멈추도록 설정

  6. 두더지를 잡았을 때의 함수 생성

    function bonk(e) {
     if(!e.isTrusted) return; // cheater!
     score++;
     this.classList.remove('up');
     scoreBoard.textContent = score;
    }
    

    클릭하면 스코어가 추가되고 두더지가 사라지도록 up 클래스를 지워주도록 함수 생성

  7. 두더지를 클릭하면 bonk 실행

    moles.forEach(mole => mole.addEventListener('click', bonk));
    

찾아본 내용, 알게된 내용들

isTrusted - 이벤트가 사용자 생성에 의해발생한다면 true, 스크립트로 인해 생성되거나 수정되면 false 반환
textContent - 텍스트로 내용을 표시함

'개발 > JavaScript30' 카테고리의 다른 글

31. JavaScript30 완료  (2) 2017.04.21
30. Whack A Mole  (0) 2017.04.21
29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19

Countdown Timer

목표

카운트다운 타이머를 구현

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Countdown Timer</title>
    <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="timer">
        <div class="timer__controls">
            <button data-time="20" class="timer__button">20 Secs</button>
            <button data-time="300" class="timer__button">Work 5</button>
            <button data-time="900" class="timer__button">Quick 15</button>
            <button data-time="1200" class="timer__button">Snack 20</button>
            <button data-time="3600" class="timer__button">Lunch Break</button>
            <form name="customForm" id="custom">
                <input type="text" name="minutes" placeholder="Enter Minutes">
            </form>
        </div>
        <div class="display">
            <h1 class="display__time-left"></h1>
            <p class="display__end-time"></p>
        </div>
    </div>
    <script src="scripts-START.js"></script>
</body>
</html>

과정

  1. 변수, 상수 생성
  2. 타이머를 진행하는 함수 생성
  3. 남은 시간을 출력하는 함수 생성
  4. 남은 시간, 분 생성
  5. 타이머 시간 설정
  6. 함수를 실행하도록 이벤트리스너 생성

코드 분석

  1. 변수, 상수 생성

    let countdown;
    const timerDisplay = document.querySelector('.display__time-left');
    const endTime = document.querySelector('.display__end-time');
    const buttons = document.querySelectorAll('[data-time]');
    

    변수 countdown 설정, 각 상수에 해당하는 내용 설정

  2. 타이머를 진행하는 함수 생성

    function timer(seconds) {
    clearInterval(countdown);
    
    const now = Date.now();
    const then = now + seconds * 1000;
    displayTimeLeft(seconds);
    displayEndTime(then);
    
    countdown = setInterval(() => {
     const secondsLeft = Math.round((then - Date.now()) / 1000);
     if(secondsLeft < 0) {
       clearInterval(countdown);
       return;
     }
     displayTimeLeft(secondsLeft);
    }, 1000);
    }
    

    함수를 실행하면 현재 진행되고 있는 countdown을 정지한다, 즉 기존에 실행했던 타이머를 초기화 시키고 현재 시간과 종료시간을 출력한다.
    남은 시간을 secondsLeft에 담고 0초가 되면 카운트다운을 멈추고 그렇지 않다면 계속해서 1초마다 화면에 출력하고, 카운트를 실행한다

  3. 남은 시간을 출력하는 함수 생성

    function displayTimeLeft(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainderSeconds = seconds % 60;
    const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;
    document.title = display;
    timerDisplay.textContent = display;
    }
    

    초단위로 입력한 값을 분:초 형식으로 출력하도록 설정해주고
    탭의 타이틀도 남은 시간이 뜨도록 설정

  4. 남은 시간, 분 설정

    function displayEndTime(timestamp) {
    const end = new Date(timestamp);
    const hour = end.getHours();
    const adjustedHour = hour > 12 ? hour - 12 : hour;
    const minutes = end.getMinutes();
    endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;
    }
    

    남은 시간, 종료 시간을 출력할 수 있도록 현재 시간을 받아 상수 생성 후 표시

  5. 타이머 시간 설정

    function startTimer() {
    const seconds = parseInt(this.dataset.time);
    timer(seconds);
    }
    

    startTimer 함수로 seconds에 타이머를 실행할 초를 담도록 한다.

  6. 함수를 실행하도록 이벤트리스너 생성

    buttons.forEach(button => button.addEventListener('click', startTimer));
    document.customForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const mins = this.minutes.value;
    console.log(mins);
    timer(mins * 60);
    this.reset();
    });
    

    버튼을 누르면 startTimer가 실행돼 타이머가 실행이 되고 각 변수에 대해 새로운 값들을 할당해 위의 함수에서 출력할 수 있도록 함

찾아본 내용, 알게된 내용들

setTimeout - 일정시간 후 함수 싱행
setInterval - 일정시간마다 함수 실행
clearInterval - setInterval을 정지

'개발 > JavaScript30' 카테고리의 다른 글

31. JavaScript30 완료  (2) 2017.04.21
30. Whack A Mole  (0) 2017.04.21
29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19

Video Speed Controller

목표

비디오 재생속도 컨트롤러를 삽입

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video Speed Scrubber</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <video class="flex" width="765" height="430" src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1" loop controls></video>
    <div class="speed">
      <div class="speed-bar">1×</div>
    </div>
  </div>
<script>
</script>
</body>
</html>

과정

  1. 상수 생성
  2. 속도를 조절할 수 있게하는 함수 생성
  3. 함수 실행

코드

  1. 상수 생성

    const speed = document.querySelector('.speed');
    const bar = speed.querySelector('.speed-bar');
    const video = document.querySelector('.flex');
    

    각 클래스에 해당하는 요소를 speed, bar, video에 담음

  2. 속도를 조절할 수 있게하는 함수 생성

    function handleMove(e) {
     const y = e.pageY - this.offsetTop;
     const percent = y / this.offsetHeight;
     const min = 0.4;
     const max = 4;
     const height = Math.round(percent * 100) + '%';
     const playbackRate = percent * (max - min) + min;
     bar.style.height = height;
     bar.textContent = playbackRate.toFixed(2) + '×';
     video.playbackRate = playbackRate;
     }
    

    y에 레인지바의 최상단 좌표를 담고, percent로 전체 레인지바의 크기에서 최소 0.4 최대 4로 조절할수 있도록 퍼센트 설정 후 반올림해 소숫점 두자리로 나타냄
    위에 설정한 값들을 레인지바에 적용시켜주고 video의 속도를 조절할 수 있도록 playbackRate를 사용

  3. 함수 실행

    speed.addEventListener('mousemove', handleMove);
    

    마우스가 움직이면 handleMove 실행

찾아본 내용, 알게된 내용들

playbackRate - 비디오의 속도를 조절할 수 있게 해주는 메소드

'개발 > JavaScript30' 카테고리의 다른 글

30. Whack A Mole  (0) 2017.04.21
29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
  1. 홍지환 2017.04.19 23:16

    열심히하시는군요

  2. BlogIcon takeu takeU 2017.04.19 23:31 신고

    97이니까3번더

+ Recent posts