풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]대시보드
월 16,500원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
reset css 에 대한 질문 드립니다.
안녕하세요. 올려주신 강의 재미있게 수강 하고 있습니다.그런데 오랫동안 궁금했던 부분이 있어서요, 가능하시다면 답변 부탁 드립니다."모던 CSS 배경 지식의 이해" 편의 8분 50초 정도부터 나오는 reset.css (css 초기화) 에 대한 내용입니다. 강사님께서는 normalize.css 의 cdn 을 사용하여 초기화 시키는 방법을 공유해주셨는데요.사실 이전까지 저는 초보자라 실전에서 사용할 경험도 없고 해서, 잘 아시겠지만 아래와 같은 방법으로 css 를 초기화 했었습니다.* { margin: 0; padding: 0; box-sizing: border-box; }그런데 normalize 를 사용해보니 위와는 다른 결과가 나오더라구요.전체 초기화는 되지 않고 margin 값 등이 남아있던데, 검색해보니 유용한 css 값들은 제거하지 않고 남겨둔다고 합니다.그런데 이 유용한 값의 기준이 무엇인지 모르겠어서 홈페이지나 깃허브에 들어가봤는데사실 못 찾았습니다. 그래서 저는 normalize css 를 사용하되, 전체 선택자로 margin 0을 주고시작하려 하는데, 이렇게 한다면 normalize css 를 사용하는 이점이 없어질까요?혹자는 reset cdn 을 사용하는 대신 전체선택자를 이용하면 브라우저 렌더링이 느려진다고하더라구요. 끝으로, 혹시 올려주신 웹 페이지 만들기 실전 프로젝트 부분 클론코딩 한 것을 개인 깃허브에 게시해도 될지 여쭙고도 싶습니다.감사합니다!
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
자료 요청드립니다.
이메일로 보냈는데 확인을 하지 않으셔서 자료 요청드립니다. guswjdedi@gmail.com
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
자료 다시한번 부탁드립니다 !
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 메일 : ston876@naver.com과거에 코스를 결제하고 이후에 다시 학습을 하려고 했으나, 자료가 분실되어서 다시 요청을 드립니다.번거롭게 죄송합니다.
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
안녕하세요! 메일 확인 부탁드립니다!
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
웹페이지만들기 7편 10분 30초쯤
display: inline-block 가 언제. 적용이 됐을까요? ㅠㅠ저는 그냥 블럭으로만 뜹니다.ㅠㅠ
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
수업관련
헤더 포지션을 fixed로 두고 메인컨테이너에 마진 60을 준 이유는 fixed 다음에 나오는 박스들은(main, mian container class 들).. fixed로 60높이를 띄어놓은것을 인지하지못하나요..?모던웹페이지만들기 5 15분쯤이요!
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
FontAwesome 버전
풀스택 Part2. 프런트엔드섹션7 6강 05:42~05:59 제가 강의 코드를 따라 작성하면서 FontAwesome의 코드를 직접 카피해보니, 웹페이지에 아이콘이 안뜨더라고요. 뭐가 문제인지 싶어서 강의자료에 들어있는 코드를 복붙해보면 아이콘이 제대로 나왔고요. FontAwesome이 업데이트 됨에 따라, 영상 촬영 당시와 현재 사용법이 달라진 것 같습니다! 이리저리 찾아본 결과,CDN 링크(?)를 업데이트해주면 새로운 버전의 아이콘들도 사용할 수 있음을 확인했고요! (2강 11:34~11:43)FontAwesome에서 아이콘 HTML 링크를 카피하여 아래와 같이 수정해주면 웹페이지에 제대로 뜨는것을 확인했는데요! <i class="fa-brands fa-python"></i> <!-- copy --> <i class="fab fa-python"></i> <!-- 수정 -->영상을 다시 보니, 오히려 예전에는 수정 없이 써도 됐었네요.. 이거때문에 며칠을 헤맸는데.. 제가 알아낸건 여기까지지만, 강사님의 시선에서 본 FontAwesome 5,6의 달라진 활용법이 궁금합니다..! 수고스러울 일이지만, 영상 업데이트를 해주신다면 참고하겠습니다!!
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
안녕하십니까 플러터 강좌 개설 예정일이 궁금합니다.
최대한 찾아봤는데 6월에 올리신 댓글에 하반기 개설 예정으로 적으셨더라고요. 혹시 언제쯤 개설 예정인지 궁금합니다.
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
md 파일은 권한을 받아서 공유받아야만 볼수 있나요?>
강의 보는중인데 오늘 메일을 보내서 아직 공유받지 못하고 있는데 하이퍼링크 html가 없어서 완벽히 따라하지 못하고 있네요..
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
클래스 적용
섹션4 - float 강의 (18:03 ~ 18:35 index5) box3 관련 질문입니다!style 태그에는 div의 자식 요소로서 box3 클래스가 정의되어 있는데요.body 태그에서는 div가 아닌 span 태그를 쓰면서 div의 클래스인 box3를 쓴 것으로 확인됩니다!이 경우에, style 태그에서 클래스를 정의할 때, div 태그의 역할이 무엇인지 궁금합니다! style 태그에서 span태그의 자식 요소로 box3 클래스를 정의해야, body 태그에서 span태그로 클래스를 적용할 수 있는게 아닌가 헷갈리네요!!ㅎㅎ
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
수업 자료 권한 신청 메일 확인 부탁 드립니다.
수업 자료 권한 신청 메일 확인 부탁 드립니다.mue@naver.com 으로 어제 저녁에 메일 드렸습니다.
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
수업 관련 질문합니다.
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기 76분 58초여기서 화살표 아이콘이 화면에 안 나타나요. 1번 <i class="fas fa-chevron-circle-left slide-prev"></i> 2번<i class="fas fa-circle-chevron-right slide-next"></i> 1번은 강사님 화면을 보고 그대로 친 건데 이건 화면에 나타납니다. 근데 2번은 제가 직접 fontawesome에서 찾은 아이콘의 코드를 넣은 건데 화면에 안 나타나요. fontawesome에서 html copy code snippet을 붙여 넣은 것도 화면에 안 나타나고 제가 검사창에서 직접 아이콘 부분 코드를 복붙한 것도 안 나타납니다. 업무자동화, 데이터 분석 등의 아이콘도 처음에 제가 직접 fontawesome에서 html 코드 스니펫을 복붙한 건 안 나타났는데 검사 창에서 코드를 복사하니 나타났거든요. 그게 강사님 코드랑 똑같더라고요. 근데 화살표 아이콘은 강사님이랑 똑같이 코드를 치지 않으면 화면에 나타나질 않아서 제가 아이콘을 바꾸고 싶을 땐 어떻게 적용해야 하는지 알려주세요.지금까지 작성한 전체 코드입니다.index.html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>잔재미코딩</title> <meta name="description" content="잔재미코딩 온라인 강의 리스트" /> <meta name="keywords" content="Online Lecture" /> <meta name="author" content="Dave Lee" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta property="og:type" content="website" /> <meta property="og:title" content="잔재미코딩" /> <meta property="og:description" content="잔재미코딩 온라인 강의 리스트" /> <meta property="og:image" content="img/fun-coding-mark.png" /> <meta property="og:url" content="https://www.fun-coding.org" /> <meta property="og:site_name" content="잔재미코딩" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="잔재미코딩" /> <meta name="twitter:description" content="잔재미코딩 온라인 강의 리스트" /> <meta name="twitter:image" content="img/fun-coding-mark.png" /> <meta name="twitter:url" content="https://www.fun-coding.org" /> <meta name="twitter:creator" content="Dave Lee" /> <link rel="stylesheet" href="css/styles.css" /> <link rel="icon" href="img/fun-coding.ico" /> <link rel="apple-touch-icon" href="img/fun-coding.ico" /> <link rel="shortcut icon" tyle="image/x-icon" href="img/fun-coding.ico" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> <script src="https://kit.fontawesome.com/f1def33959.js" crossorigin="anonymous" ></script> <link href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <header> <div class="inner"> <div class="head-container"> <div class="head-brand"> <a href="https://www.fun-coding.org">잔재미코딩</a> </div> <div class="head-blog"> <a href="https://www.fun-coding.org/daveblog.html" >잔재미코딩 블로그 모음</a > </div> </div> </div> </header> <section class="main"> <div class="main-container"> <div class="inner"> <div class="title-container"> <div class="title">광고보다 강의에 집중합니다</div> <div class="message"> 전자책보다 좋은 자료와 현업의 경험을 함께<br /> 검증된 온라인 강의를<br /> 검증된 온라인 플랫폼에서 제공합니다. </div> </div> </div> </div> </section> <section> <div class="inner"> <div class="skill-container"> <div class="skill"> <i class="fab fa-python skill-icon python-style"></i> <div class="skill-title"> <div class="skill-name">업무 자동화</div> <div class="skill-usage">크롤링/자동매매</div> </div> </div> <div class="skill"> <i class="fas fa-chart-bar skill-icon analysis-style"></i> <div class="skill-title"> <div class="skill-name">데이터 분석</div> <div class="skill-usage">데이터 분석</div> </div> </div> <div class="skill"> <i class="fab fa-app-store-ios skill-icon ai-style"></i> <div class="skill-title"> <div class="skill-name">AI</div> <div class="skill-usage">인공지능 활용</div> </div> </div> <div class="skill"> <i class="fab fa-vuejs skill-icon vue-style"></i> <div class="skill-title"> <div class="skill-name">풀스택</div> <div class="skill-usage">웹/앱 서비스</div> </div> </div> </div> </div> </section> <section> <div class="inner"> <div class="roadmap-container"> <div class="roadmap-title-container"> <div class="roadmap-title">잔재미코딩 관련 블로그 및 서적</div> <div class="arrow-container"> <i class="fas fa-chevron-circle-left slide-prev"></i> <i class="fas fa-circle-chevron-right slide-next"></i> </div> </div> <div class="class-list-container"></div> </div> </div> </section> <footer></footer> </body> </html> style.css* { box-sizing: border-box; } body { margin: 0 auto; color: #3f464d; font-family: "Spoqa Han Sans Neo", "Sans-serif"; } a { all: unset; } a:link { text-decoration: none; color: #3f464d; } a:visited { text-decoration: none; color: #3f464d; } a:active { text-decoration: none; color: #3f464d; } a:hover { text-decoration: none; color: #3f464d; } .inner { width: 100%; height: 100%; margin: 0 auto; padding: 0 2rem; } header { width: 100%; height: 60px; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 1000; } .head-container { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; } .head-container .head-brand { font-weight: bold; font-size: 1.2rem; } .head-container .head-brand a:hover { color: #2186c4; cursor: pointer; } .head-container .head-blog { font-weight: bold; font-size: 1.2rem; } .head-container .head-blog a:hover { color: #2186c4; cursor: pointer; } section { width: 100%; background-color: #fff; position: relative; } .main { height: 360px; background-image: url("https://www.fun-coding.org/assets_lms/images/photodune-4161018-group-of-students-m.jpg"); background-size: cover; background-position: center 10%; background-repeat: no-repeat; z-index: 1; } .main-container { width: 100%; height: 100%; background-color: rgb(47, 48, 89); opacity: 0.8; z-index: 2; margin-top: 60px; } .title-container { padding-top: 100px; padding-bottom: 100px; } .title { font-size: 2rem; font-weight: bold; color: #fff; margin-bottom: 0.8rem; } .message { font-size: 1.4rem; font-weight: normal; color: #fff; line-height: 2rem; } .skill-container { width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; } .skill { width: 25%; background-color: #fff; display: flex; align-items: center; border-radius: 9px; padding: 0.5rem 1rem; margin: 0.1rem; box-shadow: 10px 10px 10px -5px rgba(25, 42, 70, 0.2); } .skill-icon { font-size: 2.5rem; margin: 0 10px; } .skilltitle { display: flex; flex-direction: column; align-content: center; } .skill-name { font-weight: bold; color: #54536f; margin-bottom: 0.2rem; } .skill-usage { font-size: 0.9rem; color: #54536f; } .python-style { color: #2186c4; } .analysis-style { color: #ff8066; } .ai-style { color: #f7df1e; } .vue-style { color: #2e7d32; } .roadmap-container { width: 100%; margin-top: 2rem; } .roadmap-title-container { width: 100%; display: flex; justify-content: space-between; align-items: center; } .roadmap-title { font-size: 1.3rem; font-weight: bold; color: #54536f; } .slide-prev { font-size: 2rem; cursor: pointer; color: rgb(47, 48, 89); } .slide-next { font-size: 2rem; cursor: pointer; color: #cfd8dc; } @media only screen and (min-width: 1200px) { .inner { max-width: 1200px; } } @media only screen and (max-width: 980px) { .skill-container { display: none; } }
- 해결됨풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
const 관련 질문
const의 경우 값을 아예 재설정이 불가능한것은 이해가 갔습니다. const testValue10 = 1; testValue10 += 1;위의 경우에는 testValue의 값이 2로 변환되어서 그런것인데 const testValue10 = false; console.log(!testValue10);다음의 경우에는 const가 사용이 가능하더라구요,,,이게 가능한 이유가 1번째 사례는 testValue의 값 자체가 2로 변환되어서 그런것이고, 2번째 경우는 testValue의 값은 여전히 false지만 console.log를 통해 우리가 보는 화면의 값만 true로 바뀌어서 const의 사용이 가능한건가요?
- 해결됨풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
symbol 관련질문
javascript에서의 symbol은 쉽게 설명하자면 html의 id와 비슷한 느낌이라고 이해를 했고 symbol 괄호 안의 값은 html로 치자면 id의 네이밍을 지어주는 것이라고 이해를 했는데 이 부분이 맞는걸까요?추가적으로 symbol 타입의 경우 값이 null이 나오게 되는데 symbol에는 다른 값을 지정해줄수 있는 방법은 따로 없는걸까요?
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
권한 요청 메일 확인 부탁드립니다
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요.주말에 filament3@eco.co.kr이 메일로 수업 자료 권한 요청 메일 보냈는데 아직 답이 없어서 문의 드립니다.
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
html정리
HTML5 기본템플릿 코드 이해 수강관련 사용되는 자료 어디서 구할수있나요?ㅜㅜ
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
css_layout.pdf 파일에 링크오류 질문 드립니다.
안녕하세요.34강 수업끝 마무리 지으실때 css_layout.pdf 파일에4.1 복습해서 Outpan Flexbox Playground 링크에 들어가니, 오류가 뜨면서 웹페이지가 일시적으로 다운되었거나 새 웹 주소로 완전히 이동했을 수 있습니다.라는 문구가 뜨면서 오류가 나는데 왜 이러는 걸까요?
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
이미지 파일들은 어디서 다운 받나요 ?
강의에서 사용된 이미지 파일들 어디서 받은지 궁금합니다!
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
안녕하세요! section으로 질문드립니다!
안녕하세요 선생님! section 태그에 따로 클라스를 주어서백그라운드 이미지를 넣고 그 안에 main-container를 만들어서 불투명한 박스를 만들고 나중에 이너 작업을 해서 텍스트가 들어가도록 하셨는데혹시 section에 클라스를 따로 부여하지 않고 100% 영역으로 잡은 뒤에div-inner를 바로 넣고 그 안에 다른 div 태그를 만들어서 배경화면, 불투명 박스, 텍스트를 넣어줘도 문제가 없을까요?? 아래처럼요!<section> <div class="inner"> <div class="main"> <!--백그라운드 이미지--> <div class="main-container"> <!--불투명 박스--> <div class="title-container"> <div class="title"></div> <div class="message"></div> </div> </div> </div> </div> </section>
- 미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
메일 확인 부탁드립니다
안녕하세요 며칠전에 권한 요청 메일 보냈는데 회신이 오지 않아서 다시 보내고 게시판에도 말씀드립니다. 감사합니다