WEBSTORYBOY

본문 바로가기

CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오

나만의 유튜브 사이트 만들기

12. 나만의 유튜브 사이트 만들기 : 채널 페이지 만들기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 11 나만의 유튜브 사이트 만들기 : 비디오 페이지 만들기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 영상을 클릭하면 영상에 대한 정보가 나오는 페이지를 만들겠습니다. 모든 영상은 ID값을 가지고 있기 때문에 영상을 클릭하면 video 페이지에 videoID 값을 전달 받게 됩니다. 그 영상 ID 값을 통해 영상을 재생하고 관련된 정보를 가져올 수 있습니다. 그럼 시작해보겠습니다. 🥹 인덱스 1. 셋팅하기 1_1. Node.js 설치 1_2. Vscode 설치 1_3. React.js 설치 1_4. 폴더 정리하기 1_5. 필요한 파일 설치하.. 댓글 0 2023.09.25
11. 나만의 유튜브 사이트 만들기 : 비디오 페이지 만들기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 11 나만의 유튜브 사이트 만들기 : 비디오 페이지 만들기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 영상을 클릭하면 영상에 대한 정보가 나오는 페이지를 만들겠습니다. 모든 영상은 ID값을 가지고 있기 때문에 영상을 클릭하면 video 페이지에 videoID 값을 전달 받게 됩니다. 그 영상 ID 값을 통해 영상을 재생하고 관련된 정보를 가져올 수 있습니다. 그럼 시작해보겠습니다. 🥹 인덱스 1. 셋팅하기 1_1. Node.js 설치 1_2. Vscode 설치 1_3. React.js 설치 1_4. 폴더 정리하기 1_5. 필요한 파일 설치하.. 댓글 0 2023.09.25
10. 나만의 유튜브 사이트 만들기 : 서치 페이지 만들기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 10 나만의 유튜브 사이트 만들기 : 서치 페이지 만들기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 메인페이지의 메인 컨텐츠를 만들어 보겠습니다. 메인에는 오늘의 추천영상, 개발자 소개 및 영상 소개를 보여주는 부분입니다. 그럼 한번 시작해보겠습니다.😝 인덱스 1. 셋팅하기 1_1. Node.js 설치 1_2. Vscode 설치 1_3. React.js 설치 1_4. 폴더 정리하기 1_5. 필요한 파일 설치하기 2. CSS 셋팅하기 2_1. SCSS 설정하기 2_2. style.scss 설정하기 2_3. fonts.scss 설정하기 2_4... 댓글 0 2023.09.15
09. 나만의 유튜브 사이트 만들기 : 페이지 로딩 작업 만들기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 09 나만의 유튜브 사이트 만들기 : 페이지 로딩 작업 만들기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 메인페이지의 메인 컨텐츠를 만들어 보겠습니다. 메인에는 오늘의 추천영상, 개발자 소개 및 영상 소개를 보여주는 부분입니다. 그럼 한번 시작해보겠습니다.😝 인덱스 1. 셋팅하기 1_1. Node.js 설치 1_2. Vscode 설치 1_3. React.js 설치 1_4. 폴더 정리하기 1_5. 필요한 파일 설치하기 2. CSS 셋팅하기 2_1. SCSS 설정하기 2_2. style.scss 설정하기 2_3. fonts.scss 설정하기 2.. 댓글 0 2023.09.08
08. 나만의 유튜브 사이트 만들기 : 나머지 페이지 콘텐츠 만들기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 08 나만의 유튜브 사이트 만들기 : 나머지 페이지 콘텐츠 만들기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 메인페이지의 메인 컨텐츠를 만들어 보겠습니다. 메인에는 오늘의 추천영상, 개발자 소개 및 영상 소개를 보여주는 부분입니다. 그럼 한번 시작해보겠습니다.😝 인덱스 1. 셋팅하기 1_1. Node.js 설치 1_2. Vscode 설치 1_3. React.js 설치 1_4. 폴더 정리하기 1_5. 필요한 파일 설치하기 2. CSS 셋팅하기 2_1. SCSS 설정하기 2_2. style.scss 설정하기 2_3. fonts.scss 설정하기.. 댓글 0 2023.09.04
07. 나만의 유튜브 사이트 만들기 : 추천 개발자 콘텐츠 만들기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 07 나만의 유튜브 사이트 만들기 : 추천 개발자 콘텐츠 만들기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 메인페이지의 메인 컨텐츠를 만들어 보겠습니다. 메인에는 오늘의 추천영상, 개발자 소개 및 영상 소개를 보여주는 부분입니다. 그럼 한번 시작해보겠습니다.😝 인덱스 1. 셋팅하기 1_1. Node.js 설치 1_2. Vscode 설치 1_3. React.js 설치 1_4. 폴더 정리하기 1_5. 필요한 파일 설치하기 2. CSS 셋팅하기 2_1. SCSS 설정하기 2_2. style.scss 설정하기 2_3. fonts.scss 설정하기 .. 댓글 0 2023.09.04
06. 나만의 유튜브 사이트 만들기 : 메인 콘텐츠 만들기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 06 나만의 유튜브 사이트 만들기 : 메인 콘텐츠 만들기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 메인페이지의 메인 컨텐츠를 만들어 보겠습니다. 메인에는 오늘의 추천영상, 개발자 소개 및 영상 소개를 보여주는 부분입니다. 그럼 한번 시작해보겠습니다.😝 인덱스 1. 셋팅하기 1_1. Node.js 설치 1_2. Vscode 설치 1_3. React.js 설치 1_4. 폴더 정리하기 1_5. 필요한 파일 설치하기 2. CSS 셋팅하기 2_1. SCSS 설정하기 2_2. style.scss 설정하기 2_3. fonts.scss 설정하기 2_4... 댓글 0 2023.09.01
05. 나만의 유튜브 사이트 만들기 : 페이지 SEO 작업 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 05 나만의 유튜브 사이트 만들기 : 페이지 SEO 작업 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 페이지 별로 SEO 기능을 추가해보겠습니다. 리액트를 싱글 페이지를 기본으로 하기 때문에 페이지가 없습니다. 페이지가 있는 것첨럼 타이틀과 설명을 추가할 것입니다. 그럼 시작해볼까요? 🫡 인덱스 1. 셋팅하기 1_1. Node.js 설치 1_2. Vscode 설치 1_3. React.js 설치 1_4. 폴더 정리하기 1_5. 필요한 파일 설치하기 2. CSS 셋팅하기 2_1. SCSS 설정하기 2_2. style.scss 설정하기 2_3. f.. 댓글 0 2023.08.30
04. 나만의 유튜브 사이트 만들기 : 섹션 컴퍼넌트 만들기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 04 나만의 유튜브 사이트 만들기 : 섹션 컴퍼넌트 만들기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 CSS를 셋팅하겠습니다. 리액트에서 CSS를 사용하는 방법은 여러가지가 있습니다. 그 중 가장 기본적인 SCSS를 이용해서 작업해보겠습니다. 인덱스 1. 셋팅하기 1_1. Node.js 설치 1_2. Vscode 설치 1_3. React.js 설치 1_4. 폴더 정리하기 1_5. 필요한 파일 설치하기 2. CSS 셋팅하기 2_1. SCSS 설정하기 2_2. style.scss 설정하기 2_3. fonts.scss 설정하기 2_4. vars... 댓글 0 2023.08.30
03. 나만의 유튜브 사이트 만들기 : 페이지 및 컴퍼넌트 만들기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 03 나만의 유튜브 사이트 만들기 : 페이지 및 컴퍼넌트 만들기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 CSS를 셋팅하겠습니다. 리액트에서 CSS를 사용하는 방법은 여러가지가 있습니다. 그 중 가장 기본적인 SCSS를 이용해서 작업해보겠습니다. 인덱스 1. 셋팅하기 1_1. Node.js 설치 1_2. Vscode 설치 1_3. React.js 설치 1_4. 폴더 정리하기 1_5. 필요한 파일 설치하기 2. CSS 셋팅하기 2_1. SCSS 설정하기 2_2. style.scss 설정하기 2_3. fonts.scss 설정하기 2_4. va.. 댓글 0 2023.08.30
02. 나만의 유튜브 사이트 만들기 : CSS 셋팅하기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 02 나만의 유튜브 사이트 만들기 : SCSS 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 CSS를 셋팅하겠습니다. 리액트에서 CSS를 사용하는 방법은 여러가지가 있습니다. 그 중 가장 기본적인 SCSS를 이용해서 작업해보겠습니다. 인덱스 1. 셋팅하기 1_1. Node.js 설치 1_2. Vscode 설치 1_3. React.js 설치 1_4. 폴더 정리하기 1_5. 필요한 파일 설치하기 2. CSS 셋팅하기 2_1. SCSS 설정하기 2_2. style.scss 설정하기 2_3. fonts.scss 설정하기 2_4. vars.sc.. 댓글 0 2023.08.29
01. 나만의 유튜브 사이트 만들기 : 셋팅하기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 01 나만의 유튜브 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만듭니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습합니다. YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해합니다. 이로써 자신만의 유튜브 사이트를 만들게 됩니다. 그럼 한번 시작해볼까요? 🥳 인덱스 1. 셋팅하기 1_1.. 댓글 0 2023.08.28

포트폴리오 만들기 - NEXT

포트폴리오 만들기 - VUE

포트폴리오 만들기 - REACT

포트폴리오 만들기 - VITE

GSAP Parallax Effect

2023 웹디자인기능사

728x90

티스토리툴바