-
[패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 1주차IT 웹개발 2022. 12. 31. 15:31
본 내용은 국가에서 운영하는 직업훈련포탈 (HRD-Net)의 국민 내일배움카드를 무료로 발급받아
국비지원교육인 K-digital 기초역량훈련소로 유명한 패스트캠퍼스 국비지원 온라인과정을 선택하여 강의 실습후기를 작성하는 글입니다.
국가에서 운영하는 직업훈련포탈 (HRD-Net)에 들어가면 국민내일배움카드를 무료로 발급받을 수 가 있다.
https://www.hrd.go.kr/hrdp/ma/pmmao/newIndexRenewal.do
직업훈련포털 HRD-Net
www.hrd.go.kr
물론 발급절차나 발급제한사항등이 있어 꼼꼼히 관련링크를 읽어본후 진행한다면 별 무리 없이 1주일안에 카드를 발급받을 수 가 있다.
신청후 일정기간 기다리면 발급확인서가 나오는데 해당 은행에 가면 바로 체크카드를 받아 사용할 수 가 있다.여러 국비지원교육인 K-digital 기초역량훈련소로 나는 패스트캠퍼스 국비지원 온라인과정을 선택했다.
강의내용이나 수업관리방식도 좋고 혜택도 많아 매우 맘에 들었기 때문이다.
https://fastcampus.co.kr/b2g_nbacademy
패스트캠퍼스 내일배움 아카데미 | 패스트캠퍼스
패스트캠퍼스의 강의를 국비지원으로 무료로 수강하세요!
fastcampus.co.kr
그 중에 첫번째로 선택한 과정은 이제 막 코딩을 배우기 시작한 왕초보자들을 위한 "코딩 1:8 웹 개발 왕초보 입문" 이다.
수강과정을 열심히 열공하고 챌린지 하면 자기부담금 4만원도 환급, 강의 평생소장권 제공, 패스트캠퍼스 전과정 3개월 무료자유이용권등여러가지 좋은 혜택등이 많으니 코딩에 처음인 분들에게 강력 추천을 한다.
강의중 언제나 궁금한 사항은 1:8 소그룹 관리앱 (슬랙)을 통해 학습실습코치님과 소통하며 내가 궁금해하는 부분이나 막힌부분을 코칭을 통해 해답을 찾을 수가 있어 더욱 좋다.
학습진도관리하는 슬랙(Slack)은 같이 공부하는 소그룹 멤버들과 학습완주를 같이 할 수 있게 많은 도움과 의지를 준다.
학습범위도 내가 평상시 궁금해 했던, 전반적인 웹개발 풀스택 커리큘럼을 가지고 왕초보자도 쉽게 따라 올 수 있게 5주차 과정으로 주차별로 진행되어 현재 매우 흥미롭게 수업에 참여하고 있다.
이제 1주차 강의를 마치고 과제물(숙제)로 당당마켓의 상품리스트를 만들어 보았는데 처음에는 부트스트랩에 대한 이해가 부족하여 그냥 내가 아는방식대로 HTML, CSS를 코딩해서 만들어 봤는데, 나름 만족했지만 결과물에 대한 해설과정을 보니 부트스트랩이란 코딩을 잘 모르는 사람도 쉽게 CSS코딩과 자바스크립트 기능을 코딩에 넣어 만들 수 있게 도움을 많이 주는 일종의 라이브러리 같은 것이었다.
자세한 내용은 아래 링크를 참조하면 된다.
Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기
getbootstrap.kr
* 아래 작성 코드을 해보고나서 부트스트랩을 배웠을때 CSS부분이 간소화 되는걸 볼수가 있었다.
HTML
<html lang="ko"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <link rel="stylesheet" href="./styles.css"> <title>1주차 실습</title> </head> <body> <div class="product-list"> <div class="media"> <img class="product-image" src="prod1.jpg" alt="장남감블록"> <div class="media-body"> <ul class="list-group"> <li><strong>장남감 블록</strong></li> <li><small>성수동</small></li> <li><span>20,000원</span></li> </ul> </div> </div> <hr> </hr> <div class="media"> <img class="product-image" src="prod2.jpg" alt="곰인형"> <div class="media-body"> <ul class="list-group"> <li><strong>곰인형</strong></li> <li><small>성수동</small></li> <li><span>50,000원</span< /li> </ul> </div> </div> <hr> </hr> <div class="media"> <img class="product-image" src="prod3.jpg" alt="곰인형2"> <div class="media-body"> <ul class="list-group"> <li><strong>곰인형2</strong></li> <li><small>장안동</small></li> <li><span>9,000원</span></li> </ul> </div> </div> <hr> </hr> <div class="media"> <img class="product-image" src="prod4.jpg" alt="곰인형3"> <div class="media-body"> <ul class="list-group"> <li><strong>곰인형3</strong></li> <li><small>고잔동</small></li> <li><span>30,000원</span></li> </ul> </div> </div> </div> </body> </html>CSS
.product-list { max-width: 400px; padding: 20px; background-color: whitesmoke; } .product-image { width: 100px; } .list-group { padding-left: 10px; list-style-type: none; } span { font-size: 14px; font-weight: lighter; }수업에서 다루고 있는 부트스트랩을 이용한 코딩으로 바꾼다면 결과는 비슷하지만 더 깔끔하고 쉽고 편한 코딩을 할 수 있다는것을 깨닫게 해준 1주차 강의 였다.
부트스랩트 코드를 활용한 코딩은 좋은 결과를 가져온다는걸 알 수 가 있다.
CSS
.product-list { max-width: 400px; padding: 20px; background-color: whitesmoke; } .product-image { width: 100px; }※ 결과화면
블로그에 대한 내용중 궁금한 사항은 좋아요와 함께 댓글을 남겨주시면 성심껏 답변을 드리도록 하겠습니다.
저의 티스토리 블로그 첫글을 끝까지 읽어주시어 감사합니다.
'IT 웹개발' 카테고리의 다른 글
jQuery 란? (0) 2023.03.29 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 5주차 (0) 2023.01.20 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 4주차 (0) 2023.01.20 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 3주차 (0) 2023.01.11 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 2주차 (0) 2023.01.07