본문 바로가기
닫기
필터

  • 바닐라 JS로 무한스크롤 구현을 위한 베이직 공부

    velog.io

    바닐라 JS로 무한스크롤 구현을 위한 베이직 공부

    왕초보가 무한스크롤 구현했다...!! 👀 야! 너두 할 수 있어!😤

    도봉도봉

  • 웹디자이너라면 알고 있어야 할 웹디자인 관련 용어 총정리!

    youtube.com

    웹디자이너라면 알고 있어야 할 웹디자인 관련 용어 총정리!

    안녕하세요! #프리랜서 #디자이너 랑이언니입니다!!

    오늘은
    #웹디자이너 라면 알아야 할 #웹디자인 용어를 알려드립니다!

    [영상 속 PDF자료 다운로드 링크]
    https://blog.naver.com/gusruddl0615/222244300854

    -

    💁🏻‍♀️작업 문의 : gleam-design@naver.com
    🌟개인 인스타그램 : @1994cm730kg

    도봉도봉

  • 바닐라JS + VUE3 강좌 시리즈

    25

    youtube.com

    바닐라JS + VUE3 강좌 시리즈

    프론트앤드 프레임워크의 발전과 더불어 백앤드가 담당하던 부분까지 감당할 수 있게 되었습니다. 바닐라JS와 VUE를 이용한 프론트앤드 개발에 대해 배워보도록 합시다.

    도봉도봉

  • 인간 JS 엔진 되기 (JS 고급 강좌)

    16

    youtube.com

    인간 JS 엔진 되기 (JS 고급 강좌)

    기초적인 Javascript 문법을 알고 있다면 추천 드리는 강좌입니다! JS 문법 개념을 총 정리 하는 시간을 가져보세요~

    도봉도봉

  • CSS Grid 완전 정리 끝판왕 😎

    youtube.com

    CSS Grid 완전 정리 끝판왕 😎

    CSS Grid 어렵다면! 이번 영상에서 확실하게 정리해 보세요 🙌 (↙ 자세한 내용)
    ___________________________

    💡 풀스택 개발 로드맵 ⇢ https://academy.dream-coding.com/pages/roadmap

    🚀 엘리와 더 체계적으로 배우고 싶다면 ⇢ 드림코딩 아카데미:
    http://academy.dream-coding.com/

    .....................................................

    🔥 유튜브 영상을 정리해서 블로그에 올리시는 경우 꼭 출처 및 영상 링크를 남겨 주세요.

    ✨ 관련된 영상들
    CSS Flexbox ⇢ https://youtu.be/7neASrWEFEM

    🔗 언급된 사이트들
    영상 코드 예제 코드 ⇢ https://github.com/dream-ellie/css-grid
    참고할만한 좋은 사이트 ⇢ https://css-tricks.com/snippets/css/complete-guide-grid/
    .....................................................

    00:00 소개
    00:15 레이아웃 (Flex와 Grid 차이)
    01:27 Grid 𝌹 개념 정리
    03:35 Grid 𝌹 부모 관점 속성들
    10:23 Grid 𝌹 자식 관점 속성들
    14:34 Grid 𝌹 강력한 Areas! 이미지 활용편
    18:53 Grid 𝌹 강력한 Areas! 사이트 활용편
    20:36 좋아요🫶 눌러주기
    .....................................................

    ☀️ 드림코딩 엘리
    모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다 :)
    ❝Don't forget to code your dream
    여러분들의 멋진 꿈을 코딩하세요 ⭐️

    .....................................................

    🌐 프론트엔드 개발자 되기 입문자편 영상 목록:
    https://www.youtube.com/playlist?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

    📒 자바스크립트 기초 강의 영상 목록:
    https://www.youtube.com/playlist?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2

    💻 개발자라면 누구나 알고 있으면 좋은 지식 💡
    https://www.youtube.com/playlist?list=PLv2d7VI9OotSn1ThdDeqvBx8QuRSd01qv

    💰 개발자 경력 관리 영상 목록:
    https://www.youtube.com/playlist?list=PLv2d7VI9OotSyQ6RPdytiHID5Cmnv_sA3

    📄 이력서 작성 방법
    https://www.youtube.com/playlist?list=PLv2d7VI9OotTZfvF0s8Vs0gpRtodlTsgg

    📈 IT 트렌드
    https://www.youtube.com/playlist?list=PLv2d7VI9OotRTfM1zJLQMCLriBpLFg8r-

    📷 개발자 브이로그
    https://www.youtube.com/playlist?list=PLv2d7VI9OotR1tALnxov7sAUshyBmfYfU

    🤗 생산력 향상 팁
    https://www.youtube.com/playlist?list=PLv2d7VI9OotQB-9p29xrAnARhuE1Vf88I

    .....................................................

    #코딩#프론트엔드#웹개발#CSS

    도봉도봉

  • 새롭게 출시되는 CSS 새기능 정리 🚀 (2022 구글 I/O 중요 기능 정리 및 의견!)

    youtube.com

    새롭게 출시되는 CSS 새기능 정리 🚀 (2022 구글 I/O 중요 기능 정리 및 의견!)

    2022 구글 I/O 중요 기능 정리 및 의견에 대해 나눠봅니다. (↙ 관련 링크들)
    ___________________________

    💡 풀스택 개발 로드맵 ⇢ https://academy.dream-coding.com/pages/roadmap

    🚀 엘리와 더 체계적으로 배우고 싶다면 ⇢ 드림코딩 아카데미:
    http://academy.dream-coding.com/

    .....................................................

    🔥 유튜브 영상을 정리해서 블로그에 올리시는 경우 꼭 출처 및 영상 링크를 남겨 주세요.

    ✨ 관련된 영상들
    CSS 트렌드 ⇢ https://youtu.be/Eim11QYLfEY
    웹개발 입문용 영상 플레이리스트 ⇢ https://www.youtube.com/playlist?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

    🔗 언급된 사이트들
    CSS 구글 I/O 톡 영상 ⇢ https://www.youtube.com/watch?v=Xy9ZXRRgpLk&ab_channel=GoogleChromeDevelopers
    정리 사이트 ⇢ https://web.dev/state-of-css-2022/
    추가 참고용 사이트들:
    https://css-tricks.com/css-cascade-layers/
    https://www.youtube.com/watch?v=gCNMyYr7F6w&ab_channel=GoogleChromeDevelopers


    .....................................................

    00:00 소개
    01:00 즐겨찾기할 사이트 소개🔥
    01:58 Cascade Layers (+CSS특징)
    05:14 Container Queries
    08:38 Accent Color
    09:49 Color Contrast
    10:11 @nest, @scope
    .....................................................

    ☀️ 드림코딩 엘리
    모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다 :)
    ❝Don't forget to code your dream
    여러분들의 멋진 꿈을 코딩하세요 ⭐️

    .....................................................

    🌐 프론트엔드 개발자 되기 입문자편 영상 목록:
    https://www.youtube.com/playlist?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

    📒 자바스크립트 기초 강의 영상 목록:
    https://www.youtube.com/playlist?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2

    💻 개발자라면 누구나 알고 있으면 좋은 지식 💡
    https://www.youtube.com/playlist?list=PLv2d7VI9OotSn1ThdDeqvBx8QuRSd01qv

    💰 개발자 경력 관리 영상 목록:
    https://www.youtube.com/playlist?list=PLv2d7VI9OotSyQ6RPdytiHID5Cmnv_sA3

    📄 이력서 작성 방법
    https://www.youtube.com/playlist?list=PLv2d7VI9OotTZfvF0s8Vs0gpRtodlTsgg

    📈 IT 트렌드
    https://www.youtube.com/playlist?list=PLv2d7VI9OotRTfM1zJLQMCLriBpLFg8r-

    📷 개발자 브이로그
    https://www.youtube.com/playlist?list=PLv2d7VI9OotR1tALnxov7sAUshyBmfYfU

    🤗 생산력 향상 팁
    https://www.youtube.com/playlist?list=PLv2d7VI9OotQB-9p29xrAnARhuE1Vf88I

    .....................................................

    #코딩#웹개발#CSS

    도봉도봉

  • 자바스크립트 애니매이션 라이브러리 5개 (짱 유용함👍)

    youtube.com

    자바스크립트 애니매이션 라이브러리 5개 (짱 유용함👍)

    웹사이트, & 웹앱에 활력을 더해줄 애니매이션 라이브러리 5종을 소개해 드려요 ✨ 자바스크립트 마스터리 (ES6+ 최신 문법) 강의도 확인해 보세요 ⇢ https://academy.dream-coding.com/courses/javascript
    ___________________________

    💡 풀스택 개발 로드맵 ⇢ https://academy.dream-coding.com/pages/roadmap

    🚀 엘리와 더 체계적으로 배우고 싶다면 ⇢ 드림코딩 아카데미:
    http://academy.dream-coding.com/

    .....................................................

    🔥 유튜브 영상을 정리해서 블로그에 올리시는 경우 꼭 출처 및 영상 링크를 남겨 주세요.

    🔗 언급된 사이트들
    예제 코드 깃허브 ⇢ https://github.com/dream-ellie/javascript_animation

    .....................................................

    00:00 소개
    00:19 ❶ TypeIt
    05:21 ❷ ScrollOut
    09:09 ❸ Anime.js
    10:35 ❹ Rellax
    11:54 ❺ GreenSock
    .....................................................

    ☀️ 드림코딩 엘리
    모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다 :)
    ❝Don't forget to code your dream
    여러분들의 멋진 꿈을 코딩하세요 ⭐️

    .....................................................

    🌐 프론트엔드 개발자 되기 입문자편 영상 목록:
    https://www.youtube.com/playlist?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

    📒 자바스크립트 기초 강의 영상 목록:
    https://www.youtube.com/playlist?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2

    💻 개발자라면 누구나 알고 있으면 좋은 지식 💡
    https://www.youtube.com/playlist?list=PLv2d7VI9OotSn1ThdDeqvBx8QuRSd01qv

    💰 개발자 경력 관리 영상 목록:
    https://www.youtube.com/playlist?list=PLv2d7VI9OotSyQ6RPdytiHID5Cmnv_sA3

    📄 이력서 작성 방법
    https://www.youtube.com/playlist?list=PLv2d7VI9OotTZfvF0s8Vs0gpRtodlTsgg

    📈 IT 트렌드
    https://www.youtube.com/playlist?list=PLv2d7VI9OotRTfM1zJLQMCLriBpLFg8r-

    📷 개발자 브이로그
    https://www.youtube.com/playlist?list=PLv2d7VI9OotR1tALnxov7sAUshyBmfYfU

    🤗 생산력 향상 팁
    https://www.youtube.com/playlist?list=PLv2d7VI9OotQB-9p29xrAnARhuE1Vf88I

    .....................................................

    #자바스크립트#프론트엔드#웹개발

    도봉도봉

  • UI Toolkit의 기초 [유니티 UI 강의, Unity UI Toolkit 강좌]

    2

    youtube.com

    UI Toolkit의 기초 [유니티 UI 강의, Unity UI Toolkit 강좌]

    UI Toolkit은 Unity가 2019년 무렵부터 준비한, UGUI를 이을 새로운 UI 개발 환경입니다.
    #유니티 #Unity #UIToolkit

    도봉도봉

  • 파이썬 유용한 단편 강의

    7

    youtube.com

    파이썬 유용한 단편 강의

    파이썬에 날개를 달아주는 유용한 단편 강의들입니다.실력을 한층 업그레이드 하세요!

    도봉도봉

  • DOTween과 비주얼 스크립팅 [유니티 UI, UGUI 강좌]

    2

    youtube.com

    DOTween과 비주얼 스크립팅 [유니티 UI, UGUI 강좌]

    DOTween Pro를 사용하면 닷트윈의 주요 기능을 에디터에서 편리하게 사용할 수 있습니다.
    #유니티 #DOTween #비주얼스크립팅 #Unity

    도봉도봉

  • 버튼 6개로 배우는 Unity DOTween Pro의 기초 [유니티 UI, UGUI 강좌]

    youtube.com

    버튼 6개로 배우는 Unity DOTween Pro의 기초 [유니티 UI, UGUI 강좌]

    이 강좌에서는 6개의 UI 버튼 제작을 통해 유니티 닷트윈 프로(Unity DOTween Pro)의 필수 활용법을 소개합니다.

    - 실제 사례를 통한 DOTween Pro 주요 애니메이션 기능과 파라미터 소개
    - 애니메이션 완성도를 높이기 위한 Ease 또는 Easing 개념과 활용
    - 유니티 이벤트를 활용하기 위한 DOTween 필수 함수 소개
    - 스크립트(Script) 없는 UI 연출과 UI 애니메이션(UI animation)


    강좌에서 만들 6개의 버튼은 다음과 같습니다.

    1. 사용자가 클릭하면 스케일 애니메이션(scale animation)으로 입력에 대한 피드백(feedback)을 전달하는 기본적인 버튼입니다.
    2. 틀린 암호로 로그인할 때 볼 수 있는 좌우로 흔들리는 버튼입니다. 사용자에게 실패 또는 거부의 의미를 전달합니다.
    3. 형태가 변하는 버튼(morphing button)입니다. 단순한 스케일 애니메이션이 아니라 버튼의 형태 자체를 변화시켜 상태나 국면의 전환을 명확히 전달합니다.
    4. 너지(nudge), 즉 입력을 유도하는 부분과 입력에 대한 명시적인 피드백을 보여주는 버튼입니다.
    5. 토글(toggle) 버튼입니다. 보통의 토글은 켜짐과 꺼짐, 각 상태만 보여 줍니다. 그러나 이 버튼은 애니메이션을 통해 상태 간의 변화 과정을 보여줌으로써 변화의 결과를 직접적, 직관적으로 인식하게 합니다.
    6. 스탑워치 컨셉 버튼입니다. 사용자가 탭하면 스톱워치가 작동하는 간단한 설정입니다. 그러나 기간 한정 판매 콜투액션(CTA) 버튼 같은 곳에 응용할 수 있는 연출을 담고 있습니다.


    강좌의 구성입니다.

    00:00 미리보기
    1:50 패키지 다운로드 안내
    02:42 버튼 스케일 애니메이션
    07:00 버튼 흔들기 애니메이션
    09:09 버튼 변형 애니메이션
    12:18 Ease 옵션과 활용
    17:10 Nudge 버튼 만들기—
    19:25 Nudge 버튼 애니메이션
    30:03 버튼으로 토글 만들기
    32:04 토글 버튼 애니메이션
    34:46 스톱워치 버튼 애니메이션


    강좌에서 사용할 텍스처와 프리팹이 들어있는 패키지 파일입니다.
    https://drive.google.com/file/d/131LBFBfVsIJB9tY8M58-kzrBoeS_yycK/view?usp=sharing

    도봉도봉

  • 게임회사에서 그래픽 디자이너는 무슨 일을 하나요?

    youtube.com

    게임회사에서 그래픽 디자이너는 무슨 일을 하나요?

    오늘은 많은분들이 궁금해하실 그래픽디자이너의 직업군에 대해 알아보겠습니다!
    기본적으로 게임회사 자문을 통해 만들어졌지만 한국에서만 수 많은 회사들이 있기에 각각 불리우는 이름은 다른대요!
    크게 어떤 작업을 맡는지에 따라 쉽게 설명드리고자 영상을 만들었습니다!
    여러분들이 알고 계시는 또 다른 직군이 있다면 댓글을 통해 자유롭게 이야기 해주세요!
    그럼, 다음주에 또 뵙겠습니다~!!
    ---------------------------------------------------------------------------------------------------

    🎨 아틈 미술학원 : http://www.arteum.net
    🚗 아틈 오시는길 : https://cafe.naver.com/arteum/2233
    💻 아틈 수강 방법 : https://cafe.naver.com/arteum/3191

    ◼ [ 트위터 ] : https://twitter.com/ArteumAcademy
    ◼ [ 페이스북 ] : https://www.facebook.com/arteum.net
    ◼ [ 인스타그램 ] : https://www.instagram.com/arteum_academy

    CONTACT
    [ 📲 070-4060-0051 ]
    [ 📧 arteum@arteum.net ]

    아틈 아카데미는 게임원화와 컨셉아트, 일러스트를 전문으로 교육하는 학원입니다.
    아트와 관련된 모든것을 교류하는 아티스트들의 문화공간입니다.

    - 위 영상은 네이버에서 제공한 나눔글꼴이 적용되어 있습니다.

    도봉도봉

  • 다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법

    velog.io

    다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법

    여러분, 리액트로 웹 애플리케이션 개발 하면서 Context API를 어떻게 사용하고 계신가요? 과거에도 관련 포스트를 작성한적이 있긴 하지만, 지난 몇 년간 Context를 사용하면서 습득하게된 팁들을 여러분들에게 공유하면서 튜토리얼을 최신화 해보려고 합니다.

    도봉도봉

  • [번역] React 렌더링 동작에 대한 (거의) 완벽한 가이드

    velog.io

    [번역] React 렌더링 동작에 대한 (거의) 완벽한 가이드

    리액트 렌더링의 동작 방식과 컨텍스트 및 React-Redux 사용이 렌더링에 미치는 영향에 대한 세부 사항

    도봉도봉

  • Rxjs 한번 배워보실래요?

    velog.io

    Rxjs 한번 배워보실래요?

    자바스크립트에서 시간과 비동기를 다루는 방법은 어려운 고급 스킬에 속해있습니다. 개인적으로 Rxjs는 이러한 비동기를 다루는 데 있어서 탁월하며 새로운 패러다임을 알려주는 좋은 라이브러리라고 생각을 합니다.

    도봉도봉

  • 실무에서 꼭! 필요한 인터랙션 3가지 어도비xd

    youtube.com

    실무에서 꼭! 필요한 인터랙션 3가지 어도비xd

    추천, 구독, 알림, 댓글은 큰 힘이 됩니다.
    채널에 멤버십 가입하여 디자인 원본파일을 받아보세요.
    https://han.gl/OBONg

    ➤마디아 스타일가이드 : https://www.youtube.com/watch?v=S-D9GQ9BRwQ
    ➤캐릭터 유튜브 채널 : https://han.gl/9q5gi

    ➤아래 재생목록에서 수백개의 디자인 & 디자인 팁을 배워가세요

    1. 포토샵 기초강의
    https://han.gl/DtcSI

    2. 일러스트레이터 기초강의
    https://han.gl/En3UZ

    3. 어도비XD 기초강의
    https://han.gl/jpu30

    4. 시청자 포트폴리오 컨펌
    https://han.gl/b6INc

    5. 웹 디자인UIUX
    https://han.gl/ZMgL9

    6. 모바일 디자인UIUX
    https://han.gl/KB5tU

    7. 아이콘 디자인
    https://han.gl/qcHlM

    8. 디자인 정보
    https://han.gl/BL9AW

    안녕하세요 디자이너 마디아입니다.
    현재 실무에서 쇼핑몰 UIUX 구축 디자이너로 활동하고 있으며 학생분들에게 조금이나마 도움이 될 수 있는 강의로 여러분들에게 다가가도록 하겠습니다.
    --------------------------------------------------------------------------
    ► youtube channel: https://bit.ly/2GJYUF1
    ►단톡방 : https://open.kakao.com/o/gakaJCvb
    ►mail : madia_designer@naver.com
    ►cafe : https://cafe.naver.com/madiadesigner
    --------------------------------------------------------------------------
    본 디자인은 다양한 해외 벤치마킹을 통해 고민없이
    비쥬얼 적으로만 디자인 되었음을 알립니다.
    --------------------------------------------------------------------------
    #어도비xd #인터랙션 #모바일디자인

    도봉도봉

라이브러리에 저장

좋아하는 강좌들을 수집하고 관리하고 공유하세요

닫기