워드프레스(WordPress) 완전정복
Self-coding
워드프레스(WordPress) 테마 코딩의 기초에서 라이브 서버로 런칭까지, 여러 개의 프로젝트 코딩을 통해 나만의 멋진 웹사이트를 만들고 또 여러 홈페이지를 관리하는 전문 개발자가 될 수 있어요!
초급
WordPress
BEST
부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
부트스트랩5 (Bootstrap5)의 클래스, 컴포넌트 등 개념을 이해하고 이를 바탕으로 응용, 변형하고 실습으로 3개의 프로젝트를 제작해봅니다.
신한DS
임직원들도 이 강의를 듣고 있어요!
신한DS
임직원들도 이 강의를 듣고 있어요!
먼저 경험한 수강생들의 후기
4.6
5.0
donghyun park
100% 수강 후 작성
좋네...
5.0
엔지개그
61% 수강 후 작성
이 강의는 부트스트랩 5의 핵심을 효율적으로 전달합니다. 먼저 주요 기본 문법을 습득한 후, 3개의 실전 프로젝트를 통한 단계별 학습 방식입니다. 프로젝트마다 기본을 반복하며 난이도가 높아지면서, 새로운 고급 기술이 추가되어 기본 문법 활용을 자연스럽게 강화합니다. 학습 효율성이 매우 높은 강의라고 감히 평가합니다. 유익한 강의 제공에 감사드립니다.
5.0
H00589
100% 수강 후 작성
강의가 매우 도움 됩니다.
수강 후 이런걸 얻을 수 있어요
최신 부트스트랩5의 기초적인 클래스 개념을 익힙니다.
이해된 부트스트랩의 개념을 바탕으로 변형하고 응용할 수 있습니다.
실제적인 프로젝트를 통해 부트스트랩5의 전반적인 기능과 구조를 이해할 수 있습니다.
결국 부트스트랩의 디자인과 기능 등을 바탕으로 나만의 특색있는 웹사이트를 Front-end에서 구현할 수 있습니다.
나중에는 프런트엔드 개발 뿐만 아니라 백엔드 개발에도 부트스트랩을 활용할 수 있습니다.
웹 사이트, 누구나 만들 수 있다!
부트스트랩5로 만드는 웹 프로젝트
강의를
시작하기 전에
부트스트랩?
부트스트랩(Bootstrap)은 프론트엔드(Front-End)에서 웹사이트의 구성 코드인 html과 CSS 그리고 Javascript를 하나로 통합하여 정형화된 인터페이스를 제공해주고 있는 일종의 프레임워크 라이브러리입니다.
부트스트랩을 사용하면 누구나 웹사이트를 쉽고 빠르게 만들 수 있습니다. 부트스트랩이 없이 웹사이트를 제작하려면 html, CSS, Javascript를 웹 개발자가 따로따로 만들어서 서로 통합해야 합니다. 하지만 부트스트랩 프레임워크는 이를 일정한 형태로 만들어져 배포되었기 때문에 우리는 이 코드(클래스와 컴포넌트 등)들을 이용해서 더욱 쉽게 웹사이트를 제작할 수 있습니다.
왜 부트스트랩을 배워야 할까요?
부트스트랩이 있으면 코딩에 입문하는 사람들이 초보적인 html, CSS 지식으로 괜찮은 웹사이트를 만들 수 있습니다.
실제로 웹 코딩에 처음 입문해서 html과 CSS 등 지식을 배우고 실제로 html 프론트엔드 코딩을 할 때 매우 막막하셨던 경험을 해 보았을 수 있습니다. 이때 부트스트랩은 매우 강력하고 효율적으로 웹 코딩을 할 수 있도록 도와줍니다.
아울러 부트스트랩은 최초로 모바일의 Twitter를 개발할 때 시작된 라이브러리인 까닭에 모바일이나 태블릿 등에 반응적으로 디스플레이되는 장점이 있습니다.
왜 이 강의로 배워야 할까요?
이 강의에서는 부트스트랩의 구조와 콘텐츠에 대해 집중적으로 공부합니다. 개별적인 컴포넌트(Components)들은 실제 프로젝트를 만들어보면서 포괄적이고 반복적으로 코딩을 연습할 것입니다. 몇 개의 실질적인 프로젝트를 처음부터 끝까지 제작해 보면 웹 코딩의 기술은 비약적으로 발전할 것이고 이를 바탕으로 추후 Javascript, Backend 구축 등 심화된 웹 개발을 하는데 매우 단단한 기초를 다질 수 있습니다.
요컨대, 이 강의는 바로 웹 개발의 입문 또는 초보 단계를 빠르게 학습할 수 있게 하려고 기획되었고 제작되었습니다.
부트스트랩5
기초부터 웹 프로젝트 만들기
이래서야 언제 홈페이지를 완성하지?
웹 개발에 입문하면 순서대로 다음과 같은 단계적 딜레마에 빠질 것입니다.
- 웹사이트·홈페이지를 제작하고 싶어 구글과 유튜브에서 html에 대해 공부했다. 하지만 콘텐츠의 정보를 출력하는 것으로 끝날 뿐, 멋진 웹사이트를 만들기란 쉽지 않다!
- 그래서 웹사이트에 예쁜 디자인을 입히기 위해 CSS를 공부하기 시작했다. 글자 크기나 색상 변경 같은 것 외에는 도무지 이해되지 않는다!
- 슬라이드, 스크롤, 드롭다운, 팝업 등 좀 더 다이내믹하게 웹에서 글자와 이미지들이 변화하는 기능을 만들고 싶다. 하지만 이런 것을 하려면 자바스크립트(Javascript) 언어를 또 배워야 한다!
- 홈페이지를 만들려면 html, CSS, Javascript를 다 배워야 하나? 이래서야 언제 홈페이지를 완성하지?
웹 개발을 배워도 고민은 계속된다
위의 고민 사항이 해결되어도 웹 개발에서는 수없이 꼬리에 꼬리를 무는 궁금점과 고민이 생기게 됩니다. 가령 매번 html 파일을 만들지 말고 기본적인 디자인 템플릿만 만들고 다양한 콘텐츠도 효율적이고 경제적으로 넣을 수 없을까? 또 이 콘텐츠 데이타를 저장하고 관리하는 방법은 없을까? 웹사이트의 속도를 빠르게 웹페이지를 렌더링하는 방법은 없을까? 등등, 다양한 질문들이 계속 떠오릅니다.
하지만 부트스트랩을 배운다면?
하지만 모든 학습과 경험은 단계가 있듯이, 프론트엔드 뿐만 아니라 백엔드를 포괄하는 풀스택 웹 개발의 제일 첫걸음은 html과 CSS가 될 것입니다. 따라서 html/CSS의 완벽한 이해가 필요하고 이를 자유롭게 활용할 수 있어야 합니다. 바로 부트스트랩은 이러한 초기 고민을 깔끔하게 해결해 줄 수 있습니다.
〈부트스트랩5 : 기초에서 프로젝트 제작〉 강의를 수강하신다면 말입니다!
이 강의를
소개합니다
웹코딩 초보자
초보 개발자 및 html,
css, Javascript를
배워본 웹코딩 입문자
부트스트랩5가 궁금해
기본 사용법은 알지만
클래스, 컴포넌트 등
응용법이 궁금할 때
더 빠르게 못하나?
웹 사이트 개발 시에
프론트엔드 개발을
빠르게 끝내고 싶은 분
실무에서는 어떻게?
실무 프로젝트에서
부트스트랩 적용법이
궁금하신 분
이런 분들께 추천합니다!
- 웹코딩을 시작한 지 얼마되지 않으신 초보 개발자
- 어느 정도 html, css 그리고 Javascript를 배우신 분
- 부트스트랩 5의 기본 클래스 개념, 그리고 컴포넌트를 공부하고 싶은 분
- 부트스트랩의 기본 내용은 알고 있는데, 이를 변형하고 응용하고 싶은 분
- 실제 프로젝트에서 어떻게 부트스트랩이 적용되는지 궁금하신 분
- 프론트엔드 웹개발을 빠르게 하고 싶은 분
- 짧은 시간에 이상의 지식들을 컴팩트하게 배우고 싶은 분
이 강의를 들은 후에는?
- html, css 같은 웹개발의 기초를 다질 수 있습니다.
- 쉽고 빠르게 프론트엔드 웹디자인을 할 수 있습니다. 원하는 형태의 웹코딩을 프론트엔드에서 할 수 있고, 이를 바탕으로 다양한 활용을 할 수 있습니다.
- 이 후 워드프레스 같은 CMS나 NodeJS 같은 서버 구축과 같은 심화 학습을 통해 궁극적으로 웹 개발 전문가가 될 것입니다.
이 강의에는
이런 특징이 있어요
이렇게 진행됩니다!
이 강의는 크게 부트스트랩 5의 기초편과 프로젝트 제작편으로 구분됩니다.
- 기초편
- 부트스트랩의 Grid, Display, Box, Position 그리고 Contents의 클래스 개념을 익히게 됩니다.
- 프로젝트
- 총 3개로 구성되었습니다.
- 첫 번째 프로젝트보다 두 번째가, 두 번째보다 세 번째가 조금씩 커스터마이징을 통해 난이도가 높아집니다.
- 가장 기초적인 개념부터 시작해 실제적인 활용과 응용을 거쳐 최종적으로 내가 원하는 웹사이트를 코딩할 수 있는 능력을 반복적이고 단계적으로 익힐 수 있습니다.
- 각 강의에 사용된 코드는 파일로 제공됩니다.
강의 내용 소개
- 기초편: 부트스트랩5의 개념과 자주 사용되는 클래스와 컴포넌트에 대해 학습합니다.
- 프로젝트 1: One-page Website로 CSS는 최소한으로 이용해서 부트스트랩의 클래스와 컴포넌트만으로 제작해봅니다.
- 프로젝트 2: 부트스트랩의 클래스와 컴포넌트에 더해서 CSS(SCSS)와 Javascript를 커스터마이징해서 Multi-page Website를 구축합니다. 아울러 카카오맵 API를 이용해 지도를 자바스크립트로 코딩하는 방법을 배웁니다.
- 프로젝트 3: 기본적인 부트스트랩은 물론이고, SCSS와 Javascript module화를 통해 좀 더 고급스러운 Front-end 웹 코딩을 배우게 됩니다. 이 프로젝트에서 사용하는 지도는 네이버맵 API를 이용해서 코딩합니다.
Q&A
예상 질문
Q. 컴퓨터 관련 전공자가 아닌데 들을 수 있는 강의인가요?
물론입니다. 이 강의는 그렇게 어렵지 않습니다. 컴퓨터 공학, 웹에 대한 딱딱한 이론이나 역사를 공부하는 게 아니라, 웹 개발의 기초 중 html, CSS 그리고 Javascript를 통합한 부트스트랩 라이브러리를 프로젝트를 통해 공부하는 강의입니다.
또한, 훌륭한 웹 개발자 중에는 비전공자도 많습니다. 저 역시 컴퓨터 관련 비전공자랍니다!
Q. html과 CSS에 대해 정말 조금밖에(또는 전혀) 모르는데 강의를 따라갈 수 있을까요?
물론입니다. html과 CSS라는 용어만이라도 들은 적이 있으면 공부를 시작하는 데는 충분합니다. 다만, 모든 공부가 그렇듯이 다소 끈기와 인내심 그리고 호기심은 있어야 합니다.
Q. 강의를 듣기 전에 준비해야 할 것이 있나요?
우선 인터넷이 연결되는 컴퓨터가 있어야 합니다. PC, Mac, Notebook 등 종류와 사양은 상관없습니다.
html, CSS, Javascript 등 프로그래밍 언어를 조금 이해하고 있으면 더욱 좋습니다. 만약 이에 대한 지식이 부족하다면 유튜브에서 무료 동영상 강의를 검색해보세요! 2~3시간 정도 공부하시면 충분합니다.
웹브라우저는 크롬(Chrome, 가장 추천) 또는 파이어폭스(FireFox, general or developer edition)을 이용하실 것을 권장합니다.
또한 코딩을 할 수 있는 코드 에디터(Visual studio code editor, sublime text editor, atom editor 등)라면 어떤 것이든 상관없습니다. 이 강의에서는 최근 많이 사용하는 Visual studio code editor(강의에서 사용)를 강추합니다.
Q. PC(윈도우 운영체제)에서도 강의를 듣고 코딩을 할 수 있나요?
물론입니다. 이 강의는 MAC 운영체제를 사용해 코딩을 진행하고 있지만, 윈도우, 리눅스 등 어떠한 운영체제에서도 문제없이 강의를 수강하고 코딩할 수 있습니다.
이 강의의
지식공유자는
Self-coding
- Front-End (WordPress) Developer
- Medipress 웹사이트 제작 및 교육(프리랜서)
- Udemy Instructor
이런 분들께
추천드려요
학습 대상은
누구일까요?
부트스트랩의 기본 구조와 개념, 그리고 컴포넌트를 공부하고 싶은 분
웹 코딩을 처음 접하시는 분 중 쉽고 빠르게 웹 개발을 하고 싶은 분
부트스트랩의 기본 내용은 알고 있는데, 이를 변형하고 응용하고 싶은 분
선수 지식,
필요할까요?
html, CSS, Javascript 등 컴퓨터 언어를 조금 이해하고 있으면 더욱 좋습니다.
부트스트랩(Bootstrap)이라는 이름은 들어본 적이 있다면 이 강좌를 수강하기에 아무 문제가 없습니다.
커리큘럼
전체
84개 ∙ (14시간 38분)
해당 강의에서 제공:
수업자료
1. 전체 강좌 소개
06:27
2. 부트스트랩 개념과 특징
13:50
3. 코드 에디터 소개 및 설정
09:35
5. Grid 1
08:45
6. Grid 2
07:44
7. Grid 3
04:13
9. Break
03:32
10. Offset
02:53
11. Ordering
04:01
12. Display
07:19
13. Flex-1
05:39
14. Flex-2
06:00
15. Border & Shadow
10:56
16. Margin & padding
06:48
17. Sizing
04:11
18. Position 1
14:45
19. Position 2
02:23
20. Float
05:13
21. Typography
07:51
22. Text
08:41
23. Color
06:59
24. Image & figure
03:58
25. Ratio
04:07
26. Table
03:13
27. 프로젝트 1 - Intro
03:24
28. 프로젝트 1 - Setting
10:49
36. 프로젝트 1 - Footer
11:17
강의 게시일:
마지막 업데이트일:
수강평
전체
34개
4.6
34개의 수강평
spya수강평 1
∙
평균 평점 5.0
5
99% 수강 후 작성저는 약 한달간 HTML 과 CSS 공부를 하고 홈페이지를 만드는 작업을 하고 있었습니다. 하지만 디자인적인 부분에서 한계를 느껴 찾아보던중, 부트스트랩이라는 걸 알게 되었습니다. 부트스트랩을 이용해보려고 했더니 기존에 공부한 CSS와는 다르게 새로운걸 공부하는 느낌이더군요. 그래서 강의를 찾아보게 되었습니다. 선생님 강의를 듣고 이해도가 많이 높아지고 제대로 활용할 수 있게 되었습니다. 정말 감사 드립니다. 이하는 질문 및 의견 입니다. ===================================== 웹표준에 대한 부분인데요, 프로젝트를 진행한 후 해당 HTML을 유효성 검사 사이트 https://validator.w3.org/ 에서 확인을 해보면 class에 들어간 width 부분이 모두 에러가 납니다. 물론 에러가 나도 사이트를 이용하는데는 전혀 지장이 없지만 이 에러가 웹표준이라는 부분에 있어서 문제가 되지는 않는지 궁금합니다. 예를들어 제가 한 회사에 취직해서 웹표준에 적합한 사이트를 만들라는 지시를 받았을 때, 이 부분이 문제가 되지는 않는지에 대한 부분 입니다. 에러 나는 부분을 지우고 css파일에 직접 작성을 하니 에러 부분은 사라졌습니다. 왜 그런진 잘 모르겠지만 class에 작성되어있을때와 css에 작성되어있을때 위치가 약간 다르더군요, 그 부분은 col 값을 수정해주는 등 고칠 수 있었습니다. (col-3 col-5 col-4 로 지정된 navbar의 3개컬럼에서 col-5에 있는 로고가 왼쪽으로 치우침, col-4 col-4 col-4 로 바꿔줌으로써 로고가 센터로 위치함) 만약 이 부분이 웹표준에 문제가 된다면 선생님께서도 애초에 css에 작성하는 방향으로 강의하심이 낫지 않을까해서 조심스럽게 의견 제시해 봅니다. 맞다 틀리다의 문제가 아니라 그냥 궁금한점에 대한 질문을 드리는 부분이니 불쾌하지 않으셨으면 좋겠습니다. 다음은 이후 강의에 대한 의견입니다. ====================================== 제가 선생님 강의를 듣기전, 인터넷에 있는 여러 템플릿을 참고 하였지만, 실제 적용했을때 도무지 원하는 모양이 나오지 않았습니다. 짧은 제 지식으로 생각하건데 아마 부트스트랩의 버전도 다르고, 템플릿의 원작자가 부트스트랩에서 제공하는 css외 커스터마이징을 한 부분들이 있다보니 cdn링크만 걸려있는 제 index파일에서는 정상적으로 동작할 수가 없겠더군요. 그래서 제안드리는 부분은, 여러 버전의, 여러 템플릿을 활용하여 여기저기서 가져다 붙인 코드들이 하나의 웹페이지로 만들어지는 과정을 알려 주신다면 굉장한 도움이 되지 않을까 싶습니다. (버전차이에 따라 원작자의 코드에서 이부분은 수정해 줘야 한다, css가 제대로 먹지 않을경우 코드를 분석해 수정해 나가는 방법 같은것) 다시한번 감사하다는 말씀드리면서, 이만 줄이겠습니다.
- Self-coding지식공유자
수강평 감사합니다. 조금이나마 도움이 된다니 다행입니다. 몇 가지 문의에 대해서.. 1. 제가 오래 전에 html 공부를 해서(사실 html 공부랄 것도 없고, 1-2시간이면 되는 내용이지만) html 유효성 검사에 대해서는 솔직히 몰랐습니다. img 엘리먼트에 width나 height를 속성으로 추가하는 것 등등입니다. 이 부분은 추후에 새로운 프로젝트 업데이트할 때는 미리 공부하고 동영상을 만들게요. 알려주셔서 감사드려요. 2. 부트스트랩은 html과 약간의 css만 알면 웹코딩하기에 매우 쉬운 프레임워크입니다. 부트스트랩 cdn을 링크하면, 사실 사용하지 않는 css 부분이 웹에 포함될 수 밖에 없어서(당연히 코드양이 많아지겠죠), 전문가들은 꼭 필요한 것만 직접 css를 하나하나 디자인합니다. 이 강의는 말 그대로 부트스트랩 강좌라서 너무 커스텀한 css를 이용하면 또 강의 주제와 맞지 않을 수 있습니다. 사실 몇 몇 프로젝트에서는 커스텀한 css 사용이 많거나 불필요하다는 비판도 받고 있습니다. 그래서 부트스트랩을 어느 정도 공부하게 되면, 부트스트랩 클래스가 일반적인 css에서 이런 개념과 이유로 작성되었다는 것을 이해하게 되고, 결국에는 부트스트랩을 넘어서 스스로 css를 만들어 나갈 수 있으리라 생각합니다. 장자가 말하길 물고기를 잡으면 그 통발그물은 버려야 한다는 것과 동일합니다. 저도 그렇고 spya 님도 그렇고 나중에는 부트스트랩을 완전히 이해한 후에는 부트스트랩에 구애받지 않고 스스로 웹디자인을 잘 할 수 있길 기대합니다. 3. 부트스트랩 여러 버전과 템플릿을 활용한 웹페이지 제작 과정은 이미 생각해본 적이 있는데요... 다만, 일종의 저작권 이슈 때문에 조심스럽습니다. 사실 첫번째 원페이지 웹사이트도 어떤 템플릿을 보고 코딩은 완전히 새롭게 제가 만든 것이거든요. 그 디자이너의 코드를 그대로 또는 일부만 조금 고쳐서 나의 동영상을 만들게 되면 법적이든 양심적이든 문제가 생길 것 같습니다. 그리고 제가 다른 웹개발자를 함부로 품평할 상당한 위치에 있지는 못합니다. 현재 워드프레스 테마 코딩 강의를 준비중이고(약 2/3정도 진행), 그 후에는 자바스크립트 관련 강의를 해볼까 생각중인데요.. 제가 좀 한가해지면 꼭 지금 이 강좌에 새로운 부트스트랩 프로젝트, 아니면 작은 스케일로 부트스트랩 업데이트 강의를 추가할 생각입니다. 그 때 이상의 요청부분을 최대한 반영해서 좀 더 잘 만들어 보도록 할게요. 다시 한번 감사드립니다~
- donghyun park
수강평 1
∙
평균 평점 5.0
- 김도형
수강평 3
∙
평균 평점 5.0
5
33% 수강 후 작성제가 들었던 Bootstrap 관련 강의중에 최고라고 말씀 드리고 싶습니다. 중급 이하 백앤드 개발자는 이 강의를 들으시면, 프론트앤드 파트는 큰 고민을 덜을 수 있을거 같습니다. 강의 음성도 좋고, 무엇보다 강의 자료 제공이 너무나 좋습니다. 좋은 강의 만들어주셔서 감사합니다. 한가지 부탁을 드리고 싶은것은, 강사님께서 사용하는 VS Code 의 익스텐션을 목록으로 적어주시면 어떠할까.. 싶습니다. 어차피 수강생이 자신에 맞게 설치하겠지만, 기본 가이드 개념으로 좋을거 같거든요.
- Self-coding지식공유자
강의 수강해 주셔서 감사드리고 좋은 평가 남겨 주셔서 또한 감사드려요. 새로운 프로젝트 동영상을 만들 때 비주얼 스튜디오 코드 에디터 익스텐션 등에 대해서도 소개하는 영상을 간단히 만들어 볼게요. 그럼 다가오는 새해 복 많이 받으세요~
- 엔지개그
수강평 9
∙
평균 평점 5.0
- H00589
수강평 20
∙
평균 평점 5.0
Self-coding님의 다른 강의
지식공유자님의 다른 강의를 만나보세요!
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
.png?w=420)
![[ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용강의 썸네일](https://cdn.inflearn.com/public/courses/329739/cover/4ee6572e-bf73-43de-a07c-01ba2c067f4d/329739-eng.png?w=420)
![풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]강의 썸네일](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?w=420)
