Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
개발 · 프로그래밍

/

웹 개발

합격을 부르는 웹 프론트엔드 포트폴리오 2025 (기초)

본 과정은 프론트엔드 웹 프로그래밍의 핵심 문법과 활용법을 학습하고, 이를 실제 포트폴리오 제작에 적용해 보는 실습 중심 강좌입니다. 학습자는 HTML, CSS, JavaScript 등 기초 문법부터 최신 프론트엔드 기술까지 단계적으로 익히며, 웹 화면 구현과 동적 기능 처리 과정을 직접 경험하게 됩니다. 또한 실무에서 자주 활용되는 다양한 예제를 통해 효율적인 코드 작성법과 실제 개발 흐름을 자연스럽게 습득할 수 있습니다. 이 과정을 통해 학습자는 단순한 문법 암기를 넘어, 웹 페이지 기획–디자인–구현까지 연결된 작업 흐름을 이해할 수 있으며, 이를 기반으로 자신만의 포트폴리오를 완성할 수 있습니다. 나아가 본 과정은 프론트엔드 개발자로 성장하기 위한 확실한 디딤돌이 될 것이며, 웹 개발을 처음 접하는 학습자에게는 입문 과정으로, 실무 경험을 쌓고 싶은 학습자에게는 실전 보완 과정으로 큰 도움이 될 것입니다.

1명 이 수강하고 있어요.

  • 유용한IT학습

이런 걸 배울 수 있어요

  • 다양한 프론트엔드 웹 프로그래밍 문법을 활용해서 UI를 구현해 나가는 과정입니다.

  • 주어진 예제를 온라인 강의를 통해 순차적으로 포트폴리오를 완성합니다.

눈길을 끄는 간결한 제목을 작성해보세요

본 과정은 프론트엔드 웹 프로그래밍의 핵심 문법과 활용법을 학습하고, 이를 실제 포트폴리오 제작에 적용해 보는 실습 중심 강좌입니다.

학습자는 HTML, CSS, JavaScript 등 기초 문법부터 최신 프론트엔드 기술까지 단계적으로 익히며, 웹 화면 구현과 동적 기능 처리 과정을 직접 경험하게 됩니다. 또한 실무에서 자주 활용되는 다양한 예제를 통해 효율적인 코드 작성법실제 개발 흐름을 자연스럽게 습득할 수 있습니다.

이 과정을 통해 학습자는 단순한 문법 암기를 넘어, 웹 페이지 기획–디자인–구현까지 연결된 작업 흐름을 이해할 수 있으며, 이를 기반으로 자신만의 포트폴리오를 완성할 수 있습니다.

나아가 본 과정은 프론트엔드 개발자로 성장하기 위한 확실한 디딤돌이 될 것이며, 웹 개발을 처음 접하는 학습자에게는 입문 과정으로, 실무 경험을 쌓고 싶은 학습자에게는 실전 보완 과정으로 큰 도움이 될 것입니다.

이런 내용을 배워요

🔹 섹션 1 : Part.1 JavaScript

첫 번째 섹션은 웹 프론트엔드의 기본이 되는 JavaScript 기초를 다룹니다.

  • 변수와 연산, 기본 문법을 이해하며 프로그래밍의 토대를 쌓고,

  • 이벤트 처리를 통해 사용자와 상호작용하는 웹 기능을 직접 구현해 봅니다.

  • DOM 명령어 학습을 통해 HTML 요소를 동적으로 제어하고, 실제 웹 페이지 구조를 다루는 법을 배웁니다.

  • 이어서 SwiperJS 라이브러리 활용법을 배우며 메인 슬라이더와 멀티 슬라이더를 구현, 실무에서 자주 쓰이는 인터랙션을 손쉽게 만들 수 있게 됩니다.

👉 이 과정은 “웹을 움직이게 하는” 핵심 기술을 배우는 단계로, 포트폴리오 제작의 기초를 다질 수 있습니다.

🔹 섹션 2 : Part.2 GSAP Library

두 번째 섹션은 최신 프론트엔드 애니메이션 라이브러리인 GSAP을 집중적으로 학습합니다.

  • GSAP의 기본 사용법과 타임라인 개념을 익혀 복잡한 애니메이션을 손쉽게 구현할 수 있습니다.

  • 이어서 패럴렉스(Parallax) 페이지 제작을 단계별로 실습하며, 스크롤 기반 인터랙션과 다층적 시각 효과를 포트폴리오에 적용하는 방법을 배웁니다.

  • GSAP을 활용하면 단순히 정적인 웹 페이지가 아닌, 시각적 완성도와 사용자 경험(UX)을 높인 인터랙티브 웹사이트 제작이 가능해집니다.

👉 이 섹션은 포트폴리오에서 눈에 띄는 애니메이션 효과를 구현하고 싶은 학습자에게 큰 강점이 됩니다.

🔹 섹션 3 : Part.3 React

마지막 섹션은 현재 가장 많이 활용되는 프론트엔드 프레임워크 React를 학습합니다.

  • React 설치와 기본 문법, 생명주기 함수 등 핵심 개념을 익히며 컴포넌트 기반 개발 방식에 적응합니다.

  • State 전역변수와 map 함수를 통해 데이터 처리 및 반복 렌더링을 실습하고,

  • 함수형 컴포넌트, 데이터 바인딩, 라우팅 구현 등 실제 프로젝트에서 사용하는 기법을 단계별로 배우게 됩니다.

  • 또한 React 환경에서 SwiperJS를 적용하여 동적인 슬라이더까지 구현하면서, 단순 기능 학습을 넘어 포트폴리오에 바로 적용 가능한 실전 예제를 경험합니다.

👉 이 섹션은 학습자가 단순히 HTML/CSS/JS를 넘어서 최신 프론트엔드 프레임워크 기반의 프로젝트 구현 능력을 갖추도록 이끌어 줍니다.

수강 전 참고 사항

이 강의는 지식공유자의 질문/답변을 제공하지 않습니다

학습 자료

주차별 교안이 pdf파일로 제공됩니다

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • JavaScript의 기본을 익히고 있는 학생들

  • 실무에서 코딩 능력을 향상시키고자 하는 웹퍼블리셔나 웹개발자

  • JavaScript Library를 익히고자 하는 웹개발자

안녕하세요
입니다.

8,256,026

수강생

6,086

수강평

4.6

강의 평점

254

강의

유용한 IT 강의를 통해 여러분의 성장을 돕겠습니다.

커리큘럼

전체

28개 ∙ (11시간 58분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

얼리버드 할인 중 (6일 남음)

₩59

29%

₩110,000

유용한IT학습님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!