inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

DOM의 개념에 관하여

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

남겨주신 노마크코더님의 영상과 기술블로그 글을 보았는데요. DOM 의 풀네임 (Document Object Model) 말처럼 HTML, CSS, JS 파일들을 객체화하여 따로 분리하여 연결해주는 모델링이 속도가 빠르게 해주는 핵심 이유 이며, 객체화를 통해 브라우저에서 직접 모든 렌터, 레이아웃을 계산하는게 아닌 Offline 상태에서 계산하여 결과값만 브라우저에 나타내기 때문이다. 라고 이해를 하고 있는데 맞을까요? 이런 React의 동작방식과 작업방식이 가장 빠른건 아니지만 웬만한 웹에서 빠르게 동작하고 충분히 빠르고 효율적이기에 많은 서비스들에서 사랑 받고 있는 프레임워크다. 혹시 이렇게 정리하는게 조금 제가 잘 이해를 못 하고 있는 부분일지요.

  • html/css
  • react
  • express
  • javascript
  • node.js
  • HTML/CSS
  • tensorflow
  • 머신러닝
  • 머신러닝 배워볼래요?
  • react-native
  • nodejs
promotion 댓글 1 좋아요 1 조회수 338

단위심화 강의 중..

해결됨

[코드캠프] 강력한 CSS

안녕하세요 단위심화 강의 중 두 번째 실습 과정 중, 두 번째 줄에 사진이 3개만 들어가는데 왜 그런건지요..?? flex-wrap: wrap; 까지 적용시켰는데 영상과는 다르게 되네요..

  • html/css
  • HTML/CSS
liltjay 댓글 1 좋아요 0 조회수 352

목서버, "usageLimitError"

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

안녕하세요 콘솔에 404 에러가 떠서 목서버를 확인해보니 아래와 같은 오류가 떴는데 이러한 경우 어떻게 해결할 수 있을까요.. { "error": { "name": "usageLimitError", "header": "Usage limit reached", "message": "Your team plan allows 1000 mock server calls per month. Contact your team Admin to up your limit." } }

  • html/css
  • tensorflow
  • javascript
  • 머신러닝 배워볼래요?
  • node.js
  • react
  • nodejs
  • 머신러닝
  • react-native
  • HTML/CSS
  • express
유영 댓글 1 좋아요 0 조회수 640

프로젝트 2 이미지 깨짐 현상

미해결

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

강사님이 올려주신 파일 그대로 열었는데 이런식으로 깨집니다. 어떻게 해결해야하나요? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="/assets/css/app.css"> <title>My Second Web</title> </head> <body> <header id="header" class="wrapper"> <section id="navTop" class="nav-top py-2 d-none d-md-block"> <div class="container"> <div class="row align-items-center justify-content-center"> <div class="col-3 text-start lead fast-counsel"> <a href="#" class="btn btn-outline-dark">Contact</a> </div> <div class="col-4 logo"> <a href="index.html" class="navbar-brand d-flex"> <img src="/assets/images/dummy-logo.png" alt="" class="img-fluid ms-auto" width="200px" data-bs-toggle="tooltip" data-bs-placement="bottom" title="My amazing website!!"> </a> </div> <div class="col-5 text-end socials"> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-phone.png" alt="Phone" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-kakao-channel.png" alt="Kakao Channel" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-facebook.png" alt="Facebook" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-twitter.png" alt="Twitter" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-youtube.png" alt="Youtube" width="40px" class="shadow-box"> </a> </div> </div> </div> </section> <nav id="navPrimary" class="navbar navbar-expand-md navbar-dark"> <div class="container-xxl"> <a class="navbar-brand d-block d-md-none" href="index.html"> <img src="/assets/images/dummy-logo.png" alt="Logo" class="img-fluid"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navPrimaryContent"> <ul class="navbar-nav mx-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="index.html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Intro </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="page.html">About us</a></li> <li><a class="dropdown-item" href="page.html">Find us</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Documents</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Events</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Reviews</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Reservation</a> </li> <li class="nav-item"> <a class="nav-link btn btn-outline-secondary" href="#"><i class="fa fa-search"></i></a> </li> </ul> </div> </div> </nav> </header> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> <!-- Kakao map appkey here --> <script src="/assets/js/app.js"></script> </body> </html>

  • html/css
  • HTML/CSS
  • 웹 디자인
  • javascript
  • 웹-디자인
  • bootstrap
지루한 오리 댓글 1 좋아요 0 조회수 1207

i 테그인 경우 입력방법

미해결

실용적인 웹 프로그래밍

안녕하세요. '자바 스크립트로 뉴스 기사 본문만 보이게 하기' 강의목차를 수강하는 중간에 궁금한 점이 생겨서 이렇게 질문남깁니다. querySelector는 #이나 . 을 이용하는 걸로 알고있는데, 제가 사용하려는 부분이 i 태그인 경우에는 어떻게 입력해야하는지 모르겠습니다..

  • html/css
  • HTML/CSS
  • javascript
이다민 댓글 1 좋아요 0 조회수 499

html select option 아이콘 삽입

해결됨

[코드캠프] 시작은 프리캠프

<div class="left__body__footer"> <div class="wrapper__feel"> <div class="feel__title">오늘의 기분</div> <select class="feel__select"> <option>기쁨 <i class="fa-regular fa-face-smile"></i> </option> select option 에서 기쁨 뒤에 아이콘 삽입하려는데 코드를 어떻게 짜야 아이콘이 삽입이 되는지 질문합니다

  • html/css
  • javascript
  • HTML/CSS
frontend 댓글 1 좋아요 0 조회수 448

NGINX에러

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

vi /etc/nginx/sites-available/default 수정 전에는 정상 작동합니다. 그런데 아래와 같이 수정하면 에러 발생합니다.

  • html/css
  • aws
  • git
  • javascript
  • rest-api
  • HTML/CSS
  • mysql
  • github
jksyk 댓글 3 좋아요 0 조회수 730

axios error

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

ngrok 연결도 다 했고 url에다가 POSTMAN으로 GET 요청하면 데이터도 잘 불러와지는데 결과창을 보면 데이터가 불러와지지 않아 화면이 제대로 뜨질 않네요...해결 방법이 있을까요?

  • html/css
  • tensorflow
  • 머신러닝 배워볼래요?
  • node.js
  • react-native
  • express
  • react
  • 머신러닝
  • nodejs
  • HTML/CSS
  • javascript
hyj_0327 댓글 1 좋아요 0 조회수 758

이렇게 코드 짜도 되나요?

미해결

파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)

강사님 안녕하세요. 강의 잘 듣고 있습니다. 감사합니다. 세가지 질문이 있습니다. 1. 아래와 같이 코드 짜도 되나요? 2. 코드가 맞다면, 제가 탐색 알고리즘 원리로 푼게 맞나요? 3. 강사님 코드가 더 효율이 높다고 보면 되는건가요? 이정도 차이면 코딩테스트에서 큰건가요? - 제 코드 실행시간: 0.00021576881408691406 - 강사님 코드 시간: 0.00020885467529296875

  • 코테 준비 같이 해요!
  • 코딩-테스트
  • python
홍푸름 댓글 2 좋아요 1 조회수 799

노션관련질문

해결됨

[코드캠프] 시작은 프리캠프

학습자료를 노션으로 올려주셨는데 해당 학습자료는 다운로드하여 pdf로 사용이 불가능한 것인가요? 링크를 통해서만 접근이 가능한 것일까요?

  • html/css
  • javascript
  • HTML/CSS
w3w 댓글 1 좋아요 0 조회수 280

파이참 gutter 색상이 너무 궁금합니다.

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

파이참 사용시 좌측처럼 코드가 있는부분은 색상이 다르던데 이건 어떻게 해야할까요? 강의 듣다가 이게 궁금해서 계속 옆길로 빠지게 됩니다 ;;;

  • python
  • docker
  • react
  • django
히징징 댓글 1 좋아요 0 조회수 375

error:03000086:digital envelope routines::initialization error axios오류

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

안녕하세요 axios 코드 실행 하면 아래 사진과 같이 오류가 뜹니다.

  • html/css
  • 머신러닝 배워볼래요?
  • react
  • node.js
  • express
  • HTML/CSS
  • react-native
  • 머신러닝
  • nodejs
  • tensorflow
  • javascript
유영 댓글 1 좋아요 0 조회수 2457

점보트론

미해결

그림으로 배우는 HTML/CSS, 입문!

부트스트랩 강의에서 점보트론 을 카피하라고 하셔서 사이트 들어갔는데. 점보트론이 이제 없다네요 ...? 이제 뭘로 해야하나요 ?

  • html/css
  • HTML/CSS
hyqooooo 댓글 1 좋아요 0 조회수 603

Axios로 API 요청시 에러

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Axios로 아래와 같이 요청시 Object가 안나오고 에러가 발생합니다. 에러내용은 아래와 같습니다 참고로 MySQL 데이터는 아래와 같습니다. Axios dummy 테스트는 문제가 없었는데, Network Error는 뭘까요?

  • html/css
  • aws
  • github
  • rest-api
  • javascript
  • HTML/CSS
  • mysql
  • git
jksyk 댓글 3 좋아요 0 조회수 1196

reset css 에 대한 질문 드립니다.

미해결

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

안녕하세요. 올려주신 강의 재미있게 수강 하고 있습니다. 그런데 오랫동안 궁금했던 부분이 있어서요, 가능하시다면 답변 부탁 드립니다. "모던 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
  • HTML/CSS
  • javascript
  • es6
inflearner 댓글 1 좋아요 0 조회수 672

CSS 정렬 숙제

해결됨

[코드캠프] 시작은 프리캠프

안녕하세요 선생님 수업 감사히 잘 듣고 있습니다! 다름이 아니라 숙제 진행 과정에서 질문이 생겨서 여쭤보려고 합니다! 현재 진행사항은 이렇게 되었고, 코드는 <html> <css> 이렇게 작성했습니다! 근데 제목인 '회원 가입을...' 이 부분이 선생님은 왼족으로 잘 정렬이 되있는데 저는 정가운데에 와있습니다! 왜이렇게 되는지 궁금합니다! 또, 전체 박스 크기도 선생님은 여유가 있는데 저는 딱 맞아 떨어집니다! 왜 이렇게 되는지, 어떻게 해결해야 할지 궁금하여 질문드립니다!

  • html/css
  • javascript
  • HTML/CSS
데싸데분 댓글 1 좋아요 0 조회수 1873

15:41에 나오는 grid 예시

해결됨

[코드캠프] 강력한 CSS

안녕하세요 수업을 듣다가 15:41에 나오는 예시가 잘못된것같아서 질문남겨봅니다! 강사님이 써준 코드대로면 grid-column이 적용되는 범위가 첫번째 1fr과 두번째 2fr 사이까지가 아닌가요? 그림으로 보여드리자면 파랑색 부분이지 않나요? 답변해주시면 감사하겠습니다! ++++++ 좋은 강의감사합니다 재밌게 공부중입니다!

  • html/css
  • HTML/CSS
정익명 댓글 1 좋아요 2 조회수 351

선생님 세그멘테이션관련 질문을 드립니다 ㅎ

미해결

[개정판] 딥러닝 컴퓨터 비전 완벽 가이드

선생님 안녕하세요 이번에 선생님강의 머신러닝2개, 컴퓨터비젼2개를 모두 완강한 열혈팬 회사원입니다 ㅎㅎㅎ 선생님 강의 덕분에 이번에 회사에서 세그멘테이션을 담당하게 되엇는데, 세그멘테이션강의관련 질문이 잇어서 이렇게 메일을 드립니다 ㅎ 바쁘시겟지만 조언 좀 부탁드리겟습니다 <배경> 이번에 검출할 객체(첨부파일)는 바늘과 같이 아주 가늘고 긴 객체(섬유)인데 이미지1장당 객체전체면적이 0.5 - 2%밖에 없는 아주 미세한 객체입니다. 실제원본데이터에서도 객체는 눈으로 자세히 보아야 검출할수 잇을정도입니다 ㅎ (학습데이터30장, 학습마스크영상 30장, 테스트데이터 5장 ). 사용모델은 깃헙에서 공개한 U-NET모델로 세그멘테이션을 수행햇는데, 첫epoch부터 정확도가 90%이상, 로스가 0.1이하로 상당히 높은 성능을 보엿는데 예측결과이미지영상에는 아무것도 검출이 안된 상태(완전검은영상)입니다. 참고로 다른 이미지데이터를 가지고 U-NET모델로 세그멘테이션을 수행해본결과 예측결과도 상당히 잘되어서 모델에는 문제가없는것으로 판단햇습니다. 여기서 조언을 좀 부탁드리겠습니다. 1> 정확도는 90%이상, 로스가 0.1이하인데 아무것도 검출이 안되엇다는 것은 , 객체가 너무미세해서 검출을 못한걸로 이해해도 되는지요? 2> 이런경우 성능을 올리기 위한방법으로 오그멘테이션방법도 잇는데, 특히 사용해야할 오그멘테이션방법이 잇는지요? 참고로 확대기능등을 사용햇습니다. 3> 다른방법으로 선생님CNN강의에서사용한 mark-rcnn 방법도 해볼려고 하는데, 어떻게 생각하시는지요? 글을 적다보기 글이 너무 길어져서 죄송합니다, 바쁘시겟지만 조언 좀 부탁드리겟습니다 ㅎ

  • 머신러닝
  • tensorflow
  • 컴퓨터-비전
  • 딥러닝
  • keras
  • python
  • 딥러닝
  • 컴퓨터-비전
  • 머신러닝 배워볼래요?
anycad11 댓글 1 좋아요 0 조회수 422

단위 심화 강의 중 질문..

해결됨

[코드캠프] 강력한 CSS

안녕하세요 <단위 심화> 강의 중 .item2 { background: green; width: calc(100%- 70px); height: 50px; } "- 사이에 공백을 넣지 않았다. 따라서 100% 가로값만 부여가 되었고, 이 때 100%는 입력한 100%가 아니다. item2가 블록요소이기 때문에 자동으로 부모요소의 가로값을 꽉 채워서 들어간다. 그렇기 때문에 100%의 가로줄이 입력된 것이다. 따라서 이 줄은 아무런 기능을 하지 않는다." 이렇게 알려주셨는데 이해가 완벽히 되지 않습니다. 더 쉽게 설명을 해주실 수 있을까요..?

  • html/css
  • HTML/CSS
liltjay 댓글 1 좋아요 0 조회수 266

영상 속 코드와 배포하신 소스 코드가 다르네요.

미해결

애플 웹사이트 인터랙션 클론!

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { height: 500vh; } .sample-video { position: fixed; top: 0; left: 0; width: 100%; } </style> </head> <body> <div class="container"> <!-- <video class="sample-video" src="../video/sample-low.mp4" muted></video> --> <video class="sample-video" src="../video/sample-high.mp4" muted></video> </div> <script> const videoElem = document.querySelector('.sample-video'); let videoDuration; videoElem.addEventListener('loadeddata', function() { console.log('비디오 로드 완료'); videoDuration = videoElem.duration; init(); }) let progress; let currentFrame; function init() { window.addEventListener('scroll', function () { progress = pageYOffset / (document.body.offsetHeight - window.innerHeight); console.log(progress); if (progress < 0) progress = 0; if (progress > 1) progress = 1; requestAnimationFrame(function() { videoElem.currentTime = videoElem.duration * progress; }) }); } </script> </body> </html> 복붙해서 사용하세요.

  • html/css
  • HTML/CSS
  • 웹-디자인
  • svg
  • 인터랙티브-웹
  • 인터랙티브-웹
  • 웹 디자인
  • 클론코딩
  • javascript
  • 클론코딩
mill 댓글 0 좋아요 0 조회수 677

인기 태그

인프런 TOP Writers

주간 인기글