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

/

웹 개발

웹 개발의 기본

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

14명 이 수강하고 있어요.

웹앱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분)

수업 자료

가 제공되는 강의입니다.

  • 웹 브라우저의 작동 방식

    23:56

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

수강평

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