JS파트에서 toggle 에러현상을 경험하여 공유하고자 댓글을 씁니다. 혹시 같은 문제로 고민하시는 분들이 계실까봐요. 메뉴바를 클릭했을 때 메뉴와 아이콘이 일시적으로 나타났다 바로 사라지는 현상이 생겼는데 html에서 a href=" " 이 부분이 공백으로 되어서 그런 현상이 발생하는 것 같습니다. a href= "#"을 넣어주면 메뉴와 아이콘이 일시적으로 나타났다 사라지는 현상이 없어집니다. 참 사소한 거라 생각했는데 사소한게 아니었네요.
여러분~ 영상에서 제가 가이드해드린것처럼 여러분 레벨에 맞게 꼭 실습 먼저 해보시구요 🙏🏼 동작하는 사이트를 보면서 먼저 만들어 보고 싶으시다면: dream-ellie.github.io/responsive-nav-bar/ 최종 코드는 여기서 확인해 보세요(꼭 먼저 해보고 소스 보셔야 돼요 😉): github.com/dream-ellie/responsive-nav-bar 그리고 영상에 빠지거나 실수한 내용들: 17분36초: 하기전에 body {} 스타일 위에 이걸 추가해주세요 * { box-sizing: border-box; } 박스모델에 패팅과 보더의 사이즈를 아이템 너비와 높이에 포함해 달라고 말하는 거예요 :) 18분47초: toogleBtn -> toggleBtn 실습 내용중에 더 좋은 방법이 있거나, 부족하거나, 이해가 되지 않는 부분은 꼭 코멘트로 알려주세요 ❤️ 그리고 여기에 페이지를 더 만들거나, 더 추가해서 만들어 보시면 좋을 것 같아요 :) 다음엔 실제 웹사이트 따라 만들기로 만나뵐께요~ 🤗
몇시간째보고 있는데 .navbar_menu li:hover{ background-color:#d49466 ; border-radius:4px; }이부분이 작동이 않돼요 화면 줄였을때 메뉴가 로고 아래로 가고요 ㅠㅠ 제 컴이 이상한거 같아요 . 디버깅으로 하면 launch.json 파일도 생성되고...주말에 해야 겠다요 코로나로 격리 하고 있는 틈에 유용한 시간 이 되었습니다 감사합니다.
너무 좋은 강의 입니다. 완전 생초보라서 1번째 : 그냥 강의 듣기 2번째 : 타이핑 치면서 듣기 3번째 : 다시 강의 듣기 3-5 한번 만들어보기 4번째: 다시 강의 들으면서 내가 만들면서 생각했던 부분이 이랑 비교하면서 듣기 4-5번째 : 다시 만들어보기 5번째 : 설명을 끊어 들으면서 왜 이렇게 했을까 고민하고 검색하면서 새롭게 노트정리(4시간쯤 걸린듯.) 이제 강의 노트 보면서 또 만들러 가려구요, 정말 알차게 들었습니다. 감사합니다. ㅠㅠㅠㅠㅠㅠㅠ
저는 HTML CSS 문법 한번 쓰윽 본 정도이며 선생님이 주신 안경 하나 가지고 있습니다. 패딩문법 볼때 지루하게 느껴지고 개념이 막막했는데 선생님 영상보구 실제 이런 문제가 생기고 이렇게 해결할 수 있구나 감동1 텍스트 색깔 지정해놓고 한번에 바꾸는 효울성 보고 감동2 여러가지 폰트나 아이콘 디자인을 적절히 찾아 알맞게 쓰는 방법에 감동3 했습니다. 마지막으로 다른 영상에서 머리 아프던 앱솔루트 개념을 이해할 수 있게 되었습니다. 이 영상은 문법 공부로 영혼이 나가고 작심삼일일떄 보면 좋을 영상으로 추천합니다 무엇을 개발할지 시각적으로 보여주어 동기부여가 퐉퐉됩니다. 특히 너무나 똑소리나는 목소리와 적절하고 멋진 그래픽 효과에 참 즐겁게 시청할 수 있었습니다 선생님 여러가지 영상을 보고 열정적이며 진지한 삶의 태도에 힘을 얻었으며, 영상 볼 때마다 매번 받기만 하는 것 같아 다소 긴 리뷰를 남겨봅니다. 좋은 일 가득하시길 화이팅
어머 어쩜 이렇게 정성스러운 코멘트를 달아 주실 수가 있죠? 정말 감사합니다 ❤️ 정말 상세하게 유용했던 점들을 나열해 주신걸 보니 정말 열심히 강의를 보고 따라와 주신거 같아서 정말 뿌드하네요 🙌 그냥 지나가시지 않고 이렇게 시간내어 작성해주신 소중한 코멘트 정말 감사합니다. 그래서 📌 핀해놓을께요 ❤️ 감사합니다 Cavin님!
제가 여러 강의를 봤지만 이렇게 꿀팁 + 자세하게 알려주시는 분은 엘리님이 최고입니다. 엘리님의 영상을 볼 때는 자기만의 전자노트 or 수필로 꼭 자기 방식대로 정리를 해야합니다. 이 영상도 27분짜리지만 저는 OneNote에 정리하면서 듣느라 한 시간 넘게 걸렸네요. 유튜브 첫 영상 부터 정주행 하면서 계속 정리중입니다. 정주행 후 필요시에 강의도 결제해서 수강하겠습니다. 꾸준히 양질의 영상을 만들어주셔서 진심으로 감사드립니다. 👍🙂
출석합니다. 저는 입문자라 미리 만들어 보지는 못하고, 그렇다고 영상 한번 쭉 보고 나서 한번에 만들 수준은 아니라서 영상을 6군데(큰사이즈 3부분 @media 부분부터 3부분. ) 나눠서 해봤어요. 거의 영상 보고 카피하는 수준이라 시간은 오래 걸리지 않았지만, 몇번 더 연습해 보고 안 보고 해볼려고 합니다. 코딩하시면서 꼼꼼히 설명해 주시는 엘리님은 입문자와 기초가 부족한 사람에게 너무나 좋은 안내자에요!! 아무것도 모르는 아이에게 설명하시는것과 같은 친절한 설명에서 각 태그에 대한 개념과 기초가 자리잡게 되는거 같아요. 앞으로도 지금과 같은 꼼꼼한 설명이 실리는 영상 강추합니다. 기초만 조금더 탄탄히 다지고 나머지 영상과 드림코딩 강의 모두 뽀시러 가겠습니다. 갑사합니다. ^^
강의 너무 좋습니다 ㅠㅠ 저는 한번에 만드는게 힘들어서 1. 아무것도 없이 영상 정독 2. 영상없이 혼자 만들어보려다가 중간중간에 계속 막혀서 영상보면서 따라만들어보기 3. 영상없이 혼자 만들어보기 이렇게 했어요 ! 기억 어느정도 사라지는 내일 다시한번 영상없이 만들어보기 해보겟심다!
그동안 유료강의, 도서에 꽤많은 돈과 시간을 써왔는데 벼락치기로 수능 기출문제 풀듯 진도 따라가기에 급급하다보니 뒤돌아서면 다시 답안지를 찾던 저를 발견했습니다.. 엘리님 강의를 보며 기초부터 다시 시작한다는 마음으로 스스로 생각하고 코딩하는 방법, 공식문서 확인하는 방법을 배우며 도움이 정말 많이 받고있습니다! 위 영상에서 제시해주신 1, 2번 방법으로는 도저히 키보드에 손이 안올라가서 3번방법으로 네다섯번 반복하고나니 손이 알아서 반응하는 것 같아서 성취감과 재미는 덤으로! 아, 그리고 중간중간에 영어발음도 따라하고 있어요 자주 써주세요!
강의 잘 듣고 있습니다 :) 우선 아직 화면만 보고 바로 뚝딱 만들 수 있는 수준은 아니라서 ㅠㅠ 1. 섹션마다 처음에는 어떤걸 이용해서 만들겠구나 간단히 예상해보고 (대부분의 예상은 빗나가죠) 2. 구현 전에 강의를 먼저 듣고 (1. html 레이아웃, 2. CSS 스타일링 ... ) 3. 잠시 멈추고 안보고 따라해보고 4. 차이점 확인하고 메모하고 5. 다음 섹션 넘어가고 이렇게 반복하면서 익히고 있습니다. 정리를 잘 해주셔서 공부하기도 편합니다. 특히 제일 좋은 점은 이 태그, 이 속성을 왜 사용하는지 설명해주시고 심지어 VS Code 에서 indent 를 space 2 로 설정하는 이유나 현업에서 팁들도 공유해주시니까 많은 도움이 됩니다. 그리고 목소리랑 발음이 너무 좋으세요! 다른 유료강의도 들어봤는데 다 합쳐도 엘리님 강의가 넘버원이에요!
우와 코멘트로 어떻게 강의를 따라와주셨는지 자세히 남겨 주셔서 너무 좋은것 같아요 🙌 열심히 생각을 먼저 해보시고, 듣고 또 준드래곤님 스스로 하시면서 따라하신거 같아서, 올바른 방법으로 배우시는거 같아서 너무 좋구요. 그렇게 꾸준히 하시면 실력이 금방 느실거라구 100% 믿습니다 ❤️ 그리고 좋은 피드백 너무 감사해요~ 넘버원이라니 🥰
전 강의 들으면서 로고 만든다고 하실때 잠깐 멈춰서 미리 만들어 보고 다시 재생해서 만드시는 과정이랑 결과를 비교하고 메뉴 만든다고 하실때 잠깐 멈춰두고 미리 만들어 보고 다시 재생하면서 만드시는 과정이랑 결과를 비교하는 방식으로 했습니다. 그리고 이번 강의가 끝나면 아애 처음부터 안보고 다시 만들어 보려고 합니다. 항상 지루하지 않는 재미있고 좋은 강의 해주셔서 감사합니다!
개발학원을 다니다가 커리큘럼이 저와 맞지 않다는걸 알고 나와서 독학하는데 너무 막막해서 유튜브, 넷플릭스를 보며 현실을 회피하고 있었습니다. 우연히 이 영상을 보고 엘리님의 HTML, CSS영상을 처음부터 다보고 다시 여기로 와서 따라 만들어 봤는데 덕분에 자신감이 생겼습니다. 제가 진정으로 무엇을 해야 할 지 모르는 와중에 이런 영상을 보게 해 주셔서 정말 감사합니다.
11:37 엘리 선생님 질문입니다. 여기서 마우스 올렸을 때 선생님처럼 공간 확인이 안되는 건 왜그럴까요. brackets 사용할 때는 선생님과 같이 확인가능합니다. 임시방편으로 background-color 넣어서 확인하였는데 혹시 vscode에서는 추가로 확장 프로그램 설치해야하는 것 일까요? ** option + command + i 눌러서 확인되네요 ! 해결하였습니다 :)
17년 전 웹디자이너로 일하고 지금은 열심히 아이들 키우는 두 아이 엄마입니다~ 다시 디자인을 할 자신은 없지만 html 코딩을 할때는 너무 재밌었던 기억이 나서 html과 css를 다시 공부해요. 엘리님 강의를 하나하나 따라하며 코딩 공부해요 ^-^) js와 css를 배울때 마다 너무 재밌어욧~ (코딩이 적성에 맞나봐요^^) 사실 전 뚜렷한 목표는 없어요~ 다만 하나씩 배우는게 너무 재밌네요~ 그냥 이렇게 즐기며 하다 보면 저도 실력이 자랄거라 믿어요~ 페이스메이커가 되어주셔서 감사해요 (엘리님을 저희 성장 페이스 메이커로 모시겠습니다!) 감사합니다~
정말 앞의 수업만 들은뒤 개념만알고 html에 css를 연결하는 방법도 모르고 모든것들 구글에서 검색해서 만들었는데 예상하신대로 2~3시간정두 걸린거같아요 물론 정말 사전에 보여주신 힌트보고 너비에따라 디렉션 바뀌는것만 구현하고 햄버거아이콘으로 액티비티한것은 생각도 못했고 구현하지도 못했지만 혼자 직접 해본다는게 내가 이런 사소한것도 모르고 넘어갔고, 모든걸 검색해서봐야 쓸수있구나 하는것을 느끼며 엄청나게 도움된거 같아요.
안녕하세요? 엘리님 정말 좋은강의로 진짜 정말 감사히 잘 배우고 있습니다. 궁금증이 조금 생겼는데요, 22:47초 쯤에 querySelector 안쪽 클래스 입력시에 저는 .nav~ 자동완성목록이 안뜨던데 이것도 익스텐션인가요? 이전 영상에 10가지 익스텐션 영상도 다시 봤는데 거긴 없는것 같아서 질문드립니다
1. 힌트 안보고 flex없이 float/inline-block으로 만들었어요 (복붙하던 js부분 빼고) 2. 30분이요! --------💕-------- 영상 시작하고 힌트의 flex보고 아차! 했어요. 새로운 내용을 배워서 너~~무 좋아요!! flex를 배운 뒤 활용한다는 생각을 못했는데, 이렇게 적용해볼 수 있어서 너무 좋았고💕 이번에 리뉴얼 프로젝트에 네비 부분은 flex를 사용할꺼예요! :root 사용법은 알았는데 활용을 못했는데 앞으로의 프로젝트는 모두 사용할꺼예요! js는 마치 처음보는 것 같았답니다.. 화이팅! 감사해요!!!
바쁘실텐데 항상 좋은 강의 감사드립니다. css는 익혔는데 html 짜는게 아직 초보라 혼자 해보다가 안되서 처음에는 강의보고 따라하고 그 뒤로 혼자 만들려고 노력중입니다. 강의 중에 다른건 다 이해했는데 한가지 이해가 안가는 부분이 있습니다..... 17:35 navbar부분에 padding을 주면 navbar__logo부분도 같이 padding값이 적용되게 되는데 logo는 움직이지 않고 navbar__menu에만 padding: 8px 24px;이 적용되는 방법은 없나요? (로고부분이 고정됐으면 좋겠어서요) .navbar__menu나 .navbar__menu li는 width가 100%여서 여기 내부에 코드를 작성하면 padding: 8px 24px;가 적용이 안된다고 쳐도 다른 방법으로 .navbar__logo에 padding: 0;(혹시 몰라서 padding-left: 0;도 해봤습니다..)를 작성해봤는데도 navbar자체에 padding: 8px 24px; 값을 먹인 뒤로 아무런 움직임이 없네요 너무 답답합니다... 저는 계속 해결방법을 찾겠지만 혹시나 제 댓글을 보신다면 늦게라도 답변 부탁드립니다!
요즘 드림코딩 영상을 보면서 공부중입니다. 먼저 한번 보고 생각나는 대로 따라 만들었을 때 30~35분 정도 소요됐습니다. 거의 비슷하게 만들어져서 뿌듯합니다. 영상 너무 잘 보고 있어요. 좋은 컨텐츠 만들어 주셔서 감사합니다. 이런 좋은 강의를 무료로 볼 수 있음에 감사드립니다.
역시 현직 개발자 분이라 알짜베기 강의네요, 이 강의 하나만 봐도 메뉴 작업은 끝나네요 실무에 바로 적응가능 한다 해도 부족함이 없겠네요, 어제 회사에 건의해서 엘리님 React 강의 수강 신청 해달라고 했습니다 개발밥 25년 째 먹고 있지만 IT는 배움에 끝이 없는것 같습니다 좋은 강의 감사 드립니다, 제 밑에 직원들에게도 보여주도록 하겠습니다
아이콘, 폰트 참고자료도 그렇고 이번 강의 엄청난거 같아요 ; 먼저 해볼 때 너무 어려웠던게 padding-left : 0이게 뭔지도 모르고 , 분명 flex 에 center 효과를 주었는데 아무런 변화가 없을 때 멘붕이였어요. 헤메고 나서 강의보니 엄청 많이 배울 수 있었습니다.!! 정말 감사합니다.
오웃! 강의 보기 전에 먼저 해보신거예요? 👏 너무너무너무 잘하셨어요~~~~~ 맞아요 처음에 하면 CSS할때 멘붕이 올 수 있어요. 브라우저에서 기본적으로 지정된 스타일이 있기때문에 ㅋㅋ 그럴때는 크롬브라우저의 개발툴을 써서 element inspector (요소 검사?)로 이상한 아이템위에 마우스를 올려서 왜 그런지 한번 보시면 마진이나 패딩이 들어가있는걸 볼 수 있어요. 그럼 아하! 여기서 이 값이 자동으로 들어가져 있구나, 0으로 리셋해야 겠다하고 아실 수 있어요 :)
실습 하기 전에 미디어쿼리로 틀만 잡는데 소요시간 1시간 30분 걸렸습니다. 자바스크립트 이벤트는 하다 너무 오래걸려서 그냥 마음 비우고 다시 배우기로..ㅜ font-awesome에서 아이콘 얻는 방법이랑 css 색 변수 지정하는거 등등 도움되는 게 너무 많아서 정말 감사하기 이루 말할 데가 없네요 예전 개인 프로젝트 진행할 때 View 단 만드는데 시간이 너무 걸려서 정말 멘탈이 날아갈 뻔 했었는데 엘리님 덕분에 생산성이 너무 향상되는 거 같아서 정말 기쁩니다 다시 한번 좋은 강의 정말 감사드립니다.
출석 완료! 이론과 실무는 정말 차원이 다른 것 같아요.. 자신 있게 일시정지 누르고 시작하다가 처음부터 안 풀려서 그대로 쭉 강의 들었는데, 제가 앞 강의들을 그냥 말 그대로 듣기만 했구나, 하고 깨달았습니다ㅠ 앞 강의를 다시 들으면서 따로 노트에 정리를 해 놔야 응용할 수 있겠다고 내내 생각했어요 ㅋㅋㅋㅋ 오늘도 좋은 강의 감사합니다!!
비전공자인데다 30 넘어서 처음 코딩을 시작한 ㅋㅋㅋㅋ html, css 공부한지 5주차 된 초초초초초보 개발자입니다! 지금까지 무작정 클론코딩 하면서 작은 프로젝트들만 만들었는데 하다보니 html, css 기본기가 (너무나 당연하게도ㅋㅋㅋ) 제대로 안잡혀 있더라구요ㅠㅠ 그래서 엘리님이 올려주신 html,css 기본 강의 다 듣고 여기로 왔어요!!! 덕분에 헷갈렸던 기초 개념 다 잡았어요!! 정말정말정말 감사합니다 :) !!!!!!! 오늘은 제가 html+css로 할 수 있는 부분만 만들어 봤는데 1시간 30분정도 걸린 것 같아요! 역시 엘리님에 비하면 패딩이나 마진이 너무 더럽더럽...하다는 ㅠㅠ... 엘리님꺼 보고 열심히 공부해서 저도 css 깔끔하게 하고 자바스크립트도 탄탄하게 공부할게요! 좋은 강의 정말정말 감사합니다!! 곧 드림코딩아카데미 수업도 들으러 갈게요~💘
엘리 님 말씀대로 처음에는 강의를 쭉 보면서 엘리님이 어떤 방식으로 사고하고 움직이는지 보고 공부했어요. 현업이시니까 아무래도 효율적으로 움직이는 모습까지도 습득하고 싶었고, 그렇게 보다 보니까 어떤 순서로 생각하고 움직이면 좋을지 보이더라구요. 그렇게 한 번 쭉 본 다음, 한 파트씩 기억나는 대로 따라하고, 막히면 강의 보고 같은 속도로 따라하는 방식으로 공부했어요. 지금 이 강의 세 번 정도 봤고, 이제 처음부터 끝까지 혼자 해 본 다음에 엘리님과 함께 한 코드와 비교해보려구요. 정말 감사합니다. 오늘도 출석체크해요!
역시. 실습에서 갑자기 난이도 상승! ^^; 솔직히 선생님 말씀 안듣고 몇번 볼 생각으로 보면서 따라했어요. 세번째 실습방법도 자신이 없어서요;; 그래도 대충 한번은 따라해보니 개념은 알 것 같아요. 물론 안보고 만들라면 하나도 못 만들겠지만요~ 안보고 만들 수 있도록 외우던지 해야겠어요 ^^; 아 그리고 영상의 23:37 처럼 동시에 쓰는것도 궁금하긴 하네요. 물론 초보니까 일일히 타이핑 해보는게 더 좋겠지요? 그래도 역시 어려워도 실습이 재미있네요. 바로바로 결과물이 나오니까요~ ^___^ 감사합니다~~
html 배워보고 싶어서 검색하다가 엘리님 강의를 보고 저의 첫시작을 엘리님 영상으로 시작했어용! 오늘이 3일째인 정말 쌩쌩쌩 초짜라ㅜㅜ 첫 번째는 영상을 보고 따라해보고 두 번째는 필기 해놓은 걸 보고, 세번째는 살짝 컨닝하며 해보고있습니다. 네번째는 도움없이 할 수 있기를~~ 그래도 꼭 한번 스스로 다 완성할 때까지 해보려고요. 엘리 선생님 강의 정말 너~~무 좋습니다. 입문자도 따라할수 있게 해주셔서 너무 감사해요!
유튜브 사이트 따라 만들기 시작하려다가 하나둘씩 강의를 듣게되었는데 가장 기본적인 타입스크립트로 이렇게 짜는것부터 익히고 익숙해져야 이후에 라이브러리도 좀더 쉽게 사용할 수 있겠다는 생각이 들었습니다. 이전에 타입스크립트 공부를 좀 하긴 했지만.. 자바스크립트에 대한 지식 없이 리액트 라이브러리만 공부하다보니 상당히 어려움이 많이 느껴지더라구요. 지금도 드림코딩을 통해 기본 지식도 쌓아가면서 리액트 라이브러리도 같이 공부하고있지만 정말 깔끔하게 귀에 쏙쏙 들어오게 가르쳐주신다는 느낌을 매번 받고 있습니다. 항상 감사합니다🙇♂️🙇♂️🌹
Dear Ms. Ellie, Thank you so much for putting your precious effort and time in making an excellent and informative tutorial like this. My approach in utilizing this tutorial was 1.watching the tutorial without taking notes for understanding purposes. 2. follow along exact steps demonstrated by tutorial on my VSC. Unfortunately though Emmet abbr. wasn't working on my VSC, so I manually typed everything. I made notes of your explanation directly on my VSC so that I can refer to the explanation when I review my notes. 3. I haven't yet but I'm planning to make the header as I'm watching the tutorial live. Again I appreciate your generosity in sharing these wonderful educational resources with the community! ^^
너무너무너무너무너무너무너무너무너무 잘 들었습니다 !! 저는 생활코딩 자바스크립트까지 듣고 바로 이 강의듣고 시도해봤는데 30분 안에 만들기는 실패해서 (grid, fr 쓰려고 검색하다가 시간낭비) 1.~css로 꾸미기 2. javascript 로 나누고 각각 강의 반복해서 보다가 이해간다 싶으면 안보고 만드는 과정을 거쳤어요. 3시간 정도 걸린 것 같습니당
입문자 편이지만 경력자에게도 좋은 영상 입니다 흔히 풀스택으로 일하고 있는데 모르는 부분도 있네요 경력은 많지만 공식사이트 이용보다는 구글검색 스택오버플로우 검색해서 많이 해결하다보니 새로운 태그나 더 좋은 사용법이 나와도 기존방식을 고수하는 면이 있는것 같아요 강의를 몇개봤는데 그냥 어떻게 써라보단 공식사이트나 잘 정리된 사이트에서 찾는법을 알려주셔서 좋은것 같습니다 좋은 영상 감사합니다
풀스택 경력자이시라니 반가워요 ❤️ 그냥 지나가시지 않고 이렇게 코멘트 남겨 주셔서 정말 감사해요 🤗 네네 그냥 알려드리는것보다 찾는 방법을 알려 드리면 드림코더 분들이 추후에 스스로 더 찾아 보면서 공부하실 수 있을것 같아서 최대한 찾는 방법을 알려 드리려고 노력하고 있어요 :)
혼자서 해보다가 icon찾고, text 색 바꾸고 하는데 엄청 시간이 걸렸네요. 두 종류 모두 레이아웃은 만들었는데 media query로 예쁘게 위치를 재조정하는게 쉽지 않았네요. (absolute를 사용한다는 생각을 못했습니다 ㅋㅋ..) 머리를 많이 굴려야 할 것 같습니다. 결국 영상보고서야 아 이렇게 하면되는구나 했습니다. 영상에서는 nav를 쓰셨는데 전 header라고 생각해서 header라고 썼습니다. 아직까지는 이 두가지 차이점을 잘 이해하지 못한것 같네요 ㅠㅠ 다시 처음부터 짜보면서 복습하도록 하겠습니다. 좋은 강의 감사합니다!
입문자입니다. 저는 3번의 방법으로 시작해서 한번스스로 만들어보았습니다. 자바스크립트는 아직 몰라서 그대로 썼구 css의 경우는 몇가지 빼먹은 속성들이 있었지만... 그래도 열심히 생각하며 만들었어요.. 대략 1시간40분넘었네용.. 반복적으로 만들어보며 익숙해지고 아직 어려운것도 있어 그부분에 대해 영상을보며 더욱 심화적이게 이해해야겠습니다.!
안녕하세요! 프론트엔드 개발자 입문편 강의를 계속해서 보고 있는 학생입니다! 우선 이렇게 좋은 강의 해주셔서 너무너무 감사드려요ㅠㅠ 여쭤볼게 있어서 댓글 남기는데, 19:48 에 navbar_togglebtn의 위치를 absolute로 했는데 영상처럼 위로 올라가지 않는 경우는 왜 그런건지, 궁금합니다!
솔직히 거의3일동안 혼자해보다가 머리싸매고 동영상보고 계속 반복했습니다. 그냥 추가로 찾아보지 않고 강좌만 봤던 터라 display:none같은건 까먹기도 했고 media 쿼리는 좀 어려웠습니다. 하지만 그러다보니 창을 줄였을때의 flex box의 배열같은건 동영상을 보지 않고도 할 수 있게 되었습니다 시간은 좀 걸렸지만 확실히 엄청 성장했다는게 느껴집니다. 그리고 실전연습을 해보니까 저 스스로도 검색하고 알려주신 사이트를 찾아서 추가로 공부를 하면서 성장한 것 같습니다.
17:30 과정 실행중에 메뉴가 가운데에 안오고 살짝 오른쪽으로 배치되요ㅠㅠ 확인해보니 부모 padding 만큼 움직여있는데 혹시 방법 없을까요? 이것때문에 메뉴가 가운데 배치는 안되는 것은 물론 메뉴 요소의 왼쪽에는 여백이 보이는데 오른쪽에는 여백이 보이지 않아요.. 한시간째 처다보는데 너무 답답해서 글 남깁니다.
반응형웹 너무 재밌게 강의 잘 들었어요. 학원에서 배웠는데도 막상 할려면 머리속이 하얘져요. 엘리언니 강의 너무 시원시원하고 깔끔해서 좋아요. 아직 이 간단한 것도 혼자 할 실력안되서 한번 들어보고 할라했는데 한번 더 듣고 해봐야 할거 같아욤.ㅋㅋㅋ 해보고 다시 올릴께욤^^ 감사해요
안녕하세요 엘리님. 힌트만 보면서 5:15에서 pause 해놓고, 그대로 만들어보려고 노력중인데요 ㅠㅠ logo랑 links는 세로로 가운데가 잘맞춰지는데 menu가 세로로 중간정렬이 안되네요. 어디가 틀린걸까요..ㅠㅠ 제가 쓴 전체코드 올려볼게요 ㅠ [ html 코드 ]
실전편으로 들어가게되서 너무 감사하고 기쁩니다 ㅎㅎ 너무나 기본적인 질문일수있는데.. 11:37부분에 spacing에대해서 말씀하시면서 menu bar에 커서를 갔다대면 padding이 있는지 없는지 나오는데 f12버튼을 눌러서 확인하시는건가요? 아니면 다른 방법이있나요..? 12:00부분에 menu아이템들의 사이를 띄어줄때 flex-box를 이용해서 list item들을 space-between으로는 띄어줄 수있는 방법은 없는건가요? 바쁘실텐데 혹시나 시간되신다면 답변부탁드리겠습니다 ㅎㅎ 감사합니다:)
16:08 navbar__logo만 왼쪽으로 정렬하면 되는 상황에서 @media query안에 navbar__logo{self-align : flex start}하면 logo만 왼쪽정렬이 되더라고요. 그리고 이렇게 하면 menu list 들이 변경사항에 따라서 왔다갔다 하지 않습니다. 굳이 navbar 전체를 flex-start한 이유가 있을까요??.
프론트엔드 강의들을 쭉 찾아보고 들어도 보고 했는데 엘리님의 강의가 가장 이해도 잘되고 교육 마지막에 주시는 선물들이 큰 도움이 되네요ㅎㅎ 드림코딩 유료 강의 전에 무료 강의들 먼저 듣고 있는데.. 자바스크립트까지 듣고 넘어가야될까요? 유튜브강의와 유료강의 듣는 순서가 궁금하네요 아 ! 그리고 강의중에 궁금한게 21:01에서 왜 display:block; 을 해야지 nav__toogleBtn이 보이게 되는걸까요?ㅜㅜ
양질의 강의 진심으로 감사합니다. Web Dep 공부를 시작한 지 얼마 안되는데 마음이 앞서서 공부를 하다보면 배웠던 내용들이 뒤죽박죽 섞입니다. 그러던 중 엘리님 강의를 우연히 듣기 시작하면서 도장깨기 하듯 깔끔히 머릿속 정리를 할 수 있었습니다. 요번 강의는 먼저 한번 봤고, 혼자 구현하는 중 css 부분에서 개별 요소들의 포지션이 흐트려져서 다시 강의 들으며 따라 만들어보았습니다. (총 소요시간 2시간 정도) 단비같은 영상과 강의 다시 한번 감사드립니다. ^^
처음으로 댓글답니다. 프론트엔드 입문자 학생입니다. 선생님의 준비와 수업질 양 현장에서 자주 쓰이는 기술들 정말 유익하게 들었고 저같은 학생들이 무자본으로 듣게 해주셔셔 너무 감사드립니다. 전혀 부족한부분없고 다른 유튜버 분들보다 월등한 수업이였습니다. 하시는 일 전부 잘되실 바랍니다. ^^ ~~~~~
너무 유익하고 좋은 강의라 감사의 인사 먼저 드립니다~ 우선 영상을 정독해서 한번 본후 만들었습니다. 참고로 저는 html, css 공부를 한후 사이트를 1개 만들어봤기에 만드는데, 20분도 안걸린거같아요. js 파트에서는 영상을 다시보고 만들었습니다. js를 배운적이 없어서 .. 총 30분 걸린거같아요.
안녕하세요. 많은 도움이 되었습니다. 2가지 질문이 있습니다. 1. 11:40 padding-left:0 하기 전에, padding이 들어간 이유는 브라우저 default값일까요? reset.css하면 없어질까요? 2. 가운데 정렬 할 때 text-align, flexbox 어떤 것을 언제 쓰는게 효율적일까요? 비슷한거 같은데 차이점을 모르겠네요. 이러한 특정한 주제에 프로젝트 컨텐츠를 다루면서 다양하게 설명해주시는 부분 정말 좋은 것 같아요. 외국 유튜버들에게서는 많이 볼 수 있는데 한국 유튜버들 컨텐츠에서 많이 아쉬움을 느끼고 있었어요. 비용도 많이 비싸기도 하고...ㅠㅠ
JS파트에서 toggle 에러현상을 경험하여 공유하고자 댓글을 씁니다. 혹시 같은 문제로 고민하시는 분들이 계실까봐요.
메뉴바를 클릭했을 때 메뉴와 아이콘이 일시적으로 나타났다 바로 사라지는 현상이 생겼는데 html에서 a href=" " 이 부분이 공백으로 되어서 그런 현상이 발생하는 것 같습니다.
a href= "#"을 넣어주면 메뉴와 아이콘이 일시적으로 나타났다 사라지는 현상이 없어집니다. 참 사소한 거라 생각했는데 사소한게 아니었네요.
이렇게 공유해 주셔서 감사해요 🙌
한시간동안 헤맷는데 감사합니다
와 감사합니다 ㅠㅠ
참고하겠습니다. 사소한 부분을 잘 챙기는게 정말 중요한 것 같네요.ㅎ
우선 감사드려요 ㅠㅠ 덕분에 유일했던 에러 현상 해결했습니다! 다만 a href=" " 부분이 공백인 것과 토글 버튼이 일시적으로 나타났다 없어지는 현상이 어떻게 연관되어 있는지 설명해주실 분 있을까요 ㅠㅠ
개지리는 강의다... 패캠 유료결제한 사람 입니다. 진심 유료강의보다 가치있는 강의입니다. 이분 근데 왜 이렇게 양질의 콘텐츠를 계속 올려주시는 건가요 너무 감사하네요 진짜 ㅠㅠ 감사합니다 감사해요
패캠 ㅠㅠ 몇년 전 강의에 새로운 영상 몇개 껴서 새 코스 만들어 재탕하더라고요 ㅠ
패캠의 실제강의는 진짜 홍보, 소개란의 10프로수준밖에 안되는것같아요
여러분~ 영상에서 제가 가이드해드린것처럼 여러분 레벨에 맞게 꼭 실습 먼저 해보시구요 🙏🏼
동작하는 사이트를 보면서 먼저 만들어 보고 싶으시다면:
dream-ellie.github.io/responsive-nav-bar/
최종 코드는 여기서 확인해 보세요(꼭 먼저 해보고 소스 보셔야 돼요 😉):
github.com/dream-ellie/responsive-nav-bar
그리고 영상에 빠지거나 실수한 내용들:
17분36초: 하기전에 body {} 스타일 위에 이걸 추가해주세요
* {
box-sizing: border-box;
}
박스모델에 패팅과 보더의 사이즈를 아이템 너비와 높이에 포함해 달라고 말하는 거예요 :)
18분47초: toogleBtn -> toggleBtn
실습 내용중에 더 좋은 방법이 있거나, 부족하거나, 이해가 되지 않는 부분은 꼭 코멘트로 알려주세요 ❤️
그리고 여기에 페이지를 더 만들거나, 더 추가해서 만들어 보시면 좋을 것 같아요 :)
다음엔 실제 웹사이트 따라 만들기로 만나뵐께요~ 🤗
다 따라하는데 한 시간 반 걸렸네요 ㅠㅠ 혹시, VS 유용한 커맨드키도 알려주실 수 있으신가요?
좋은 아이디어 감사합니다 :) 프론트엔드 입문편 중간에 기회가 되면 한번 만들어 보도록 할께요 🤗 영상 아이템 리스트에 추가해 놓았어요 🙌
안돼요오오오오오오오오오오오 흑흑 그냥 align-self로 해도 되나여 ㅠㅠㅠ
맨 위에 box-sizing도 넣었는데 왜 안되지.. ㅡㅜ
몇시간째보고 있는데 .navbar_menu li:hover{
background-color:#d49466 ;
border-radius:4px;
}이부분이 작동이 않돼요
화면 줄였을때 메뉴가 로고 아래로 가고요 ㅠㅠ
제 컴이 이상한거 같아요 . 디버깅으로 하면 launch.json 파일도 생성되고...주말에 해야 겠다요
코로나로 격리 하고 있는 틈에 유용한 시간 이 되었습니다 감사합니다.
여러분~ 미디어쿼리 부분에서 더 간단하게 하실 수 있어요 :)
여기를 참고해 보세요 🙌 github.com/dream-ellie/responsive-nav-bar/commit/17f4e842d805b9f6945c839c1c88c0bb91418b64
@@대단하다-p5v 죄송하시다뇨 🤣 도와드리면서 저도 좋은 보람을 느낀답니다 🤗
a 태그를 block 으로 만들어서 간단히 한건가요? 와우!
저도 대단하다님이랑 같은 마음이 드네요 저도 보답하는 사람이 돼서 사회가 선순환되었으면 좋겠네요~!
진짜 강의가 너무 좋아서 감동의 눈물을 흘리며 2번 봤습니다 ㅠㅠㅠㅠㅠㅠ
전 눈물 3번...
toggle 버튼 이벤트 안되시는 분들은 html과 js를 연결시켜주는 부분을 헤드랑 바디 보다 더 아래에 script로 연결해주시면 해결됩니다! body가 먼저 로딩되구 스크립트가 들어가줘야지 정상적으로 작동합니다.
이 부분때문에 뭐가 잘못된건지 헤매고 있었는데 정말 감사합니다! 혹시 다른 웹사이트를 만들때도 js와 연결하는 script태그를 body 밑에 입력하는게 보편적인지 궁금합니다!:)
저 메뉴바 드롭메뉴 만들려고 header를 만들어서 스타일을 추가했는데 스타일이 추가된뒤에 토글키를 눌러도 메뉴가 안 뜹니다 ㅠㅠ 이건 왜그런걸까요?
와 국비학원에서 배우는거랑 차원이 다르네요.... 학원에선 진짜 무슨소리 하는지 하나도 모르겠는데 엘리님 영상 보니까 이해가 확확 가고 시간도 엄청빨리가네욬ㅋㅋㅋ 감사합니다 !!!
이 영상은 최고인거 같아요..
이전 html, css 강의들을 보고 이 영상으로 한번 더
복습이 되면서 내용들을 더 확실히 이해하게 되는거 같아요. 감사합니다😀
실제로 해보니깐 조금 더 정리가 잘되시죠? 이걸로 자신감이 퐉퐉 상승하셨으면 좋겠어요 ❤️
한스님 항상 코멘트 감사해요 🙌
너무 좋은 강의 입니다. 완전 생초보라서
1번째 : 그냥 강의 듣기
2번째 : 타이핑 치면서 듣기
3번째 : 다시 강의 듣기
3-5 한번 만들어보기
4번째: 다시 강의 들으면서 내가 만들면서 생각했던 부분이 이랑 비교하면서 듣기
4-5번째 : 다시 만들어보기
5번째 : 설명을 끊어 들으면서 왜 이렇게 했을까 고민하고 검색하면서 새롭게 노트정리(4시간쯤 걸린듯.)
이제 강의 노트 보면서 또 만들러 가려구요,
정말 알차게 들었습니다. 감사합니다. ㅠㅠㅠㅠㅠㅠㅠ
진짜... 너무 잘 가르쳐 주셔요.. ㅠㅠ 나중에 udemy나 인프런같은데도 강의 올리셔서 돈 많이 버셨으면 좋겠어요 사랑합니당~
하하 좋은 피드백 남겨주셔서 정말 감사해요 ❤️
저는 HTML CSS 문법 한번 쓰윽 본 정도이며 선생님이 주신 안경 하나 가지고 있습니다.
패딩문법 볼때 지루하게 느껴지고 개념이 막막했는데 선생님 영상보구 실제 이런 문제가 생기고 이렇게 해결할 수 있구나 감동1 텍스트 색깔 지정해놓고 한번에 바꾸는 효울성 보고 감동2 여러가지 폰트나 아이콘 디자인을 적절히 찾아 알맞게 쓰는 방법에 감동3 했습니다. 마지막으로 다른 영상에서 머리 아프던 앱솔루트 개념을 이해할 수 있게 되었습니다.
이 영상은 문법 공부로 영혼이 나가고 작심삼일일떄 보면 좋을 영상으로 추천합니다 무엇을 개발할지 시각적으로 보여주어 동기부여가 퐉퐉됩니다. 특히 너무나 똑소리나는 목소리와 적절하고 멋진 그래픽 효과에 참 즐겁게 시청할 수 있었습니다
선생님 여러가지 영상을 보고 열정적이며 진지한 삶의 태도에 힘을 얻었으며, 영상 볼 때마다 매번 받기만 하는 것 같아 다소 긴 리뷰를 남겨봅니다. 좋은 일 가득하시길 화이팅
어머 어쩜 이렇게 정성스러운 코멘트를 달아 주실 수가 있죠? 정말 감사합니다 ❤️
정말 상세하게 유용했던 점들을 나열해 주신걸 보니 정말 열심히 강의를 보고 따라와 주신거 같아서 정말 뿌드하네요 🙌 그냥 지나가시지 않고 이렇게 시간내어 작성해주신 소중한 코멘트 정말 감사합니다. 그래서 📌 핀해놓을께요 ❤️
감사합니다 Cavin님!
제가 여러 강의를 봤지만 이렇게 꿀팁 + 자세하게 알려주시는 분은 엘리님이 최고입니다.
엘리님의 영상을 볼 때는 자기만의 전자노트 or 수필로 꼭 자기 방식대로 정리를 해야합니다.
이 영상도 27분짜리지만 저는 OneNote에 정리하면서 듣느라 한 시간 넘게 걸렸네요.
유튜브 첫 영상 부터 정주행 하면서 계속 정리중입니다.
정주행 후 필요시에 강의도 결제해서 수강하겠습니다.
꾸준히 양질의 영상을 만들어주셔서 진심으로 감사드립니다. 👍🙂
1. 어떻게 하는지 봄2. 보면서 따라 적어봄3. 안보고 해볼려고 함4. 어느정도 이해됐고 외워짐코딩영상 많이 찾아 봤었는데 영상 엄청 만족합니다. 감사합니다.
따라 해보면서 감을 잡아 나가신거 같아서 다행이네요 🙌 좋은 코멘트 감사합니다 ❤️
비전공자에 고졸인데 코딩에 입문하게 되어 이 길을 택하고 싶어서 유튜브나 구글에서 이런저런 자료를 찾아보던 와중에 이런 좋은 영상을 보게 되어서 너무너무너무너무 감사할뿐입니다 ㅜㅜ 앞으로도 많은 도움 받고 가겠습니다 ㅜㅜ
진짜 코딩이 뭔지도 모르는데
웹사이트 하나 만들어 보고 싶다는 생각으로 여기까지 왔습니다..
1일차: 4시간만에 완성
2일차: 1시간 30분 완성
3일차: 30분 완성
목표와 의지를 가지고 실력이 나날이 좋아지시고 있는 것 같아서 정말 좋아보입니다. 덕분에 무척 감명을 받았고 충분한 동기부여가 되었습니다.
아, 정말 멋있어요 👍 고과확정!
출석합니다. 저는 입문자라 미리 만들어 보지는 못하고, 그렇다고 영상 한번 쭉 보고 나서 한번에 만들 수준은 아니라서 영상을 6군데(큰사이즈 3부분 @media 부분부터 3부분. ) 나눠서 해봤어요. 거의 영상 보고 카피하는 수준이라 시간은 오래 걸리지 않았지만, 몇번 더 연습해 보고 안 보고 해볼려고 합니다.
코딩하시면서 꼼꼼히 설명해 주시는 엘리님은 입문자와 기초가 부족한 사람에게 너무나 좋은 안내자에요!! 아무것도 모르는 아이에게 설명하시는것과 같은 친절한 설명에서 각 태그에 대한 개념과 기초가 자리잡게 되는거 같아요.
앞으로도 지금과 같은 꼼꼼한 설명이 실리는 영상 강추합니다.
기초만 조금더 탄탄히 다지고 나머지 영상과 드림코딩 강의 모두 뽀시러 가겠습니다. 갑사합니다. ^^
와 정성 가득한 피드백 정말 감사히 잘 읽어 보았어요 ❤️
앞으로도 많은 분들이 쉽게 이해 하실 수 있도록 설명을 잘 해보도록 할께요 :)
감사합니다 🙌
반응형으로 직접 만들어보니까 정말 재미있는 것 같아요!
강의로 전반적인 클래스이름과 흐름 이해하고나서 안보고 직접 코드 치면서 해보니 1시간정도(강의듣는거포함해서) 걸린 것 같아요!
다음 영상도 기대됩니다~ 감사합니다!
다시 했을때 1시간 정도면 금방 손에 익으신거 같아요 :) 화이팅입니다!
강의 너무 좋습니다 ㅠㅠ
저는 한번에 만드는게 힘들어서
1. 아무것도 없이 영상 정독
2. 영상없이 혼자 만들어보려다가 중간중간에 계속 막혀서 영상보면서 따라만들어보기
3. 영상없이 혼자 만들어보기
이렇게 했어요 !
기억 어느정도 사라지는 내일 다시한번 영상없이 만들어보기 해보겟심다!
와, 잘하셨어요 🙌🏼 내일 또 스스로 만들어 보시겠다니 의지력 100점
우와..엘리님 코딩 기초반 수업듣고 과제하다가 이해가지 않는 부분들이 좀 있었는데 이 영상으로 다 해결되었어요!! 양질의 컨텐츠를 이렇게 공유해주셔서 감사합니당 ㅜㅜ 주변에 코딩공부하는 친구들한테도 공유할게요:)
감사합니다 🙆♀️
그동안 유료강의, 도서에 꽤많은 돈과 시간을 써왔는데
벼락치기로 수능 기출문제 풀듯 진도 따라가기에 급급하다보니 뒤돌아서면
다시 답안지를 찾던 저를 발견했습니다..
엘리님 강의를 보며 기초부터 다시 시작한다는 마음으로
스스로 생각하고 코딩하는 방법, 공식문서 확인하는 방법을 배우며
도움이 정말 많이 받고있습니다!
위 영상에서 제시해주신
1, 2번 방법으로는 도저히 키보드에 손이 안올라가서
3번방법으로 네다섯번 반복하고나니
손이 알아서 반응하는 것 같아서 성취감과 재미는 덤으로!
아, 그리고 중간중간에 영어발음도 따라하고 있어요 자주 써주세요!
정성 가득 담긴 코멘트 감사합니다 ❤️
매번 float 만 썻었는데 flex 가 쓰기 조금더 간단한거 같아요ㅎㅎ
submenu 도 flex 쓰려고 연습하고 있는데 쉽지가 않네요ㅠㅠ
힌트 하나 던져주세요~~^^
메뉴를 클릭하면 submenu가 나오게 할려고 하시는건가요? 정확하게 어떻게 만들고 계신지 몰라서 답변을 드리기가 어렵네요 🤣 아래로 나오는 submenu이면 flex-direction을 column으로 해서 만들면 좋을 것 같아요
강의 잘 듣고 있습니다 :)
우선 아직 화면만 보고 바로 뚝딱 만들 수 있는 수준은 아니라서 ㅠㅠ
1. 섹션마다 처음에는 어떤걸 이용해서 만들겠구나 간단히 예상해보고 (대부분의 예상은 빗나가죠)
2. 구현 전에 강의를 먼저 듣고 (1. html 레이아웃, 2. CSS 스타일링 ... )
3. 잠시 멈추고 안보고 따라해보고
4. 차이점 확인하고 메모하고
5. 다음 섹션 넘어가고
이렇게 반복하면서 익히고 있습니다.
정리를 잘 해주셔서 공부하기도 편합니다.
특히 제일 좋은 점은
이 태그, 이 속성을 왜 사용하는지 설명해주시고
심지어 VS Code 에서 indent 를 space 2 로 설정하는 이유나 현업에서 팁들도 공유해주시니까
많은 도움이 됩니다.
그리고 목소리랑 발음이 너무 좋으세요!
다른 유료강의도 들어봤는데 다 합쳐도 엘리님 강의가 넘버원이에요!
우와 코멘트로 어떻게 강의를 따라와주셨는지 자세히 남겨 주셔서 너무 좋은것 같아요 🙌
열심히 생각을 먼저 해보시고, 듣고 또 준드래곤님 스스로 하시면서 따라하신거 같아서, 올바른 방법으로 배우시는거 같아서 너무 좋구요.
그렇게 꾸준히 하시면 실력이 금방 느실거라구 100% 믿습니다 ❤️
그리고 좋은 피드백 너무 감사해요~ 넘버원이라니 🥰
좋은 정보 감사합니다!
그리고 엘리님 드림 코딩 아카데미라는 사이트는
엘리님이 혼자서 직접 만드신 건가요 ?
비록 4년 전에 올리신 영상이지만 도움이 정말 많이 됐습니다. 설명을 풀어서 이해하기 쉽게 해주셔서 너무너무 감사해요.
항상 행복하시고 무탈하고 평안히 지내셨으면 좋겠습니다. 정말 감사합니다.
어렵지만 좋아요! 강의 보고 -> 안보면서 만들어보고 -> 막히는 부분 다시보고 -> 다시 만들어보고 이런식으로 진행중입니다.
아 그리고, 유투브 프론트엔드 입문편 1강부터 쭈욱 보고있는데. 업로드 된거 쭉 보는게 효율적일까요 아니면 이쯤에서
드림코딩 아카데미에서 css, html 하나하나 보는게 효율적일까요? 동영상 내용이 겹치는 건지, 아얘 다르게 가르치시는 건지 헷갈려서 질문합니다.!
안녕하세요 :) 여기 반응형 헤더까지 듣고 들으시기에 딱 좋아요 :) 겹치는 내용 없고 전체적인 반응형 포트폴리오 사이트를 함께 만들어 가면서 이론을 더 다잡는 시간을 보낼 수 있답니다 ❤️
드림코딩 by 엘리 감사합니다~
강의 감사합니다. 햄버거 클릭했을때, 바로 사라지게 되어서 이유 찾다 보니 한시간 걸렸네요 ㅠ
여기서 a 링크에 #을 빼고 작성했던 것이 이유였어요.
수업 잘 들었습니다. :)
앗! 한시간 동안 🐛 bug (이슈)를 찾으셨다니 개발의 세상에 오신걸 환경합니다 🙌
직접 만드시면서 하시는거 같은데 정말 바람직하십니다 ❤️
저도 이걸로 헤매고 있었습니다... #이 이정도 영향이라니... 댓글로 남겨주셔서 감사합니다(꾸벅)
저도 이걸로 해맸는데ㅜㅜ 감사합니다 #을 빼먹지않도록 조심해야겠네요..
전 강의 들으면서 로고 만든다고 하실때 잠깐 멈춰서 미리 만들어 보고 다시 재생해서 만드시는 과정이랑 결과를 비교하고 메뉴 만든다고 하실때 잠깐 멈춰두고 미리 만들어 보고 다시 재생하면서 만드시는 과정이랑 결과를 비교하는 방식으로 했습니다. 그리고 이번 강의가 끝나면 아애 처음부터 안보고 다시 만들어 보려고 합니다.
항상 지루하지 않는 재미있고 좋은 강의 해주셔서 감사합니다!
개발학원을 다니다가 커리큘럼이 저와 맞지 않다는걸 알고 나와서 독학하는데 너무 막막해서 유튜브, 넷플릭스를 보며 현실을 회피하고 있었습니다.
우연히 이 영상을 보고 엘리님의 HTML, CSS영상을 처음부터 다보고 다시 여기로 와서 따라 만들어 봤는데 덕분에 자신감이 생겼습니다.
제가 진정으로 무엇을 해야 할 지 모르는 와중에 이런 영상을 보게 해 주셔서 정말 감사합니다.
11:37 엘리 선생님 질문입니다. 여기서 마우스 올렸을 때 선생님처럼 공간 확인이 안되는 건 왜그럴까요. brackets 사용할 때는 선생님과 같이 확인가능합니다. 임시방편으로 background-color 넣어서 확인하였는데 혹시 vscode에서는 추가로 확장 프로그램 설치해야하는 것 일까요?
**
option + command + i 눌러서 확인되네요 ! 해결하였습니다 :)
17년 전 웹디자이너로 일하고 지금은 열심히 아이들 키우는 두 아이 엄마입니다~ 다시 디자인을 할 자신은 없지만 html 코딩을 할때는 너무 재밌었던 기억이 나서 html과 css를 다시 공부해요. 엘리님 강의를 하나하나 따라하며 코딩 공부해요 ^-^) js와 css를 배울때 마다 너무 재밌어욧~ (코딩이 적성에 맞나봐요^^) 사실 전 뚜렷한 목표는 없어요~ 다만 하나씩 배우는게 너무 재밌네요~ 그냥 이렇게 즐기며 하다 보면 저도 실력이 자랄거라 믿어요~ 페이스메이커가 되어주셔서 감사해요 (엘리님을 저희 성장 페이스 메이커로 모시겠습니다!) 감사합니다~
안녕하세요~~~ 아이들 육아 하시면서 이렇게 원하시는거 공부하시는거 너무 멋져요 ✨ 진정한 성장은 즐기면서 재밌게 배울때가 아닐까 해요 :) 무언가를 창의적으로 디자인해나가는 일도 재밌지만, 실제로 그 디자인을 동작하게 만드는 코딩도 너무 매력적인것 같아요 🙆♀️
정말 앞의 수업만 들은뒤 개념만알고 html에 css를 연결하는 방법도 모르고 모든것들 구글에서 검색해서 만들었는데 예상하신대로 2~3시간정두 걸린거같아요 물론 정말 사전에 보여주신 힌트보고 너비에따라 디렉션 바뀌는것만 구현하고 햄버거아이콘으로 액티비티한것은 생각도 못했고 구현하지도 못했지만 혼자 직접 해본다는게 내가 이런 사소한것도 모르고 넘어갔고, 모든걸 검색해서봐야 쓸수있구나 하는것을 느끼며 엄청나게 도움된거 같아요.
안녕하세요? 엘리님 정말 좋은강의로 진짜 정말 감사히 잘 배우고 있습니다.
궁금증이 조금 생겼는데요, 22:47초 쯤에 querySelector 안쪽 클래스 입력시에 저는 .nav~ 자동완성목록이 안뜨던데 이것도 익스텐션인가요?
이전 영상에 10가지 익스텐션 영상도 다시 봤는데 거긴 없는것 같아서 질문드립니다
1. 힌트 안보고 flex없이 float/inline-block으로 만들었어요 (복붙하던 js부분 빼고)
2. 30분이요!
--------💕--------
영상 시작하고 힌트의 flex보고 아차! 했어요. 새로운 내용을 배워서 너~~무 좋아요!!
flex를 배운 뒤 활용한다는 생각을 못했는데, 이렇게 적용해볼 수 있어서 너무 좋았고💕 이번에 리뉴얼 프로젝트에 네비 부분은 flex를 사용할꺼예요!
:root 사용법은 알았는데 활용을 못했는데 앞으로의 프로젝트는 모두 사용할꺼예요! js는 마치 처음보는 것 같았답니다.. 화이팅! 감사해요!!!
와 하면서 느끼신점, 배운거 이렇게 상세하게 남겨주셔서 정말 감사해요 🙌 짱 👍
진심 그 어떤 강의보다 친절하고 초보자의 눈높이에서 알려주셔서 너무감사합니다. 엘리님 강의도 들어보고 호주에오셔서 취업하시느라 고생하시는 말씀도 전부 봤습니다. 학교 선배처럼 친절하게 가르쳐주시는 느낌을 한두번 받는게 아니라 매번 받는것 같습니다. 바로 드림코딩 기본강의 결제했습니다. 좀더 열심히하고 리엑트까지 달려보겠습니다!
바쁘실텐데 항상 좋은 강의 감사드립니다.
css는 익혔는데 html 짜는게 아직 초보라 혼자 해보다가 안되서 처음에는 강의보고 따라하고
그 뒤로 혼자 만들려고 노력중입니다.
강의 중에 다른건 다 이해했는데 한가지 이해가 안가는 부분이 있습니다.....
17:35 navbar부분에 padding을 주면 navbar__logo부분도 같이 padding값이 적용되게 되는데
logo는 움직이지 않고 navbar__menu에만 padding: 8px 24px;이 적용되는 방법은 없나요? (로고부분이 고정됐으면 좋겠어서요)
.navbar__menu나 .navbar__menu li는 width가 100%여서 여기 내부에 코드를 작성하면 padding: 8px 24px;가 적용이 안된다고 쳐도
다른 방법으로 .navbar__logo에 padding: 0;(혹시 몰라서 padding-left: 0;도 해봤습니다..)를 작성해봤는데도
navbar자체에 padding: 8px 24px; 값을 먹인 뒤로 아무런 움직임이 없네요
너무 답답합니다... 저는 계속 해결방법을 찾겠지만 혹시나 제 댓글을 보신다면 늦게라도 답변 부탁드립니다!
11:29
혹시 해당 부분의 padding은 왜 생기는 것인가요??
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
확인해보니, ul 태그의 자식들에게 주어지는 기본값이었네요
늦은 나이에 접하게 되어서 주위에서 많은 관심 받으며 배우고 있어요. 새로운 세상에 온 것 같은 설레임과 두려움이 교차하는 두근거림에 대한,
아낌 없는 배려 기대할게요.
스타트업 운영중이구요, 외주를 주려하다가...당장 급한 프로젝트는 끝나서, 공돌인데 한번 직접 해보자는 생각으로 영상을 보면서 따라왔습니다. 백그라운드가 없어서 1시간 좀 넘게 걸렸습니다. 양질의 강의에 감사드립니다.
요즘 드림코딩 영상을 보면서 공부중입니다. 먼저 한번 보고 생각나는 대로 따라 만들었을 때 30~35분 정도 소요됐습니다. 거의 비슷하게 만들어져서 뿌듯합니다. 영상 너무 잘 보고 있어요. 좋은 컨텐츠 만들어 주셔서 감사합니다. 이런 좋은 강의를 무료로 볼 수 있음에 감사드립니다.
역시 현직 개발자 분이라 알짜베기 강의네요, 이 강의 하나만 봐도 메뉴 작업은 끝나네요 실무에 바로 적응가능 한다 해도 부족함이 없겠네요,
어제 회사에 건의해서 엘리님 React 강의 수강 신청 해달라고 했습니다
개발밥 25년 째 먹고 있지만 IT는 배움에 끝이 없는것 같습니다
좋은 강의 감사 드립니다, 제 밑에 직원들에게도 보여주도록 하겠습니다
아이콘, 폰트 참고자료도 그렇고 이번 강의 엄청난거 같아요 ;
먼저 해볼 때 너무 어려웠던게 padding-left : 0이게 뭔지도 모르고 , 분명 flex 에 center 효과를 주었는데 아무런 변화가 없을 때 멘붕이였어요.
헤메고 나서 강의보니 엄청 많이 배울 수 있었습니다.!! 정말 감사합니다.
오웃! 강의 보기 전에 먼저 해보신거예요? 👏
너무너무너무 잘하셨어요~~~~~
맞아요 처음에 하면 CSS할때 멘붕이 올 수 있어요. 브라우저에서 기본적으로 지정된 스타일이 있기때문에 ㅋㅋ
그럴때는 크롬브라우저의 개발툴을 써서 element inspector (요소 검사?)로 이상한 아이템위에 마우스를 올려서 왜 그런지 한번 보시면 마진이나 패딩이 들어가있는걸 볼 수 있어요. 그럼 아하! 여기서 이 값이 자동으로 들어가져 있구나, 0으로 리셋해야 겠다하고 아실 수 있어요 :)
실습 하기 전에 미디어쿼리로 틀만 잡는데 소요시간 1시간 30분 걸렸습니다.
자바스크립트 이벤트는 하다 너무 오래걸려서 그냥 마음 비우고 다시 배우기로..ㅜ
font-awesome에서 아이콘 얻는 방법이랑 css 색 변수 지정하는거 등등 도움되는 게 너무 많아서 정말 감사하기 이루 말할 데가 없네요
예전 개인 프로젝트 진행할 때 View 단 만드는데 시간이 너무 걸려서 정말 멘탈이 날아갈 뻔 했었는데 엘리님 덕분에 생산성이 너무 향상되는 거 같아서 정말 기쁩니다
다시 한번 좋은 강의 정말 감사드립니다.
와 정성 가득 코멘트 감사합니다 ❤️
출석 완료!
이론과 실무는 정말 차원이 다른 것 같아요.. 자신 있게 일시정지 누르고 시작하다가 처음부터 안 풀려서 그대로 쭉 강의 들었는데, 제가 앞 강의들을 그냥 말 그대로 듣기만 했구나, 하고 깨달았습니다ㅠ 앞 강의를 다시 들으면서 따로 노트에 정리를 해 놔야 응용할 수 있겠다고 내내 생각했어요 ㅋㅋㅋㅋ 오늘도 좋은 강의 감사합니다!!
비전공자인데다 30 넘어서 처음 코딩을 시작한 ㅋㅋㅋㅋ html, css 공부한지 5주차 된 초초초초초보 개발자입니다! 지금까지 무작정 클론코딩 하면서 작은 프로젝트들만 만들었는데 하다보니 html, css 기본기가 (너무나 당연하게도ㅋㅋㅋ) 제대로 안잡혀 있더라구요ㅠㅠ 그래서 엘리님이 올려주신 html,css 기본 강의 다 듣고 여기로 왔어요!!! 덕분에 헷갈렸던 기초 개념 다 잡았어요!! 정말정말정말 감사합니다 :) !!!!!!!
오늘은 제가 html+css로 할 수 있는 부분만 만들어 봤는데 1시간 30분정도 걸린 것 같아요! 역시 엘리님에 비하면 패딩이나 마진이 너무 더럽더럽...하다는 ㅠㅠ... 엘리님꺼 보고 열심히 공부해서 저도 css 깔끔하게 하고 자바스크립트도 탄탄하게 공부할게요! 좋은 강의 정말정말 감사합니다!! 곧 드림코딩아카데미 수업도 들으러 갈게요~💘
와 한시간 반정도에 혼자 하신거면 엄청~~ 잘하셨는데요? 👍👍👍
드림코딩과 함헤 해주셔서 감사하구 이렇게 정성스러운 코멘트로 어떻게 하셨는지 공유해 주셔서 감사합니다 ❤️
엘리 님 말씀대로 처음에는 강의를 쭉 보면서 엘리님이 어떤 방식으로 사고하고 움직이는지 보고 공부했어요. 현업이시니까 아무래도 효율적으로 움직이는 모습까지도 습득하고 싶었고, 그렇게 보다 보니까 어떤 순서로 생각하고 움직이면 좋을지 보이더라구요. 그렇게 한 번 쭉 본 다음, 한 파트씩 기억나는 대로 따라하고, 막히면 강의 보고 같은 속도로 따라하는 방식으로 공부했어요. 지금 이 강의 세 번 정도 봤고, 이제 처음부터 끝까지 혼자 해 본 다음에 엘리님과 함께 한 코드와 비교해보려구요. 정말 감사합니다. 오늘도 출석체크해요!
역시. 실습에서 갑자기 난이도 상승! ^^;
솔직히 선생님 말씀 안듣고 몇번 볼 생각으로 보면서 따라했어요. 세번째 실습방법도 자신이 없어서요;;
그래도 대충 한번은 따라해보니 개념은 알 것 같아요. 물론 안보고 만들라면 하나도 못 만들겠지만요~
안보고 만들 수 있도록 외우던지 해야겠어요 ^^;
아 그리고 영상의 23:37 처럼 동시에 쓰는것도 궁금하긴 하네요.
물론 초보니까 일일히 타이핑 해보는게 더 좋겠지요?
그래도 역시 어려워도 실습이 재미있네요. 바로바로 결과물이 나오니까요~ ^___^
감사합니다~~
그쵸? 그게 프론트엔드의 매력인거 같아요. 바로바로 내가 코딩한걸 확인해 볼 수 있으니 :)
html 배워보고 싶어서 검색하다가 엘리님 강의를 보고 저의 첫시작을 엘리님 영상으로 시작했어용!
오늘이 3일째인 정말 쌩쌩쌩 초짜라ㅜㅜ
첫 번째는 영상을 보고 따라해보고 두 번째는 필기 해놓은 걸 보고, 세번째는 살짝 컨닝하며 해보고있습니다.
네번째는 도움없이 할 수 있기를~~ 그래도 꼭 한번 스스로 다 완성할 때까지 해보려고요.
엘리 선생님 강의 정말 너~~무 좋습니다. 입문자도 따라할수 있게 해주셔서 너무 감사해요!
감사해요! ㅠㅠㅠㅠ 부트캠프로 기본배웠는데 웹사이트를 혼자 만들어보기엔 부족한 지식이었거든요. 여기서 많이 배웁니다! 포트폴리오 만드는데 큰도움이 됐어요!
안녕하세요 비록 군대에 있어, 개발 환경 설정을 못하여 편하게 코딩은 못하지만 강의 잘 듣고 있습니다 감사합니다
THANK YOU FOR LEGENDARY LECTURE
안녕하세요 질문이 있어 댓글 남겨요!!
18:13 영상처럼 그 웹페이지에서 개발자도구의 요소부분에 마우스를 올려서 확인하지않고
바로바로 패딩이 있는지 아닌지 확인할 수 있게하려면 어떻게 해야되나요?
쭉 진행했습니다! 내일은 영상없이 복습해보려구요! 자바스크립트는 강의만 쪼금 깔짝했는데 맛보기라도 훅 들어와서 깜짝놀랐습니다! 세상에 이렇게도 진행이 될수 있네요~! 저는 마우스를 올렸을때 컬러가 살며시 바뀌는 트랜지션도 넣어보았습니다. 오늘도 유익한 강의 감사합니다!
유튜브 사이트 따라 만들기 시작하려다가 하나둘씩 강의를 듣게되었는데 가장 기본적인 타입스크립트로 이렇게 짜는것부터 익히고 익숙해져야 이후에 라이브러리도 좀더 쉽게 사용할 수 있겠다는 생각이 들었습니다. 이전에 타입스크립트 공부를 좀 하긴 했지만.. 자바스크립트에 대한 지식 없이 리액트 라이브러리만 공부하다보니 상당히 어려움이 많이 느껴지더라구요.
지금도 드림코딩을 통해 기본 지식도 쌓아가면서 리액트 라이브러리도 같이 공부하고있지만 정말 깔끔하게 귀에 쏙쏙 들어오게 가르쳐주신다는 느낌을 매번 받고 있습니다.
항상 감사합니다🙇♂️🙇♂️🌹
이런 정성 가득한 코멘트 감사해요 ❤️
타입스크립트 + 리액트 정말 좋은 콤비네이션이예요 👍 하지만 이전에 먼저 기본적인 자바스크립트와 브라우저 APIs들을 다잡고 하셔야 공부를 탄탄하게 하실 수 있을거예요 :)
@@dream-coding 넵! 끝까지 포기않고 해보겠습니다
항상 감사합니다!! 🤩💪💪
Dear Ms. Ellie, Thank you so much for putting your precious effort and time in making an excellent and informative tutorial like this. My approach in utilizing this tutorial was 1.watching the tutorial without taking notes for understanding purposes. 2. follow along exact steps demonstrated by tutorial on my VSC. Unfortunately though Emmet abbr. wasn't working on my VSC, so I manually typed everything. I made notes of your explanation directly on my VSC so that I can refer to the explanation when I review my notes. 3. I haven't yet but I'm planning to make the header as I'm watching the tutorial live. Again I appreciate your generosity in sharing these wonderful educational resources with the community! ^^
thanks a lot, Code your Dream ✨
너무너무너무너무너무너무너무너무너무 잘 들었습니다 !! 저는 생활코딩 자바스크립트까지 듣고 바로 이 강의듣고 시도해봤는데 30분 안에 만들기는 실패해서 (grid, fr 쓰려고 검색하다가 시간낭비) 1.~css로 꾸미기 2. javascript 로 나누고 각각 강의 반복해서 보다가 이해간다 싶으면 안보고 만드는 과정을 거쳤어요. 3시간 정도 걸린 것 같습니당
어떻게 하셨는지 알려 주셔서 감사해요 ❤️
22:46 부분의 main.js에서 작성할 때 보여지는 class list를 자동으로 보이게 하려면 어떻게 해야하나요? Emmet이랑 Extension 영상은 보고 그대로 따라했습니다!!..
HTML, CSS 강의를 먼저 듣고, 이 영상을 전체적으로 한번 보았을 때 개념이 잡혔습니다. 강의가 너무 좋고 진심으로 감사드립니다.
입문자 편이지만 경력자에게도 좋은 영상 입니다
흔히 풀스택으로 일하고 있는데 모르는 부분도 있네요
경력은 많지만 공식사이트 이용보다는 구글검색 스택오버플로우 검색해서 많이 해결하다보니
새로운 태그나 더 좋은 사용법이 나와도 기존방식을 고수하는 면이 있는것 같아요
강의를 몇개봤는데 그냥 어떻게 써라보단
공식사이트나 잘 정리된 사이트에서 찾는법을 알려주셔서 좋은것 같습니다
좋은 영상 감사합니다
풀스택 경력자이시라니 반가워요 ❤️
그냥 지나가시지 않고 이렇게 코멘트 남겨 주셔서 정말 감사해요 🤗
네네 그냥 알려드리는것보다 찾는 방법을 알려 드리면 드림코더 분들이 추후에 스스로 더 찾아 보면서 공부하실 수 있을것 같아서 최대한 찾는 방법을 알려 드리려고 노력하고 있어요 :)
혼자서 해보다가 icon찾고, text 색 바꾸고 하는데 엄청 시간이 걸렸네요.
두 종류 모두 레이아웃은 만들었는데 media query로 예쁘게 위치를 재조정하는게 쉽지 않았네요. (absolute를 사용한다는 생각을 못했습니다 ㅋㅋ..)
머리를 많이 굴려야 할 것 같습니다.
결국 영상보고서야 아 이렇게 하면되는구나 했습니다.
영상에서는 nav를 쓰셨는데 전 header라고 생각해서 header라고 썼습니다. 아직까지는 이 두가지 차이점을 잘 이해하지 못한것 같네요 ㅠㅠ
다시 처음부터 짜보면서 복습하도록 하겠습니다.
좋은 강의 감사합니다!
진짜 너무 감사드립니다 jsp 게시판 만들다가 기능은 구현햇는데 디자인 막막했거든요 따라하니깐 바로 되네요 정말 감사드립니다
구글링 6시간하고 답안나와서 포기하고 있었는데 생명의 은인입니다
입문자입니다.
저는 3번의 방법으로 시작해서 한번스스로 만들어보았습니다.
자바스크립트는 아직 몰라서 그대로 썼구 css의 경우는 몇가지 빼먹은 속성들이 있었지만... 그래도 열심히 생각하며 만들었어요..
대략 1시간40분넘었네용..
반복적으로 만들어보며 익숙해지고 아직 어려운것도 있어 그부분에 대해 영상을보며 더욱 심화적이게 이해해야겠습니다.!
안녕하세요! 프론트엔드 개발자 입문편 강의를 계속해서 보고 있는 학생입니다! 우선 이렇게 좋은 강의 해주셔서 너무너무 감사드려요ㅠㅠ 여쭤볼게 있어서 댓글 남기는데, 19:48 에 navbar_togglebtn의 위치를 absolute로 했는데 영상처럼 위로 올라가지 않는 경우는 왜 그런건지, 궁금합니다!
안녕하세요 :)
absolute를 하셨다면 top과 right으로 포지션을 지정해 주셨나요?
대부분의 오류는 포지션을 지정해 주시 않아서랍니다 ;)
엘리쌤 너무 쉬운 설명 감사합니다! 저는 '3번 먼저 쭉 보기, 1번 혼자 만들기, 2번 만들어보다 막힌부분 위주로 보기' 순서로 학습하고 있어요 ~ 4번은 추가적으로 마인드맵으로 정리하고 있습니다. 쌤의 노력과 선한 영향력 감사합니닷~
그냥 보고 따라서 코딩 했습니다, 처음 다시 하라고 해도 무리 인것 같고, 이런 식으로 진행 하는 정도로 인식하고 만족 해야 할 것 같습니다. 입문자가 하기에는 난이도가 높은 것 같습니다.
좋은 영상 올려 주셔서 감사합니다. 신비롭고도 놀라운코딩의 세계 인것 같습니다.
솔직히 거의3일동안 혼자해보다가 머리싸매고 동영상보고 계속 반복했습니다. 그냥 추가로 찾아보지 않고 강좌만 봤던 터라 display:none같은건 까먹기도 했고 media 쿼리는 좀 어려웠습니다. 하지만 그러다보니 창을 줄였을때의 flex box의 배열같은건 동영상을 보지 않고도 할 수 있게 되었습니다 시간은 좀 걸렸지만 확실히 엄청 성장했다는게 느껴집니다. 그리고 실전연습을 해보니까 저 스스로도 검색하고 알려주신 사이트를 찾아서 추가로 공부를 하면서 성장한 것 같습니다.
드림코딩 아카데미 강의를 듣다가, 유튜브에서 기본 먼저 보는게 좋을 것 같아 시청중인데요. 퀄리티가 장난 아니네요.
이렇게 깔끔하고 빠르게 퍼블리싱이 가능한건지 몰랐어요! 너무너무 감사합니다 :D
네네 이런 기본 강의 듣고 아카데미 강의 직접 만드시면서 따라 오시면 정말 좋을 것 같아요 ❤️
저는 영상을 보면서 멈추고 따라하고 멈추고 따라하는 방식으로 활용하였습니다.
엘리님 영상을 통해 반응형의 기본 원리를 습득하면서, TIL 작성으로 복습하고 레이아웃도 조금씩 변형해가면서 디자인 연습도 해볼 생각입니다.
플렉스를 이용해서 반응형 웹을 만들어본 경험이 없어서 감이 오질 않아 처음은 보면서 따라했습니다. 30분정도 소요된 것 같구 한번 실습해본 걸 바탕으로 영상 안보고 혼자 해보려고 합니다. 감사합니다!
영상 다 보시구 이렇게 코멘트 남겨 주셔서 정말 감사합니다 🙌
영상 안보고 혼자 다시 해보신다니 정말 뿌듯합니다 🤗
17:30 과정 실행중에 메뉴가 가운데에 안오고 살짝 오른쪽으로 배치되요ㅠㅠ 확인해보니 부모 padding 만큼 움직여있는데 혹시 방법 없을까요? 이것때문에 메뉴가 가운데 배치는 안되는 것은 물론 메뉴 요소의 왼쪽에는 여백이 보이는데 오른쪽에는 여백이 보이지 않아요.. 한시간째 처다보는데 너무 답답해서 글 남깁니다.
재미있는 강의 였습니다. 감사합니다.
처음에 혼자 해보고 제가 한 것과 비교 해서 다시 만들어 봤어요.
혼자 한 시간 : 대략 2시간(script 제외)
반응형웹 너무 재밌게 강의 잘 들었어요.
학원에서 배웠는데도 막상 할려면 머리속이 하얘져요.
엘리언니 강의 너무 시원시원하고 깔끔해서 좋아요.
아직 이 간단한 것도 혼자 할 실력안되서 한번 들어보고 할라했는데 한번 더 듣고 해봐야 할거 같아욤.ㅋㅋㅋ
해보고 다시 올릴께욤^^ 감사해요
안녕하세요 엘리님. 힌트만 보면서 5:15에서 pause 해놓고, 그대로 만들어보려고 노력중인데요 ㅠㅠ logo랑 links는 세로로 가운데가 잘맞춰지는데 menu가 세로로 중간정렬이 안되네요.
어디가 틀린걸까요..ㅠㅠ
제가 쓴 전체코드 올려볼게요 ㅠ
[ html 코드 ]
DreamCoding
Home
Galary
Wedding
FAQ
Booking
[ css 코드 ]
.navbar{
display : flex;
justify-content: space-between;
width : 100%;
background-color : blue;
}
.navbar_logo h2{
font-size : 24px;
padding-left : 15px;
color : white;
}
.navbar_menu li{
list-style: none;
display : inline;
padding-left : 20px;
align-self: center;
}
.navbar_menu li a{
color : white;
text-decoration: none;
}
.navbar_links{
padding-right : 15px;
align-self: center;
}
.navbar에 align-items: center가 빠진것 같아요 :) (반대축에서, 수직축에서 중간 정렬)
집중력 잃지 않게 깔끔하고 알기 쉬운 설명 최고입니다.
감사합니다 🙆♀️
실전편으로 들어가게되서 너무 감사하고 기쁩니다 ㅎㅎ
너무나 기본적인 질문일수있는데..
11:37부분에 spacing에대해서 말씀하시면서 menu bar에 커서를 갔다대면 padding이 있는지 없는지 나오는데 f12버튼을 눌러서 확인하시는건가요? 아니면 다른 방법이있나요..?
12:00부분에 menu아이템들의 사이를 띄어줄때 flex-box를 이용해서 list item들을 space-between으로는 띄어줄 수있는 방법은 없는건가요?
바쁘실텐데 혹시나 시간되신다면 답변부탁드리겠습니다 ㅎㅎ 감사합니다:)
1. 크롬 브라우저 개발툴을 이용하면 되세요 :)
2. 그렇게 하셔도 아이템들 간격을 띄울 수 있어요
와아,, 감사합니다. 27분동안 한눈 팔지않고 듣게 되네요..
능력자세요!
한눈팔지 않고 들어주셨다니 🤗 감사합니다 ❤️
16:08
navbar__logo만 왼쪽으로 정렬하면 되는 상황에서 @media query안에 navbar__logo{self-align : flex start}하면 logo만 왼쪽정렬이 되더라고요. 그리고 이렇게 하면 menu list 들이 변경사항에 따라서 왔다갔다 하지 않습니다. 굳이 navbar 전체를 flex-start한 이유가 있을까요??.
다른 강의들을 헤매다가 여기까지 왔는데, 설명 정말 잘하시네요! 감사합니다.
17:38 에서 padding: 8px 12px; 로 했을때는 hover했을때 색칠되는 부분이 안줄어드는데 padding: 8px 24px;로 했을때 줄어드는 이유를 정확히 모르겠습니다.
다 본 다음에 해보고, 동영상 따라가면서 만들어보고, 혼자서 또 만들어보고 총 3번 만들어봤네요..시간은 대략 1시간넘게 걸린거같은데 회차를 거듭할 수록 빨라졌어요. 좋은 강의 감사드립니다.
감사합니다 🙆♀️
영상 보면서 따라 입력하는 식으로 진행했습니다. VScode 설치가 안되어 있어서 멈춰놓고 설치하고(플러그인도 추가하고^^) 다시 시작했네요~ 명강의였습니다!!
와.... 현재 프론트엔드 공부중인데 신세계를 보앗네요...
프론트엔드 강의들을 쭉 찾아보고 들어도 보고 했는데
엘리님의 강의가 가장 이해도 잘되고 교육 마지막에 주시는
선물들이 큰 도움이 되네요ㅎㅎ
드림코딩 유료 강의 전에 무료 강의들 먼저 듣고 있는데.. 자바스크립트까지 듣고 넘어가야될까요?
유튜브강의와 유료강의 듣는 순서가 궁금하네요
아 ! 그리고 강의중에 궁금한게
21:01에서 왜 display:block; 을 해야지 nav__toogleBtn이 보이게 되는걸까요?ㅜㅜ
자바스크립트 기본편 (무료) 듣고 오시면 좋을 것 같아요 :)
academy.dream-coding.com/pages/912e50
양질의 강의 진심으로 감사합니다.
Web Dep 공부를 시작한 지 얼마 안되는데 마음이 앞서서 공부를 하다보면 배웠던 내용들이 뒤죽박죽 섞입니다.
그러던 중 엘리님 강의를 우연히 듣기 시작하면서 도장깨기 하듯 깔끔히 머릿속 정리를 할 수 있었습니다.
요번 강의는 먼저 한번 봤고, 혼자 구현하는 중 css 부분에서 개별 요소들의 포지션이 흐트려져서 다시 강의 들으며 따라 만들어보았습니다. (총 소요시간 2시간 정도)
단비같은 영상과 강의 다시 한번 감사드립니다. ^^
지금까지 봤던 인강, 유튜브 등등 강의 영상 중에
제일 깔끔하고 이해하기 쉬운 설명이였어요... 감사합니다!
22:48 JS파트에서 documents.querySelector(' ')
위 처럼 html 클래스명 목록이 자동으로 안뜨던데 별도로 뜨게해주는 설정이 있을까요? ㅠㅠ
처음으로 댓글답니다. 프론트엔드 입문자 학생입니다. 선생님의 준비와 수업질 양 현장에서 자주 쓰이는 기술들 정말 유익하게 들었고 저같은 학생들이 무자본으로 듣게 해주셔셔 너무 감사드립니다. 전혀 부족한부분없고 다른 유튜버 분들보다 월등한 수업이였습니다. 하시는 일 전부 잘되실 바랍니다. ^^ ~~~~~
도움이 되었다니 감사합니다 :) 유튜브에 무료로 영상을 꾸준히 올릴 수 있도록 해볼께요 ❤️
너무 유익하고 좋은 강의라 감사의 인사 먼저 드립니다~
우선 영상을 정독해서 한번 본후 만들었습니다.
참고로 저는 html, css 공부를 한후 사이트를 1개 만들어봤기에 만드는데, 20분도 안걸린거같아요.
js 파트에서는 영상을 다시보고 만들었습니다. js를 배운적이 없어서 ..
총 30분 걸린거같아요.
와 스스로 만들어 보셨다니 👍👍👍👍👍
엘리님 강의는 다른 강의들보다 시각 자료를 더 많이 사용해주셔서 이해가 더 쉬운 것 같아요
좋은 강의에 감사드려요
root...기능..세상에...넘 짱입니다. 선생님.......요즘 퍼블리싱에 재미를 잃어가고 있었는데, 선생님 강의보고 다시 눈이 초롱초롱 해졌습니다.
다른 강의를 들었을땐, flex구조도 안가르쳐줬고 토글버튼도 hover기능으로해서 꾸몄었는데 이렇게 배우니 너무나 쉽고 좋습니다. 감사합니다
코멘트 감사합니다 ♥️
12:20
Spacebetween은 여기서 적용이 안되나보군요..
Padding 넣는거에서 첨알앗는데
여기부분서 계속해맷는데 잘알아가요~
코드 치시는 거에서 엄청난 내공이 느껴지네요.. 신뢰 넘치는 강의!!!
적당한 속도와 상세한 설명으로 한 편 한 편 이해가 잘 되네요.
감사합니다!
혼자 해보니 디자인이 조금 달라서 다시 들어보고 해보았습니다. 친절한 설명 덕분에 어렵지 않고 재밌게 만들 수 있었어요!
안녕하세요? 오늘 구독 시작했습니다. 끝까지 보고 따라하기 위해 영상을 여러 번 봤는데 한 줄 한 줄 다시 보면서 하게되네요^^ 좋은 영상 만들어주셔서 고맙습니다!!
정말 너무너무 감사합니다 1년 넘게 홈페이지 못만들고 있었는데 지금 하나하나 만들어지고 있어요
미친퀄리티의 강의...감사합니다 ㅠ 마크업하는 과정부터 시멘틱하고 세세한설명해주시는것 너무 유익해요
지금 듣고있는 코딩수업이 있는데 엘리님이 진짜 훨씬 더 쉽고 재밌게 가르쳐주시는듯 하.... 너무 감사해요
처음 보고 출퇴근 시 다시보고 엘리님이 말씀하신 방법으로 공부하려고 합니다. 감사합니다.
안녕하세요 항상 잘보고 있습니다. 입문편 보고 바로 엘리님 강의 결제 할꺼에요!!!!
안녕하세요. 많은 도움이 되었습니다. 2가지 질문이 있습니다.
1. 11:40 padding-left:0 하기 전에, padding이 들어간 이유는 브라우저 default값일까요? reset.css하면 없어질까요?
2. 가운데 정렬 할 때 text-align, flexbox 어떤 것을 언제 쓰는게 효율적일까요? 비슷한거 같은데 차이점을 모르겠네요.
이러한 특정한 주제에 프로젝트 컨텐츠를 다루면서 다양하게 설명해주시는 부분 정말 좋은 것 같아요.
외국 유튜버들에게서는 많이 볼 수 있는데 한국 유튜버들 컨텐츠에서 많이 아쉬움을 느끼고 있었어요. 비용도 많이 비싸기도 하고...ㅠㅠ
1. 네네 브라우저에서 들어가는 기본 값이예요. reset.css 쓰셔도 되고 아니면 저처럼 저렇게 리셋해주셔도 되요
2. 드림코딩 아카데미 포트폴리오편에서 다뤘어요 :) 유튜브에는 시간되면 꼭 다뤄볼께요