172만명의 커뮤니티!! 함께 토론해봐요.
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
a태그들 네개 섹션으로 나누는 .items 부분 혹시 float랑 inline-block으로 나누는 법 말고 flex해서 1씩 나눠도 상관없나요 ??저런 나누는거 나오면 저는 꼭 flex로 하는 버릇이 들었네요...뭐가 더 좋고 답이다~ 그런건 없는건가요?!
미해결
쉽고 빠른 스타일링 Tailwind CSS 기초 가이드
선생님 강의에서 보여주셨던 notion 은 공유되지 않는 학습 자료인가요 ? 아니면 다른 수업에서 받을 수 있는 자료인가요 ?
해결됨
면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
안녕하세요 선생님 현재 제가 질문을 남기는 이 강의와 ' 퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)' 이 강의는 어떠한 차이점이 있는지 내용이 많이 겹치는지 궁금해서 글남깁니다~ 궁금한게 많아 질문을 자주 남기는데 항상 빠르게 답변 해주셔서 정말 감사합니다.
미해결
CSS Flex와 Grid 제대로 익히기
css 셀렉터 처럼 쓰면 예를 들어 ul.menu 하면 자동으로 html 완성되는 기능입니다. html 작성이 매우 편한거 같아서요! 가르쳐주시면 감사하겠습니다.
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
제가 scss로 강의 듣는데 html에 profile dark 썼는데 scss에는 코드를 어떻게 적어야 할까요? 아래처럼 적었는데 미동도 안해요 ㅜㅠ
미해결
퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)
안녕하세요 강의자료 감사히 잘 읽었습니다 질문이 있는데요.. 여기서 uikit 어떤 컴포넌트를 어떻게 사용하면 좋을까요?
해결됨
모바일 웹 퍼블리싱 포트폴리오 with Figma
선생님 안녕하세요~ 모바일 목업 안에 iframe 넣었을때 세로스크롤의 기능은 살리고 우측 막대 부분만 없애고 싶어서 구글링 해보았는데요.. 구글링 한대로 해보면 우측 막대는 없어지는데 기능도 같이 죽더라구요.. 기능은 살리고 우측 막대만 없애는 방법이 있을까요?
해결됨
구글 애드센스 수익형 워드프레스 블로그 만들기
강사님 안녕하세요! 워프 반응형 설명하실때 PC, 테블릿, 모바일 각각 설정을 다르게 변경해주시는데 저는 테블릿에서 설정을 바꾸면 그게 전체에 적용되어서 각각 설정이 안되고 전체 변경이 됩니다ㅠㅠ 계속 이부분을 설명하시는데 방법이 없어서 질문드립니다...ㅠㅠ 제가 설정을 잘못한걸까요? PC에서 저장하고 테블릿 부분 다르게 변경해도 동일하게 PC에도 해당 설정이 반영됩니다ㅠㅠ
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
실전 퍼블리싱 제작 part2의 배경이미지 풀스크린 검색창 강의를 듣고 있습니다. input 요소에 높이값을 부여했더니 첨부한 스샷과 같이 text input과 submit input의 위치가 어긋나는데요, 어떤 이유에서 이러는건지 잘 모르겠습니다. CSS의 다른 속성들은 모두 강의 내용과 동일하게 했고, 두 input 요소에 공통으로 높이값만 추가한 상태입니다. 감사합니다
미해결
장고 설계철학으로 시작하는 파이썬 장고 입문
화면과같이 include 부분 강좌와 다르게 저절로 세팅이 되고 서버 실행하면 계속 오류가나는데 어떻게해야하나요ㅜㅜ
미해결
처음 만난 리액트(React)
영상보고 코드 똑같이 작성했는데 화면에 아무것도 안 나와요. 리액트 버전 18에서 17로 다운그레이드도 했는데 여전히 아무것도 안 나오네요.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
눈동자 모양 no enviorment에서 grab-market-mock-server로 전환이 안됩니다
미해결
리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트
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시간 넘어 지났는데요 아직도 도메인 접근하면 호스팅이 연결이 되지않은것 같아, 강의보기를 더 진행을 못하고있습니다. 혹시 도메인 연결되기전에 미리 워프를 설치하고 강의내용을 따라 설정을 해도 되나요? 아니면 다른 방법으로 진행하고, 나중에 다른 변경설정을 해야되는지 알고싶습니다. 설 연휴다보니.. 테마를 요청드리고 빨리 받아서 적용을 하고싶어서^^;; 문의드립니다. 감사합니다 : )
미해결
Next + React Query로 SNS 서비스 만들기
아이디, 비밀번호를 입력하고 로그인 버튼을 누르면 500에러가 발생합니다. 9090 서버 포트는 잘 켜져있다고 뜨고, 코드 올리겠습니다. <auth.ts> import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; import KakaoProvider from "next-auth/providers/kakao"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { // credentials 안에 id창에서 입력하는 정보다 담겨있음 const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, //next-auth의 credentials에는 username, password로 고정되어 있어서 이를 바꿔줌 }), }); //로그인 실패시 if (!authResponse.ok) { return null; } const user = await authResponse.json(); return user; }, }), //kakao로그인을 사용할때 // KakaoProvider(), ], }); <LoginModal.tsx> "use client"; import style from "@/app/(beforeLogin)/_component/login.module.css"; import { signIn } from "next-auth/react"; import { useRouter } from "next/navigation"; import { ChangeEventHandler, FormEventHandler, useState } from "react"; export default function LoginModal() { const [id, setId] = useState(""); const [password, setPassword] = useState(""); const [message, setMessage] = useState(""); const router = useRouter(); const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => { e.preventDefault(); setMessage(""); try { await signIn("credentials", { username: id, password, redirect: false, }); //kakao, naver로 바꿀 수 있음 //client 일때는 next-auth/react의 signIn을 사용 //server 일때는 @/auth의 signIn을 사용 router.replace("/home"); } catch (error) { console.log(error); setMessage("아이디와 비밀번호가 일치하지 않습니다."); } }; const onClickClose = () => { router.back(); }; const onChangeId: ChangeEventHandler<HTMLInputElement> = (e) => { setId(e.target.value); }; const onChangePassword: ChangeEventHandler<HTMLInputElement> = (e) => { setPassword(e.target.value); }; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03" > <g> <path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={onSubmit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder="" /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" className={style.input} value={password} onChange={onChangePassword} type="password" placeholder="" /> </div> </div> <div className={style.message}>{message}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={!id && !password}> 로그인하기 </button> </div> </form> </div> </div> ); } <middleware.ts> export { auth as middleware } from "./auth"; export const config = { matcher: ["/compose/tweet", "/home", "/explore", "/messages", "/search"], }; <route.ts> export { GET, POST } from "@/auth"; 에러 내용 : TypeError: next_dist_server_web_exports_next_request__WEBPACK_IMPORTED_MODULE_0__ is not a constructor at reqWithEnvURL (webpack-internal:///(rsc)/./node_modules/next-auth/lib/env.js:15:12) at httpHandler (webpack-internal:///(rsc)/./node_modules/next-auth/index.js:139:139) at /Users/imhwarang/projects/zerocho/z-com/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:63815 at /Users/imhwarang/projects/zerocho/z-com/node_modules/next/dist/server/lib/trace/tracer.js:133:36 at NoopContextManager.with (/Users/imhwarang/projects/zerocho/z-com/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062) 너무 길어서 다 올릴수는 없네요 에러내용을
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
float속성을 상속받아서 마지막 div는 제일 위로 올라가서 확인이 안된다고 하셨는데 질문1) 제일 위로 올라간 이유가있나요? 질문2) float속성을 상속받는다고 하셨는데 left , right둘다 상속받는건가요 아니면 마지막에 설정된 right만 상속받는건가요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
퍼블리싱의 모든것 인라인 요소 , 블록요소 , 인라인 블록 요소편에서 인라인 요소는 크기값을 갖을수 없다고 했는데 CSS로 HTML가로배치편에서 실습하실때 span태그에 width와 height값이 적용되는데 이유를 알수 있을까요?
