인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

웹 개발

웹 개발의 기본

웹 개발에 필수적인 기본 개념과 원리를 실습을 통해서 학습합니다.

(5.0) 수강평 1개

수강생 15명

웹앱HTML/CSSJavaScriptDOM
Thumbnail

초급자를 위해 준비한
[웹 개발] 강의입니다.

이런 걸 배울 수 있어요

  • 웹의 작동 원리

  • 클라이언트 측 언어 기본 개념 및 주요 기능

  • 간단한 동적 웹페이지 구현

강의 소개

웹 개발 기초 과정 입니다.

  • 변수, 조건문, 함수, 객체, 메서드 등 프로그래밍의 기초는 알고 있으나 웹 개발 경험이 없는 분들을 대상으로 구성된 강의 입니다.


  • HTML/CSS, JavaScript 기초 문법 지식이 필요 합니다.


  • 웹앱 개발의 기본을 다지는 실습을 진행 합니다.


이런 내용을 배워요

섹션2. 웹의 작동 원리

웹 브라우저와 웹 서버가 각각 어떻게 작동 하는지 설명합니다. 브라우저의 개발자 도구를 사용해서 네트워크 통신과 렌더링 기능을 확인해 보는 실습을 진행합니다. 그리고, 대표적인 웹 서버인 Nginx를 설치하고 로컬 서버를 구동하는 실습도 진행합니다.

웹브라우저작동방식

웹 브라우저의 작동 방식

섹션3. 클라이언트 측 언어

프론트엔드 개발에 필수적인 언어인 HTML, CSS, JavaScript의 기본 개념과 주요 기능에 관해서 학습합니다. 과일 설명 웹페이지를 구현하는 실습을 통해서 CSS의 기본적인 스타일 속성과 Flexbox 레이아웃 기능을 학습합니다.

과일설명웹페이지

과일 설명 웹페이지 구현

섹션4. 동적 웹페이지 구현

HTML, CSS로 만든 간단한 To-Do 리스트 웹페이지에 JavaScript를 사용해서 DOM 조작, 이벤트 처리 등 동적 기능을 추가하는 실습을 진행합니다. 빈 화면에서 시작해 에디터에 코드를 한 줄씩 입력하고, 각 줄의 의미를 자세히 설명함으로써 수강생들이 동적 웹페이지 구현의 기본 개념과 원리를 이해할 수 있도록 실습을 구성했습니다.

To-Do 리스트 웹페이지 이미지

To-Do 리스트 웹페이지 구현

수강 전 참고 사항

실습 환경

  • 운영 체제 및 버전(OS): Windows, macOS, Linux 등

  • 사용 도구: 크롬(무료), Nginx 최신 버전(무료), Notepad++(무료)


학습 자료

  • HTML, CSS, JavaScript 소스 코드 파일

  • Notepad++(권장), 메모장 등 에디터에서 편집 가능

선수 지식 및 유의사항

  • 선수지식: HTML, CSS, JavaScript 기초 문법

  • 변수, 함수, 조건문, 객체, 메서드 등 프로그래밍의 기초는 알고 있으나 웹 개발 경험이 없는 분

  • 기본 개념과 원리 설명 후 실습을 진행합니다.

  • 학습 관련 질문은 인프런 웹사이트를 통해서 할 수 있습니다.


이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 웹 개발 입문자

선수 지식,
필요할까요?

  • HTML, CSS, JavaScript 기초 문법

안녕하세요
우제근입니다.

안녕하세요

인프런 지식공유자 우제근 입니다.

저는 IT 스타트업 크림슨앰버의 대표 입니다.

저의 IT관련 지식과 실무 경험을 여러분들과 공유하고자 합니다!

 

감사합니다.

우제근 | LinkedIn

 

더보기

커리큘럼

전체

8개 ∙ (1시간 56분)

해당 강의에서 제공:

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

수강평

전체

1개

5.0

1개의 수강평

  • 현명님의 프로필 이미지
    현명

    수강평 1

    ∙

    평균 평점 5.0

    5

    63% 수강 후 작성

    학원에서 풀스택 과정을 수강했던 수강생입니다. 짧은 기간의 풀스택과정을 배우다보니 수박 겉할기식의 주입식 교육이 있었습니다. 수료 후 면접을 보러 다녔지만 기술력과 기술의 전문 지식 이해도의 부족으로 취업의 벽은 높았습니다. 부족함을 깨닫고 강의를 찾던 중 눈에 들어온 과정이기에 신청을 해봤습니다. 강의 수강 중 분명 학원에서 배운 같은 과정이지만 면접 볼때 들었던 질의에 대한 지식들이 함께 있어서 진작에 한번 세밀하게 과정을 배워볼걸이란 생각을 해봤습니다. IT업계에 기술력도 중요한 걸 알지만 AI처럼 주입식 과정을 통한 기술 습득보단 기술에 대한 이해력도 정말 중요하다고 생각합니다. 좋은 강의 영상 만들어주셔서 감사합니다. -30대에 IT도전한 취준생-

    비슷한 강의

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

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

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

    트레이딩온

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

    초급

    초급

    HTML/CSS

    웹프로그래밍의 꽃! 자바스크립트 기초강의 썸네일

    웹프로그래밍의 꽃! 자바스크립트 기초

    이지웹

    javascript를 통해 HTML의 요소를 선택하고 다양한 이벤트에 따라 요소의 스타일을 변경하거나 애니메이션 효과를 구현합니다. javascript의 기분문법에서 스타일 변경, 이벤트 설정 및 웹페이지 구현시 자주 사용되는 효과를 구현합니다.

    초급

    초급

    HTML/CSS, JavaScript, vanilla-javascript

    Do It! 장고+부트스트랩: 파이썬 웹개발의 정석강의 썸네일

    Do It! 장고+부트스트랩: 파이썬 웹개발의 정석

    SungYong Lee

    만들면서 배우는 파이썬 웹개발 A to Z! 웹 기초부터 블로그 개발, 배포까지 한 번에 배워요.

    초급

    초급

    Python, Django, Bootstrap

    Colini 웹개발 가이드강의 썸네일

    Colini 웹개발 가이드

    싸플

    웹 개발 처음 시작하시는 분들을 위한 완전 기초 강의! HTML, CSS, Javascript, React 등 웹개발 기초를 쌓아보자!

    입문

    입문

    HTML/CSS, JavaScript, React

    실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발강의 썸네일

    실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발

    김정환

    순수 자바스크립트와 VueJS라는 UI Library를 이용하여 쇼핑몰 검색 페이지를 만들어 보며 VueJS 개발 학습을 진행합니다. 순수 자바스크립트와 VueJs 로 개발을 각기 진행하며 각 개발의 차이점과 MVC, MVVM 디자인 패턴의 차이도 배울 수 있습니다.

    초급

    초급

    JavaScript, Vue.js

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

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

    코딩웍스(Coding Works)

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

    초급

    초급

    JavaScript, jQuery, HTML/CSS

    PWA를 통한 1만 시간의 법칙 앱 제작!강의 썸네일

    PWA를 통한 1만 시간의 법칙 앱 제작!

    제주코딩베이스캠프

    PWA로 서비스 중인 웹 페이지를 앱 서비스로 만들어보세요! 간단하게 PWA, 앱 제작을 경험해보고 싶으신 분들에게 권해드립니다.

    초급

    초급

    웹앱, PWA

    React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발강의 썸네일

    React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

    코딩의세계 한태재

    React와 Three.js 를 한번에! 3D 기초부터 현업에 사용할 수 있는 프로젝트 그리고 최적화 팁 까지 !

    초급

    초급

    인터랙티브 웹, react-three-fiber, Three.js

    아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지강의 썸네일

    아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

    이지웹

    전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.

    초급

    초급

    HTML/CSS, JavaScript, jQuery

    실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발강의 썸네일

    실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

    김영한

    실무에 가까운 예제로, 스프링 부트와 JPA를 활용해서 웹 애플리케이션을 설계하고 개발합니다. 이 과정을 통해 스프링 부트와 JPA를 실무에서 어떻게 활용해야 하는지 이해할 수 있습니다.

    초급

    초급

    Spring, Spring Boot, JPA

    조코딩의 코딩 기초와 웹 풀스택 개발강의 썸네일

    조코딩의 코딩 기초와 웹 풀스택 개발

    조코딩

    코딩 1위 유튜버 조코딩의 실전 압축! 쉽고 재미있는 웹 풀스택 개발 강의

    입문

    입문

    HTML/CSS, JavaScript, Node.js

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

    깡코딩

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

    초급

    초급

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

    쉽고! 짧고! 강하게! 준비하는 웹디자인기능사 실기강의 썸네일

    쉽고! 짧고! 강하게! 준비하는 웹디자인기능사 실기

    LIZ.B

    웹디자인기능사 실기 시험을 준비하시는 분들에게 짧고 쉽게 배우는 강좌를 준비했습니다. 단지 시험 때문이 아니더라도, 웹표준 양식에 맞는 사이트 구현에 관심있으신 분이라면 환영합니다.

    초급

    초급

    HTML/CSS, jQuery, 웹 디자인

    웹브라우저 Javascript (자바스크립트)강의 썸네일

    웹브라우저 Javascript (자바스크립트)

    Egoing Lee

    생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다.

    초급

    초급

    JavaScript

    자바스크립트로 알아보는 함수형 프로그래밍 (ES5)강의 썸네일

    자바스크립트로 알아보는 함수형 프로그래밍 (ES5)

    MDU 유인동

    마플(http://www.marpple.com)의 CTO 유인동님이 알려주는 함수형 프로그래밍에 대한 강좌 입니다. 함수형 프로그래밍으로 라이브러리를 직접 만들어가며 함수형 프로그래밍의 패러다임과 코딩의 즐거움을 느낄 수 있습니다.

    초급

    초급

    JavaScript, 함수형 프로그래밍

    자바스크립트 머신러닝 TensorFlow.js강의 썸네일

    자바스크립트 머신러닝 TensorFlow.js

    김영보

    자바스크립트 환경에서 머신러닝 개념을 다룹니다. 자바스크립트와 TensorFlow.js로 머신러닝을 구현하는 형태와 코드를 다룹니다.

    중급이상

    중급이상

    Tensorflow, JavaScript, 머신러닝

    WEB2 - JavaScript강의 썸네일

    WEB2 - JavaScript

    Egoing Lee

    https://opentutorials.org(생활코딩 사이트)를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다.

    초급

    초급

    JavaScript

    파이썬 웹서비스API 실전 프로젝트 - 돈 버는 디지털마케팅강의 썸네일

    파이썬 웹서비스API 실전 프로젝트 - 돈 버는 디지털마케팅

    노마드크리에이터

    네이버쇼핑, 쿠팡파트너스 등 돈 버는 디지털마케팅은 꾸준함도 필요하지만, 과학적인 분석과 자동화로 쉽고 효과적으로 접근하세요. 인기상품, 키워드, 블로그, 쇼핑 정보를 수집하고 분석하는 프로그램을 만드는 핵심 비법을 알려드립니다.

    초급

    초급

    디지털 마케팅, Python, 웹앱

    Node.js로 웹 크롤링하기강의 썸네일

    Node.js로 웹 크롤링하기

    제로초(조현영)

    네이버, 아마존, 트위터, 유튜브, 페이스북, 인스타그램, unsplash.com 등의 사이트를 크롤링하며 실전에 적용해봅니다.

    중급이상

    중급이상

    JavaScript, Node.js, 웹 크롤링

    따라하면서 배우는 웹애플리케이션 만들기강의 썸네일

    따라하면서 배우는 웹애플리케이션 만들기

    Egoing Lee

    홈페이지를 완성하기 위한 전체적인 웹 기술들을 따라하며 웹 개발의 큰 흐름을 익힐 수 있는 강좌입니다.

    입문

    입문

    HTML/CSS, PHP

    ₩22,000