Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기 대시보드

(4.5)
20개의 수강평 ∙  425명의 수강생

22,000원

지식공유자: Self-coding
총 84개 수업 (14시간 38분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

부트스트랩5 (Bootstrap5)의 클래스, 컴포넌트 등 개념을 이해하고 이를 바탕으로 응용, 변형하고 실습으로 3개의 프로젝트를 제작해봅니다.

✍️
이런 걸
배워요!
최신 부트스트랩5의 기초적인 클래스 개념을 익힙니다.
이해된 부트스트랩의 개념을 바탕으로 변형하고 응용할 수 있습니다.
실제적인 프로젝트를 통해 부트스트랩5의 전반적인 기능과 구조를 이해할 수 있습니다.
결국 부트스트랩의 디자인과 기능 등을 바탕으로 나만의 특색있는 웹사이트를 Front-end에서 구현할 수 있습니다.
나중에는 프런트엔드 개발 뿐만 아니라 백엔드 개발에도 부트스트랩을 활용할 수 있습니다.

웹 사이트, 누구나 만들 수 있다!
부트스트랩5로 만드는 웹 프로젝트

강의를
시작하기 전에

부트스트랩?

부트스트랩(Bootstrap)은 프론트엔드(Front-End)에서 웹사이트의 구성 코드인 html과 CSS 그리고 Javascript를 하나로 통합하여 정형화된 인터페이스를 제공해주고 있는 일종의 프레임워크 라이브러리입니다.
부트스트랩을 사용하면 누구나 웹사이트를 쉽고 빠르게 만들 수 있습니다. 부트스트랩이 없이 웹사이트를 제작하려면 html, CSS, Javascript를 웹 개발자가 따로따로 만들어서 서로 통합해야 합니다. 하지만 부트스트랩 프레임워크는 이를 일정한 형태로 만들어져 배포되었기 때문에 우리는 이 코드(클래스와 컴포넌트 등)들을 이용해서 더욱 쉽게 웹사이트를 제작할 수 있습니다.

왜 부트스트랩을 배워야 할까요?

부트스트랩이 있으면 코딩에 입문하는 사람들이 초보적인 html, CSS 지식으로 괜찮은 웹사이트를 만들 수 있습니다.
실제로 웹 코딩에 처음 입문해서 html과 CSS 등 지식을 배우고 실제로 html 프론트엔드 코딩을 할 때 매우 막막하셨던 경험을 해 보았을 수 있습니다. 이때 부트스트랩은 매우 강력하고 효율적으로 웹 코딩을 할 수 있도록 도와줍니다.
아울러 부트스트랩은 최초로 모바일의 Twitter를 개발할 때 시작된 라이브러리인 까닭에 모바일이나 태블릿 등에 반응적으로 디스플레이되는 장점이 있습니다. 

왜 이 강의로 배워야 할까요?

이 강의에서는 부트스트랩의 구조와 콘텐츠에 대해 집중적으로 공부합니다. 개별적인 컴포넌트(Components)들은 실제 프로젝트를 만들어보면서 포괄적이고 반복적으로 코딩을 연습할 것입니다. 몇 개의 실질적인 프로젝트를 처음부터 끝까지 제작해 보면 웹 코딩의 기술은 비약적으로 발전할 것이고 이를 바탕으로 추후 Javascript, Backend 구축 등 심화된 웹 개발을 하는데 매우 단단한 기초를 다질 수 있습니다.
요컨대, 이 강의는 바로 웹 개발의 입문 또는 초보 단계를 빠르게 학습할 수 있게 하려고 기획되었고 제작되었습니다.


bootstrap 5

부트스트랩5
기초부터 웹 프로젝트 만들기

이래서야 언제 홈페이지를 완성하지?

웹 개발에 입문하면 순서대로 다음과 같은 단계적 딜레마에 빠질 것입니다.

  1. 웹사이트·홈페이지를 제작하고 싶어 구글과 유튜브에서 html에 대해 공부했다. 하지만 콘텐츠의 정보를 출력하는 것으로 끝날 뿐, 멋진 웹사이트를 만들기란 쉽지 않다!
  2. 그래서 웹사이트에 예쁜 디자인을 입히기 위해 CSS를 공부하기 시작했다. 글자 크기나 색상 변경 같은 것 외에는 도무지 이해되지 않는다!
  3. 슬라이드, 스크롤, 드롭다운, 팝업 등 좀 더 다이내믹하게 웹에서 글자와 이미지들이 변화하는 기능을 만들고 싶다. 하지만 이런 것을 하려면 자바스크립트(Javascript) 언어를 또 배워야 한다!
  4. 홈페이지를 만들려면 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개로 구성되었습니다.
    • 첫 번째 프로젝트보다 두 번째가, 두 번째보다 세 번째가 조금씩 커스터마이징을 통해 난이도가 높아집니다.
    • 가장 기초적인 개념부터 시작해 실제적인 활용과 응용을 거쳐 최종적으로 내가 원하는 웹사이트를 코딩할 수 있는 능력을 반복적이고 단계적으로 익힐 수 있습니다.
  • 각 강의에 사용된 코드는 파일로 제공됩니다.

강의 내용 소개

  1. 기초편: 부트스트랩5의 개념과 자주 사용되는 클래스와 컴포넌트에 대해 학습합니다.
  2. 프로젝트 1: One-page Website로 CSS는 최소한으로 이용해서 부트스트랩의 클래스와 컴포넌트만으로 제작해봅니다.
  3. 프로젝트 2: 부트스트랩의 클래스와 컴포넌트에 더해서 CSS(SCSS)와 Javascript를 커스터마이징해서 Multi-page Website를 구축합니다. 아울러 카카오맵 API를 이용해 지도를 자바스크립트로 코딩하는 방법을 배웁니다.
  4. 프로젝트 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)이라는 이름은 들어본 적이 있다면 이 강좌를 수강하기에 아무 문제가 없습니다.

안녕하세요
Self-coding 입니다.
Self-coding의 썸네일
커리큘럼 총 84 개 ˙ 14시간 38분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 인트로
전체 강좌 소개 미리보기 06:27
부트스트랩 개념과 특징 13:50
코드 에디터 소개 및 설정 09:35
섹션 1. 기초편
기초편 강의 자료 파일
Grid 1 08:45
Grid 2 07:44
Grid 3 04:13
Justify Align & Gutters 09:49
Break 03:32
Offset 02:53
Ordering 04:01
Display 07:19
Flex-1 05:39
Flex-2 06:00
Border & Shadow 10:56
Margin & padding 06:48
Sizing 04:11
Position 1 14:45
Position 2 02:23
Float 05:13
Typography 07:51
Text 08:41
Color 06:59
Image & figure 03:58
Ratio 04:07
Table 03:13
섹션 3. 프로젝트 2
프로젝트 2 - Intro 미리보기 06:29
프로젝트 2 - Setting 08:29
프로젝트 2 - Menu - 1 23:14
프로젝트 2 - Menu - 2 (Offcanvas) 12:57
프로젝트 2 - Front Carousel 13:14
프로젝트 2 - Front programs section 09:55
프로젝트 2 - Front infos section 09:04
프로젝트 2 - Front latest section 18:49
프로젝트 2 - Map section (Kakao api map Jasvascript) 17:15
프로젝트 2 - Footer section 12:22
프로젝트 2 - Page template 15:17
프로젝트 2 - Blog template 17:38
프로젝트 2 - Post template 12:14
프로젝트 2 - Modal 10:01
섹션 4. 프로젝트 3
프로젝트 3 Intro 미리보기 11:26
프로젝트 3 - Index Setup 11:22
프로젝트 3 - Menu - 1 20:23
프로젝트 3 - Menu - 2 (tooltip) 08:19
프로젝트 3 - Menu - 3 11:59
프로젝트 3 - Menu - 4 (Modal) 13:30
프로젝트 3 - Front Carousel 16:44
프로젝트 3 - Front Info section 21:36
프로젝트 3 - Front Card section 05:24
프로젝트 3 - Front Gallery section 09:16
프로젝트 3 - Front Latest section 10:43
프로젝트 3 - Footer 17:40
프로젝트 3 - Scroll Top (Javascript) 17:34
프로젝트 3 - Intro page setup 12:21
프로젝트 3 - Intro CEO & Brand section 10:57
프로젝트 3 - Intro Navs 13:49
프로젝트 3 - Intro Accordion 09:32
프로젝트 3 - Map (Naver map api JS) 19:39
[업데이트] Naver map service 이용요금 변경(23년 1월부터) 03:27
프로젝트 3 - Page setup 04:42
프로젝트 3 - Page main section 18:48
프로젝트 3 - Page Communication section 05:33
프로젝트 3 - Blog setup 05:34
프로젝트 3 - Blog CTA & Carousel section 17:13
프로젝트 3 - Blog Card section 14:46
프로젝트 3 - Blog Pagination & aside 13:02
프로젝트 3 - Post setup 02:34
프로젝트 3 - Post meta section 19:32
프로젝트 3 - Post Content -1 10:38
프로젝트 3 - Post Content -2 09:54
프로젝트 3 - Post Comments 11:00
프로젝트 3 - Related posts 08:05
프로젝트 3 - Reservation && Epilogue 13:05
추후 새로운 프로젝트로 업로드하겠습니다.
강의 게시일 : 2021년 11월 02일 (마지막 업데이트일 : 2022년 11월 29일)
수강평 총 20개
수강생분들이 직접 작성하신 수강평입니다.
4.5
20개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
김성훈 thumbnail
3
좀 많이 아쉽네요... bootstrap5 강의는 찾기가 어려워서 들어봤는데, 프로젝트 1 막바지부분을 듣는중인데 아쉬운점이 몇가지 있었습니다 1. 강의 파일이 start-finish로 되어있다고 하시는데, 1~5 섹션 파일중에 3섹션부터는 스타트 파일도 없습니다.. 그리고 정작 강의하시는 파일과 코딩된 순서가 다르다던가 이런문제가 아주약간씩 있구요, 맥북으로 화면분할해서 듣다보면 따로 찾거나 새로 쳐야하는 내용이 조금 있습니다. 2. 기본 프로젝트 전까진 대부분 좋았습니다. css에 대한 기본지식만 있으면 듣기 어렵지 않습니다. 예를들어 margin-bottom 이란 css속성을 부트스트랩에서는 class="mb-1" 이런식으로 표현하니까 어렵지 않습니다. 그런데 문제는 프로젝트 부분부터 입니다.. 프로젝트 전까지에서 알려주지 않았던 데이터부분이나 클래스를 쓰시는데 거기에대한 설명이 부족합니다. 예를들어 네비게이션 섹션을 한다고 치면, 이 클래스가 무엇에 관한것인지 내용 설명이 부족합니다. 프로젝트 목차부터는 강의 방식이 따라서 타이핑 하고 완성본을 보는 식인데, 이렇게 되면 수많은 div계층 속에서 어떤 속성때문에 이런 모양을 가지게 됐는지에 대한 이해가 아예 안됩니다. 그러면 강의 듣는 입장에서 멈췄다가 어떤속성을 빼면 어떻게 되는지 이런식으로 일일이 해볼 수 밖에 없습니다. 중간중간 이해가 안되는 부분이 많았지만, 예를들어 aria-expand="false" 이란 속성을 적어주는데, 그냥 타이핑 하고 만들어졌다는 식이어서 이 속성이 무엇인지에 대해 알아보려면 결국 또 구글링을 해야합니다. 3. 그리고 명확한 속성구분이 불가 합니다. 부트스트랩은 무조건 거의 클래스를 쓰거나 자바스크립트로 값을 넘겨주는데, 이 클래스가 나중에 개인적인 css에서 다룰 명시적인 클래스인지, 부트스트랩 내장 클래스인지 알기 어렵습니다. 예를들어 div class="container intro-section" 이 있다고 치면 container 는 부트스트랩에서 레이아웃 짤 때 필요한 클래스인데, intro-section이 무엇인지 알기 어렵습니다. 물론 처음배우지 않고, 어느정도 부트스트랩을 써왔다면 처음부터 구분이 가겠지만, 처음배우는 입장에선 알기가 어렵습니다. 그런데 여기에대한 언급도 잘안하시구요.. 그래서 결국 나중에는 커스텀하고, 자기만의 방식으로 디자인해야 하는데 활용성 측면에서 떨어질 수 밖에 없습니다.. 전형적인 강의들 중 따라는 하는데 이게 뭐하는건지 이해가 안가는 강의였습니다 ㅠㅠ. 배우는 입장에선 구글링을 한번 더해서 찾아봐야하는데,, 시간낭비라는 생각이 강하게 듭니다. 물론 개인차가 있겠지만 UI 프레임워크를 처음배우는 입장에서 이게뭐지?? 싶은 부분이 많았습니다. 아직 다듣지는 않았지만 아쉬운 부분이 많아서 저는 여기까지만 듣고 추후에 필요한 특정 부분이 있으면그 부분만 들어볼 생각입니다..
2022-01-28
지식공유자 Self-coding
솔직한 강의 평가 감사합니다. 1. 부트스트랩 자체의 클래스의 커스텀 클래스에 대한 설명을 좀 더 했어야 했는데, 영상을 촬영하면서 하나하나 다 언급하면 강의 동영상 분량이 너무 길어지고 늘어질 듯 해서 언급하지 못한 부분이 좀 많았어요. 앞 부분에 조금 언급해서 그저 막연히 ‘이 정도면 충분할 듯’하다고 방심했나 봅니다. 2. 속성 부분에 대한 언급은 코딩을 하기 전 부트스트랩에서 제공해주는 예제 코드를 상당 부분 그대로 했기 때문에 강의 영상을 준비하면서 이 부분 컴플레인이 나올 줄은 몰랐네요. 조금 더 부트스트랩 예제 자체에 대해 설명을 했어야 할 필요가 있었다고 봅니다. 3. 강의 자료 부분은 다시 한번 확인해 보고 빠진 파일은 업로드 할께요. 이 지적에 대해 겸허히 수용하고, 이 후에 다른 프로젝트를 만드는 영상을 계속 그리고 추후 부트스트랩6, 7 … 나오면서 계속 업데이트를 할 계획인데요, 추후에는 이 부분들 반영해서 강의 만들게요. 처음 강좌 런칭 할 때 프로젝트를 조금 많이 계획했나 하는 생각도 해봅니다.
2022-01-28
osole thumbnail
5
마지막까지 정열적인 강의 감사드립니다 ^^ 다음 강좌에서는 쇼핑몰 상품, 결제기능 구현방법 부탁드립니다.
2021-11-15
지식공유자 Self-coding
강의 수강해 주셔서 감사드립니다. ^^
2021-11-16
spya thumbnail
5
저는 약 한달간 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가 제대로 먹지 않을경우 코드를 분석해 수정해 나가는 방법 같은것) 다시한번 감사하다는 말씀드리면서, 이만 줄이겠습니다.
2022-09-21
지식공유자 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정도 진행), 그 후에는 자바스크립트 관련 강의를 해볼까 생각중인데요.. 제가 좀 한가해지면 꼭 지금 이 강좌에 새로운 부트스트랩 프로젝트, 아니면 작은 스케일로 부트스트랩 업데이트 강의를 추가할 생각입니다. 그 때 이상의 요청부분을 최대한 반영해서 좀 더 잘 만들어 보도록 할게요. 다시 한번 감사드립니다~
2022-09-21
김도형 thumbnail
5
제가 들었던 Bootstrap 관련 강의중에 최고라고 말씀 드리고 싶습니다. 중급 이하 백앤드 개발자는 이 강의를 들으시면, 프론트앤드 파트는 큰 고민을 덜을 수 있을거 같습니다. 강의 음성도 좋고, 무엇보다 강의 자료 제공이 너무나 좋습니다. 좋은 강의 만들어주셔서 감사합니다. 한가지 부탁을 드리고 싶은것은, 강사님께서 사용하는 VS Code 의 익스텐션을 목록으로 적어주시면 어떠할까.. 싶습니다. 어차피 수강생이 자신에 맞게 설치하겠지만, 기본 가이드 개념으로 좋을거 같거든요.
2021-12-29
지식공유자 Self-coding
강의 수강해 주셔서 감사드리고 좋은 평가 남겨 주셔서 또한 감사드려요. 새로운 프로젝트 동영상을 만들 때 비주얼 스튜디오 코드 에디터 익스텐션 등에 대해서도 소개하는 영상을 간단히 만들어 볼게요. 그럼 다가오는 새해 복 많이 받으세요~
2021-12-29
양경철 thumbnail
5
강의가 매우 도움 됩니다.
2024-02-04