요약
이 자바스크립트 튜토리얼에서는, 숫자가 올라가는 애니메이션을 순수 자바스크립트로 구현하는 방법을 알려줍니다.
하이라이트
💡 숫자가 프로르 캐서 올라가는 애니메이션을 자바스크립트로 구현해 보세요.
강조점
💡 자바스크립트를 이용하여 애니메이션을 구현합니다.
💡 HTML 요소에 숫자를 바꾸는 함수를 적용합니다.
💡 setInterval 함수를 사용하여 일정 시간마다 숫자를 증가시킵니다.
💡 숫자가 일정 값에 도달하면 애니메이션을 멈춥니다.
💡 숫자가 바뀌는 원리를 이해하면 쉽게 구현할 수 있습니다.
Summary
이번 강의에서는 자바스크립트로 쉽게 아코디언을 구현하는 방법을 배웠습니다.
Highlights
🎉 아코디언 구현: 자바스크립트로 아코디언을 구현해 보았습니다.
📚 HTML 구조: 아코디언을 구현하기 위해 HTML 구조를 만들었습니다.
💻 CSS 스타일링: CSS를 사용하여 패널의 바디를 숨기는 스타일링을 했습니다.
⚙️ 스크립트 기능: 클릭 이벤트를 사용하여 액티브한 패널만 보이도록 구현했습니다.
🖱️ 클릭 이벤트: 클릭한 패널의 액티브 클래스를 추가하고 다른 패널의 액티브 클래스를 제거하는 기능을 구현했습니다.
🧩 배열 요소 처리: 배열로 들어오는 패널 요소를 처리하여 클릭 이벤트를 적용했습니다.
요약
자바스크립트를 사용하여 순수 자바스크립트로 라이트박스 모달을 구현하는 방법에 대해 알려드립니다.
하이라이트
🖼️ 라이트박스 효과는 이미지를 강조하는 효과를 만들어줍니다.
강조 포인트
🌟 라이트박스는 이미지를 검게 처리하고 원하는 이미지만 강조합니다.
🌟 라이트박스는 포트폴리오, 로그인 및 회원가입 페이지 등 다양한 곳에서 활용할 수 있습니다.
🌟 사용자가 클릭한 이미지를 크게 보여주는 효과를 구현할 수 있습니다.
🌟 라이트박스 오버레이에 이미지를 추가하여 원하는 위치에 큰 이미지를 보여줄 수 있습니다.
🌟 CSS를 사용하여 라이트박스 오버레이의 스타일을 설정할 수 있습니다.
🌟 라이트박스 오버레이에 링크 이벤트를 추가하여 이미지 클릭 시 다른 페이지로 이동할 수 있습니다.
🌟 라이트박스 모달을 구현하기 위해 순수 자바스크립트를 사용합니다.
자바스크립트 핵심 리뷰 #2에서는 CSS 변경, 이벤트 연결, DOM 조작 등에 대해 다루었습니다.
Highlights
🎨 CSS 변경: 메뉴 안의 li 요소들의 색상을 파란색으로 변경하는 방법을 배웠습니다.
🖱️ 이벤트 연결: 선택한 요소에 이벤트를 연결하여 원하는 동작을 수행할 수 있습니다.
🧱 DOM 조작: DOM 요소를 선택하고 조작하여 화면을 동적으로 변경할 수 있습니다.
Bullet Points
🔍 선택자와 반복문을 이용하여 메뉴 안의 li 요소들의 색상을 파란색으로 변경할 수 있습니다.
📝 객체의 속성을 활용하여 선택한 요소의 색상을 변경할 수 있습니다.
🚀 반복문을 활용하여 여러 개의 요소에 동일한 작업을 반복적으로 수행할 수 있습니다.
🕹️ 이벤트를 연결하여 요소에 클릭, 마우스 오버 등의 동작을 추가할 수 있습니다.
⚡ 코드를 최적화하여 사이트의 속도를 높일 수 있습니다.
🌈 배열과 객체를 효율적으로 활용하여 코드를 작성할 수 있습니다.
💡 메뉴를 동적으로 변경하거나 화면을 업데이트할 때 DOM 조작을 활용할 수 있습니다.
Summary
이번 동영상은 자바스크립트의 핵심인 선택자와 반복문에 대해 알려줍니다.
Highlights
🎯 선택자는 자바스크립트에서 가장 중요한 요소입니다.
📝 선택한 요소의 CSS를 수정하거나 이벤트를 연결할 수 있어야 합니다.
🔂 반복문은 선택한 요소들을 배열에서 처리하기 위해 필요합니다.
🍏 프로트 엔드 개발에서 자주 사용되는 반복문은 for문입니다.
🍒 선택한 요소를 리스트 형식으로 출력하는 예제를 실습합니다.
📜 선택자와 반복문을 통해 요소들을 동적으로 조작할 수 있습니다.
최근 하루가 멀다하고 다양한 tool이 소개되고 있고, AI를 활용하여 웹앱이나 앱등을 빠르게 구현할 수 있는 다양한 방법들이 소개되고 있습니다. 마음만 비우고 지갑만 채우면 얼마든지 코딩없이도 그럴싸한 웹사이트를 구현할 수 있는 시대입니다. 이럴 때 일수록 더욱더 정신을 가다듬고 우리의 살길을 찾아야 할 것 같습니다.
이제는 단순 무식한, 시간이 많이 소요되는 작업들은 AI에 시키고, 인간만이 할 수 있는 창의적인 기획력을 바탕으로 서비스를 기획하고 웹앱이든 앱이든 어플리케이션을 구현하는 전 과정에서 AI 툴들을 적절히 활용하고, AI 툴들에게 정확한 명령어로 원하는 답이 도출되도록 하는 노하우가 필요한 시대입니다.
제가 생각하는 우리의 바람직한 자세는 튼튼한 기초를 가지고 AI툴에 휘둘리지 않고 정확하게 오더를 내리고, 결과물에서 미비한 부분을 올바르게 수정할 수 있는 탄탄한 기본기를 가지는 것이라고 생각합니다. 이에 제 채널을 통해 공부하고 계시는 많은 분들께 채널의 사용법에 대해 안내 드립니다.
⚡️ 디자이너
디자인 재생 목록: https://www.youtube.com/playlist?list=PL-qMANrofLyu2NMeIYkY5b650cKBVyR59
06 Design
포토샵, 일러스트레이터, 피그마등 다양한 디자인 프로그램으로 웹디자인을 학습합니다.
www.youtube.com
포토샵, 일러스트레이터, 피그마등 디자인 툴을 학습할 수 있습니다. 포커스는 코딩친화적인 웹사이트 디자인에 있습니다.
⚡️ 퍼블리셔(프론트 엔드 개발자)
아래 순서의 재생목록으로 학습하시면 되겠습니다.
01 HTML -> 02 CSS -> 03 PSD TO HTML & CSS -> 04 Javascript
⚡️ 최근 내용으로 핵심 내용 학습하기
영진닷컴 IT 채널 ☑️ https://bit.ly/3pCGNqp
영진닷컴 IT 채널
www.youtube.com
회원 등급은 그린, 실버, 골드로 구분되어 있습니다. 각 회원 등급별로 혜택의 차이가 있으니 참고하셔서 가입하시면 됩니다.
⚡️ 회원 공통 혜택
☑️ 카카오톡 오픈 채널을 통해 궁금한 사항에 대한 질문과 답변을 받을 수 있습니다.
☑️ 채널 영상에서 소개되면 핵심 노트를 보실수 있습니다. 핵심 노트는 지속적으로 최신 정보로 업데이트 되고 있습니다.
⚡️ 그린 등급 혜택
☑️ 카카오톡 오픈 채널
☑️ 핵심노트 공개
DESIGN
HTML & CSS
⚡️ 그린 등급 혜택
☑️ 카카오톡 오픈 채널
☑️ 핵심노트 공개
DESIGN
HTML & CSS
Javascript & jQuery
| Benefits | Green | Silver | Gold |
| 카카오톡 오픈 채팅 | ✔ | ✔ | ✔ |
| 디자인 핵심노트 | ✔ | ✔ | ✔ |
| HTML CSS 기초노트 | ✔ | ✔ | ✔ |
| HTML CSS 중급노트 (FLEX, GRID) |
✔ | ✔ | |
| JAVASCRIPT JQUERY 핵심노트 |
✔ | ✔ | |
| CMS 재생목록 보기 | ✔ | ✔ | |
| CMS 핵심노트 | ✔ | ||
| 예제시작파일 | ✔ | ✔ | |
| 예제완료파일 | ✔ |
Rock's Easyweb
안녕하세요. Rock's Easyweb(구, 바위처럼의 이지웹) 의 강사 김동주입니다. 본 채널은 웹디자인부터, html, css, javascript, jquery등 기본적인 웹퍼블리싱에 필요한 프로그램과 언어를 비롯하여 php, cafe24,
www.youtube.com
1. 채널 홈에서 아래와 같이 가입 버튼을 클릭합니다.
2. 멤버쉽 안내 페이지에서 원하는 회원 등급을 선택하고 가입 버튼을 클릭합니다.
3. ⚡️ 가입정보를 이메일로 전송합니다. (중요!)
가입할 때 사용한 gmail 주소, 유튜브 표시이름(닉네임), 가입등급을 ezwebpub@gmail.com으로 보내주세요.
[예시]
회원가입했습니다. 구글드라이브 자료 공유 부탁드립니다.
아이디 : 나잘난
이메일 : abcnajalan@gmail.com
공유된 폴더는 구글드라이브 공유문서함에서 확인하실 수 있습니다.
이상으로 채널 활용법 및 회원 가입 안내 드렸습니다.
참고로 ezwebpub.com는 유튜브 회원등급과 상관없이 소스를 개별 구매할 수 있습니다. 감사합니다.
안녕하세요. rocks'easyweb의 김동주 강사입니다.
피그마활용 웹디자인 & 웹퍼블리싱 강의를 그린컴퓨터아트학원(종로점)에서 재직자 수업(일반도 신청가능)으로 진행합니다.
기초는 있지만 종합적으로 적용이 어려운 분,반응형이 힘든 분,모바일 전용 쇼핑몰 구현이 궁금한 분
한번 도전해보세요!
개강일: 1월30일~3월14일(화목, 13일)
강의장: 그린컴퓨터아트학원 종로지점 - 212호
휴강일: 2/8(목)---------[※ 이외 공휴일휴무]
교육시간: 19:10~22:10(3H)
문의: 02-722-2111
수강상담 신청하기: https://forms.gle/6vqGTSnuq2ntzaFY8
모집인원: 20명
피그마 기초
- Adobe XD, sketch, Figma 비교
- 설치, UI 메뉴, 프레임
- 쉐이프, 클리핑 마스크, 펜툴, 폰트 위계
- 컴포넌트, 프로토 타이핑
- UI 디자인 원칙
- 그리드
피그마 웹디자인 실무
- 버튼, 배너
- 배너, 서비스, 후기
- 푸터, 회사소개페이지
- 서브페이지, 아코디언
- 서브페이지, 회원가입, 로그인
디자이너의 피그마 활용(응용)
- 피그마 반응형 디자인
- 피그마 모바일 쇼핑몰
(상기 일정은 학습 여건에 따라 변경될 수 있습니다.)
- 포토샵 또는 일러스트로 웹디자인을 한 경험이 있는 분 또는 없는분도 가능
(포토샵, 일러스트레이터를 몰라도 피그마는 가능합니다.)
- 코딩 친화적인 디자인과 전체 프로세스를 경험해보고 싶은 분
피그마 디자인 & 디자인 참고 웹페이지 구현하기
디자인 참고 웹페이지 구현하기
- 02-722-2111
- ezwebpub@gmail.com
- 수강상담 신청하기: https://forms.gle/6vqGTSnuq2ntzaFY8
제 유튜브 영상의 재생목록에서 아래 차시를 미리 학습해주시면 감사하겠습니다.
유튜브 채널: https://www.youtube.com/@ezweb
| [모집] 프로젝트기반 프론트엔드 개발자 양성(Figma/React/Next.js/PHP/Mysql/chatGPT) (4) | 2024.12.16 |
|---|---|
| 취업률 87%! 2024년도 12월개강예정『기업연계 프로젝트형』 프론트엔드 웹&앱 SW개발자 양성 (1) | 2024.08.28 |
| 2024년도 6월개강예정『기업연계 프로젝트형』 프론트엔드 웹&앱 SW개발자 양성 (0) | 2023.10.12 |
| 피그마(Figma) UI/UX 웹&앱 디자이너를 위한 실무활용(4차) (0) | 2023.07.13 |
| 수강생 모집 『기업연계 프로젝트형』 프론트엔드 웹&앱 SW개발자 양성 (0) | 2023.04.03 |
최근에 출간된 "2024 SD에듀 유선배 웹디자인기능사 실기 과외노트" 서평 이벤트를 진행합니다.
웹디자인 기능사를 준비하고 계시다면
이벤트에 참여하여 무료로 도서를 받아보세요.
이벤트에 당첨되신 분들은 yes24와 개인 sns 채널에 서평을 남겨주시면 됩니다.
많은 참여와 홍보 부탁드립니다.
감사합니다.
이벤트 신청 기간: 2023.10월 20일까지
당첨자 발표:2023.10월 21일
도서정보 확인하기: https://www.yes24.com/Product/Goods/122330497
2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 - 예스24
웹디자인기능사는 단순 코딩 실력만 테스트하는 것이 아니라 웹디자인에 필요한 포토샵 기술도 테스트합니다. 포토샵을 통한 이미지 편집, 텍스트 생성 및 변형, 배색 등 기본 테크닉도 필수이
www.yes24.com
이벤트 참여하기: https://forms.gle/F5M4XVVSVfX4Zbr38
도서 서평 이벤트 참여하기
구독자 여러분 안녕하세요. 최근에 출간된 "2024 SD에듀 유선배 웹디자인기능사 실기 과외노트" 서평 이벤트를 진행합니다. 웹디자인 기능사를 준비하고 계시다면 이벤트에 참여하여 무료로 도서
docs.google.com
당첨자 분께는 이벤트 참여 안내 메일드리겠습니다.
| 웹디자인 기능사 표지 디자인입니다. (0) | 2023.08.29 |
|---|---|
| 도서 출간 - "코딩은 처음이라 with 웹 퍼블리싱" (0) | 2022.08.21 |
현재 진행중인 기업연계 프로젝트형 프론트엔드 웹&앱 SW개발자 양성 과정의 4차 수강생을 모집합니다.
3차과정과 비교하여 개인 프로젝트가 추가되었으며, Reat 과정 시간이 대폭 늘었습니다.
웹퍼블리싱 기초부터 백엔드 프로그래밍까지 차근차근 빡세게 가르쳐드립니다. 아래 영상으로 확인하실수 있습니다.
비전공자, 전공자 상관없이 기초부터 확실하게 학습하고 과정중 완성하는 프로젝트를 통해 포트폴리오를 완성하는 과정입니다.
많은 관심 부탁드립니다.
웹기획자, 웹디자이너, 웹퍼블리셔, 프론트엔드 개발자, 백엔드개발자
총 훈련시간 : 960시간
훈련기간 : 2024년 6월중 개강 예정(월-금, 120일)
교육시간 : 09:30~18:30 [월-금]
MySQL, git, Figma, Adobe Master Collection CC, MariaDB, Visual Studio Code, 라라벨(laravel), React, React Router, Firebase, Express js
- K-Digital Training은 우리나라 디지털, 신기술 분야에서 핵심적인 역할을 담당할 인재를 양성하기 위해 고용노동부와 함께하는 훈련과정이며, ‘국민내일배움카드’만 발급받으면 정부의 전액 지원으로 무료 수강할 수 있습니다.
[HRD-Net 기관정보]
- 훈련기관명 : 그린컴퓨터아트학원 종로
- 수강료 : 전액무료
- 직업능력훈련기관 우수훈련기관 5년인증 획득
- 전화문의 : 02-722-2111
- 수강 상담 신청하기 : https://bit.ly/3PNqkfP
| No. | 교과목명 | 시간 | |||
| 1 | 기초부터 확실하게! (HTML, 스타일 설정을 위한 CSS 기초 학습) |
104 | |||
| - 웹앱의 동작원리 - 웹 표준과 브라우저 - VS Code 설치 및 실행 - HTML 개요 - CSS 개요 - CSS 속성 - HTML/CSS 기초 문법 - Figma 툴 활용 - 레이아웃 구현 기초 - 플렉서블 레이아웃 구현 - Git을 활용한 버전관리 |
|||||
| 2 | 웹 프로그래밍의 꽃! (JavaScript를 활용한 다양한 효과 적용) |
88 | |||
| - javascipt 기본 개념, 동작 원리, 개발 환경, 실행 방법 - 변수, 데이터 타입, 배열, 연산자, 객체, 함수 - 제어문 - 프로퍼티 정의생성자 함수에 의한 객체 생성, 프로토타입 - 전역 객체, this, 실행 컨텍스트, 클로저 - 클래스, 모듈, 웹팩 - ES6 함수 추가 기능 - String/Number/Date/Math/정규표현식 - 스프레드 문법 - 디스트럭처링 할당 - 문서 객체 모델(Document Object Model) - 동기식 처리 모델 vs 비동기식 처리 모델 - 이벤트 - Ajax- REST API - 자바스크립트 DOM 조작 - Form Input Validation Test |
|||||
| 3 | 웹앱에 생명을! (웹 상에 배포하기 위한 네트워크 기초 학습) |
16 | |||
| - 클라이언트, 서버 아키텍처의 이해 - 브라우저의 작동원리 학습 - 네트워크의 기초 지식 기반 REST API 이해 및 활용 |
|||||
| 4 | 웹앱에 생명을! (데이터베이스를 이용해 살아있는 웹 앱 구현) |
32 | |||
| - 데이터베이스 개요 - 데이터베이스 모델링 - SELECT GROUP BY - INSERT, UPDATE, JOIN - Sub-Query, Index, View, Replication - BackUp, MongoDB |
|||||
| 5 | 웹앱에 생명을! (SQL함수를 활용한 정교한 웹 앱 구현) |
40 | |||
| - 날짜형 함수 , 문자형 함수, 숫자형 함수 - CASE, JOIN - COUNT, SUM, AVG, MIN, MAX |
|||||
| 6 | Web Project-static Web App (개인 프로젝트) | 32 | |||
| - 훈련생 관심분야 웹사이트 선정 리뉴얼 프로젝트 - 순수 자바스크립트 기반 웹사이트 구현 |
|||||
| 7 | 웹앱을 정석대로! (다양한 유저가 사용할 수 있는 웹 앱 구현) |
32 | |||
| - 웹표준과 웹접근성을 준수하는 웹 앱 구현 - 크로스 브라우징 및 접속 환경 차이 학습 |
|||||
| 8 | 웹앱을 보다 화려하게! (UI/UX를 이용한 인터랙티브한 웹 앱 학습) |
64 | |||
| - UX 기반 화면 구성의 효과와 방법 - 사용성 높은 UI 이해와 적용 - 사용성 높은 UX 이해와 적용 - Search Engine Optimized 웹앱 |
|||||
| 9 | 웹앱을 보다 편리하게! (Bootstrap 프레임워크 활용) |
32 | |||
| - grid sytem - content - form - components - utilities 활용 |
|||||
| 10 | 시가총액 100대 기업내 선정 Renewal Project (팀 프로젝트) |
80 | |||
| - 100대 기업내 선정 리뉴얼 프로젝트 - 반응형 웹사이트 구현 - 부트 스트랩 활용 |
|||||
| 11 | 나두 한다! 인증과 웹보안 (데이터베이스와 인증 학습) |
26 | |||
| - 로그인 절차와 방법 - 사용자를 구분하기 위한 인증방법 - HTTP에서 클라이언트 - 서버간 통신 흐름 - 웹 보안의 중요성과 보안 방법 |
|||||
| 12 | 트렌드 따라하기! 서버리스 웹앱 (AWS 클라우드 활용 배포) |
40 | |||
| - AWS 클라우드 이해 - AWS 계정 생성 - EC2 생성 - Node.js,MySql 설치 - AWS 클라우드API 활용 (리눅스, 아파치 서버, 인스턴트, EMR) - AWS 배포 |
|||||
| 13 | LMS(학습지원시스템) Project (팀 프로젝트) |
192 | |||
| - LMS(강좌 관리 시스템) 관리자 페이지 제작 - LMS(강좌 관리 시스템) 유저 페이지 제작 |
|||||
| 14 | 나두 한다! React (React를 이용해 효율적인 웹앱 구현) |
146 | |||
| - SPA 이해 및 React 설치 - 샘플 웹앱 실행하기 - 컴포넌트 - props - state, state 이벤트 연결 - 컴포넌트 이벤트 만들기, 리펙토링, 리덕스 - 삭제, 편집 페이지 구현 |
|||||
| 15 | 곧 취업! 참여기업 현장실무특강 | 8 | |||
| 16 | 미션 도전! 해커톤 (참여기업 미션 수행) |
16 | |||
| 17 | 곧 취업! 커리어 서비스 | 12 | |||
| - 자기소개서 컨설팅 - 면접 및 이력서 관련 교육 - 컴퍼니 리서치 - 계약서 작성 주의사항 - 비즈니스 에티켓 |
|||||
| 합계 | 960 | ||||
문의 상담 신청하기 : https://bit.ly/3PNqkfP
수강상담 신청하기
- 과정명 : 『기업연계 프로젝트형』 웹디자인(웹퍼블리셔)&프론트엔드 SW개발자 양성 교육기간: 23/11/15 ~ 24/5/13 교육시간 : 09:30~18:30 [월-금] ** 모집현황에 따라 변동될 수 있습니다. 과정안내 : 과
docs.google.com
| 취업률 87%! 2024년도 12월개강예정『기업연계 프로젝트형』 프론트엔드 웹&앱 SW개발자 양성 (1) | 2024.08.28 |
|---|---|
| 수강생 모집 : 피그마(Figma) UI/UX 웹디자인&웹퍼블리셔를 위한 완벽활용 (2) | 2024.01.22 |
| 피그마(Figma) UI/UX 웹&앱 디자이너를 위한 실무활용(4차) (0) | 2023.07.13 |
| 수강생 모집 『기업연계 프로젝트형』 프론트엔드 웹&앱 SW개발자 양성 (0) | 2023.04.03 |
| 리액트[React],자바스크립트)프론트엔드 개발자 3회차 수강생 모집합니다. (0) | 2023.03.19 |
안녕하세요.
웹디자인 기능사 도서의 표지 디자인이 나왔습니다.
내일(8월30일)부터 인쇄 시작합니다.
출간은 9월 둘째주 전후로 서점에 출시될 예정입니다.
정말 오랜 시간 기다리셨습니다.
교정을 거의 10여차례에 걸처 오탈자, 코드의 이상유무등 면밀히 체크하느라 시간이 걸렸습니다.
출시일이 정확히 나오면 다시 안내드리겠습니다.
감사합니다.
도서명: 유튜브 선생님에세 배우는 웹디자인 기능사 실기 과외노트
출판사: SD에듀 시대고시기획
도서정가: 30,000원
| 도서 서평 이벤트! 도서를 무료로 드립니다. (0) | 2023.10.12 |
|---|---|
| 도서 출간 - "코딩은 처음이라 with 웹 퍼블리싱" (0) | 2022.08.21 |