풀스택 도전! PHP로 나만의 블로그 만들기 : 개발편
- [16. 개발] 풀스택 도전! PHP로 나만의 블로그 만들기 : 기본 셋팅하기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 10 PHP로 나만의 블로그 만들기 : 로그인 페이지 코딩하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하..
- [17. 개발] 풀스택 도전! PHP로 나만의 블로그 만들기 : 회원가입 작업하기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 10 PHP로 나만의 블로그 만들기 : 로그인 페이지 코딩하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하..
- [18. 개발] 풀스택 도전! PHP로 나만의 블로그 만들기 : 로그인 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 10 PHP로 나만의 블로그 만들기 : 로그인 페이지 코딩하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하..
풀스택 도전! PHP로 나만의 블로그 만들기 : 코딩편
- [06. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 기본 셋팅하기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 01 PHP로 나만의 블로그 만들기 : 기본 셋팅하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여 게시판..
- [07. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : CSS 셋팅하기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 02 PHP로 나만의 블로그 만들기 : CSS 셋팅하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여 게시..
- [08. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 기본 섹션 코딩하기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 03 PHP로 나만의 블로그 만들기 : 기본 섹션 코딩하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여 ..
- [09. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 인트로 유형 코딩하기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 04 PHP로 나만의 블로그 만들기 : 인트로 유형 코딩하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여..
- [10. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 인트로 유형 코딩하기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 04 PHP로 나만의 블로그 만들기 : 인트로 유형 코딩하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여..
- [11. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 사이드 영역 코딩하기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 06 PHP로 나만의 블로그 만들기 : 사이드 영역 코딩하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여..
- [12. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 블로그 뷰 페이지 코딩하기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 07 PHP로 나만의 블로그 만들기 : 블로그 뷰 페이지 코딩하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사..
- [13. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 게시판 페이지 코딩하기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 08 PHP로 나만의 블로그 만들기 : 회원가입 페이지 코딩하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용..
- [14. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 회원가입 페이지 코딩 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 09 PHP로 나만의 블로그 만들기 : 회원가입 페이지 코딩하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용..
- [15. 코딩] 풀스택 도전! PHP로 나만의 블로그 만들기 : 로그인 페이지 코딩 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 코딩 10 PHP로 나만의 블로그 만들기 : 로그인 페이지 코딩하기 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하..
풀스택 도전! PHP로 나만의 블로그 만들기 : 디자인편
- [05. 디자인] 풀스택 도전! PHP로 나만의 블로그 만들기 : 로그인 디자인 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 디자인 05 PHP로 나만의 블로그 만들기 : 회원가입 디자인 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여 게..
- [04. 디자인] 풀스택 도전! PHP로 나만의 블로그 만들기 : 로그인 디자인 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 디자인 04 PHP로 나만의 블로그 만들기 : 로그인 디자인 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여 게시..
- [03. 디자인] 풀스택 도전! PHP로 나만의 블로그 만들기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 디자인 03 PHP로 나만의 블로그 만들기 : 게시판 디자인 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여 게시..
- [02. 디자인] 풀스택 도전! PHP로 나만의 블로그 만들기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 디자인 02 PHP로 나만의 블로그 만들기 : 블로그 디자인 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여 게시..
- [01. 디자인] 풀스택 도전! PHP로 나만의 블로그 만들기 Tutorial/Portfolio 풀스택 도전! PHP로 나만의 블로그 만들기 by @webs 2023. 11. 01. 디자인 01 PHP로 나만의 블로그 만들기 : 메인 디자인 난이도 중간 소스 다운로드 인덱스 보기 코드 보기 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여 게시판..
나만의 유튜브 사이트 만들기
- 23. 나만의 유튜브 사이트 만들기 : 빌드 및 배포하기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 23 나만의 유튜브 사이트 만들기 : 빌드 및 배포하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로 합..
- 22. 나만의 유튜브 사이트 만들기 : 버그 고치기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 22 나만의 유튜브 사이트 만들기 : 버그 고치기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로 합니다...
- 21. 나만의 유튜브 사이트 만들기 : 채널 상세 페이지 만들기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 21 나만의 유튜브 사이트 만들기 : 채널 상세 페이지 만들기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목..
- 20. 나만의 유튜브 사이트 만들기 : 비디오 상세 페이지 만들기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 20 나만의 유튜브 사이트 만들기 : 비디오 상세 페이지 만들기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 ..
- 19. 나만의 유튜브 사이트 만들기 : Rapid API 및 더보기 설정하기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 19 나만의 유튜브 사이트 만들기 : Rapid API 및 더보기 설정하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해..
- 18. 나만의 유튜브 사이트 만들기 : 검색 및 유튜브 API 설정하기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 18 나만의 유튜브 사이트 만들기 : 검색 및 유튜브 API 설정하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 ..
- 17. 나만의 유튜브 사이트 만들기 : 나머지 페이지 작업 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 17 나만의 유튜브 사이트 만들기 : 나머지 페이지 작업 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로 ..
- 16. 나만의 유튜브 사이트 만들기 : Swiper 이미지 슬라이드 작업 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 16 나만의 유튜브 사이트 만들기 : Swiper 이미지 슬라이드 작업 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는..
- 15. 나만의 유튜브 사이트 만들기 : 비디오 컴퍼넌트 통합 작업 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 15 나만의 유튜브 사이트 만들기 : 비디오 컴퍼넌트 통합 작업 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 ..
- 14. 나만의 유튜브 사이트 만들기 : 메인 섹션 나머지 콘텐츠 작업 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 14 나만의 유튜브 사이트 만들기 : 메인 섹션 나머지 콘텐츠 작업 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것..
- 13. 나만의 유튜브 사이트 만들기 : 추천 개발자 작업 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 13 나만의 유튜브 사이트 만들기 : 추천 개발자 작업 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로 합..
- 12. 나만의 유튜브 사이트 만들기 : 추천 영상 작업 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 12 나만의 유튜브 사이트 만들기 : 추천 영상 작업 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로 합니..
- 11. 나만의 유튜브 사이트 만들기 : 메인 콘텐츠 작업 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 11 나만의 유튜브 사이트 만들기 : 메인 콘텐츠 작업 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로 합..
- 10. 나만의 유튜브 사이트 만들기 : 페이지 SEO 작업 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 10 나만의 유튜브 사이트 만들기 : 페이지 SEO 작업 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로 ..
- 09. 나만의 유튜브 사이트 만들기 : 컴퍼넌트 비동기 작업 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 09 나만의 유튜브 사이트 만들기 : 컴퍼넌트 비동기 작업 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로..
- 08. 나만의 유튜브 사이트 만들기 : 헤더 영역 데이터 작업 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 08 나만의 유튜브 사이트 만들기 : 헤더 영역 데이터 작업 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표..
- 07. 나만의 유튜브 사이트 만들기 : 헤더 영역 완성하기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 07 나만의 유튜브 사이트 만들기 : 헤더 영역 완성하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로 ..
- 06. 나만의 유튜브 사이트 만들기 : 섹션 컴퍼넌트 구조화하기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 06 나만의 유튜브 사이트 만들기 : 섹션 컴퍼넌트 구조화하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목..
- 05. 나만의 유튜브 사이트 만들기 : 페이지 만들기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 05 나만의 유튜브 사이트 만들기 : 페이지 만들기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로 합니다..
- 04. 나만의 유튜브 사이트 만들기 : SCSS 셋팅하기 Tutorial/Portfolio 나만의 유튜브 사이트 만들기 by @webs 2023. 09. 01. 04 나만의 유튜브 사이트 만들기 : SCSS 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로 합..
포트폴리오 만들기 - NEXT
- 40. 포트폴리오 사이트 만들기 : Next-Site : 마무리 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 10 포트폴리오 사이트 만들기 : 마무리 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이제 정말 마지막단계입니다. 지금까지 잘 따라오셨습니다. 마지막까지 최선을 다해 성공합시다. 화이팅 👍 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3...
- 39. 포트폴리오 사이트 만들기 : Next-Site : 푸터 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 푸터 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 연락처 영역을 작업해보겠습니다. 특별히 어려운 점이 없으니 잘 따라와주세요! 😬 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디..
- 38. 포트폴리오 사이트 만들기 : Next-Site : 연락처 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 08 포트폴리오 사이트 만들기 : 연락처 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 연락처 영역을 작업해보겠습니다. 특별히 어려운 점이 없으니 잘 따라와주세요! 😬 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 ..
- 37. 포트폴리오 사이트 만들기 : Next-Site : 포트폴리오 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 07 포트폴리오 사이트 만들기 : 포트폴리오 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 포토폴리오 영역을 작업해보겠습니다. 특별히 어려운 점이 없으니 잘 따라와주세요! 😬 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2..
- 36. 포트폴리오 사이트 만들기 : Next-Site : 사이트 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 06 포트폴리오 사이트 만들기 : 사이트 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 스킬 영역을 작업해보겠습니다. 특별히 어려운 점이 없으니 잘 따라와주세요! 😬 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디..
- 35. 포트폴리오 사이트 만들기 : Next-Site : 스킬 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 05 포트폴리오 사이트 만들기 : 스킬 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 스킬 영역을 작업해보겠습니다. 특별히 어려운 점이 없으니 잘 따라와주세요! 😬 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디자..
- 34. 포트폴리오 사이트 만들기 : Next-Site : 인트로 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 04 포트폴리오 사이트 만들기 : 인트로 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. next.js를 작업하기 전에 기본 셋팅을 완성하겠습니다. 기존 프레이워크랑 차이점이 무엇인지 알아보고, 좋은 점이 무엇이 있는지 알아보겠습니다. 그럼 바로 시작해보겠습니다. 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2..
- 33. 포트폴리오 사이트 만들기 : Next-Site : 헤더 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 03 포트폴리오 사이트 만들기 : 헤더 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. next.js를 작업하기 전에 기본 셋팅을 완성하겠습니다. 기존 프레이워크랑 차이점이 무엇인지 알아보고, 좋은 점이 무엇이 있는지 알아보겠습니다. 그럼 바로 시작해보겠습니다. 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2...
- 32. 포트폴리오 사이트 만들기 : Next-Site : 라우팅 및 컴퍼넌트 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 02 포트폴리오 사이트 만들기 : 라우팅 및 컴퍼넌트 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. next.js를 작업하기 전에 기본 셋팅을 완성하겠습니다. 기존 프레이워크랑 차이점이 무엇인지 알아보고, 좋은 점이 무엇이 있는지 알아보겠습니다. 그럼 바로 시작해보겠습니다. 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅..
- 31. 포트폴리오 사이트 만들기 : Next-Site : 셋팅하기 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 튜토리얼은 하나의 웹사이트를 여러 가지 프레임워크를 사용하여 만드는 방법에 대해 소개합니다. 웹 개발자들은 종종 다양한 프레임워크를 이용하여 작업하게 됩니다. 이 과정에서 여러 가지 프레임워크들을 어떻게 적용하는지 알아보고, 각 프레임워크들의 장단점을 비교 분석하며 학습하게 됩니다. 가장 기본이 되는 HTML/CSS를 이용하여 사이트를 먼저 만들고, 이를 바탕으로 리액트, 뷰, 넥스트 프레임워크를 통해 제작하게 됩니다. 현재를 기준으로 가장 많이 사용하..
포트폴리오 만들기 - VUE
- 30. 포트폴리오 사이트 만들기 : Vue-Site : 마무리 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 10 포트폴리오 사이트 만들기 : 마무리 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 뷰 마무리 섹션이 되겠습니다. 벌써 3번째 사이트를 마무리 할 때가 됐네요! 그럼 얼릉 끝내보도록 합시다! 고고 🫤 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조..
- 29. 포트폴리오 사이트 만들기 : Vue-Site : 푸터 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 푸터 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 연락처 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CS..
- 28. 포트폴리오 사이트 만들기 : Vue-Site : 연락처 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 08 포트폴리오 사이트 만들기 : 연락처 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 연락처 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 C..
- 27. 포트폴리오 사이트 만들기 : Vue-Site : 포트폴리오 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 07 포트폴리오 사이트 만들기 : 포트폴리오 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 인트로 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3..
- 26. 포트폴리오 사이트 만들기 : Vue-Site : 사이트 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 06 포트폴리오 사이트 만들기 : 사이트 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 인트로 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 C..
- 25. 포트폴리오 사이트 만들기 : Vue-Site : 스킬 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 05 포트폴리오 사이트 만들기 : 스킬 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 인트로 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CS..
- 24. 포트폴리오 사이트 만들기 : Vue-Site : 인트로 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 04 포트폴리오 사이트 만들기 : 인트로 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 인트로 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 C..
- 23. 포트폴리오 사이트 만들기 : Vue-Site : 헤더 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 03 포트폴리오 사이트 만들기 : 헤더 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이제 기본 셋팅도 완료가 됐으니, 컴퍼넌트를 하니씩 완성해 나가겠습니다. 방법은 기존과 동일하니, 반복 연습한다고 생각하시면 됩니다. 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 ..
- 22. 포트폴리오 사이트 만들기 : Vue-Site : 라우팅 및 컴퍼넌트 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 02 포트폴리오 사이트 만들기 : 라우팅 및 컴퍼넌트 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이제 본격적으로 뷰에 대해서 셋팅을 하고 작업을 시작해보겠습니다. 기존에 했던 방식과 많이 다르지 않습니다. 하지만 겉모습은 다를 수 있습니다. 그렇다고 어렵진 않습니다. 중요한건 흐름 및 방식을 이해하는 것이 좋습니다. 원리는 비슷하기 때문에 문법이 다르다고 해서, 구현을 못하지 않기 때문에 이런식으로 작동하는구나! 이런 느낌만 받는다면 크게 문제 없을 것입니다. 그럼 시작해볼까요? 고고 😜 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하..
- 21. 포트폴리오 사이트 만들기 : Vue-Site : 셋팅하기 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 튜토리얼은 하나의 웹사이트를 여러 가지 프레임워크를 사용하여 만드는 방법에 대해 소개합니다. 웹 개발자들은 종종 다양한 프레임워크를 이용하여 작업하게 됩니다. 이 과정에서 여러 가지 프레임워크들을 어떻게 적용하는지 알아보고, 각 프레임워크들의 장단점을 비교 분석하며 학습하게 됩니다. 가장 기본이 되는 HTML/CSS를 이용하여 사이트를 먼저 만들고, 이를 바탕으로 리액트, 뷰, 넥스트 프레임워크를 통해 제작하게 됩니다. 현재를 기준으로 가장 많이 사용하는..
포트폴리오 만들기 - REACT
- 20. 포트폴리오 사이트 만들기 : React-Site : 마무리 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 마무리 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 드뎌 마무리 단계에 왔네요! 조금 할 것이 많지만 잘 따라해주세요! 🤣 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디자인 설정 3.3 반응형 작업하기 3...
- 19. 포트폴리오 사이트 만들기 : React-Site : 푸터 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 푸터 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 푸터 영역을 작업하겠습니다. 어려운 것이 없으니 바로 시작해보겠습니다. 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디자인 설정 3.3 반응형 ..
- 18. 포트폴리오 사이트 만들기 : React-Site : 연락처 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 08 포트폴리오 사이트 만들기 : 연락처 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 연락처 영역을 작업하겠습니다. 어려운 것이 없으니 바로 시작해보겠습니다. 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디자인 설정 3.3 반응..
- 17. 포트폴리오 사이트 만들기 : React-Site : 포트폴리오 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 07 포트폴리오 사이트 만들기 : 포트폴리오 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 포트폴리오 영역을 작업하겠습니다. GSAP를 이용하여 가로모드를 구현하는 영역입니다. 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디자인 ..
- 16. 포트폴리오 사이트 만들기 : React-Site : 사이트 영역 소개 안녕하세요! 웹스토리보이입니다. 이번에는 사이트 영역을 작업하겠습니다. 크게 어려운 점이 없으니 잘 따라해주세요! 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디자인 설정 3.3 반응형 작업하기 3.4 메뉴 자바스크립트 설정 4. 인트로 영역 4.1 인트로 구조 잡기 4.2 인트로 디자인 설정 4.3 반응형 작업하기 5. 스킬 영역 5.1 스킬 구조 잡기 5.2 스킬 디자인 설정 5.3 반응형 작업하..
- 15. 포트폴리오 사이트 만들기 : React-Site : 스킬 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 05 포트폴리오 사이트 만들기 : 스킬 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 스킬 영역을 작업하겠습니다. 스킬 영역도 크게 어려운 점이 없으니 천천히 잘 따라하시면 됩니다. 그럼 시작해보겠습니다. 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조..
- 14. 포트폴리오 사이트 만들기 : React-Site : 인트로 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 04 포트폴리오 사이트 만들기 : 인트로 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 인트로 영역을 작업하겠습니다. 기존의 기본 코딩을 바탕으로 리액트에 맞게 작업하고 있습니다. 조금 다른 점이 있지만, 전체적인 맥락은 비슷하기 때문에 잘 따라 할 수 있을겁니다. 익숙해지면 쉬업집니다. 익숙해질려면 반복적으로 연습하면 됩니다. 그럼 오늘도 시작해볼까요! 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2..
- 13. 포트폴리오 사이트 만들기 : React-Site : 헤더 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 03 포트폴리오 사이트 만들기 : 헤더 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이제 하나씩 컴퍼넌트를 완성해 가봅시다. 7개의 컴포넌트를 하나씩 완성하면 기존처럼 멋있는 사이트가 완성될 것입니다. 처음에 만들었던 방식을 토대로 변화하는 과정과 재사용 및 효율적인 코딩방식으로 변화는 과정을 눈여겨 보면 좋습니다. 그럼 시작해보겠습니다. 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만..
- 12. 포트폴리오 사이트 만들기 : React-Site : 라우팅 및 컴퍼넌트 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 02 포트폴리오 사이트 만들기 : 라우팅 및 컴퍼넌트 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 리액트 작업을 위한 기본적인 설정을 시작하겠습니다. 페이지가 하나밖엔 없지만 페이지 셋팅을 할 거구요! 컴퍼넌트를 설정하여 페이지 구성을 할 것입니다. 또한 CSS를 SCSS로 변경하여 사용하도록 해보겠습니다. 처음하시는 분들은 많이 어색할 수 있지만, 몇 번 따라하다보면 익숙해지고 쉬어집니다. 그럼 시작해 보겠습니다.🧐 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap..
- 11. 포트폴리오 사이트 만들기 : React-Site : 셋팅하기 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 튜토리얼은 하나의 웹사이트를 여러 가지 프레임워크를 사용하여 만드는 방법에 대해 소개합니다. 웹 개발자들은 종종 다양한 프레임워크를 이용하여 작업하게 됩니다. 이 과정에서 여러 가지 프레임워크들을 어떻게 적용하는지 알아보고, 각 프레임워크들의 장단점을 비교 분석하며 학습하게 됩니다. 가장 기본이 되는 HTML/CSS를 이용하여 사이트를 먼저 만들고, 이를 바탕으로 리액트, 뷰, 넥스트 프레임워크를 통해 제작하게 됩니다. 현재를 기준으로 가장 많이 사용..
포트폴리오 만들기 - VITE
- 10. 포트폴리오 사이트 만들기 : Vite-Site : 마무리 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 10 포트폴리오 사이트 만들기 : 마무리 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이제 정말 마무리 단계에 접어들었습니다. 스크롤 할 때 스므스 효과를 주면 조금더 고급지게 만들 수 있습니다. 물론 웹사이트를 만들 때 자주 사용되는 탭 메뉴, 이미지 슬라이드, 로딩 처리 등을 구현하지 않은 부분이 여전히 많습니다. 이런 부분도 다 알려드리고 싶지만, 너무 많은 내용을 한 번에 전달하기보다는 조금씩 천천히 반복적으로 학습하는 것이 가장 중요합니다. 잘하는 것보다 오래동안 꾸준히 하는게 더 중요하더라구요! 흥미를 느끼면서 오랜 기간 동안 노력한다면, 능숙하게 웹 개발을 할 ..
- 9. 포트폴리오 사이트 만들기 : Vite-Site : 푸터 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 푸터 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이번 섹션은 포트폴리오에서 마지막 섹션입니다. 연락처에서 끝낼까 싶었는데. 조금 아쉬워서 전체 목록이나, 연락처 목록을 나타낼 수 있는 영역으로 꾸몄습니다. 이 영역은 세부적인 부분이나 표현하기 어려운 부분을 종합적으로 나타내면 좋을 거 같습니다. 인덱스 1. 포트폴리오 사이트 만들기 : VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2...
- 8. 포트폴리오 사이트 만들기 : Vite-Site : 연락처 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 08 포트폴리오 사이트 만들기 : 연락처 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이번 섹션은 가로 모드 느낌을 나게 연출하겠습니다. GSAP 라이브러리를 활용하여 작업하겠습니다. 자바스크립트를 작업하여 연출할 수 있지만, 비효율적이고, 애니메이션 효과가 라이브러리보다 훨씬 좋지 않습니다. 좋은 기능들은 갔다 쓰는게 더 효율적일 수 있습니다. GSPA를 처음 듣거나 할 줄 모르다면 gsap 강의를 한번 듣고 오는 것을 추천합니다. 그럼 시작해보겠습니다. 인덱스 1. 포트폴리오 사이트 만들기 : VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vi..
- 7. 포트폴리오 사이트 만들기 : Vite-Site : 포트폴리오 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 07 포트폴리오 사이트 만들기 : 포트폴리오 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이번 섹션은 가로 모드 느낌을 나게 연출하겠습니다. GSAP 라이브러리를 활용하여 작업하겠습니다. 자바스크립트를 작업하여 연출할 수 있지만, 비효율적이고, 애니메이션 효과가 라이브러리보다 훨씬 좋지 않습니다. 좋은 기능들은 갔다 쓰는게 더 효율적일 수 있습니다. GSPA를 처음 듣거나 할 줄 모르다면 gsap 강의를 한번 듣고 오는 것을 추천합니다. 그럼 시작해보겠습니다. 인덱스 1. 포트폴리오 사이트 만들기 : VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. ..
- 6. 포트폴리오 사이트 만들기 : Vite-Site : 사이트 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 06 포트폴리오 사이트 만들기 : 사이트 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이번 섹션은 자신이 작업한 사이트를 보여주는 섹션입니다. 본인이 작업한 사이트를 보여주고 내가 이정도는 문제없이 할 수 있다라는 것을 보여주는 것이 중요합니다. 내가 작업한 사이트의 기술 스택이나 상세 설명을 적어주는 것이 좋고, 작업한 코드를 바로 볼 수 있는 버튼과 완성된 화면을 보여주는 것이 좋습니다. 작업한 사이트들은 git이나 netlify에 배포하여 보여주는 것이 좋습니다. 기본 웹표준 코딩부터, 반응형 코딩, 모바일 코딩, 리액트 코딩, 뷰 코딩으로 구성된 사이트 등을 보..
- 5. 포트폴리오 사이트 만들기 : Vite-Site : 스킬 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 05 포트폴리오 사이트 만들기 : 스킬 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이번 섹션은 자신의 스킬을 나타내는 섹션을 구성하는 부분입니다. 포트폴리오에서 자신의 스킬을 표현하는 방법은 중요하고 효과적인 커뮤니케이션을 위해 핵심적입니다 자기의 능력을 보여주는 방법은 여러가지가 있겠지만, 키워드 또는 아이콘을 이용하여 보여주는 방법이 제일 많이 쓰이긴 합니다. 스킬을 표현할 때에는 간결하고 명확한 언어로 스킬에 대한 내용을 표현하면 좋습니다. 또한 스킬을 실제로 어떻게 활용하는지 시각적으로 증명하는 것도 효과적입니다. 인덱스 1. 포트폴리오 사이트 만들기 : VI..
- 4. 포트폴리오 사이트 만들기 : Vite-Site : 인트로 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 04 포트폴리오 사이트 만들기 : 인트로 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이번 섹션은 웹 페이지의 인트로(소개) 섹션을 구성하는 부분입니다. "Port developer"라는 텍스트를 강조하여 표시하여 개발자 포트폴리오라는 느낌을 주었습니다. 가로로 놓인 줄들로 꾸며진 배경은 깔끔하고 세련된 느낌을 주도록 하였습니다. 또한 "Talent is found at the end of the effort"라는 메세지를 부여하여 노력에 대한 중요성을 강조하였습니다. 배경 이미지는 꾸밈 요소로 사용되었기 때문에, 웹 접근성을 위해 "aria-hidden" 속성을 사용..
- 3. 포트폴리오 사이트 만들기 : Vite-Site : 헤더 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 03 포트폴리오 사이트 만들기 : 헤더 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 각각의 섹션을 하나씩 작업해보겠습니다. 반응형도 동시에 작업하고, 스크립트도 한번에 마무리 하겠습니다. 지금까지 잘 하셨다면 이제부터는 코딩영역이라 쉽습니다. 그럼 바로 시작해보겠습니다. 인덱스 1. 포트폴리오 사이트 만들기 : VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기..
- 2. 포트폴리오 사이트 만들기 : Vite-Site : 레이아웃 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vite by @webs 2023. 07. 01. 02 포트폴리오 사이트 만들기 : 레이아웃 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 기본 셋팅을 완성하였으면, 이제 본격적으로 HTML/CSS 코딩을 시작해보겠습니다. vite를 통해 작업하기 때문에 기존에 기초 코딩 방식하고는 조금 틀릴 수 있습니다. 빌드와 배포라는 과정을 통해 사이트를 조금 더 최적화 시키고 가볍게 만들어 조금더 빠르고 동적인 사이트를 만들 수 있습니다. 그럼 갈 길이 머니까 바로 시작해볼까요? 🥱 인덱스 1. 포트폴리오 사이트 만들기 : VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴..
- 1. 포트폴리오 사이트 만들기 : Vite-Site : 셋팅하기 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vite by @webs 2023. 07. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 튜토리얼은 하나의 웹사이트를 여러 가지 프레임워크를 사용하여 만드는 방법에 대해 소개합니다. 웹 개발자들은 종종 다양한 프레임워크를 이용하여 작업하게 됩니다. 이 과정에서 여러 가지 프레임워크들을 어떻게 적용하는지 알아보고, 각 프레임워크들의 장단점을 비교 분석하며 학습하게 됩니다. 가장 기본이 되는 HTML/CSS를 이용하여 사이트를 먼저 만들고, 이를 바탕으로 리액트, 뷰, 넥스트 프레임워크를 통해 제작하게 됩니다. 현재를 기준으로 가장 많이 사용하..
GSAP Parallax Effect
- 15. GSAP Parallax Effect : 스무스 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 스무스 효과 by @webs 2023. 06. 01. 15 GSAP Parallax Effect : 스무스 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 GSAP 효과를 조금 더 퀄리티 있게 만들 수 있는 효과입니다. 잘 만들어진 사이트의 대부분은 이 효과를 적용하지 않은 사이트들이 거의 없습니다. 바로 부드럽게 움직임을 주는 스무스 효과입니다. 스무스 효과를 적용하는 방법은 여러가지가 있습니다. 직접 짤 수도 있도, 플러그인을 이용하는 방법들이 있습니다. 여러가지를 다 써본 결과 지금 쓸려고 하는 lenis 효과가 가장 좋습니다. 사용법도 간단하고 버그도 가장 적습니다. 그래서 이것을 써보..
- 14. GSAP Parallax Effect : 가로/세로 나타나기 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 가로/세로 나타나기 효과 by @webs 2023. 06. 01. 14 GSAP Parallax Effect : 가로/세로 나타나기 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 가로/세로 응용편입니다. 멋있게 가로 세로를 구현했는데, 애니메이션 효과를 주지 않는다면 별로겠죠! 세로 모드는 일반적인 효과이기 때문에 상관은 없지만, 가로 모드는 일반적인 효과로는 구현이 힘들기 때문에 따로 조치를 해주어야 합니다. 그렇다고 어렵지 않으니 잘 따라하시면 됩니다. 그럼 시작하겠습니다. 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. ..
- 13. GSAP Parallax Effect : 가로/세로 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 가로/세로 효과 by @webs 2023. 06. 01. 13 GSAP Parallax Effect : 가로/세로 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 가로 효과를 무사히 작업하였다면, 이제는 가로 세로 효과를 작업해보겠습니다. 가로와 세로가 결합된 형태이기 때문에 가로 효과보다는 조금 더 어려울 수 있습니다. 처음부터 가로 효과가 아닌 원하는 섹션만 가로 효과로 만들어야 하기 때문에 그 부분만 가로로 CSS 셋팅이 먼저 되어 있어야 합니다. 그럼 한번 만들어볼까요? 🙀 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코..
- 12. GSAP Parallax Effect : 가로 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 가로 효과 by @webs 2023. 06. 01. 12 GSAP Parallax Effect : 가로 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 패럴랠스의 하이라이트 가로 효과입니다. 저도 이 효과 때문에 GSAP를 사용했는데요! GSAP를 이용하면 쉽고 간편하게 효과를 줄 수 있습니다. 물론 처음에는 이해하는 과정이 필요합니다. 필수 속성 값을 알고 있어야, 내가 원하는 장소에서 스크롤 효과를 제대로 줄 수 있습니다. 보통은 스크롤 이팩트가 세로로 작동하지만, 가로로 작동하는 사이트들도 많이 볼 수 있기 때문에 이번에는 가로로 한번 작업해 보겠습니다. 그럼 시작해볼까요? 🤭 1. 기본 구조 만..
- 11. GSAP Parallax Effect : 메뉴 숨기기 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 메뉴 숨기기 효과 by @webs 2023. 06. 01. 11 GSAP Parallax Effect : 메뉴 숨기기 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 메뉴를 숨기는 효과를 만들어보겠습니다. 스크롤을 내리면 메뉴는 위로 올라가고, 스크롤을 올리면 메뉴는 다시 나타나는 형태입니다. GSAP를 이용하니 퀄리티 애니메이션을 구현할 수 있는 점이 좋네요! 소스로 새로운 속성들이 나오기는 하나 그렇게 어렵지는 않으니 같이 잘 따라 해봅시다. 그럼 시작해볼께요! 💩 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은..
- 10. GSAP Parallax Effect : 메뉴 축소 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 메뉴 축소 효과 by @webs 2023. 06. 01. 10 GSAP Parallax Effect : 메뉴 축소 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 메뉴 클릭에 있어 메뉴 확대 축소 효과를 완성해보겠습니다. 일반적으로 메뉴가 있다가 스크롤을 내리면 축소되거나 모바일 메뉴로 바꾸는 형태로 많이 사용합니다. 다시 처음으로 돌아오면 크게 확대되는 효과입니다. 스크립트와 CSS를 같이 사용하는 효과입니다. 비교적 사용빈도가 높고 쉽게 때문에 쉽게 따라할 수 있습니다. 그럼 바로 시작해보겠습니다. 🤪 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은..
- 09. GSAP Parallax Effect : 메뉴 이동 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 메뉴 이동 효과 by @webs 2023. 06. 01. 09 GSAP Parallax Effect : 메뉴 이동 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 메뉴를 클릭하면 이동하는 스크립트를 작성하겠습니다. 예전 자바스크립트 패럴랙스에서도 작업한 적이 있는데요! GSAP 용은 스타일이 많이 틀린긴 합니다. 그래도 패럴랙스 사이트에서 없어서는 안되는 효과이기 때문에 열심히 작업해보겠습니다. 그럼 시작해볼까요? 😏 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 G..
- 08. GSAP Parallax Effect : 진행바 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 진행바 효과 by @webs 2023. 06. 01. 08 GSAP Parallax Effect : 진행바 효과 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 진행바 스크립트를 작업해보겠습니다. 사이트 전체의 길이 값을 진행바에 표현하는 애니메이션입니다. GSAP를 이용하면 아주 간단하게 작업할 수 있습니다. 너무 빨리 끝난다고 아쉬어 하지 마세요^^ 😁 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 GSAP에서 필요한 파일을 미리 셋팅해 놓겠습니다. GSAP는 자주 업데이트가 ..
- 07. GSAP Parallax Effect : 배경색 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 배경색 효과 by @webs 2023. 06. 01. 07 GSAP Parallax Effect : 배경색 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번시간에는 배경색을 자연스럽게 변경하는 애니메이션을 만들어보겠습니다. 방법은 두가지로 설정할 수 있습니다. 자연스럽게 전체 배경에 색을 넣는 과정과, 해당 섹션의 data값을 이용해 섹션마다 변경하는 방법입니다. 어떤 방법이든 자연스럽게 배경색을 변경할 수 있습니다. 그럼 시작해볼까요? 😘 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹..
- 06. GSAP Parallax Effect : 텍스트 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 텍스트 효과 by @webs 2023. 06. 01. 06 GSAP Parallax Effect : 텍스트 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 텍스트 애니메이션을 작업해보겠습니다. 스크롤을 내리면 한 줄씩 또는 한 글자씩 나오는 효과입니다. GSAP에서도 텍스트 효과를 사용할 수 있지만 유로 플러그인을 사용해야 합니다. 그래서 텍스트를 분리하는 작업은 자바스크립트로 작업하거나 글씨만 분리해주는 플러그인을 사용할 것입니다. 글씨를 하나씩 분리한 상태에서 GSAP를 작업하게 됩니다. 조금 복잡할 수도 있고, 쉬울 수도 있습니다. 그럼 같이 한번 해볼까요? 1. 기본 구조 만들기 1-1. 준비하..
- 05. GSAP Parallax Effect : 나타나기 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 나타나기 효과 by @webs 2023. 06. 01. 05 GSAP Parallax Effect : 나타나기 효과 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 스크롤을 내리면 하나씩 나타나는 효과를 만들어 보겠습니다. 나타나기 효과는 이미지에 줄 수도 있고, 텍스트에 줄 수도 있습니다. 해당 요소에 이름에 각각 스크립트를 설정하면 조금 번거롭기 때문에 클래스 이름으로 설정할 수도 있습니다. 내가 원하는 효과의 이름을 작성하면, 그거에 맞추어 스크립트를 작성하면 됩니다. 기존과는 약간 다를 수 있지만 기본 원리는 동일하기 때문에 어렵지는 않습니다. 그럼 시작해 볼까요? 😇 1. 기본 구조 만들기..
- 04. GSAP Parallax Effect : 이질감 효과 주기 Tutorial/webd GSAP 패럴랙스 이펙트 : 이질감 효과 주기 by @webs 2023. 06. 01. 04 GSAP Parallax Effect : 이질감 효과 주기 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 패럴랙스 이펙트의 가장 대표적인 효과라고 할 수 있는 이질감 효과를 주겠습니다. 이질감은 요소가 겹쳤을 때 확인할 수 있습니다. 스크롤 내리거나 올릴 때마다 위치 이동을 시켜줘서, 보통의 요소보다 빠르게 또는 느리게 해주는 효과입니다. 여기에 스무스 효과를 같이 주면 퀄리티 있는 사이트를 만들 수 있습니다. 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해..
- 03. GSAP Parallax Effect : 배경 고정하기 Tutorial/webd GSAP 패럴랙스 이펙트 : 배경 고정하기 by @webs 2023. 06. 01. 03 GSAP Parallax Effect : 배경 고정하기 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. pin 속성을 이용하여 배경을 고정하는 효과를 배워보겠습니다. 스크롤을 내리면 배경이 고정되어 있고, 다음 섹션이 올라오는 형태의 애니메이션입니다. 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 GSAP에서 필요한 파일을 미리 셋팅해 놓겠습니다. GSAP는 자주 업데이트가 되기 때문에 제일 최선 버전을 사용하는게 좋습니..
- 02. GSAP Parallax Effect : Pin 애니메이션 Tutorial/webd GSAP 패럴랙스 이펙트 by @webs 2023. 06. 01. 02 GSAP Parallax Effect : Pin 애니메이션 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. GSAP Parallax Effect Pin 애니메이션에 대해서 배워보겠습니다. scrollTrigger 속성 중에 pin 애니메이션 기억하시죠? 무엇인가를 고정시킬 때 사용하는 Pin 속성을 이용해서 다양한 애니메이션 작업할 수 있습니다. 그럼 시작해보겠습니다. 렛츠기릿 🥳 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 GSAP에서..
- 01. GSAP Parallax Effect : 기본 애니메이션 Tutorial/webd GSAP 패럴랙스 이펙트 by @webs 2023. 06. 01. 01 GSAP Parallax Effect : 기본 애니메이션 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 포트폴리오 스킬을 올릴 수 있는 방법에 대해서 공부해보겠습니다. 현재 오픈되어 있는 사이트들은 패럴랙스 형태의 사이트가 많습니다. 즉 스크롤을 내리면 무엇인가 움직이는 효과들이 많습니다. 이런 효과를 패럴랙스 효과라고 합니다. 패럴랙스 파트는 자바스크립트 파트와 GSAP 파트로 나눌 수 있습니다. 기본적인 사항은 자바스크립트를 통해 익히고, 퀄리티 있는 효과들을 GSAP를 통해서 작업할 것입니다. GSAP의 scrollTrigger를 이용하면, 퀄리티 ..
2023 웹디자인기능사
- 2023년 웹디자인 기능사 실전 사이트 연습5 - E유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : E유형 by @webs 2023. 05. 01. 39 웹디자인 기능사 실전 사이트 : E유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 웹디자인 기능사에서 가장 어려운 부분인 E유형입니다. 반응형도 신경써야 하고 스크립트까지 접목시켜야 완성할 수 있습니다. 그럼 마지막까지 화이팅해봅시다. 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하기 2-4. 갤러리 작업하기 2-5. 배너 작업하기 2-6. 푸터 ..
- 2023년 웹디자인 기능사 실전 사이트 연습4 - D유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : D유형 by @webs 2023. 05. 01. 38 웹디자인 기능사 실전 사이트 : D유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 웹디자인 기능사 D-2 유형을 해보겠습니다. 천천히 잘 따라오세요! 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하기 2-4. 갤러리 작업하기 2-5. 배너 작업하기 2-6. 푸터 작업하기 2-7. 팝업 작업하기 1. 구조 잡기 1-1. 준비하기 우선 폴더를 먼저 셋..
- 2023년 웹디자인 기능사 실전 사이트 연습3 - C유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : C유형 by @webs 2023. 05. 01. 37 웹디자인 기능사 실전 사이트 : C유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 C유형 연습니다. 샘플은 C-4 유형을 참고하시면 됩니다. 이번 레이아웃은 약간 옛날 스타일 레이아웃입니다. 이런 레이아웃을 아직까지 쓰고 잇는 회사가 있을까 싶은데.. 그래도 시험이니까 한번 만들어보죠! 고고 😫 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하기 2..
- 2023년 웹디자인 기능사 실전 사이트 연습2 - B유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : B유형 by @webs 2023. 05. 01. 36 웹디자인 기능사 실전 사이트 : B유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 B유형에서 하나 해보겠습니다. B유형도 업데이트 되기 전이랑 같은 유형이지만 전체 메뉴가 생긴것이 다릅니다. 그부분만 신경쓰면 다른 부분은 동일합니다. 너무 어렵지 않으니 포기하지 말고 끝까지 완수하길 바랍니다. 😵💫 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하..
- 2023년 웹디자인 기능사 실전 사이트 연습1 - A유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : A유형 by @webs 2023. 05. 01. 35 웹디자인 기능사 실전 사이트 : A유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 지금까지는 연습을 하였고, 이제부터는 실전 사이트를 만들어보겠습니다. 실제 시험인 것처럼 작업을 하겠습니다. 각 유형에서 한가지를 골라서 작업해보겠습니다. A유형에서는 강원천문대 A-3유형을 작업해보겠습니다. 그럼 시작해볼까요? 🫤 1. 구조 잡기 1-1. 레이아웃 작업 우선 레이아웃을 작업해보겠습니다. 기본 레이아웃을 잡고, 스크립트를 작업할 것입니다. 시험지를 받으면, 전체적인 디자인과 구조를 확인하고, 받은 이미..
- 2023년 웹디자인 기능사 팝업 : P-1 Tutorial/webd 2023년 웹디자인 기능사 팝업 : P-1 by @webs 2023. 05. 01. 34 웹디자인 기능사 팝업 유형 : P-1 난이도 초급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 스크립트에서 가장 쉬운 스크립트입니다. 버튼을 클릭하면 숨긴 내용 보여주고, 다시 클릭하면 안보여주고, 시작해보겠습니다. 1. 구조 잡기 이번에는 A-2 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } #wrap { width: 1200px; margin: 0 aut..
- 2023년 웹디자인 기능사 탭 메뉴 : T-1 Tutorial/webd 2023년 웹디자인 기능사 탭메뉴 : T-1 by @webs 2023. 05. 01. 33 웹디자인 기능사 탭메뉴 유형 : T-1 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 탭메뉴 스크립트를 작업해보겠습니다. 그렇게 어렵지 않으니 하나씩 따라오세요! 그럼 바로 시작해보겠습니다. 1. 구조 잡기 이번에는 A-2 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } #wrap { width: 1200px; margin: 0 auto; } #h..
- 2023년 웹디자인 기능사 메뉴 : S-6 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-6 by @webs 2023. 05. 01. 32 웹디자인 기능사 슬라이드 유형 : S-6 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이미지 슬라이드도 마지막 유형입니다. 거의 끝이 보이기 시작했네요! 여러분들도 여기까지 잘 따라오셨는지 궁금하네요! 잘 하고 있으면 댓글 부탁드립니다. 마지막 유형은 조금 까다롭습니다. 아마 웹디기에서 제일 어려운 부분이 아닐까 싶습니다. 위아래 움직이기 위해서는 높이값이 잡혀야 하는데 height값을 퍼센트로 표현하는 건 힘듭니다. 브라우저는 내리면 계속 내려가기 때문에 height: 100%값이 존재하지 않습니다. ..
- 2023년 웹디자인 기능사 메뉴 : S-5 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-5 by @webs 2023. 05. 01. 31 웹디자인 기능사 슬라이드 유형 : S-5 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 반응형 이미지 슬라이드 S-5 유형입니다. 이번 유형은 S-2 유형과 유사하지만, 반응형으로 작업하기 위해서는 가로 값을 퍼센트로 설정해야 하고, 이미지는 백그라운드로 처리하는 것이 포인트입니다. 그래서 S-2 유형을 어느 정도 이해했다면 이번 유형도 쉽게 할 수 있을겁니다. 그럼 시작해보겠습니다. 1. 구조 잡기 이번에도 E-1 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. * {..
- 2023년 웹디자인 기능사 메뉴 : S-4 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-4 by @webs 2023. 05. 01. 30 웹디자인 기능사 슬라이드 유형 : S-4 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 웹디자인기능사의 하이라이트 이미지슬라이드 반응형 S-4 유형입니다. 이번에 반응형 레이아웃이 새롭게 생기면서 이미지 슬라이드도 반응형에 맞추어서 작업을 해야 합니다. 하지만 시험지에는 반응형으로 이미지 슬라이드를 구현하시오! 라는 내용이 없습니다. 그래서 이미지를 적절하게 포토샵에서 자른 후 반응형이 아닌 대충 크기를 맞추어도 상관이 없을 듯합니다. 이 부분은 저도 자세히 모르니 여러분이 시험을 보시고 옳은 정보를 알려..
- 2023년 웹디자인 기능사 메뉴 : S-3 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-3 by @webs 2023. 05. 01. 29 웹디자인 기능사 슬라이드 유형 : S-3 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 마지막 이미지 슬라이드입니다. 이번 유형은 두번째 유형과 똑같습니다. 이미지가 좌에서 위로 움직이는 것 빼고는 똑같습니다. 이 부분은 몇 가지만 바꾸면 구현이 되기 때문에 두번째 유형을 완벽하게 이해했다면, 응용해서 작업할 수 있는 유형입니다. 저랑 같이 하기 전에 먼저 해보시는 것을 추천합니다. 그럼 시작해볼까요? 🫢 1. 구조 잡기 이번에는 A-2 유형의 레이아웃을 사용하겠습니다. 레이아웃을 그대로 복사하셔서 사용하..
- 2023년 웹디자인 기능사 메뉴 : S-2 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-2 by @webs 2023. 05. 01. 28 웹디자인 기능사 슬라이드 유형 : S-2 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 좌우로 움직이는 이미지 슬라이더를 구현해보겠습니다. 좌로 움직이는 이미지 슬라이더는 두가지 유형으로 구분할 수 있습니다. 1 2 3 이미지고 보이고 다시 1로 이동 후 보여주는 방식과 1 2 3 1 2 3 무한으로 연속적으로 자연스럽게 보여주는 방식이 있습니다. 첫 번째 방법이 더 간단하고, 소스도 짧겠지만, 시험에서는 두번째 방식을 원하는 것 같습니다. 그래서 두번째 방법으로 작업을 시작해보겠습니다. 그럼 시..
- 2023년 웹디자인 기능사 메뉴 : S-1 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-1 by @webs 2023. 05. 01. 27 웹디자인 기능사 슬라이드 유형 : S-1 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 웹디자인기능사의 하이라이트! 제일 어려운! 제일 재밌는! 이미지 슬라이드입니다. 이 영역은 시험장에서 구현을 못하면 바로 떨어집니다. 무조건 암기하고 또 암기하고, 이해해야, 구현이 가능해야 합니다. 이미지 슬라이드의 유형은 크게 3가지로 나누어 집니다. 페이드 효과, 좌우 슬라이드 효과, 위아래 슬라이드 효과입니다. 페이드 효과는 이미지가 제자리에서 천천히 없어지고 천천히 나타나는 유형이고, 좌우 슬라이드 효과는 이미..
- 2023년 웹디자인 기능사 메뉴 : M-6 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-6 by @webs 2023. 05. 01. 26 웹디자인 기능사 메뉴 유형 : M-6 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 드뎌 메뉴 유형도 마지막입니다. 마지막 유형은 백그라운드가 들어간 메뉴 유형입니다. M-3 유형에서 작업을 했습니다. 이번엔 전체 배경이 가로로 들어간 형태이기 때문에 기존 유형과 약간 다르기 합니다. 그래도 원리는 동일하니까! 바로 한번 시작해보겠습니다. 1. 구조 잡기 이번에도 D-1 유형 레이아웃에 메뉴 유형을 작업을 해보겠습니다. 기본적인 코드는 그대로 복사하셔서 사용하셔도 됩니다. * { margin: 0; paddi..
- 2023년 웹디자인 기능사 메뉴 : M-5 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-5 by @webs 2023. 05. 01. 25 웹디자인 기능사 메뉴 유형 : M-5 난이도 중급 소스 다운로드 완성 화면 보기 완성 코드 보기 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 메뉴 유형 5번째 시간입니다. 이 유형은 M-4 유형과 동일합니다. 단지 서브메뉴의 위치만 다르기 때문에 이것은 CSS로 컨트롤 해주면 됩니다. 스크립트 부분은 동일하게 때문에 먼저 해보시고, 따라하시면 더 도움이 될 것 같습니다. 그럼 시작해보겠습니다. 😇 1. 구조 잡기 이번에도 D-1 유형 레이아웃에 메뉴 유형을 작업을 해보겠습니다. 기본적인 코드는 그대로 복사하셔서 사용하셔도 됩니다. * { margin: 0..
- 2023년 웹디자인 기능사 메뉴 : M-4 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-4 by @webs 2023. 05. 01. 24 웹디자인 기능사 메뉴 유형 : M-4 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 네번째 메뉴 유형을 작업하겠습니다. 이번 메뉴는 세로 유형이며, 사이드 메뉴가 있는 레이아웃에서 사용되는 메뉴 스타일입니다. PDF를 확인해보면 반응형 레이아웃 및 정적인 레이아웃에서 다 사용이 되지만 반응형에서 메뉴 유형이 조금 더 어려울 것 같아서 이번에는 반응형 레이아웃에서 작업을 해보겠습니다. 가로형 1,2,3과 세로형 1,2,3는 같은 원리이지만, 가로 세로에 따라 약간의 차이가 있습니다. 기존에 1,2,3번..
- 2023년 웹디자인 기능사 메뉴 : M-3 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-3 by @webs 2023. 05. 01. 23 웹디자인 기능사 메뉴 유형 : M-3 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 가로 메뉴 유형 3번째 시간이 되겠습니다. 3번째 유형의 특징은 마우스 오버시 서브메뉴의 전체 배경이 나온다는 것이 두번째 유형과 다른 점입니다. 이런 유형은 웹 사이트에서 많이 쓰이는 메뉴 유형으로 활용성이 높습니다. 비록 시험이지만 실제 실무에서도 많이 쓰이기 때문에 꼭 알아두면 좋을 것 같습니다. 그럼 또 시작해볼까요!😃 1. 구조 잡기 미리보기를 확인하시면 서브 메뉴가 전체 영역을 차지하는 메뉴 유형입니다. 메..
- 2023년 웹디자인 기능사 메뉴 : M-2 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-2 by @webs 2023. 05. 01. 22 웹디자인 기능사 메뉴 유형 : M-2 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 가로 메뉴 유형 2번째 시간이 되겠습니다. 미리보기 버튼을 통해 완성할 스크립트를 확인해보세요! 두번째 메뉴는 첫번째와 다르게 전체 서브메뉴가 나오는 구조입니다. 첫번째는 해당 메뉴만 나오지만 두번째는 전체 서브 메뉴가 나오는 구조라 스크립트 상의 차이점은 별거 없습니다. 우선 시험장에서 당황하지 않고 작업하려면 CSS부터 완벽하게 하고 넘어가야 합니다. 그럼 시작해보겠습니다. 렛츠기릿🥹 1. 구조 잡기 미리보기 화면..
- 2023년 웹디자인 기능사 메뉴 : M-1 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-1 by @webs 2023. 05. 01. 21 웹디자인 기능사 메뉴 유형 : M-1 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 웹디기의 하이라이트 스크립트 유형입니다. 코딩을 처음 해본 분들은 가장 어렵게 느낄 수 있는 부분인데요! 저도 처음엔 어떻게 하면 스크립트를 가장 짧고, 간단하게 외울 수 있을까 고민을 많이 했는데요! '중요한건 실무에서 어떻게 활용할 수 있을까?'가 가장 중요하지 않을까 싶습니다. 그래서 소스를 짧고 간단하게 구현하는 것보단, 논리적인 순서에 맞게, 흐름에 맞게 코드를 이해하기 쉽게 만드는 것이 가장 중요하다고 생각..
- 2023년 웹디자인 기능사 레이아웃 : E-4 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : E-4 by @webs 2023. 05. 01. 20 웹디자인 기능사 레이아웃 유형 : E-4 난이도 중간 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 E유형을 작업해보겠습니다. 아마도 레이아웃 유형 중에 제일 어려운 유형이 아닐까 싶네요! 하지만 몇 번만 만들어 보면 여러분들도 충분히 할 수 있습니다. 그럼 다 같이 시작해봅시다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 E-4.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 E-4으로 ..
- 2023년 웹디자인 기능사 레이아웃 : E-3 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : E-3 by @webs 2023. 05. 01. 19 웹디자인 기능사 레이아웃 유형 : E-3 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. E-3 유형을 작업해보겠습니다. 이번 유형은 E-2 유형과 동일합니다. 링크 대신에 배너가 들어간 것뿐, 차이점이 없습니다. 그러니 이번에는 혼자서 해보고 저랑 같이 해보는게 좋을 것 같네요! 그럼 한번 해보고 오세요^^ 🤩 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 E-3.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 ..
- 2023년 웹디자인 기능사 레이아웃 : E-2 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : E-2 by @webs 2023. 05. 01. 18 웹디자인 기능사 레이아웃 유형 : E-2 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 E-2 유형을 작업해보겠습니다. E-1 유형과 동일하지만 차이점이 있다면 높이값이 임의지정입니다. E-1 유형은 화면 높이 값에 딱 맞추었다면, E-2 유형은 높이 값을 임의로 지정하기 때문에 딱 맞출 필요는 없습니다. 그럼 시작해볼까요? 🥹 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 E-2.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 k..
- 2023년 웹디자인 기능사 레이아웃 : E-1 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : E-1 by @webs 2023. 05. 01. 17 웹디자인 기능사 레이아웃 유형 : E-1 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 E유형을 작업해보겠습니다. 아마도 레이아웃 유형 중에 제일 어려운 유형이 아닐까 싶네요! 하지만 몇 번만 만들어 보면 여러분들도 충분히 할 수 있습니다. 그럼 다 같이 시작해봅시다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 E-1.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 E-1으로 ..
- 2023년 웹디자인 기능사 레이아웃 : D-4 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : D-4 by @webs 2023. 05. 01. 16 웹디자인 기능사 레이아웃 유형 : D-4 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 D유형의 마지막 레이아웃을 연습해보겠습니다. 전체적인 유형은 동일하나 세부적인 부분이 조금 틀린 구조입니다. 기본에 충실하다면 어떻게 변형하여도 여러분은 코딩할 수 있을거예요! 🫢 그럼 시작해볼까요! 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 D-4.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레..
- 2023년 웹디자인 기능사 레이아웃 : D-3 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : D-3 by @webs 2023. 05. 01. 15 웹디자인 기능사 레이아웃 유형 : D-3 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 D-3 유형을 작업해보겠습니다. D-3 유형은 D-1 유형과 비슷합니다. 푸터를 제외하고는 비슷합니다. 복습하는 개념으로 한번 해보겠습니다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 D-3.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 D-3으로 변경해주겠습니다. 상단에 디자인 보기 버튼..
- 2023년 웹디자인 기능사 레이아웃 : D-2 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : D-2 by @webs 2023. 05. 01. 14 웹디자인 기능사 레이아웃 유형 : D-2 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 D-2유형을 작업해보겠습니다. D-1유형과 비슷하지만 컨텐츠 영역은 조금 다릅니다. 샘플이미지를 보고 잘 따라해주세요! 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 D-2.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 D-2으로 변경해주겠습니다. 상단에 디자인 보기 버튼을 누르면 전체적인 레..
- 2023년 웹디자인 기능사 레이아웃 : D-1 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : D-1 by @webs 2023. 05. 01. 13 웹디자인 기능사 레이아웃 유형 : D-1 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 D유형을 작업해보겠습니다. 이번 유형은 반응형 유형으로 전체화면을 기준으로 작업하게 됩니다. 기존에 레이아웃과는 많은 부분이 다르기 때문에 좀 더 디테일하게 작업하셔야 합니다. 샘플 PDF를 참고하여 수치도 정확하게 작업해야 합니다. 그럼 시작해보겠습니다. 🤩 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 D-1.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니..
- 2023년 웹디자인 기능사 레이아웃 : C-4 Tutorial/webd 2023년 웹디자인 기능사 레이아웃 : C-4 by @webs 2023. 05. 01. 12 웹디자인 기능사 레이아웃 유형 : C-4 난이도 쉬움 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 C-4유형을 작업해보겠습니다. 기존 레이아웃과 똑같고, 푸터만 다르기 때문에 이번에도 얼릉 작업해보겠습니다. 1. 기본 구조 만들기 웹 문서 만들기 : VSCODE를 실행하고 C-4.html파일을 만들겠습니다. !를 치고 tab버튼을 누르면 다음과 같이 나타납니다. lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 C-4으로 변경해주겠습니다. 상단에 디자인 보기 버튼을 누르면 전체적인 레이아웃을 한..