묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
../ 을 통한 상위 폴더로의 이동없이 어떻게 <img src="images/icons/logo.png />만으로 사진을 불러오신건가요
../ 을 통한 상위 폴더로의 이동없이 어떻게 <img src="images/icons/logo.png />만으로 사진을 불러오신건가요?제가 앞에 ../을 붙이지 않았을 경우에는 그림이 제대로 불러와지지 않습니다<img src="../images/icons/logo.png />를 해야만 정상적으로 사진이 불러와 집니다
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
box-sizing을 전체선택자에 주면 안되나요
다음과 같이 box-sizing을 전체선택자에 줄경우크롬에선 적용이 되고엣지에선 적용이 안되는데*{ margin: 0; padding: 0; box-sizing: border-box; }(각 div 영역에 box-sizing:border-box줄때는 됩니다.) 웹디자인 기능사에선 크롬,엣지,익스플로러(이제 익스플로러는 퇴출이겠지만..?) 동일하게 출력되어야 할거 같은데.... 결론적으로 전체선택자에 box-sizing:border-box를 주면 안되는걸까요?아래 캡처화면은 크롬과 엣지에서 실행시킨 결과입니다.엣지 화면 크롬 화면 전체 코드입니다.<!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"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="logo"> </div> <nav> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> </nav> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="notice"> </div> <div class="banner"> </div> <div class="link"> </div> </div> <footer> <div class="logo2"> </div> <div class="copyright"> </div> <div class="sns"> </div> </footer> </div> <!-- <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script> --> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ border: 1px solid hotpink; width: 1200px; height: 700px; margin: auto; } header{ width: 1200px; height: 100px; border: 1px solid green; } header .logo{ width: 200px; height: 100px; border: 1px solid yellow; float: left; } header nav{ width: 600px; height: 100px; border: 1px solid blue; float: right; } header nav ul { } .slide{ } .slide div{ border: 1px solid green; height: 300px; } .items{ overflow: hidden; } .items div{ border: 3px solid purple; height: 200px; float: left; box-sizing: border-box; } .notice{ width: 500px; } .banner{ width: 350px; } .link{ width: 350px; } footer{} footer div{ border: 2px solid blue; height: 100px; float: left; box-sizing: border-box; } .logo2{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; }
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
질문있습니다
사진과 같이 award-list 가 한화면에 한그룹씩 3개의 슬라이드를 구현하려고 하는데요 슬릭슬라이더 를 입력하니까 구조감이 깨져버립니다.어떤게 문제인지 봐주시면 감사하겠습니다.<!--section : award --> <section class="award"> <div class="award-inner"> <h3 class="title">AWARDS</h3> <div class="award-cont"> <ul class="award-list"> <li class="list-item"> <p class="award-tit"> 2018 경상북도 건축문화상 최우수상<br> 2019 한국건축문화대상 우수상 </p> <span class="award-txt"> 다산면 행정복합타운 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2019 한국문화공간상<br> 2018 김해건축대상 대상 </p> <span class="award-txt"> 김해 서부문화센터 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2016 청주시 아름다운 건축상 은상 </p> <span class="award-txt"> 한국전력공사 충북본부 사옥 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2017 한국문화공간상<br> 2016 한국건축문화대상 우수상<br> 2016 경상북도 건축문화상 대상 </p> <span class="award-txt"> 고령군 문화체육복지관 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2015 한국건축문화대상 우수상 </p> <span class="award-txt"> 서울대학교 치의학대학원 첨단교육연구복합단지 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2012 서울시 건축상 우수상 </p> <span class="award-txt"> 올림픽홀 복합문화공간 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> </ul> <ul class="award-list"> <li class="list-item"> <p class="award-tit"> 2011 경주시 건축상 금상 </p> <span class="award-txt"> 월성스포츠센터 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2011 제주건축문화대상 본상 </p> <span class="award-txt"> 한전 제주지사 사옥 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2013 경주시 건축상 금상 </p> <span class="award-txt"> 한국원자력환경공단 환경친화단지 방문객센터 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2018 경상북도 건축문화상 최우수상<br> 2019 한국건축문화대상 우수상 </p> <span class="award-txt"> 서울대학교 의과대학 의생명과학관 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2007 부산다운 건축상 우수디자인 건축물부분 동상<br> 2007 이원 환경 건축,조경대상 환경건축대상 </p> <span class="award-txt"> 신고리 원자력 지역협력시설 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2004 한국건축문화대상 우수상 </p> <span class="award-txt"> 서울대학교 이공계 멀티미디어 강의동 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> </ul> <ul class="award-list"> <li class="list-item"> <p class="award-tit"> 2007 경상남도 건축대상 은상<br> 2005 대한민국 토목, 건축대상 최우수상 </p> <span class="award-txt"> 김해 문화의 전당 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> </ul> </div> </div> </section> /*css*/ /*section - award*/ .award-inner { margin: auto; padding: 130px 0 0; } .award-cont { width: 1300px; padding: 50px; margin: 0 auto; justify-content: center; } .award-cont ul { width: 1200px; height: 565px; margin: auto; border: 1px solid red; } .award-cont li { float: left; width: 33.3333%; height: 30vh; border: 1px solid blue; } /* Slick Slider : award */ $(document).ready(function(){ $('.award-list').slick({ dots: false, infinite: true, speed: 300, slidesToShow: 1, adaptiveHeight: true }); });
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
결과 페이지 만들기 -js편 execCommand를 더이상 지원하지 않습니다.
프론트엔드 마지막편을 보고 있는데 더이상 execCommand 명령어를 지원하지 않는다고 하여 다른 명령어를 찾아봤는데 옳은 코드 인가요?현재 url을 복사하는 함수를 작성한 것입니다.function copyUrl(){ let url = window.location.href; navigator.clipboard.writeText(url) .then(()=>{ alert('URL을 클립보드에 복사했습니다.'); }); }
-
미해결쉽고 빠른 스타일링 Tailwind CSS 기초 가이드
수업시 사용하는 툴이 궁금합니다.
수업시 사용하는 툴이 궁금합니다.윈도우에서 강의 하실때 사용하시는 그리기 툴 이름 알 수 있을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
tfjs-node 안깔려서
tfjs-node 안깔려서 해보라고 하는거 해보다가잘 되던 nodemon server.js 도 안되고 뭐가 잘못됐는지 모르겠습니다.빨리 마무리하고 싶은데 답답하네요강의 업데이트 좀 해주셨으면 좋겠는데 생각 없으신가요
-
미해결제대로 파고드는 HTML CSS - by 얄코(Yalco)
블로그 게시 관련
안녕하세요, 선생님!혹시 강의 내용 중 일부분(개인적으로 중요하다고 생각하는 부분이나 모르는 부분)을 개인 블로그에 정리해서 기록이 가능할까요?만약 가능하다면, 게시 가능 범위도 알려주시면 감사하겠습니다:)
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
flyctl 관련 재문의 드립니다.
flyctl deploy가 진행이 안돼서제 컴퓨터에 있는 도커를 삭제하고 다시 실행했더니아래와 같은 상태에서 멈췄습니다.구글링 해봐도 잘 모르겠어요 ㅠㅠ어떻게 해결하면 될까요? C:\Users\dahye\Documents\react-project\d-market-server>flyctl deploy ==> Verifying app config--> Verified app config==> Building imageRemote builder fly-builder-quiet-sunset-984 ready==> Building image with Buildpacks--> docker host: 20.10.12 linux x86_6420: Pulling from heroku/buildpacksDigest: sha256:1dd1a9c5f291b47fed1aed3f4c348fdc878380319c15f0e09753a5898482554eStatus: Image is up to date for heroku/buildpacks:2020-cnb: Pulling from heroku/herokuDigest: sha256:c9d053a463c7cd81672a3b0d5d5e26bdcbdffe2782565ccbedc15867b8cddfb9Status: Image is up to date for heroku/heroku:20-cnbWarning: Platform requested deprecated API '0.6'===> DETECTINGWarning: Buildpack 'heroku/ruby@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/python@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/scala@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/php@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/go@0.0.0' requests deprecated API '0.4'Warning: Buildpack 'heroku/gradle@0.0.0' requests deprecated API '0.4'2 of 3 buildpacks participatingheroku/nodejs-engine 0.8.16heroku/nodejs-npm 0.5.2===> ANALYZINGPrevious image with name "registry.fly.io/d-market-server:cache" not found===> RESTORING===> BUILDING[Heroku Node.js Engine Buildpack][Checking Node.js version]Detected Node.js version range: *Resolved Node.js version: 19.7.0[Installing Node.js distribution]Downloading Node.js 19.7.0Extracting Node.js 19.7.0Installing Node.js 19.7.0[INFO] Installing toolbox[INFO] - yj[INFO] Using npm v9.5.0 from Node[INFO] Installing node modules from ./package-lock.jsonnpm WARN config production Use --omit=dev instead.WARN failed to finish build in graphql: Post "https://api.fly.io/graphql": context canceledOops, something went wrong! Could you try that again?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
flyctl 배포 관련 에러 문의드립니다.
cmd창에서 flyctl deploy를 실행하면 아래와 같은 에러가 뜹니다.도커 빌더 이미지 관련 오류인것 같은데 어떻게 해결해야 하나요?urce: failed to fetch builder image 'index.docker.io/heroku/buildpacks:20': resolve auth for ref index.docker.io/heroku/buildpacks:20: error getting credentials - err: exec: "docker-credential-desktop": executable file not found in %PATH%, out: ``
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭 메뉴 콘텐츠(스타일 01) with JQUERY 에서 제이쿼리 질문 드립니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 해당 강의를 보고 간단한 ul li a 를 이용한 메뉴 탭을 연습해 보았습니다.그런데 이 부분에서 제이쿼리를 짤 때예제에서는 .testimonial-pic 밑에 img 들이 형제 요소로 잡혀서 siblings 를 이용해 removeClass('active') 를 하여 클릭한 것 외에 나머지들의 active 클래스들이 빠지도록 했는데제가 만든 부분은 menu 라는 div 에 ul > li > a 로 작성을 하고 a 에 active 를 넣어주다보니 siblings가 먹질 않아서 고민고민하다 제이쿼리는 li 에 class="active"를 넣어주고 css 에서는 active 가 들어가면 그 하위 a에 효과가 들어가도록 한번 짜봤는데 이렇게 하는게 문제 없는 방법일까요? 아니면 더 나은 방법이 있는 걸까요?<!DOCTYPE html> <html lang="ko"> <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"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="content"> <div class="menu"> <ul> <li class="active" data-alt="tab1"><a href="#none">메뉴01</a></li> <li data-alt="tab2"><a href="#none">메뉴02</a></li> <li data-alt="tab3"><a href="#none">메뉴03</a></li> <li data-alt="tab4"><a href="#none">메뉴04</a></li> </ul> </div> <div class="news active" id="tab1"> news01 </div> <div class="news" id="tab2"> news02 </div> <div class="news" id="tab3"> news03 </div> <div class="news" id="tab4"> news04 </div> </div> <script> $('.menu ul li').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') $('.content .news').removeClass('active') $('#'+ $(this).attr('data-alt')).addClass('active') }) </script> </body> </html> * { margin:0; padding:0; box-sizing: border-box; } body { height: 100vh; } a{ text-decoration: none; color: #000; } li { list-style: none; padding: 10px; } .content { border: 1px solid #000; } .menu ul { display: flex; } .menu ul a { padding:5px; color:gray; } .menu ul li.active a{ color: #000; font-weight: 700; } .news { border: 1px solid #000; height: 100px; display: none; } .news.active { display: block; }위 코드 처럼 만들었고 고민 후 수정해서 정상적으로 작동하는 전체 코드 입니다.수정전에 문제였던 부분을 코드와 함께 설명드리면,예제를 따라하면서 하다보니HTML 에 a 태그에 클래스와 데이터속성을 넣어줘서 <div class="menu"> <ul> <li><a class="active" data-alt="tab1" href="#none">메뉴01</a></li> <li><a data-alt="tab2" href="#none">메뉴02</a></li> <li><a data-alt="tab3" href="#none">메뉴03</a></li> <li><a data-alt="tab4" href="#none">메뉴04</a></li> </ul> </div>css 에서도 a 에 active 효과를 주었고.menu ul li a.active{ color: #000; font-weight: 700; }그래서 a태그들은 형제요소가 아니기 때문에 siblings 가 먹지 않았어서 이 문제를 어떻게 해결해야 하나 고민하다 맨 위에 정상작동되는 코드처럼 처리하였습니다. <script> $('.menu ul li a').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') $('.content .news').removeClass('active') $('#'+ $(this).attr('data-alt')).addClass('active') }) </script> 해당 코드로 active를 넣어주고 해도 크게 문제 될게 없는지 더 나은 방법이 있는지 알려주시면 감사하겠습니다.(메뉴 구성을 .menu 클래스 밑에 ul과 li 를 쓰지말고 a 태그만을 이용하여 siblings 형제요소들을 사용하는 방법도 생각했으나 메뉴를 흔히 ul li로 만들기 때문에 해당 방법은 사용하지 않았습니다.)
-
미해결견고한 기본기 HTML&CSS
4. 벤더프리픽스
관리 화면에서 ‘Autoprefixer: Format On Save’ 설정에 체크합니다. 이제 파일을 저장하면 Autoprefixer가 작동하며 자동으로 벤더프리픽스를 여러분의 코드에 추가합니다.그리고 하단의 ‘setting.json에서 편집’ 버튼을 눌러 setting.json 편집화면으로 이동합니다. 이때,setting.json 편집화면이 영상에 나오는 코딩과 다른데 그냥 작성해주신 아래 코드를 넣으면 괜찮을까요?"autoprefixer.options": { "browsers": [ "last 4 versions", /* 가장 최신 버전에서 4단계 아래 버전까지 지원합니다. */ "ie >= 9", /* IE9 버전 이상만 지원합니다. */ "> 5%" /* 전 세계 브라우저 사용률 중 5% 를 초과하는 브라우저만 대응합니다. */ ]}
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
업로드 후 홈화면에서 이미지가 보이지 않습니다
데이터 베이스에도 기록이 잘 들어가고 사이트 홈화면에도 잘 뜨는데 화면의 이미지가 안뜹니다.uploads파일에도 이미지 다 잘 들어갑니다.인강과 데이터베이스를 비교해봤을 때 경로문제인것같긴한데 어떻게 수정을 해야할까요?근데 DB경로의 역슬래시를 슬래시로 바꾸어도 안뜨고 uploads에는 사진도 잘 들어가고 사진의 경로를 봤을때도 동일해서... 왜 안뜨는걸까요?단순히 한사진의 오류라고생각했었는데 등록한 것 모두 이렇게 되어서...어딜 어떻게 수정해야할지모르겠어서... 일단은 깃허브링크 함께올려봅니다... 홈사이트 화면개발자 툴 상품넣고 난뒤DB데이터 베이스물건 등록 후 vscode에 뜨는것 깃허브 링크: https://github.com/Dalrae03/webstudy/commit/7a5981dafabdbf009b40c0c5814e7e7c6f3ea9dehttps://github.com/Dalrae03/webstudy/commit/c9106654b1d6badba9ae64ce744a11da46b719a5
-
해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
일정시간마다 자동으로 데이터를 생성하는 코드를 짜려고 합니다.
외부 api 에서 ajax를 통해 데이터를 받아오고, 받아온 데이터를 카피해서 mysql 에 삽입하고자 합니다.일정시간마다 반복하는 것은 setInterval 을 활용하면 되는것까지는 구글링을 통해 알아냈는데본 강의에서는 데이터 생성을 postman 을 사용해 수동으로 데이터를 입력하고 전송하셔서 코드 상으로는 어떻게 구현해야 할지 궁금해서 여쭤봅니다! 1줄요약!postman을 통해 했던 데이터 삽입을 코드로 하는 방법이 궁금합니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
image 파일에서 vscode로 드래그 앤 드롭을 처리할 수 없다고 합니다
압축을 푼뒤 진행해도 에러가 납니다The file is not displayed in the text editor because it is either binary or uses an unsupported text encoding.라고 나오고요 hexeditor를 깔아도 해결이 안됩니다찾아보니 50mb를 넘는 자료를 vs코드에서 지원을 못한다고 하는데요 참고로 집에 컴퓨터가 없어 pc방 컴퓨터로 배우는 중입니다
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
선생님 익스는 사라지지 않았나요?
선생님 익스플로러는 사라지지 않았나요?모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기6 이번 강의 들어야 되는지.. 헷갈리네요.오직 익스 호환성을 위한거라면.. 그냥 스킵해도 되나요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
유튜브 썸네일 따는 과정에서 오류가 생겨요 숏츠는 다른 방법이 있나요?
유튜브 숏츠의 썸네일을 사용하려고 합니다인포윈도우 가공하기 단계에서 똑같이 하는데도 섬네일이 오류표시가 나요ㅜㅜ숏츠는 방법이 다른건가요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
Contact 설정 관련해서 질문이 있어요
제가 html, css 등 까지 수강하고 배포 등 다음 과정으로 넘어가려고 하는데 Contact를 활용하는 강의를 못 본거 같아서요 혹시 제가 놓친 부분이 있을까요? 감사합니다..!
-
미해결CSS Flex와 Grid 제대로 익히기
auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.
Q1: auto-fill 에 대해 질문드립니다.<Grid #3 강의의 4:30초> 에서셀이 2개 있고, grid-template-columns에 minmax(200px, auto)가 설정되어 있으며 auto-fill이 적용되어 있을때grid-template-columns: repeat(auto-fill, minmax(200px, auto))전체 Grid Container의 넓이가 500px 일때에, 셀의 column 길이가 200px 이상이 되어지게 됩니다.제가 알기로는 minmax(최솟값, auto) 라면 셀의 길이가 최솟값 보다 커지려면 셀이 가지는 컨텐츠의 길이가 최솟값보다 커야된다고 알고 있는데요.그런데 왜 auto-fill이 설정되어 있을때에는 컨텐츠의 column 길이가 200px 보다 작은데 왜 Grid Container의 넓이 만큼 늘어나는 것인가요?이것이 auto-fill을 적용하여 Grid의 기본 성질인 꽉 차게 늘어나는 성질때문에 그런가요?Q2 auto-fill 적용불가에 대해 질문드립니다.저의 브라우저에서 테스트 해본결과, auto-fill이 적용이 되지 않는 부분은셀이 2개가 있고, column의 길이가 minmax(200px, auto) 이며, auto-fill을 사용하고, Grid Container의 넓이가 600px 초과 된다면,셀이 가지는 column의 길이가 원래는 Grid Container의 길이만큼 꽉차게 늘어나다가 200px이 가질 수 있는 크기를 넘어서게 되니 꽉차지 않게 되는 것 같습니다.위의 질문과 동일한 것같습니다만,자동으로 늘어나는 것은 400px (200px 셀 2개) 의 크기보다 Grid Container의 길이에서 뺀것의 크기가 200px 이상이라면 자동으로 늘어나는 것이 중단되고,200px 이하라면 늘어나는 것이 되는 것인데,왜 200px 이하라면 늘어나는 것입니까? Grid Container의 넓이를 200px으로 나눌때 나머지가 200px 보다 작다면 그냥 Grid의 성질에 의해 늘어나는 것인가요? Flex만 사용하던 사람이라 minmax의 대한 성질과 auto-fill을 공부하니 약간 했갈리네요...
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
upload 페이지에 아무것도 안 뜨는 현상
안녕하세요. 그랩님매일 같이 열정적으로 댓글 달아주셔서 항상 감사드립니다.모든 것이 그러하듯 강의를 운영하는 것도엄청난 공수가 든다는 것을 깨달았네요.현재 오류가 생겼는데, useHistory를 이용해서 upload페이지로 이동한 후 Upload 클라이언트 쪽에서아무 반응도 일어나지 않고 있습니다.아무리 코드랑 구글링을 해봐도 해결이 안되는데요.upload페이지가 console창을 보면 /upload/index.js의 html 코드가 아무것도 불러와지지 않고 있는 것 같아요.혹시 조언좀 구할 수 있을까요?1. 현상 : 클라이언트에 아무것도 뜨지 않음Elements 창을 클릭해도 upload.js 작성한 HTML이 없습니다.2.App.js에 제가 작성한 코드입니다. History와 import 란에 모두 정확하게 작성하였는데요.3. upload/index.js 파일 코드도 같이 첨부드립니다.한번만 봐주실 수 있을까요? ㅠuseHistory가 만료가 되어서 작동을 안 하는걸까요..https://github.com/promotionX/Grabmarket-clinet
-
미해결CSS Flex와 Grid 제대로 익히기
flex-grow IE 질문드립니다.
안녕하세요 선생님. 강의에서 menu-item에 길이를 width 혹은 flex-grow를 넣을 수 있는데 인터넷 익스플로어 때문에 width를 사용하셨는데 caniuse에서 확인하면 IE 버전10이상부터는 flex-grow를 지원하는게 맞을까요?<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>CSS Flex</title> <link rel="stylesheet" href="default.css" /> <!-- <link rel="stylesheet" href="ui.css" /> --> <style> .menu { display: flex; } .menu-item { width: 25%; /* flex-grow: 1; */ background: gold; } .menu-item:hover { width: 35%; /* flex-grow: 1.5; */ background: crimson; transition: all 0.5s ease-in-out; } .menu-link { display: block; /* 클릭하는 버튼 영역을 키우기 위해서 */ padding: 1em; font-size: 1.2rem; font-weight: bold; color: #555; text-decoration: none; text-align: center; } .menu-link:hover { color: #ffffff; } </style> </head> <body> <ul class="menu"> <li class="menu-item"> <a href="#" class="menu-link">Home</a> </li> <li class="menu-item"> <a href="#" class="menu-link">About</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Product</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Contact</a> </li> </ul> </body> </html>
