![부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프강의 썸네일](https://cdn.inflearn.com/public/courses/333092/cover/5a3043a4-fc2d-4b25-9096-306c8f707b5b/333092.jpg?w=420)
부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프
영코디 킴쌤
디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의[개정판] 입니다.
초급
Bootstrap, 반응형 웹, 웹 디자인
스프링을 공부하다가 포기하셨나요? 코딩이 처음인 쌩초보, 비전공자도 jsp부터 springBoot까지, 포기하지 않고 스프링 부트로 가는 길을 열어드립니다.
웹 개발의 기초 개념 이해
데이터베이스 연동 및 CRUD 구현
폼 검증과 파일 업로드 처리
세션, 쿠키, 필터, 예외처리 실습
MVC 패턴 기반 웹 기능 구현
Spring Boot 프레임워크 사용법 익히기
JUnit과 H2로 테스트 실습
ORM과 JPA를 활용한 데이터 처리
Spring Security로 로그인 기능 구현
비동기 방식과 공공데이터인 openAPI를 활용
게시판 중심의 미니 프로젝트 개발 경험
깃허브를 활용하여 협업하는 방법
Spring Boot, JPA, TDD, JSP, Java, 스프링, 스프링부트, 리액트, 프론트엔드, 백엔드, 풀스택, 자바
Spring Boot, JPA, TDD, JSP, Java, 스프링, 스프링부트, 리액트, 프론트엔드, 백엔드, 풀스택, 자바
Spring Boot, JPA, TDD, JSP, Java, 스프링, 스프링부트, 리액트, 프론트엔드, 백엔드, 풀스택, 자바
Spring Boot, JPA, TDD, JSP, Java, 스프링, 스프링부트, 리액트, 프론트엔드, 백엔드, 풀스택, 자바
비전공자를 위한 풀스택 과정에서는 각 코스 과정별 무엇을 배우나요?
웹개발을 한다는 것은 누구나 올 수 있는 상점을 온라인 상에 만드는 것과 같습니다. HTML은 Hyper Text Markup Language 의 약자로 웹페이지의 주요 핵심내용이 되는 정보들을 가지고 기본뼈대를 만드는 작업을 배웁니다.
CSS는 Cascading Style Sheet 의 약자로 Cascading은 계층적인, 폭포수 같은 의미를 가지고 있는 단어입니다. css는 말 그대로 html 구조의 부모, 자식 관계를 계층적으로 선택하여 원하는 요소에 원하는 스타일의 색이나 모양, 애니메이션을 입혀 사용자가 보기에 지루하지 않고 흥미롭고 아름다운 웹을 디자인 할 수 있는 시트를 만들어 적용합니다. 또한, css에 자신이 생길 때까지 다양한 실무 사이트의 클론 디자인, 모바일 디자인, 웹 디자인을 HTML/CSS를 반복적으로 코딩하며 웹디자인을 다양하게 제작하는 경험을 쌓습니다.
혹시, 리액트를 공부하다가 좌절하신 적이 있나요? 킴쌤 클래스에서는 리액트의 기초가 되는 자바스크립트를 단계적으로 학습하기 위해 바닐라 스크립트부터 자바스크립트 es6문법, 제이쿼리 등의 기본문법부터 다양한 실습예제를 통해 스크립트의 기본을 탄탄히 다진 후에 React의 다양한 문법의 이해와 실습을 통해 컴포넌트, state, 메모이제이션을 활용한 게시판과 회원기능을 구현하고 타입스크립트 문법을 익혀 ToDoList 실습예제를 제작하는 등, 포기하지 않고 리액트로 가는 길을 열어드립니다.
디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지 개발을 위해 부트스트랩(BOOTSTRAP)을 활용하는 방법에 대한 이론과 실습을 적절하게 분배하여 부트스트랩의 구성요소들을 이해하며 실습을 통하여 바로바로 확인해보고 실제 반응형 웹사이트를 구현해 완성해봅니다.
또한, 부트스트랩의 정해진 스타일대신 나만의 개성있는 스타일의 반응형 웹을 제작하고 싶은 분들을 위해 부트스트랩을 활용하지 않고 순수하게 html/css/jQuery 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 실습을 한솥 도시락 반응형 웹제작을 통해 마스터해 봅니다.
웹개발 백엔드의 가장 기본언어인 자바를 가장 기본적인 문법부터 시작하여 점진적으로 중급까지 익히고 다양한 예제실습을 통하여 스스로 원하는 프로그램을 코딩할 수 있는 능력을 자연스럽게 습득하게 됩니다.
자바의 컬렉션 프레임워크는 collection 말 그대로 수집, 즉 저장하는 클래스를 자체적으로 내장하고 있는 내부 라이브러리로 데이터의 다양한 타입들을 한군데 묶어서 관리하고 저장할 수 있는 다양한 문법들을 익히고 , 자바의 기초부터 심화까지 다양한 예제들을 실습함으로써 웹개발 백엔드의 초석을 튼튼히 하는 밑바탕을 만듭니다.
데이터베이스(DB) 테이블을 만들고 db에 읽고 쓰고 수정, 삭제하는 CRUD 실습을 통해 SQL문법을 배우고 실습함으로써 회원가입, 로그인이나 게시판 작성시 db를 활용할 수 있도록 준비합니다.
혹시 최근 실무에서 가장 많이 사용되고 있는 스프링 부트부터 공부하다가 좌절한 경험이 있으신가요?
킴쌤 클래스에서는 스프링 부트를 완벽하게 이해하기 위해 가장 기초문법인 JSP부터 학습하여 이전세대에서 현재세대로의 백엔드 문법의 진화를 직접 체감하며 자연스럽게 개념과 사용법을 체득하고 웹개발 백엔드를 자동으로 알아서 구현해주는 스프링부트가 동작하는 원리를 이해합니다.
ORM, JPA, 엔티티의 기본개념과 활용, 스프링 시큐리티의 이해와 시큐리티를 활용한 회원기능 구현, junit test 의 실습과 h2콘솔의 사용법 등의 실습을 토대로 스프링 부트를 활용하여 회원과 게시판 기능이 있는 실무 웹사이트를 구현하고 비동기 방식과 공공데이터인 openAPI를 활용하여 포트폴리오 제작을 위한 기본기를 완벽하게 숙지합니다.
혹시 개발한 프로젝트가 내 컴퓨터 안에서만 실행되고, 실제 서비스로 배포하지 못해 답답했던 경험이 있으신가요?
킴쌤 클래스에서는 단순히 코드를 작성하는 데 그치지 않고, 닷홈을 활용한 웹 호스팅부터 GIT, AWS EC2에 프로젝트 배포까지 전 과정을 단계별로 따라 하며 학습합니다.
도메인 연결, FTP 업로드, GitHub를 통한 배포, jar 패키징, 서버 설정, 이미지 업로드 경로 지정, nohup을 활용한 무중단 실행까지 실무에서 꼭 필요한 배포 과정을 체득할 수 있습니다.
이 과정을 통해 내가 만든 웹사이트를 실제로 세상에 공개할 수 있는 경험을 쌓으며, 개발자로서의 자신감과 실제 서비스 운영 역량을 동시에 갖추게 됩니다.
#자바 #java #국비지원 #부트캠프 #스프링부트 #springboot #frontend #backend #fullstack #fullstackdeveloper #jsp #react #리액트 #프론트엔드 #백엔드 #풀스택 #html #css #css3 #코딩강의 #코딩수업 #코딩기초 #코딩학원 #코딩공부 #javascript #자바스크립트 #코딩인강 #코딩교육 #인터렉티브 #인터렉티브웹 #스프링 #spring #개발자 #개발자취업 #aws #db #데이터베이스 #jdbc #오라클 #oracle #sql #jpa #쓰레드 #threads #thread #직렬화 #역직렬화 #상속 #다형성 #메소드 #오버로딩 #오버라이딩 #클래스 #연산 #이클립스 #eclipse #domtree #제이쿼리 #플러그인 #객체 #객체실습 #객체생성 #오브젝트 #object #모달창 #모달 #modal #es6 #문서객체모델 #js #javascripttutorial #javascriptexamples #interactiveweb #interactive #네비게이션제작 #gnb #position #웹레이아웃 #레이아웃 #form #폼태그 #emmet #에밋
학습 대상은
누구일까요?
웹 개발을 처음 배우는 비전공자
IT 취업을 목표로 하는 취준생
JSP와 SpringBoot를 한 번에 배우고 싶은 분
개발의 큰 흐름(MVC, 요청/응답 등)을 체계적으로 익히고 싶은 분
게시판 구현 프로젝트를 직접 해보고 싶은 분
깃허브로 버전관리하며 프로젝트를 협업하는 방법을 배우고 싶은 분
Spring Security, JPA, 테스트 코드 등 실무에 필요한 기술을 익히고 싶은 분
선수 지식,
필요할까요?
이 강의는 비전공자도 이해할 수 있도록 구성된 입문~초중급 과정입니다. 따라서 고급 프로그래밍 지식은 필요하지 않습니다. 코딩에 대한 열정만 준비해주세요!
349
명
수강생
24
개
수강평
20
개
답변
5.0
점
강의 평점
19
개
강의
👩 이 강의를 만든 사람
[ 비전공자도 쉽고 재미있게 배우는 코딩! ] 을 목표로 15년 넘게 풀스택(백엔드, 프론트엔드) 및 영상, 코딩, 디자인, 빅데이터, 머신러닝 등을 강의하며 개발자 인력양성에 진심인 현직 직업훈련교사
🎖 경력사항
[컴퓨터 1도 모르는 사람이 부업으로 월100만원 수입내보기 첫걸음] 의 저자
NCS 국가직무능력강의 고용노동부 평가 A등급 강사선정
그린컴퓨터아카데미수원 우수강사선정(2017, 2018, 2019 3년연속 최우수1등상 수상)
전) 삼성ODD 기획 개발팀 담당
가톨릭대학교 컴퓨터공학부 특강
용인송담대학 멀티미디어학부 특강 및 다수
🚵 자격사항
직업능력훈련교사[정보기술개발] 고용노동부
직업능력훈련교사[정보기술운영] 고용노동부
직업능력훈련교사[정보기술전략·계획] 고용노동부
직업능력훈련교사[인공지능] 고용노동부
직업능력훈련교사[실감형콘텐츠제작] 고용노동부
직업능력훈련교사[문화콘텐츠제작] 고용노동부
직업능력훈련교사[멀티미디어] 고용노동부
직업능력훈련교사[일반사무] 고용노동부
직업능력훈련교사[총무] 고용노동부
직업능력훈련교사[디자인] 고용노동부
직업능력훈련교사[영상제작 ] 고용노동부
직업능력훈련교사[인쇄] 고용노동부
직업능력훈련교사[출판] 고용노동부
빅데이터전문가1급 한국직업능력진흥원
정보처리기사 한국산업인력공단
사무자동화산업기사 한국산업인력공단
컴퓨터활용능력 2급 대한상공회의소
ITQ OA 마스터 한국생산성본부
워드프로세서 1급 대한상공회의소
멀티미디어콘텐츠제작전문가 한국콘텐츠진흥원
시각디자인산업기사 한국산업인력공단
컴퓨터그래픽스운용기능사 한국산업인력공단
웹디자인기능사 한국산업인력공단
GTO 포토샵 1급 글로벌공인자격검정원
GTO 일러 1급 글로벌공인자격검정원
👩🏫 현) 그린컴퓨터아카데미 직업능력훈련교사 재직중
담당과정) 정보기술개발/프론트엔드/백엔드/풀스택/자바 웹개발/UIUX엔지니어링/빅데이터플랫폼구축/빅데이터시스템개발/ 프로그래밍언어/파이썬/자바/빅데이터분석/ 빅데이터전문가/프로그래밍언어/콘텐츠기획
인프런의 부트스트랩3(BOOTSTRAP)를 활용한 반응형 웹페이지 만들기 약 10만명 구독을 기념으로 그동안 추가 강의에 대한 많은 요청을 DM으로 받아 풀스택 강의를 최신버전으로 기획 제작 및 업로드 중입니다. 여러분의 많은 관심과 따뜻한 댓글은 영코디 킴쌤의 강의제작에 큰 원동력이 됩니다.
느리지만 차근차근 질좋은 강의로 한걸음씩 여러분과 함께하겠습니다.
전체
143개 ∙ (67시간 12분)
해당 강의에서 제공:
10. jsp개발환경 구축하기
16:17
11. jsp파일생성과 설정
35:31
12. 서블릿의 이해
30:48
13. 서블릿의 활용
46:16
14. jsp태그의 종류
20:58
17. 디렉티브 태그 사용법
21:26
18. 디렉티브 태그 실습
20:35
20. 액션태그 사용법
14:52
21. 액션태그 실습
25:23
22. 액션태그를 웹마켓에 적용하기
30:57
24. 복습문제해설
22:52
25. 내장객체
23:20
30. 내장객체 복습문제풀이
13:40
41. 유효성 검증
39:15
43. 유효성 검증 복습문제풀이
38:33
45. 다국어 처리
23:20
46. format number
19:10
48. 시큐리티 인증
47:54
49. 인증 selfEX 문제풀이
11:02
51. 예외상황을 처리하는 방법
25:28
52. 예외처리 총정리
18:25
53. 예외처리 selfEX 문제풀이
19:27
54. 웹 쇼핑몰에 예외처리 적용하기
10:50
55. 필터 기능 사용법
20:26
56. 필터예제 실습해보기
27:44
79. jstl 태그의 종류와 사용법
33:58
80. core태그의 다양한 활용
38:44
81. sql태그의 종류와 활용
35:16
84. 회원가입 프론트 페이지 생성
43:34
85. 회원가입 백엔드 기능구현
28:21
86. 회원 로그인 기능구현
21:09
87. 회원정보 수정과 삭제구현
01:24:15
89. mvc pattern
44:16
90. mvc 게시판
27:30
102. 에밋 설치와 의존주입
27:45
103. 애너테이션 사용과 롬복 설치
35:54
104. 깃허브의 활용1
21:16
105. 깃허브의 활용2
25:42
106. ORM과 JPA 이해하기
35:13
121. 스프링 시큐리티
01:07:49
122. 회원가입기능 구현
30:58
123. 회원 로그인 구현
37:00
124. 권한과 인증구현
29:16
125. 로그아웃구현
11:25
127. 질문 수정과 삭제구현1
20:25
128. 질문 수정과 삭제구현2
28:40
129. 답변 수정 구현
15:25
130. 답변 삭제 구현
12:55
131. 질문 좋아요 구현1
18:13
132. 질문 좋아요 구현2
21:46
133. 앵커기능과 마크다운 구현
36:21
134. 검색기능 구현1
14:27
135. 검색기능 구현2
23:54
136. 검색기능 JS추가
17:33
137. jpql
18:10
138. 프로필 이미지 등록기능
48:49
142. 깃허브로 협업하기_팀장의 역할
01:05:06
월 ₩41,140
5개월 할부 시
₩205,700