묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결처음 만난 리액트(React)
챕터03 화면에 아무것도 안 나와요.
영상보고 코드 똑같이 작성했는데 화면에 아무것도 안 나와요.리액트 버전 18에서 17로 다운그레이드도 했는데 여전히 아무것도 안 나오네요.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman에서 오류가 있습니다
눈동자 모양no enviorment에서 grab-market-mock-server로 전환이 안됩니다
-
미해결리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트
12강 style.scss에 연동할 때 에러가 뜹니다..
css>section>_today.scss파일을 수정하고 style.scss에 @import "section/today";를 하려고 하니 아래와 같이 에러가 뜹니다!! ㅠㅠ
-
미해결웹 퍼블리셔를 위한 자바스크립트 & 제이쿼리 핵심이론 실전예제(교재, 완성본)
질문드립니다.
강사님의 과목별 강의영상은 거의 다 잘 보고 있습니다.04.제이쿼리실전예제에서22) 가로 슬라이더(이전 다음 버튼, Autoplay 제어 버튼)위의 예제에서 좌우버튼만 있는데 하단 버튼을 할때는 어찌해야 할지 감이 잘 안잡혀서요.슬라이드 이미지가 3~5컷이라면 개수만큼 하단에 작은원형버튼이 있고 버튼을 클릭하면 해당슬라이드 이미지가 슬라이드되게 하려고 합니다.
-
미해결따라하며 배우는 HTML, CSS
인스타그램 실습
강의를 듣고 인스타그램 실습을 진행하였습니다.하지만 위 사진처럼 사이드바가 컨텐트박스와 겹쳐보이는 문제가 발생하였고, 강의를 여러번 보면서 오류를 확인하고 있지만 길이가 길고 제 눈으로 확인이 안되어 질문드립니다...위가 side.css일부, 아래가 main.css일부입니다.side-menu{ max-width: 290px; position: fixed; left: 50%; top: 84px; transform: translateX(calc(-50%+322px)); display: none; flex-direction: column; }.main-container{ background-color: #ffffff; margin-top: 44px; margin-bottom: 44px; display: flex; } .content-container { width: 100%; max-width: 935px; padding: 0 0 8px; margin: 0 auto; display: flex; } .content { width: 100%; max-width: 614px; margin: 0 auto; display: flex; flex-direction: column; }<main class="main-contaniner"> <section class="content-container"> <div class="content"> <div class="stories"> <div class="stories_content"> <button class="story"> <div class="story_avatar"> <div class="story_border"> <svg width="64" height="64"> <circle r="31" cy="32" cx="32" /> </svg> </div> <div class="story_picture"> <img src="assets/images/avatar.png" alt="user picture"> </div> </div> <span class="story_user">user1</span> </button> </div> </div> <div class="posts"> <article class="post"> <div class="post_header"> <div class="post_profile"> <a href="#" class="post_avatar"> <img src="assets/images/avatar.png" alt="user picture"> </a> <a href="#" class="post_user">user1</a> </div> <button class="post_more-options"> <img src="assets/icons/more.svg"> </button> </div> <div class="post_content"> <div class="post_medias"> <img src="assets/images/picture.jpeg" alt="post content" class="post_media"> </div> </div> <div class="post_footer"> <div class="post_buttons"> <button class="post_button"> <img src="assets/icons/heart.svg" alt="heart"> </button> <button class="post_button"> <img src="assets/icons/comment.svg" alt="comment"> </button> <button class="post_button post_button--align-right"> <img src="assets/icons/bookmark.svg" alt="bookmark"> </button> </div> <div class="post_infos"> <div class="post_likes"> <a href="#" class="post_likes-avatar"> <img src="assets/images/avatar.png" alt="user picture"> </a> <span>Liked by <a href="#" class="post_name--underline">user2</a>and <a href="#">33 others</a> </span> </div> <div class="post_description"> <span> <a href="#" class="post_name--underline"> user </a> description </span> </div> <span class="post_date-time">30 minutes ago</span> </div> </div> </article> </div> </div> <div class="side-menu"> <div class="side-menu_user-profile"> <a href="#" class="side-menu_user-avatar"> <img src="assets/images/avatar.png" alt="user picture"> </a> <div class="side-menu_user-info"> <a href="#">user1</a> <span>nickname</span> </div> <button class="side-menu_user-button"> Switch </button> </div> <div class="side-menu_suggestions-section"> <div class="side-menu_suggestions-header"> <h2>Suggestion for you</h2> <button>See All</button> </div> <div class="side-menu_suggestion-content"> <div class="side-menu_suggestions"> <a href="#" class="side-menu_suggestions-avatar"> <img src="assets/images/avatar.png" alt=""> </a> <div class="side-menu_suggestion-info"> <a href="#"> user11 </a> <span>Followed by user2, user3 and others</span> </div> <button class="side-menu_suggestion-button">Follow</button> </div> <div class="side-menu_suggestions"> <a href="#" class="side-menu_suggestions-avatar"> <img src="assets/images/avatar.png" alt=""> </a> <div class="side-menu_suggestion-info"> <a href="#"> user11 </a> <span>Followed by user2, user3 and others</span> </div> <button class="side-menu_suggestion-button">Follow</button> </div> </div> </div> <div class="side-menu_footer"> <div class="side-menu_footer-links"> <ul class="side-menu_footer-list"> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">About</a> </li> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">Help</a> </li> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">Press</a> </li> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">Phone</a> </li> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">API</a> </li> </ul> </div> <span class="side-menu_footer-copyright">© 2023 instargram from facebook</span> </div> </div> </section> </main>
-
미해결따라하며 배우는 HTML, CSS
유튜브 실습
안녕하세요.선생님의 강의를 보고 유튜브 실습을 진행했는데 search bar의 위치가 중앙이 아닌 오른쪽 다른 아이콘에 붙어있습니다.코드를 확인했을때 이상하다고 생각하는 부분이 없었습니다...그리고 sidebar의 글자 크기는 영상과 달라도 괜찮나요?.header{ height: 55px; display: flex; flex-direction: row; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: #212121ff; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #4d4d4d; } .left-section{ display: flex; align-items: center; } .hamburger-menu{ height: 24px; margin-left: 24px; margin-right: 24px; } .youtube-logo{ height: 70px; } .middle-section{ flex: 1; margin-left: 70px; margin-right: 35px; max-width: 500px; display: flex; align-items: center; flex-grow: 1; } .search-bar{ flex: 1; height: 36px; padding-left: 10px; font-size: 16px; border: 1px solid #4d4d4d; border-radius: 2px; background-color: #121212; width: 0; } .search-bar::placeholder{ font-size: 16px; } .search-button{ height: 40px; width: 66px; background-color: #323232; border: 1px solid #4d4d4d; margin-left: -1px; margin-right: 10px; } .search-icon{ height: 25px; } .voice-search-button{ height: 40px; width: 40px; border-radius: 20px; border: none; background-color: #121212; } .voice-search-icon{ height: 24px; } .search-button, .voice-search-button, .upload-icon-container{ display: flex; justify-content: center; align-items: center; position: relative; } .search-button .tooltip, .voice-search-button .tooltip, .upload-icon-container .tooltip{ position: absolute; background-color: white; bottom: -30px; padding: 4px 8px 4px 8px; border-radius: 2px; font-size: 12px; opacity: 0; transition: opacity 0.15s; white-space: nowrap; } .search-button:hover .tooltip, .voice-search-button:hover .tooltip, .upload-icon-container:hover .tooltip{ opacity: 1; } .upload-icon{ height: 24px; } .youtube-apps-icon{ height: 24px; } .notifications-icon{ height: 24px; } .current-user-picture{ height: 32px; border-radius: 16px; } .right-section{ width: 180px; margin-right: 20px; display: flex; justify-content: space-between; align-items: center; } .notifications-icon-container{ position: relative; } .notifications-count{ position: absolute; top: -2px; right: -5px; background-color: rgb(200, 0, 0); color: white; font-size: 11px; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; border-radius: 10px; } <header class="header"> <div class="left-section"> <img class="hamburger-menu" src="assets/icons/hamburger-menu.svg" > <img class="youtube-logo" src="assets/icons/youtube-logo.svg"> </div> <div class="middle-section"> <input class="search-bar" type="text" placeholder="Search" > <button class="search-button"> <img class="search-icon" src="assets/icons/search.svg" > <div class="tooltip">Search</div> </button> <button class="voice-search-button"> <img class="voice-search-icon" src="assets/icons/voice-search-icon.svg" > <div class="tooltip">Search with your voice</div> </button> <div class="right-section"> <div class="upload-icon-container"> <img class="upload-icon" src="assets/icons/upload.svg" > <div class="tooltip">Create</div> </div> <img class="youtube-apps-icon" src="assets/icons/youtube-apps.svg" > <div class="notifications-icon-container"> <img class="notifications-icon" src="assets/icons/notifications.svg"> <div class="notifications-count">1</div> </div> <img class="current-user-picture" src="assets/images/avatars/avatar-1.png" > </div> </div> </header>
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
워프 설치 전 문의드립니다
안녕하세요~ 카페 24로 호스팅했다가 제한이 많이 강의내용 따라가기가어려워 다시 패스트코멧으로 호스팅을했습니다. 도메인도 호스팅케이알에서 받아 진행을하고, 이제 30시간 넘어 지났는데요 아직도 도메인 접근하면 호스팅이 연결이 되지않은것 같아, 강의보기를 더 진행을 못하고있습니다.혹시 도메인 연결되기전에 미리 워프를 설치하고 강의내용을 따라 설정을 해도 되나요? 아니면 다른 방법으로 진행하고, 나중에 다른 변경설정을 해야되는지 알고싶습니다. 설 연휴다보니.. 테마를 요청드리고 빨리 받아서 적용을 하고싶어서^^;; 문의드립니다. 감사합니다 : )
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
CSS 포지셔닝(clear) 관련 질문입니다.
float속성을 상속받아서 마지막 div는 제일 위로 올라가서 확인이 안된다고 하셨는데질문1) 제일 위로 올라간 이유가있나요?질문2) float속성을 상속받는다고 하셨는데 left , right둘다 상속받는건가요 아니면 마지막에 설정된 right만 상속받는건가요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
인라인 요소 관련 질문입니다.
퍼블리싱의 모든것 인라인 요소 , 블록요소 , 인라인 블록 요소편에서인라인 요소는 크기값을 갖을수 없다고 했는데CSS로 HTML가로배치편에서 실습하실때 span태그에 width와 height값이 적용되는데 이유를 알수 있을까요?
-
해결됨처음 만난 리액트(React)
미니 블로그를 만들며 생긴 궁금증입니다.
지금은 그냥 전부 따라 치고 마지막에 실행해서 결과를 확인하는 방식이지만 실제로 리액트로 개발을 할 때는 css쪽은 직접 화면을 보면서 해야될텐데 만든 컴포넌트가 생각대로 구현이 되어있는지 확인을 하려면 App.js 파일에 직접 컴포넌트를 넣어서 확인해야 하나요?페이지 컴포넌트들 같은 경우 같은 css가 중복되는데 중복되는 코드를 하나로 관리하려면 어떻게 해야할까요?
-
해결됨따라하며 배우는 HTML, CSS
a-button:hover , active에 다음과 같은 에러 메시지가 뜹니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
익스텐션 설치 질문이요
시험준비자는 익스텐션 auto rename taghtml to css autocompletiomhtmltagwrapbracket pair colorizer 2indent-rainbowmaterial themehtml css supportbeautifycolor pickerliveserver 전부 설치하면 안되나요? 그리고 color picker 없으면 색깔이 안뜨는데 그러면 색이름만 적나요?
-
미해결따라하며 배우는 HTML, CSS
도표 자료 (해결)
강의를 하시면서 쓰시는 자료는 어디서 볼 수 있을까요?? 옆에 띄워놓고 같이 보면서 강의를 들을려고 하는데, 강의에서 쓰시는 도표자료는 없더라고요!!
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험장에서 단축키 설정
시험장에서 프로그램에 단축키설정 원하는키로 세팅 바꿔줘야 되나요?
-
미해결웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)
유효성검사 강사님처럼 쉽게 하는 방법
강사님 안녕하세요! 유튜브에서 보고 인프런까지 따라와서 강의 잘 듣고 있습니다! 실전사이트A 영상1시간19분쯤에서 유효성검사 엄청 편하게 하시던데 어떤 툴을 사용하면 되나요?
-
해결됨React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
왜 {import.meta.env.VITE_SOME_KEY} 가 적용이 안될까요 ㅠㅠ
/src/.env 파일에 VITE_SOME_KEY = 123이렇게 설정하고, App.jsx에 function App() { return(<>{import.meta.env.VITE_SOME_KEY} <Counter/> </> )}export default App;이렇게 설정했습니다. 근데 왜 화면엔 123이 출력이 안되는 걸 까요 ㅠ? 오류 메시지도 없고..강의랑 똑같이 했는데 왜 안나올끼요 ..
-
미해결퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)
반응형에서 이미지를 다른 이미지로 바꾸고 싶으면 어떻게 하나요?
pc에서 띄우는 이미지와모바일에서 띄우는 이미지를 다르게 바꾸려면 어떻게 하면 좋을까요? <section class="welcome" id="feature1"> <img src="images/bg-welcome.jpg"> </section>여기서 쓰는 이미지를 바꾸고 싶어요
-
미해결[웹 퍼블리싱 실습] 웹 표준 사이트 만들기
무료 호스팅 FTP 연결 경고 알림 관련
안녕하세요.웹 표준 강의 사이트 layout 8 강의 수강 중인 학생입니다.닷홈에서 무료 호스팅을 받아서 FileZilla에서FTP를 연결하려고 하는데요... TLS 기반이 아니라고 계속할 경우비밀번호와 파일이 그대로 인터넷에 전송될거라고안내 팝업이 떠서 무서워요. 인터넷 뒤져보니까 TLS가 SSL과 동일하다고포트번호를 22번으로 설정하게되면안전하게 연결이 된다고해서 따라해봤는데안되더라고요. 어떻게 연결해야하나요?그냥 연결해도 괜찮을까요?다들 어떻게 하셨나요?도움 부탁드리겠습니다.
-
미해결[웹 퍼블리싱 실습] 웹 표준 사이트 만들기
[헤더 타이틀 & 웹 폰트]
4:10 초 즈음에 ..header .header-tit h1 {display : inline} 블록 구조를 인라인 구조로 바꿨는데 불구하고 padding top 이 먹는 이유는 무엇인가요 ? inline 은 padiing 값이 좌우만 값이 먹는게 아닌가요 ?
-
미해결Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
맥북 프로 14 가상화 확인
안녕하세요 강사님 저는 지금 현재 도커 소개와 도커 설치 강의를 수강하고 있습니다. window에서는 작업 관리자에 들어가면 가상화를 확인할 수 있지만 제가 사용하고 있는 맥북 프로 14에서는 가상화가 사용되고 있는지 확인 할 수 없습니다. 그래서 구글에도 검색을 해 보았는데 무슨 말인지 정확히 이해하기 힘들어 질문을 남깁니다. 맥북 프로 14 모델에서는 가상화가 사용되고 있는것인가요? 만약 사용되고 있지 않다면 무엇을 어떻게 설치해야 하는지 알려주시면 감사하겠습니다.