프로그래밍 시작하기: 웹 입문 (Inflearn Original)
프로그래밍 시작하기: 웹 입문 (Inflearn Original)
수강정보
(10개의 수강평)
387명의 수강생
55,000원
지식공유자 : 인프런
56회 수업 · 총 13시간 18분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 입문
인프런의 다른 강의 연관 로드맵

이 강의는

처음으로 프로그래밍을 시작하는 분들을 위한 웹 개발 입문 강의입니다. HTML, CSS, Javascript를 배우고 인스타그램 포스팅 카드를 만들어봄으로써 웹페이지 제작에 꼭 필요한 기본적인 내용들을 학습합니다.

인프런과 함께, 처음 만나는 웹 개발! 🛩️

‘역시 기술이 있어야 해...’ 라는 말,  혹시 떠올려 본 적 있나요?

오늘 내가 수행한 일은 어땠나요?
쉽게 대체할 수 없는, 특별한 기술이 필요한 일을 하고 계시나요? 
언젠가 로봇이나 AI가 내 일자리를 빼앗아 갈 것 같다는 불길한 생각, 해본 적 있나요?

지금, 변화가 필요한 시간!
어떤 변화를 준비하고 있나요?

세상은 늘 빠르게 변화합니다. 변화의 속도만큼이나 우리들이 하는 ‘일’도 빠르게 변화하지요. 
키오스크 가득한 패스트푸드 매장, 로봇이 만들어주는 아메리카노, 
이런 새로운 일상을 가능하게 만든 개발자 채용 가득한 취업시장.

매일 쏜살같이 변하는 세상처럼, 우리도 스스로의 가치를 꾸준히 높이며 변화해나가야 합니다.
인프런이 여러분의 변화를 위한 도전 처음 한 발짝을 제안해드릴게요. 
실패에 대한 부담 없이 가장 쉬운 것부터 배워보는 건 어떨까요?

Hello, World! 
알파벳 배우듯 
웹 개발 언어를 공부하세요.

우리의 어린 시절을 한번 떠올려봅시다. 살면서 가장 먼저 배운 게 무엇이었나요? 바로 말하는 방법, 즉 ‘언어’죠. 컴퓨터도 마찬가지예요. 내가 원하는 대로 컴퓨터를 작동시키려면 컴퓨터와 소통하기 위한 언어를 배워야 하죠. 

그렇다면 세상에 존재하는 수많은 컴퓨터 언어 중에 어떤 걸 배워야 할까요? 처음으로 IT 기술을 만나는 분들이라면, 웹 개발에 필요한 언어로 시작하는 걸 추천드려요. 매일같이 우리가 마주하고 이용하는 웹은 앞으로도 중요하게 여겨질 기술이니까요.

특히 HTML, CSS, Javascript는 
웹 개발을 시작한다면 반드시 알아야 할 언어입니다. 

HTML으로는 웹의 내용과 구성을, 
CSS로는 멋진 디자인을, 
자바스크립트(Javascript)로는 웹이 동작하는 방식을 정의할 수 있어요.
눈에 보이는 웹 사이트를 제작하려면 이 언어들의 목적과 문법을 잘 이해하고 사용할 수 있어야 하죠. 
지금 여러분이 보고 있는 화면도 이 세 언어로 이루어져 있어요! 

인프런 오리지널 : 웹 개발 입문(가칭)은 웹 개발에 처음 도전하는 입문자를 대상으로 웹 개발에 꼭 필요한 필수적인 내용을 다룹니다. 실습을 통해 각각의 문법과 개념이 어디에 사용되는지 이해하는 과정을 거친 뒤, 마무리로는 직접 인스타그램 카드와 비슷한 웹페이지를 만들어보며 웹 개발을 통해 어떤 일을 할 수 있는지를 직접 확인하게 되실 거예요.

웹 개발로 만날 수 있는
새로운 기회!

# 무한한 가능성을 느껴보세요.
웹의 미래는 여전히 밝습니다. 1989년 월드 와이드 웹(WWW)이 등장한 이래 빠르고 꾸준하게 변화를 거듭하고 있어요. 최근에는 개인별로 맞춤형 정보를 제공하는 지능형 웹 기술이 등장하면서 가능성이 더욱 무궁무진해졌답니다. 우리의 일상에 맞닿은 친숙한 기술이니만큼 개념을 이해하기도 쉽죠!
# 핫한 커리어 시작! 전문가가 되세요.
미국 구직 사이트 글래스도어닷컴에서는 2020 유망 직업 1위에 프론트엔드 개발자를 꼽았어요. 시각적으로 작업물을 확인할 수 있고, 웹사이트 개발이 필요한 프로젝트는 아주 많은 만큼 꾸준히 인기있을 직업이죠! HTML, CSS, Javascript는 이렇게 핫한 프론트엔드 개발의 필수 스킬이랍니다.
# 폭넓은 커뮤니티와 선택지가 기다려요.
웹 개발 직무는 커뮤니티가 아주 넓답니다. 페이스북, 트위터, 깃허브, 미디엄 등 여러 온라인 커뮤니티에서 개발자들이 활동하고 있어요. 구글링 몇 줄이면 몰랐던 문제를 해결하거나 새로운 정보를 찾을 수 있어 스스로 공부하기 어렵지 않죠. 업무 분야도 다양해 자유롭게 직무 환경을 선택할 수 있고요!

강의를 통해 배우는 것들 

내 손으로 만들어보세요! 

웹 개발 입문,
이런 분들께 추천드려요!

 

스킬 +1

무언가 새로운 기술을 배우고 싶은 분

부담없이 쉽게

어려운 건 질색, 가볍게 배우고픈 분

첫 프로그래밍!

처음 프로그래밍을 시작하려는 분

보이는 재미

결과물을 눈으로 빠르게 확인하고픈 분

인프런 오리지널: 웹 입문
어떻게 구성했을까요?

인프런 오리지널, 이번엔 웹이다!
오직 인프런에서만 만나볼 수 있는 인프런 오리지널, <인프런 오리지널: 파이썬 입문>, <파이썬 중급> 편으로 그동안 이미 수많은 수강생 분들께서 선택해 주셨죠. 
한층 더 신경쓴, 인프런만의 특별한 강의를 만나보세요!

초심자를 배려한 콘텐츠
 새로운 개념에 대해 필수적인 내용을 하나하나 집어가며 설명을 덧붙였습니다.

한번 더 이해하는 실습 예제
  배운 내용을 한 번 더 확인하며 스스로 복습할 수 있도록, 수업 파트별로 실습 예제가 준비되어 있어요.

특별한 지식공유자
이미 검증된 최고만을 모셨습니다! 명쾌한 전달력, 쏙쏙 들어오는 설명으로 가르치는 지식공유자님과 함께해요.
개념뿐만 아니라 현업에서 실무 프로젝트를 리드하고 계셔요.
프로그래밍 초심자가 어디에서 헷갈려하는지 잘 알고 있어, 여러분이 헤매지 않도록 도와드릴 거예요.

내 손으로 만드는 인스타그램
 전체 과정에서 배운 내용을 전체적으로 엮어나가는 것도 중요하겠죠? 
 강의의 마지막, 응용 챕터에서 인스타그램과 유사한 웹 페이지를 만들어봅니다. 

참고할 수 있는 깔끔한 정리
 강의의 핵심 내용이 정리된 PPT와 실습/응용 코드를 제공합니다.

평생 수강, 물어보며 공부하세요!
 수강기한 없이 한 번 구매하면 쭉! 두고두고 반복해서 내용을 내 것으로 완전히 익혀보세요.
 강의를 듣다가 궁금한 내용이 있다면 주저하지 마세요, 글을 남겨주시면 답변을 드립니다.

이런 걸 배워요

  • 프로그래밍 입문
  • 웹 서비스 개발
  • HTML
  • CSS
  • JavaScript

도움 되는 분들

  • 코딩을 처음 접하는 사람
  • 웹 개발에 관심있는 사람
  • 새로운 취미를 만들고 싶은 사람
  • 개발을 잘 이해하고 싶은 디자이너

선수 지식

  • 전혀 없음

공개 일자

2020년 8월 11일 (마지막 업데이트 일자 : 2020년 8월 11일)

지식공유자 소개

배움의 기회는 경제적, 물리적 한계에서 자유로워야 한다고 생각합니다.

우리는 성장기회의 평등을 추구합니다.

4.3
10개의 수강평
default_profile.png
qowlgus925 2달 전
Block/Inline 비유 진짜 잘하신 것 같아요! 이해 잘되게 설명해주셔서 감사합니다 :)
default_profile.png
권인준 2달 전
<html> <head> </head> <body> <h3> <s> 진짜 이강의 최고에요 이해도 쉽고 어렵지도 않고 딱 저한테 알맞는거 같아요! </s> </h3> </body> </html>
default_profile.png
고용수 2달 전
현재 실습으로 검증하기 강의만 남은 상태에서 수강평을 쓰게 되었습니다. 장점 : 강의를 잘하십니다. 쉽게 설명하셔서 수업 내용에 대한 이해는 잘 되는 편입니다. 단점 : 강의 가격에 비해 턱없이 부족한 자료 , 중반부부터 강의 소리크기가 계속 다름. 이 강의는 704분 56강 이루어져 있으며 3만8천500원의 가격입니다. 강의는 좋지만 자료가 너무나 부족합니다. 강의자료인 ppt도 많이 부실하고 ppt에 예제도 거의없고 수업에 보여주는 몇가지가 다 입니다. 가격이 4만원 가까이 되는 강의인데도 불구하고 자료가 너무 없다고 생각이 듭니다. 그리고 초반에는 일정하게 소리크기가 되다가 중반부강의부터는 소리가 작은 강의도 있고 소리가 큰 강의도 있습니다. 적은 가격이 아닌데 그런 부분은 좀 아니지않나 싶습니다. 책이없고 강의만 듣는다고 가정하면 가격에 비해 자료가 너무 없으므로 비추할거 같습니다. 그러나 거기에 관한 책은 있는데 강의만 괜찮으면 상관없다 하시는 분들은 괜찮을꺼 같습니다. 저는 첫번째 요소에 포함되고 가격에 비해 강의소리가 일정하지않아서 수강평 별점3개 드립니다.

교육과정

모두 펼치기 56 강의 13시간 18분
섹션 0. 웹 개발 시작해봐요
2 강의 15 : 25
웹 맛보기
15 : 25
강의 자료 내려받기 (PPT)
섹션 1. 기초 HTML
14 강의 178 : 56
HTML 개념 알기 (1-1)
12 : 24
서식 관련 태그 알아보기 (1-2)
12 : 01
리스트 태그 알아보기 (1-3)
04 : 29
실습: 자기소개 페이지 만들기 (1-4)
11 : 32
블록/인라인 요소 알아보기 (1-5)
13 : 26
하이퍼미디어 태그 알아보기 (1-6)
08 : 33
표 관련 태그 알아보기 (1-7)
11 : 05
실습: 여행 계획 페이지 만들기 (1-8)
19 : 05
폼 태그 알아보기 (1-9)
12 : 19
폼 관련 기본 태그 알아보기 (1-10)
13 : 05
폼 관련 응용 태그 알아보기 (1-11)
09 : 39
메타 태그 알아보기 (1-12)
14 : 40
iframe 태그 알아보기 (1-13)
06 : 24
실습: 회원가입 폼 만들기 (1-14)
30 : 14
섹션 2. 멋진 CSS
15 강의 180 : 27
CSS 개념 알기 (2-1)
07 : 48
CSS 선언하기 (2-2)
12 : 33
폰트 스타일 속성과 색상 알아보기 (2-3)
11 : 40
폰트와 크기의 단위 알아보기 (2-4)
09 : 49
텍스트 스타일 알아보기 (2-5)
03 : 28
크기를 적용하기 (2-6)
02 : 47
실습: 여행 계획 페이지에 스타일 적용해보기 (2-7)
14 : 00
CSS 선택자 알아보기 (2-8)
09 : 18
조금 복잡한 셀렉터 알아보기 (2-9)
14 : 42
블록 태그 요소와 여백 적용하기 (2-10)
15 : 24
위치를 적용하기 (2-11)
18 : 57
테두리 적용하기 (2-12)
06 : 43
테두리 둥글게 하기 (2-13)
03 : 02
실습: 갤러리 페이지 만들기 (2-14)
14 : 59
실습: 뉴스 기사 페이지 만들기 (2-15)
35 : 17
섹션 3. 진짜배기 JAVASCRIPT
23 강의 330 : 06
Javascript 개념 알기 (3-1)
09 : 57
Type 이해하기 (3-2)
13 : 21
변수, 산술연산 이해하기 (3-3)
21 : 21
실습: 사칙연산과 변수 다루기 (3-4)
20 : 43
값을 비교하기 (3-5)
17 : 29
조건문 사용하기 (3-6)
15 : 40
실습: 퀴즈게임 만들기 (3-7)
11 : 53
반복문 사용하기 (3-8)
10 : 23
실습: 피보나치 수열 출력하기 (3-9)
10 : 48
배열 사용하기 (3-10)
16 : 15
객체 사용하기 (3-11)
13 : 39
실습: 설문조사 만들기 (3-12)
18 : 20
함수 선언하기 (3-13)
15 : 11
스코프 이해하기 (3-14)
11 : 58
HTML 코드에 Javascript 가져오기 (3-15)
07 : 46
선택자로 DOM 가져오기 (3-16)
15 : 37
DOM을 동적으로 생성하기 (3-17)
07 : 19
DOM의 내용을 바꾸기 (3-18)
07 : 59
이벤트 처리하기 (3-19)
16 : 39
실습: 회원가입 폼 검증하기 - 1 (3-20)
19 : 13
실습: 회원가입 폼 검증하기 - 2 (3-21)
11 : 39
심화 개념: 클로져 이해하기 (3-22)
20 : 23
심화 개념: Ajax 개념 알기 (3-23)
16 : 33
섹션 4. 실습으로 검증하기
2 강의 93 : 42
인스타그램 포스팅 카드 만들기 - UI (4-1)
59 : 55
인스타그램 포스팅 카드 만들기 - 자바스크립트, 캐러셀 (4-2)
33 : 47
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스