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

/

웹 개발

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part2 - [중급편]

“CSS Position, Transition, Transform, Animation, Flexbox, Grid, 반응형 웹” 등 중급 이상의 CSS 기술을 체계적으로 마스터하고, 다양한 실습 프로젝트를 통해 실무에서 즉시 적용 가능한 스킬을 습득할 수 있는 강의입니다.

(2.0) 수강평 1개

수강생 5명

HTML/CSS

이런 걸 배울 수 있어요

  • CSS 포지션(Position): Static, Relative, Absolute, Fixed, Sticky 등을 활용해 다양한 레이아웃을 자유자재로 구성합니다.

  • CSS 트랜지션(Transition) & 트랜스폼(Transform): 자연스럽고 다이내믹한 UI 효과를 구현해 웹페이지의 완성도를 높입니다.

  • CSS 애니메이션(Animation): Keyframes, Duration, Timing-Function 등을 활용해 인터랙티브하고 생동감 있는 웹 요소를 만들 수 있습니다.

  • Flexbox & Grid: 최신 레이아웃 기술을 사용해 반응형 웹페이지를 더 쉽고 빠르게 설계하는 노하우를 배웁니다.

  • Responsive Design: 미디어쿼리를 통해 다양한 디바이스(PC, 태블릿, 모바일)에서 깨지지 않는 유연한 레이아웃을 구현합니다.

  • 다양한 실습 프로젝트: 카드 레이아웃, 반응형 내비게이션바, 이미지 갤러리, 대시보드, 로딩 스피너 등 실무형 예제를 통해 코딩 경험을 쌓습니다.

  • 레이아웃 설계 & UI/UX 개선: 실제 업무나 포트폴리오에 바로 적용 가능한 디자인 설계 능력을 기릅니다.

더 강력해진 CSS 기술로, 웹사이트 품질을 한 단계 끌어올리세요! 🤔

“제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part2”는 CSS의 심화 개념들을 체계적으로 정복할 수 있도록 구성된 강의입니다.
Position(Static, Relative, Absolute, Fixed, Sticky)부터 Transition, Transform, Animation, Flexbox, Grid, 그리고 반응형 웹(Responsive Design)까지, 현업 웹 디자이너 & 퍼블리셔가 꼭 알아야 할 기능들을 총망라했습니다.

이 강의가 특별한 이유

  1. 탄탄한 커리큘럼

    • CSS 핵심 원리(포지션, 애니메이션, 반응형 등)를 기초부터 응용 단계까지 차근차근 익히며, 실제 프로젝트에 어떻게 적용하는지 알려드립니다.

  2. 실습 중심 학습

    • 카드 레이아웃, 로딩 스피너, 이미지 확대 효과 등 다양한 미니 프로젝트가 마련되어 있습니다. 이론만 듣고 끝나는 것이 아니라, 손으로 코드를 작성하고 결과를 확인하며 습득할 수 있습니다.

  3. 심미성과 구조

    • Flexbox와 Grid를 활용해 깔끔하고 직관적인 레이아웃을 구성하고, 미디어쿼리를 통해 다양한 디바이스에 대응하는 반응형 웹을 실전에서 설계해 봅니다.

  4. 포트폴리오 업그레이드

    • 강의 내 다양한 예제와 프로젝트를 통해 포트폴리오에 바로 활용할 수 있는 결과물을 만들어 낼 수 있습니다.

    • 개인 프로젝트나 팀 협업에서도 디자인 퀄리티를 높이는 핵심 역량을 갖추게 됩니다.

  5. 수강생 친화적 접근

    • 이미 HTML+CSS 기초를 배우신 분이 중급 단계로 올라갈 수 있도록, 자주 혼동하는 개념도 상세 설명과 예제를 통해 풀어드립니다.

    • 문제 해결 시 질문 게시판을 통해 빠르게 피드백을 주고받을 수 있습니다.


이런 분들께 추천해요

HTML+CSS 기초를 끝내고 중급 CSS·애니메이션에 도전하고 싶은 분

Flexbox & Grid로 레이아웃 설계를 자유롭게 하고 싶은 예비·현직 개발자

반응형 웹으로 PC·모바일·태블릿까지 지원하고 싶은 웹 디자이너·프론트엔드 지망생

수강 후에는…

  • Position 속성들을 활용하여, 배너 고정·플로팅 메뉴 등 시선을 사로잡는 레이아웃을 자유자재로 구현합니다.

  • Transition & Transform으로 버튼 호버 효과, 이미지 확대, 텍스트 이동 등 세련된 인터랙션을 구현할 수 있습니다.

  • 애니메이션(Animation) 개념을 익혀, 로딩 스피너, 텍스트 타이핑, 카드 슬라이드처럼 역동적인 웹 요소를 디자인할 수 있습니다.

  • Flexbox & Grid를 조합하여 복잡한 레이아웃도 손쉽게 구성하고, 반응형 웹으로 확장하여 모바일·태블릿·데스크톱에 대응할 수 있습니다.

  • 반응형 디자인 프로젝트를 통해, 실제 서비스를 개발·운영하는 상황에서도 깔끔하고 직관적인 웹페이지를 완성할 수 있는 자신감을 얻게 됩니다.

이런 내용을 배워요.

  1. CSS Level 2 - Position

    • Relative, Absolute, Fixed, Sticky, Z-index 이해

    • 프로젝트: 계단식 레이아웃, V 모양 레이아웃, Fixed 레이아웃 등

  2. CSS Level 2 - Transition

    • Transition Property, Duration, Timing-Function, Delay

    • 프로젝트: 버튼 호버 효과, 이미지 확대 효과 등

  3. CSS Level 2 - Transform

    • Translate, Rotate, Scale, Skew

    • 프로젝트: 카드 회전, 텍스트 이동, 3D 효과 구현

  4. CSS Level 2 - Animation

    • Keyframes, 반복 횟수, 방향 설정, Fill-Mode

    • 프로젝트: 로딩 스피너, 페이드인 효과, 텍스트 색상 변화, 카드 슬라이드 등

  5. CSS Level 3 - Flexbox

    • Container & Items, Direction, Wrap, Justify-Content, Align-Items 등

    • 프로젝트: 카드 레이아웃, 반응형 내비게이션바, 대시보드, 블로그 포스트 레이아웃

  6. CSS Level 3 - Grid

    • Grid-Template, fr 단위, gap, areas, auto-flow 등

    • 프로젝트: 반응형 이미지 갤러리, 대시보드, 포트폴리오 섹션 등

  7. CSS Level 3 - Responsive Design

    • 미디어쿼리, 유연한 그리드, 반응형 타이포그래피

    • 프로젝트: 반응형 웹 디자인 종합 실습

안녕하세요, 우리 동네 코딩 스튜디오에 오신 것을 환영합니다!

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, Google, Microsoft, Meta 등 글로벌 IT 기업에서 실무 경험을 쌓은 개발자들이 함께 만든 교육 그룹입니다.

처음에는 미국과 캐나다의 컴퓨터공학 전공자들끼리 함께 공부하며 성장하고자 만든 스터디 모임에서 시작되었습니다. 각기 다른 대학, 다른 시간대에 있었지만 함께 문제를 해결하고 서로에게 배운 그 시간은 매우 특별했고, 자연스럽게 이런 생각이 들었습니다.

“우리가 공부하던 이 방식, 그대로 다른 사람에게도 전하면 어떨까?”

그 물음이 바로 우리 동네 코딩 스튜디오의 출발점이었습니다.

현재는 약 40명의 현직 개발자와 컴퓨터공학 전공 대학생들이 각자의 전문 분야를 맡아, 입문부터 실전까지 아우르는 커리큘럼을 직접 설계하고 강의합니다. 단순한 지식 전달을 넘어, 진짜 개발자의 시선으로 배우고 함께 성장할 수 있는 환경을 제공합니다.

“진짜 개발자는, 진짜 개발자에게 배워야 합니다.”

저희는 웹 개발의 전 과정을 처음부터 끝까지 체계적으로 다루되, 이론에 머무르지 않고 실습과 실전 중심의 피드백을 통해 실력을 키워드립니다.
수강생 한 사람, 한 사람의 성장을 함께 고민하고 이끌어가는 것이 우리의 철학입니다.

우리의 철학은 분명합니다.
"진정한 배움은 실천에서 오고, 성장은 함께할 때 완성된다."

개발을 처음 시작하는 입문자부터, 실무 능력을 키우고 싶은 취업 준비생, 진로를 탐색 중인 청소년까지.
우리동네코딩 스튜디오는 모두의 출발점이자, 함께 걷는 든든한 동반자가 되고자 합니다.

이제, 혼자 고민하지 마세요.
우리동네코딩 스튜디오가 여러분의 성장을 함께하겠습니다.

Welcome to Neighborhood Coding Studio!

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.

It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

“What if we shared this way of learning with others?”

That thought became the foundation of Neighborhood Coding Studio.

Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We’re not just here to teach—we’re here to help you see through the lens of real developers and grow together.

“To become a real developer, you must learn from real developers.”

Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learner’s growth and are committed to supporting your path every step of the way.

Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpad—and your trusted companion on the journey.

You don’t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

수강 전 참고 사항

이런 분들께 추천해요

  1. 기본 HTML+CSS 문법은 이미 학습했지만, 중급 CSS 기술과 세련된 애니메이션 구현에 도전하고 싶은 분

  2. Flexbox & Grid 원리를 제대로 파악하여 공간 배치와 레이아웃 설계를 자유롭게 하고 싶은 예비·현직 개발자

  3. PC·모바일·태블릿 등 다양한 디바이스에 대응하는 반응형 웹을 만들고 싶은 웹 디자이너, 프론트엔드 지망생

  4. 팀 프로젝트에서 디자인 및 마크업 퀄리티를 높이려는 분, 포트폴리오에 쓸 만한 웹페이지 디자인을 갖추고 싶은 분

  5. UI/UX에 관심이 많아, 시각적으로 생동감 있는 웹사이트를 구축하고자 하는 모든 분들

학습 자료

  • 수업마다 PDF가 첨부되어있습니다!

선수지식이 필요하다면 무엇인가요?

  • HTML+CSS 기초 (예: Part1 강의 이수, 또는 이에 준하는 기초 지식)

  • Visual Studio Code나 다른 에디터 설치 후 간단한 HTML/CSS 편집이 가능한 분

수강 완료 후

  • 프로젝트 실무에서 레이아웃 배치나 애니메이션 효과를 능숙하게 적용

  • PC·모바일·태블릿 등 다양한 화면 크기에 자연스럽게 대응할 수 있는 반응형 웹 구현

  • 깔끔하고 차별화된 디자인으로 포트폴리오 경쟁력 상승

  • 팀 협업에서도 디자인 퀄리티와 코드 유지보수성을 모두 만족시키는 역량 확보

카테고리

  • 개발 · 프로그래밍

스킬 태그

  • CSS, Animation, Flexbox, Grid, Responsive Web

강의 수준

  • 중급 (기초 문법을 알고 있으면 수월하게 학습 가능)

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • HTML+CSS 기초는 어느 정도 익혔지만, 더 풍부한 CSS 기능을 활용해 한 단계 업그레이드된 페이지를 만들고 싶은 분

  • 웹 디자인과 UI/UX에 관심이 많고, 다양한 CSS 애니메이션·레이아웃 설계 기법으로 실무역량을 쌓고 싶은 웹 개발 지망생

  • Flexbox와 Grid가 낯설어 막연함을 느꼈던 분들 - 직접 실습하면서 확실하게 이해하고 싶은 분

  • 반응형 웹(Responsive Web) 제작을 통해, 모바일·태블릿·데스크톱 등 다양한 디바이스를 지원해야 하는 개발자

  • 팀 프로젝트나 개인 포트폴리오에서 한 단계 높은 디자인 퀄리티를 목표로 하는 모든 분들

선수 지식,
필요할까요?

  • 기본 HTML & CSS 개념을 어느 정도 알고 계시면 수월합니다.

  • “제대로 배우는 HTML + CSS: Part1” 혹은 이에 준하는 기초 과정을 수강하셨다면 학습 효율이 더욱 높아집니다.

안녕하세요
입니다.

안녕하세요, 우리동네코딩 스튜디오에 오신 것을 환영합니다!

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, Google, Microsoft, Meta 등 글로벌 IT 기업에서 실무 경험을 쌓은 개발자들이 함께 만든 교육 그룹입니다.

처음에는 미국과 캐나다의 컴퓨터공학 전공자들끼리 함께 공부하며 성장하고자 만든 스터디 모임에서 시작되었습니다. 각기 다른 대학, 다른 시간대에 있었지만 함께 문제를 해결하고 서로에게 배운 그 시간은 매우 특별했고, 자연스럽게 이런 생각이 들었습니다.

“우리가 공부하던 이 방식, 그대로 다른 사람에게도 전하면 어떨까?”

그 물음이 바로 우리동네코딩 스튜디오의 출발점이었습니다.

현재는 약 30명의 현직 개발자와 컴퓨터공학 전공 대학생들이 각자의 전문 분야를 맡아, 입문부터 실전까지 아우르는 커리큘럼을 직접 설계하고 강의합니다. 단순한 지식 전달을 넘어, 진짜 개발자의 시선으로 배우고 함께 성장할 수 있는 환경을 제공합니다.

“진짜 개발자는, 진짜 개발자에게 배워야 합니다.”

저희는 웹 개발의 전 과정을 처음부터 끝까지 체계적으로 다루되, 이론에 머무르지 않고 실습과 실전 중심의 피드백을 통해 실력을 키워드립니다.
수강생 한 사람, 한 사람의 성장을 함께 고민하고 이끌어가는 것이 우리의 철학입니다.

🎯 우리의 철학은 분명합니다.
"진정한 배움은 실천에서 오고, 성장은 함께할 때 완성된다."

개발을 처음 시작하는 입문자부터, 실무 능력을 키우고 싶은 취업 준비생, 진로를 탐색 중인 청소년까지.
우리동네코딩 스튜디오는 모두의 출발점이자, 함께 걷는 든든한 동반자가 되고자 합니다.

이제, 혼자 고민하지 마세요.
우리동네코딩 스튜디오가 여러분의 성장을 함께하겠습니다.

Welcome to Neighborhood Coding Studio!

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.

It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

“What if we shared this way of learning with others?”

That thought became the foundation of Neighborhood Coding Studio.

Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We’re not just here to teach—we’re here to help you see through the lens of real developers and grow together.

“To become a real developer, you must learn from real developers.”

Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learner’s growth and are committed to supporting your path every step of the way.

🎯 Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpad—and your trusted companion on the journey.

You don’t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

커리큘럼

전체

136개 ∙ (2시간 24분)

해당 강의에서 제공:

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

수강평

전체

1개

2.0

1개의 수강평

  • devhoonie님의 프로필 이미지
    devhoonie

    수강평 2

    ∙

    평균 평점 3.5

    2

    30% 수강 후 작성

    현재 강의를 섹션 4까지 수강했는데, 예제와 문제 코드가 다른 경우(예를 들어 섹션 4의 transition and transform 프로젝트: 텍스트 이동 효과의 경우 문제와 다르게 주어지는 예제 파일은 텍스트 이동 효과가 아닌 이미지 확대 효과의 Starter입니다)가 있고, 또 주어지는 Starter 코드와 정답이 아예 다른 환경처럼 느껴지는 경우가 있습니다. 또한 CSS의 여러 가지 속성들을 예제 단위로 나누어 설명한 것은 좋지만, 구성에 비해 강의 퀄리티가 떨어지는 느낌입니다. 각 섹션별 강의는 단순히 텍스트를 TTS로 읽는게 끝인데, 차라리 강사님의 목소리를 직접 들을 수 있다면 훨씬 강의에서 진심을 느낄 수 있을 것 같습니다.

    • nhcodingstudio
      지식공유자

      안녕하세요 devhoonie님, 소중한 수강평 정말 감사합니다. 먼저, 예제와 문제 코드 간의 불일치로 인해 혼란을 드린 점 진심으로 사과드립니다. 말씀해주신 섹션 4의 transition and transform 프로젝트처럼 실제 강의 내용과 Starter 코드가 어긋나 있는 경우, 빠르게 확인하여 일괄적으로 점검 및 수정 작업을 진행하겠습니다. 학습 흐름에 방해가 되지 않도록 가장 우선적으로 처리하겠습니다. 또한 CSS 속성별로 예제를 나눈 구성은 긍정적으로 평가해주셔서 감사드리며, 강의 전달 방식에 대한 솔직한 의견도 깊이 새기겠습니다. 현재 일부 강의에서 TTS 음성으로만 제공되는 점은 학습 몰입도에 영향을 줄 수 있다는 점에 전적으로 공감합니다. 해당 파트는 향후 순차적으로 강사 음성으로 대체할 수 있도록 내부 논의를 거쳐 업데이트를 준비하겠습니다. 더 나은 학습 경험을 드리기 위해 지속적으로 개선하겠습니다. 다시 한 번 감사드리며, 언제든 불편사항이나 제안이 있다면 말씀 부탁드립니다.

    • nhcodingstudio
      지식공유자

      안녕하세요, devhoonie님. 먼저 예제와 과제 내용이 일치하지 않았던 부분에 대해 다시 한 번 사과드리며, 해당 파트는 수정 완료되었습니다. 불편을 드려 진심으로 죄송합니다. 추가로 HTML, CSS 수업을 포함한 강의 내용 전반이나, 소프트웨어 개발 전반에 대한 질문, 또는 다음 프로젝트에 대한 고민 등 어떤 주제든 궁금하신 점이 있으시다면 언제든지 오픈채팅을 통해 문의해 주세요. 성심껏 답변드리겠습니다. 앞으로도 devhoonie님께 실질적인 도움이 될 수 있는 더욱 알차고 유익한 콘텐츠로 찾아뵙겠습니다. 감사합니다. 오픈채팅: https://open.kakao.com/o/gC10Fnoh

nhcodingstudio님의 다른 강의

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

[DOM 완전 정복 Part 1] – 구조 탐색과 조작의 모든 것강의 썸네일

[DOM 완전 정복 Part 1] – 구조 탐색과 조작의 모든 것

nhcodingstudio

React, Next.js, Vue를 아무리 공부해도 코드가 추상적으로 느껴지고, 구조가 확실히 이해되지 않는다면, 그 근본 원인은 DOM에 대한 이해 부족일 수 있습니다. DOM은 모든 프론트엔드 프레임워크의 기반이며, 웹 페이지의 구조와 동작을 연결해주는 실체입니다. 이 강의는 단순한 선택자나 조작법을 넘어, HTML이 어떻게 DOM 객체로 바뀌고, 이 구조를 어떻게 선택하고 탐색하며, 조작할 수 있는지를 처음부터 차근차근 알려주는 DOM 완전 정복의 Part 1 입문 강의입니다. HTML 태그는 구조일 뿐이고, 자바스크립트는 행동일 뿐이지만, 그 둘을 연결하는 핵심이 DOM입니다. 이 연결고리를 명확히 이해하면, 어떤 프레임워크를 쓰든 그 안의 진짜 구조와 흐름을 정확히 꿰뚫어볼 수 있게 됩니다.

입문

입문

HTML/CSS, JavaScript, React

[DOM 완전 정복 Part 1] – 구조 탐색과 조작의 모든 것강의 썸네일

[DOM 완전 정복 Part 1] – 구조 탐색과 조작의 모든 것

nhcodingstudio

[DOM 완전 정복 Part 1] – 구조 탐색과 조작의 모든 것

React, Next.js, Vue를 아무리 공부해도 코드가 추상적으로 느껴지고, 구조가 확실히 이해되지 않는다면, 그 근본 원인은 DOM에 대한 이해 부족일 수 있습니다. DOM은 모든 프론트엔드 프레임워크의 기반이며, 웹 페이지의 구조와 동작을 연결해주는 실체입니다. 이 강의는 단순한 선택자나 조작법을 넘어, HTML이 어떻게 DOM 객체로 바뀌고, 이 구조를 어떻게 선택하고 탐색하며, 조작할 수 있는지를 처음부터 차근차근 알려주는 DOM 완전 정복의 Part 1 입문 강의입니다. HTML 태그는 구조일 뿐이고, 자바스크립트는 행동일 뿐이지만, 그 둘을 연결하는 핵심이 DOM입니다. 이 연결고리를 명확히 이해하면, 어떤 프레임워크를 쓰든 그 안의 진짜 구조와 흐름을 정확히 꿰뚫어볼 수 있게 됩니다.

입문

입문

•

HTML/CSS

JavaScript

React

DOM

frontend

2시간 34분

•

Update 2025.07.11

이런 걸 배울 수 있어요

DOM이 무엇이며, 왜 존재하는지의 본질

HTML이 DOM 객체로 바뀌는 실제 구조와 과정

DOM 트리 탐색 (부모/자식/형제 노드 완전 정복)

getElementById, querySelector 등 선택자 메서드의 차이

제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]강의 썸네일

제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]

nhcodingstudio

물 흐르듯 따라가는 Express.js 입문부터 실전까지! 서버 기초 개념부터 CRUD 프로젝트 완성까지 직접 구현하며 제대로 익히는 백엔드 여정.

초급

초급

express.js, Node.js, routing

제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]강의 썸네일

제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]

nhcodingstudio

제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]

물 흐르듯 따라가는 Express.js 입문부터 실전까지! 서버 기초 개념부터 CRUD 프로젝트 완성까지 직접 구현하며 제대로 익히는 백엔드 여정.

초급

초급

•

express.js

Node.js

routing

backend

REST API

2시간 31분

이런 걸 배울 수 있어요

웹 서버가 어떻게 작동하는지 근본적인 개념 이해

TCP, HTTP 등 네트워크 기초 정리

Node.js로 순수 웹 서버 직접 만들기

Express의 라우팅 시스템 실습

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계강의 썸네일

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

nhcodingstudio

Express.js를 사용하는 수준을 넘어서, 실제로 그 내부 엔진을 처음부터 끝까지 직접 구현하며 진짜 서버의 동작 원리를 몸으로 체득하는 강의입니다. 라우터, 미들웨어, 요청-응답 객체, 정적 파일 처리, 템플릿 렌더링 등 Express의 모든 구성요소를 처음부터 직접 만들어보며 서버 개발자로 성장하는 경험을 제공합니다.

초급

초급

JavaScript, Node.js, Express

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계강의 썸네일

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

nhcodingstudio

Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

Express.js를 사용하는 수준을 넘어서, 실제로 그 내부 엔진을 처음부터 끝까지 직접 구현하며 진짜 서버의 동작 원리를 몸으로 체득하는 강의입니다. 라우터, 미들웨어, 요청-응답 객체, 정적 파일 처리, 템플릿 렌더링 등 Express의 모든 구성요소를 처음부터 직접 만들어보며 서버 개발자로 성장하는 경험을 제공합니다.

초급

초급

•

JavaScript

Node.js

Express

backend

소프트웨어 설계

5시간 30분

•

Update 2025.07.04

이런 걸 배울 수 있어요

Express.js를 구현하며 웹 서버 아키텍처의 핵심 원리를 근본부터 이해하는 방법

Express.js 전체 아키텍처를 직접 구현하며 동작 원리를 완벽하게 파악하는 법

미들웨어 체인과 next() 함수가 어떻게 요청을 전달하고 제어 흐름을 이어주는지

요청(req)과 응답(res) 객체가 실제로 어떻게 구성되고 전달되는지 구조적으로 분석

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

초급

초급

JavaScript, HTML/CSS, 객체지향

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

초급

초급

•

JavaScript

HTML/CSS

객체지향

3시간 32분

이런 걸 배울 수 있어요

콘솔 기반 틱택토 게임 전체 구현 능력

사용자 입력 처리 및 게임 진행 제어 로직 구성 능력

기본 랜덤 AI부터 전략형 AI까지 직접 설계 및 구현

게임 상황을 조건 기반으로 판단하고 우선순위 적용하는 로직 구현

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]강의 썸네일

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

“제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1” 강의는 인터넷과 웹의 작동 원리를 깊이 이해하고, 실습 위주의 커리큘럼을 통해 HTML/CSS 기초를 탄탄하게 익히는 과정입니다. 이 강의만 들으면 웹 개발의 필수 개념을 확실히 잡고, 바로 프로젝트에 적용할 수 있게 됩니다.

입문

입문

HTML/CSS

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]강의 썸네일

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

“제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1” 강의는 인터넷과 웹의 작동 원리를 깊이 이해하고, 실습 위주의 커리큘럼을 통해 HTML/CSS 기초를 탄탄하게 익히는 과정입니다. 이 강의만 들으면 웹 개발의 필수 개념을 확실히 잡고, 바로 프로젝트에 적용할 수 있게 됩니다.

입문

입문

•

HTML/CSS

1시간 43분

이런 걸 배울 수 있어요

HTML & CSS의 기본 개념을 익히고, 웹 페이지 구조와 스타일링 원리를 이해합니다.

시맨틱 태그를 사용해 접근성이 높은 웹 문서를 작성하는 방법을 배웁니다.

인터넷·웹사이트 동작 원리 및 HTTP, DNS 등 핵심 기술의 역할을 이해하여, 더 깊이 있는 웹 지식을 쌓습니다.

개발 환경 설정부터 도구 활용(Visual Studio Code, Live Server 등)을 자연스럽게 습득합니다.

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]강의 썸네일

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

이 강의를 통해 수강생은 개발 환경 설정부터 변수, 조건문, 함수, 객체, 배열 등 JavaScript의 기초와 심화 개념을 폭넓게 학습합니다. 실습과 퀴즈로 꼼꼼히 복습하여, 웹·모바일 실무에 바로 적용 가능한 문제 해결 능력을 갖출 수 있습니다.

입문

입문

JavaScript, HTML/CSS, 웹앱

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]강의 썸네일

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

이 강의를 통해 수강생은 개발 환경 설정부터 변수, 조건문, 함수, 객체, 배열 등 JavaScript의 기초와 심화 개념을 폭넓게 학습합니다. 실습과 퀴즈로 꼼꼼히 복습하여, 웹·모바일 실무에 바로 적용 가능한 문제 해결 능력을 갖출 수 있습니다.

입문

입문

•

JavaScript

HTML/CSS

웹앱

3시간 50분

이런 걸 배울 수 있어요

코딩 시작하기: 개발 환경 설정, Script 태그 활용, JavaScript의 기초 개념 이해

기초 다지기: 변수(let, const), 데이터 타입, 동적 타이핑, 타입 변환, 객체와 배열 기초

연산자 & 조건문: 산술·대입·비교·논리 연산자, if/switch/삼항 연산자 활용법

반복문 & 함수: For/While/Do...While, 함수 선언·표현식·화살표 함수, 호이스팅, 스코프 이해

비슷한 강의

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

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]강의 썸네일

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

“제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1” 강의는 인터넷과 웹의 작동 원리를 깊이 이해하고, 실습 위주의 커리큘럼을 통해 HTML/CSS 기초를 탄탄하게 익히는 과정입니다. 이 강의만 들으면 웹 개발의 필수 개념을 확실히 잡고, 바로 프로젝트에 적용할 수 있게 됩니다.

입문

입문

HTML/CSS

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]강의 썸네일

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

“제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1” 강의는 인터넷과 웹의 작동 원리를 깊이 이해하고, 실습 위주의 커리큘럼을 통해 HTML/CSS 기초를 탄탄하게 익히는 과정입니다. 이 강의만 들으면 웹 개발의 필수 개념을 확실히 잡고, 바로 프로젝트에 적용할 수 있게 됩니다.

입문

입문

•

HTML/CSS

1시간 43분

이런 걸 배울 수 있어요

HTML & CSS의 기본 개념을 익히고, 웹 페이지 구조와 스타일링 원리를 이해합니다.

시맨틱 태그를 사용해 접근성이 높은 웹 문서를 작성하는 방법을 배웁니다.

인터넷·웹사이트 동작 원리 및 HTTP, DNS 등 핵심 기술의 역할을 이해하여, 더 깊이 있는 웹 지식을 쌓습니다.

개발 환경 설정부터 도구 활용(Visual Studio Code, Live Server 등)을 자연스럽게 습득합니다.

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]강의 썸네일

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

이 강의를 통해 수강생은 개발 환경 설정부터 변수, 조건문, 함수, 객체, 배열 등 JavaScript의 기초와 심화 개념을 폭넓게 학습합니다. 실습과 퀴즈로 꼼꼼히 복습하여, 웹·모바일 실무에 바로 적용 가능한 문제 해결 능력을 갖출 수 있습니다.

입문

입문

JavaScript, HTML/CSS, 웹앱

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]강의 썸네일

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

이 강의를 통해 수강생은 개발 환경 설정부터 변수, 조건문, 함수, 객체, 배열 등 JavaScript의 기초와 심화 개념을 폭넓게 학습합니다. 실습과 퀴즈로 꼼꼼히 복습하여, 웹·모바일 실무에 바로 적용 가능한 문제 해결 능력을 갖출 수 있습니다.

입문

입문

•

JavaScript

HTML/CSS

웹앱

3시간 50분

이런 걸 배울 수 있어요

코딩 시작하기: 개발 환경 설정, Script 태그 활용, JavaScript의 기초 개념 이해

기초 다지기: 변수(let, const), 데이터 타입, 동적 타이핑, 타입 변환, 객체와 배열 기초

연산자 & 조건문: 산술·대입·비교·논리 연산자, if/switch/삼항 연산자 활용법

반복문 & 함수: For/While/Do...While, 함수 선언·표현식·화살표 함수, 호이스팅, 스코프 이해

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼강의 썸네일

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

초급

초급

gemini, HTML/CSS, TailwindCSS

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼강의 썸네일

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

닭강정

Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

초급

초급

•

gemini

HTML/CSS

TailwindCSS

JavaScript

Firebase

6시간 59분

이런 걸 배울 수 있어요

Firestore를 활용한 한자 단어장 구축

Gemini API를 활용한 AI 한자 추천

Firebase Authentication으로 사용자 관리

Nginx & SSL로 Firebase 기반 한자 학습 플랫폼 배포

TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!강의 썸네일

TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!

짐코딩

한 강의로 끝내는 TailwindCSS 입문부터 실전까지! 두 개의 프로젝트와 함께 레이아웃 구성부터 반응형 디자인! 다크모드! 까지 완벽하게 배워보세요.

초급

초급

HTML/CSS, TailwindCSS, JavaScript

TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!강의 썸네일

TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!

짐코딩

TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!

한 강의로 끝내는 TailwindCSS 입문부터 실전까지! 두 개의 프로젝트와 함께 레이아웃 구성부터 반응형 디자인! 다크모드! 까지 완벽하게 배워보세요.

초급

초급

•

HTML/CSS

TailwindCSS

JavaScript

반응형 웹

5시간 5분

이런 걸 배울 수 있어요

Prettier, IntelliSense, Snippets을 활용한 빠르고 편리한 개발 방법

타이포그래피, 컬러, 배경, 보더 스타일링 방법

Flexbox와 Grid를 활용한 레이아웃 배치 및 정렬

TailwindCSS의 Breakpoints 활용한 반응형 웹 디자인 구현

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

초급

초급

JavaScript, HTML/CSS, 객체지향

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

초급

초급

•

JavaScript

HTML/CSS

객체지향

3시간 32분

이런 걸 배울 수 있어요

콘솔 기반 틱택토 게임 전체 구현 능력

사용자 입력 처리 및 게임 진행 제어 로직 구성 능력

기본 랜덤 AI부터 전략형 AI까지 직접 설계 및 구현

게임 상황을 조건 기반으로 판단하고 우선순위 적용하는 로직 구현

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]강의 썸네일

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

잔재미코딩 DaveLee

현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.

입문

입문

HTML/CSS, JavaScript, ES6

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]강의 썸네일

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

잔재미코딩 DaveLee

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.

입문

입문

•

HTML/CSS

JavaScript

ES6

17시간 22분

•

Update 2025.06.23

이런 걸 배울 수 있어요

쉽고 견고하게 프런트엔드 기본기 쌓기

반응형, 크로스 브라우징 웹서비스 개발

상세한 모던 HTML 과 CSS 기능

호환성까지 고려한 VanillaJS (Javascript)

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지강의 썸네일

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

초급

초급

HTML/CSS, JavaScript, REST API

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지강의 썸네일

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

초급

초급

•

HTML/CSS

JavaScript

REST API

MySQL

AWS

Git

GitHub

9시간 7분

이런 걸 배울 수 있어요

웹 프론트엔드: HTML, CSS, JS

Open API: 카카오맵 API

서버&벡엔드: Nginx + Express.js: Rest API

데이터베이스: MySQL, DB설계와 SQL

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

초급

인터랙티브 웹, JavaScript, HTML/CSS

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

초급

•

인터랙티브 웹

JavaScript

HTML/CSS

8시간 54분

이런 걸 배울 수 있어요

게임을 만들며 자연스럽게 웹 애니메이션, 인터렉티브 웹 구현 원리 습득!

백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편강의 썸네일

백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편

이준형(Foo)

백엔드 개발자로 포트폴리오를 만들었지만 보여줄 게 API밖에 없는 취준생들에게 프론트엔드를 더해 하나의 웹 서비스로 만들 수 있는 경험을 제공해드리겠습니다.

초급

초급

HTML/CSS, JavaScript, Bootstrap

백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편강의 썸네일

백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편

이준형(Foo)

백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편

백엔드 개발자로 포트폴리오를 만들었지만 보여줄 게 API밖에 없는 취준생들에게 프론트엔드를 더해 하나의 웹 서비스로 만들 수 있는 경험을 제공해드리겠습니다.

초급

초급

•

HTML/CSS

JavaScript

Bootstrap

5시간 19분

이런 걸 배울 수 있어요

백엔드 개발자를 위한 속성 프론트엔드 개발

HTML, CSS, JavaScript에 대한 기본 개념

떠먹는 Three.js강의 썸네일

떠먹는 Three.js

제주코딩베이스캠프

Three.js의 기초적인 개념을 학습하고, 이를 응용하여 '나만의 섬 만들기' 미니 프로젝트를 진행합니다. 프로젝트를 진행하면서 쉽고 가볍게 Three.js를 익힐 수 있습니다.

초급

초급

Three.js, HTML/CSS, JavaScript

떠먹는 Three.js강의 썸네일

떠먹는 Three.js

제주코딩베이스캠프

떠먹는 Three.js

Three.js의 기초적인 개념을 학습하고, 이를 응용하여 '나만의 섬 만들기' 미니 프로젝트를 진행합니다. 프로젝트를 진행하면서 쉽고 가볍게 Three.js를 익힐 수 있습니다.

초급

초급

•

Three.js

HTML/CSS

JavaScript

1시간 37분

이런 걸 배울 수 있어요

Three.js 기초

3D 인터랙티브 웹 개발

실무중심의 HTML5 시각화 프로그래밍강의 썸네일

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

데이터를 가공하여 표의 형태로 표현할 수도 있지만 가장 중요한 것은 데이터를 인간이 한 눈에 알아 볼 수 있게 표현하는 것입니다.

초급

초급

HTML/CSS

실무중심의 HTML5 시각화 프로그래밍강의 썸네일

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

실무중심의 HTML5 시각화 프로그래밍

데이터를 가공하여 표의 형태로 표현할 수도 있지만 가장 중요한 것은 데이터를 인간이 한 눈에 알아 볼 수 있게 표현하는 것입니다.

초급

초급

•

HTML/CSS

6시간 11분

이런 걸 배울 수 있어요

HTML5 시각화 프로그래밍

JavaScript 차트 프레임워크 사용법

실시간 데이터 시각화

암호화폐 데이터 수집 및 시각화

나도 할 수 있다! SW강사!강의 썸네일

나도 할 수 있다! SW강사!

제주코딩베이스캠프

SW강사를 희망하는 모두를 위한 수업으로 커리큘럼과 자료 제공, 15년차 현직 강사의 노하우와 꿀팁까지 한번에 해결할 수 있습니다.

입문

입문

HTML/CSS, JavaScript, Python

나도 할 수 있다! SW강사!강의 썸네일

나도 할 수 있다! SW강사!

제주코딩베이스캠프

나도 할 수 있다! SW강사!

SW강사를 희망하는 모두를 위한 수업으로 커리큘럼과 자료 제공, 15년차 현직 강사의 노하우와 꿀팁까지 한번에 해결할 수 있습니다.

입문

입문

•

HTML/CSS

JavaScript

Python

React Native

25시간 37분

이런 걸 배울 수 있어요

교수법

교안작성

교육계획작성

강사 등록

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)강의 썸네일

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

코딩웍스(Coding Works)

웹 퍼블리셔를 위한 JS 핵심이론 및 실전예제 교재 및 완성본은 PDF로 제작된 강의 교재입니다. 해당 교재는 웹 퍼블리셔가 꼭 알아야 하는 자바스크립트와 제이쿼리 기본기를 충실히 갖출 수 있는 역할을 합니다. 해당 교재 특징으로는 이론과 연결된 스몰미션(Small Mission)을 통해서 이론을 더욱 탄탄히 할 수 있습니다. 특히 배운 모든 이론을 활용한 실전 예제 역시 충실히 준비된 교재입니다. 해당 PDF 전체 페이지는 순수 자바스크립트(Vanlila JavaScript)와 제이쿼리(jQuery) 페이지 수는 320페이지 이상으로 코딩웍스가 쉽게 이해할 수 있도록 충분한 설명을 덧붙여 놓았습니다. 특히, 퍼블리셔가 웹사이트 제작을 위해 필수적인 제이쿼리 상호작용 실전 예제를 학습하실 수 있습니다.

초급

초급

JavaScript, jQuery, HTML/CSS

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)강의 썸네일

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

코딩웍스(Coding Works)

웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)

웹 퍼블리셔를 위한 JS 핵심이론 및 실전예제 교재 및 완성본은 PDF로 제작된 강의 교재입니다. 해당 교재는 웹 퍼블리셔가 꼭 알아야 하는 자바스크립트와 제이쿼리 기본기를 충실히 갖출 수 있는 역할을 합니다. 해당 교재 특징으로는 이론과 연결된 스몰미션(Small Mission)을 통해서 이론을 더욱 탄탄히 할 수 있습니다. 특히 배운 모든 이론을 활용한 실전 예제 역시 충실히 준비된 교재입니다. 해당 PDF 전체 페이지는 순수 자바스크립트(Vanlila JavaScript)와 제이쿼리(jQuery) 페이지 수는 320페이지 이상으로 코딩웍스가 쉽게 이해할 수 있도록 충분한 설명을 덧붙여 놓았습니다. 특히, 퍼블리셔가 웹사이트 제작을 위해 필수적인 제이쿼리 상호작용 실전 예제를 학습하실 수 있습니다.

초급

초급

•

JavaScript

jQuery

HTML/CSS

이런 걸 배울 수 있어요

자바스크립트 필수 이론 및 실전 활용 예제

제이쿼리 필수 이론 및 실전 활용 예제

자바스크립트 & 제이쿼리 HTML+CSS+JS 완성본

Tailwind CSS 실전 포트폴리오 퍼블리싱강의 썸네일

Tailwind CSS 실전 포트폴리오 퍼블리싱

코딩웍스(Coding Works)

[Tailwind CSS 실전 포트폴리오 퍼블리싱]은 Tailwind CSS를 활용해 26가지 이상의 다양한 실전 예제 제작하는 과정입니다. 실전 예제를 빠르게 다양하게 제작하면 그 속에서 필수적인 이론을 설명합니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

초급

초급

TailwindCSS, HTML/CSS

Tailwind CSS 실전 포트폴리오 퍼블리싱강의 썸네일

Tailwind CSS 실전 포트폴리오 퍼블리싱

코딩웍스(Coding Works)

Tailwind CSS 실전 포트폴리오 퍼블리싱

[Tailwind CSS 실전 포트폴리오 퍼블리싱]은 Tailwind CSS를 활용해 26가지 이상의 다양한 실전 예제 제작하는 과정입니다. 실전 예제를 빠르게 다양하게 제작하면 그 속에서 필수적인 이론을 설명합니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

초급

초급

•

TailwindCSS

HTML/CSS

14시간 35분

이런 걸 배울 수 있어요

Tailwind CSS를 활용한 다양한 실전 예제 제작

Tailwind CSS만의 간편한 모바일 대응 반응형 작업

Tailwind 유틸리티 클래스 및 CSS 모든 속성

쉬운 설명으로 Tailwind CSS 이해도 향상

CSS GRID 마스터: FIGMA 디자인 웹구현 실전강의 썸네일

CSS GRID 마스터: FIGMA 디자인 웹구현 실전

이지웹

CSS Grid는 복잡한 레이아웃도 간단하고 직관적으로 구현할 수 있는 강력한 도구입니다. 이번 강의에서는 CSS Grid의 핵심 개념부터 실전 활용법까지 단계별로 쉽게 배울 수 있도록 구성했습니다. 이제 복잡한 float과 flexbox에 얽매이지 말고, 효율적인 레이아웃 설계의 정석을 배워보세요! 지금 바로 시작하세요!

초급

초급

HTML/CSS, jQuery, Figma

CSS GRID 마스터: FIGMA 디자인 웹구현 실전강의 썸네일

CSS GRID 마스터: FIGMA 디자인 웹구현 실전

이지웹

CSS GRID 마스터: FIGMA 디자인 웹구현 실전

CSS Grid는 복잡한 레이아웃도 간단하고 직관적으로 구현할 수 있는 강력한 도구입니다. 이번 강의에서는 CSS Grid의 핵심 개념부터 실전 활용법까지 단계별로 쉽게 배울 수 있도록 구성했습니다. 이제 복잡한 float과 flexbox에 얽매이지 말고, 효율적인 레이아웃 설계의 정석을 배워보세요! 지금 바로 시작하세요!

초급

초급

•

HTML/CSS

jQuery

Figma

4시간 51분

이런 걸 배울 수 있어요

CSS GRID 기본 문법과 속성 완벽 정리

실전 예제와 함께하는 프로젝트 실습

디자인 참조 웹페이지 구현 노하우

자바스크립트 제대로 배워볼래?강의 썸네일

자바스크립트 제대로 배워볼래?

개발자의 품격

자바스크립트를 제대로 배우길 원하는 초급자를 위한 가장 탄탄한 기초 강의입니다. 여러분은 이 강의를 통해 자바스크립트라는 언어를 이해하는 시작점이 될 것이고, 프론트엔드(Vue, React, Angular) 개발자, 서버(Node.js) 개발자가 되기 위한 기초를 완벽하게 준비할 수 있습니다.

초급

초급

JavaScript, ES6, HTML/CSS

자바스크립트 제대로 배워볼래?강의 썸네일

자바스크립트 제대로 배워볼래?

개발자의 품격

자바스크립트 제대로 배워볼래?

자바스크립트를 제대로 배우길 원하는 초급자를 위한 가장 탄탄한 기초 강의입니다. 여러분은 이 강의를 통해 자바스크립트라는 언어를 이해하는 시작점이 될 것이고, 프론트엔드(Vue, React, Angular) 개발자, 서버(Node.js) 개발자가 되기 위한 기초를 완벽하게 준비할 수 있습니다.

초급

초급

•

JavaScript

ES6

HTML/CSS

12시간 41분

이런 걸 배울 수 있어요

자바스크립트 기본을 제대로 익힐 수 있어요

ES6 문법을 익힐 수 있어요

바닐라 JS

HTML을 컨트롤하는 측면에서의 자바스크립트 사용법을 익힐 수 있어요

효과적인 모바일 UX 만들기 (디자인 + 코딩)강의 썸네일

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

Photoshop과 Adobe XD 프로그램을 활용해 다양한 디바이스의 웹, 앱 레이아웃을 디자인해 본 뒤 간단한 코딩 기술을 학습해 직접 구현해볼 수 있게 됩니다.

초급

초급

HTML/CSS, jQuery, XD

효과적인 모바일 UX 만들기 (디자인 + 코딩)강의 썸네일

효과적인 모바일 UX 만들기 (디자인 + 코딩)

유용한IT학습

효과적인 모바일 UX 만들기 (디자인 + 코딩)

Photoshop과 Adobe XD 프로그램을 활용해 다양한 디바이스의 웹, 앱 레이아웃을 디자인해 본 뒤 간단한 코딩 기술을 학습해 직접 구현해볼 수 있게 됩니다.

초급

초급

•

HTML/CSS

jQuery

XD

22시간 13분

이런 걸 배울 수 있어요

Adobe XD를 활용한 모바일 UX 디자인

HTML, CSS, jQuery를 활용한 모바일 UX 코딩

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)강의 썸네일

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

초급

초급

HTML/CSS, jQuery, JavaScript

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)강의 썸네일

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

webstoryboy

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

초급

초급

•

HTML/CSS

jQuery

JavaScript

웹 디자인

18시간 49분

이런 걸 배울 수 있어요

웹디자인 기능사 레이아웃 유형

웹디자인 기능사 스크립트 유형

웹디자인 기능사 실전 사이트

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

웹디자인기능사 출제기준(2025.1.1~2025.12.31)까지 시행되는 출제기준에 정확히 맞춘 웹디자인 기능사 실기 시험 내용에 최적화 되어 있는 실기시험 전문 강의로서, HTML+CSS+JQUERY 퍼블리싱, 코딩웍스 웹디자인 기능사 실기시험 강의는 다릅니다. 2023년도에 추가된 D유형, E유형 완벽 제작 수업영상과 2024년도에 추가된 F유형 완벽 제작 수업영상이 모두 반영되어 있습니다.

입문

입문

HTML/CSS, jQuery, 웹 디자인

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

코딩웍스(Coding Works)

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

웹디자인기능사 출제기준(2025.1.1~2025.12.31)까지 시행되는 출제기준에 정확히 맞춘 웹디자인 기능사 실기 시험 내용에 최적화 되어 있는 실기시험 전문 강의로서, HTML+CSS+JQUERY 퍼블리싱, 코딩웍스 웹디자인 기능사 실기시험 강의는 다릅니다. 2023년도에 추가된 D유형, E유형 완벽 제작 수업영상과 2024년도에 추가된 F유형 완벽 제작 수업영상이 모두 반영되어 있습니다.

입문

입문

•

HTML/CSS

jQuery

웹 디자인

37시간 46분

이런 걸 배울 수 있어요

HTML+CSS+JQUERY 핵심이론

웹 퍼블리싱 취업을 위한 개인 포트폴리오 웹사이트를 제작

웹사이트 제작 실력과 노하우 향상

웹디자인 기능사 실기시험에 고득점 합격