묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
scss
질문 주실 때 항상 2가지를 지켜주세요.오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. scss에서 watch sass를 누르고, whatching이 되잖아요.근데 저는 . css만 생기지 .css.map은 안 생기는데 이유가 뭐죠?
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
TypeIt - Welcome 부분이 적용이 안됩니다..
안녕하세요 강사님,Header & Welcome 섹션 #4까지 수강 중에 마우스 휠까지는 다 되는데 TypeIt - Welcome 부분만 적용이 안됩니다.제이쿼리 슬릭 슬라이더는 문제없이 잘 되는데 왜 typeit.min.js 파일만 제이쿼리 연결이 안되는 건지 잘 모르겠네요, 경로는 맞게 지정한거 같은데 이상하네요..em태그 안에 임으로 텍스트를 나오면 텍스트가 뜨기는 하는데 제이쿼리 연결하려고 다 지우면 안나옵니다.코드에는 이상이 없는거 같은데 어떻게 해결해야 될지 몰라서 질문 드립니다. 확인 한번 부탁드립니다, 감사합니다. [HTML 코드]<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StarUp Mate : App Official Landing</title> <link rel="icon" href="images/logo-favicon.png"> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Slick Slider --> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <script src="js/slick/slick.min.js"></script> <!-- TypeIt --> <script src="js/typeit.min.js"></script> <!-- Custom CSS & JS --> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <script src="custom.js"></script> </head> <body> <div class="container"> <!-- Header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png" alt=""></a> </div> <div class="gnb"> <a href="#none">CEO 인사말</a> <a href="#none">서비스 특징</a> <a href="#none">자주 묻는 질문들</a> <a href="#none">경영비전</a> <a href="#none">사용자 리뷰</a> <a href="#none">앱 사용자 가이드</a> <a href="#none">최신소식</a> </div> </div> </header> <!-- Section : welcome --> <section class="welcome"> <div class="slideshow"> <img src="images/slide-welcome-01.png"> <img src="images/slide-welcome-02.png"> <img src="images/slide-welcome-03.png"> </div> <div class="welcome-heading"> <span>창의적인 아이디어를 만드는 가장 빠른 방법</span> <h1> An idea solution of startup for your <em id="typing"></em> </h1> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> <div class="welcome-btns"> <a href="#none" class="btn start">CEO 시작하기</a> <a href="#none" class="btn guide">사용자 가이드</a> </div> </div> <div class="mouse"> <span class="wheele"></span> </div> </section> <!-- Section : ceo-access --> <section class="ceo-access"></section> <!-- Section : banner --> <section class="banner"></section> <!-- Section : feature --> <section class="feature"></section> <!-- Section : vision --> <section class="vision"></section> <!-- Section : faq --> <section class="faq"></section> <!-- Section : review --> <section class="review"></section> <!-- Section : focus --> <section class="focus"></section> <!-- Section : guide --> <section class="guide"></section> <!-- Section : news --> <section class="news"></section> <!-- Footer --> <footer></footer> </div> </div> </body> </html> [CSS 코드]/* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* XEION CDN */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); /* Web Fonts - Source Sans Pro */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); /* font-family: 'Source Sans Pro', sans-serif; */ /* Web Fonts - NoonNoo */ @font-face { font-family: 'NEXON Lv2 Gothic'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff'); font-weight: normal; font-style: normal; } /* Reset CSS */ * { box-sizing: border-box; } a { text-decoration: none; color: #222; } button, input { outline: none; } h1,h2,h3,h4,h5,h6 { margin-top: 0; font-weight: normal; line-height: 1.5em; } /* Default CSS */ body { font-family: 'NEXON Lv2 Gothic', sans-serif; font-size: 18px; line-height: 1.7em; margin: 0; background-color: #fff; color: #222; } /* #################### Header #################### */ header{ position:fixed; width:100%; z-index:10; } .header-inner { /* border:1px solid #000; */ width: 1300px; margin:0 auto; overflow:hidden; padding-top:30px; padding-bottom:15px; } .logo { float:left; } .logo img { margin-top:-7px; } .gnb { float:right; } .gnb a { margin:10px; font-size: 16px; } .gnb a {} /* #################### section : welcome #################### */ .welcome { /* border:5px solid #000; */ height:90vh; position:relative; } .slidshow {} .welcome-heading { position:absolute; top:50%; transform:translateY(-50%); left:200px; text-align:center; width:750px; } .welcome-heading span { font-size: 24px; } .welcome-heading h1 { font-family: 'Source Sans Pro', sans-serif; font-size: 60px; font-weight: 600; line-height: 1.2em; margin-bottom:30px; margin-top:15px; } .welcome-heading h1 em{ display:block; font-style:normal; color:#eb4d4b; } .welcome-heading p { padding:0 100px; margin-bottom:50px; } .welcome-btns {} .welcome-btns .btn { /* border:1px solid #000; */ display:inline-block; width: 160px; padding:8px; /* height: 70px; */ color:#fff; border-radius:5px; margin:5px; transition:0.5s; } .btn:hover { box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); transform:translateY(-5px); } .btn.start { background-color: #0abde3; } .btn.guide { background-color: #fff; color:#222; } /* Mouse Wheele */ .mouse { border:2px solid #fff; position:absolute; width: 32px; height: 45px; border-radius:30px; bottom:100px; left: 250px; } .wheele { /* display:block; */ position:absolute; width: 4px; height: 15px; background-color: #fff; border-radius: 5px; left:12px; top:10px; animation:wheele 1s linear infinite; } @keyframes wheele { 0% { top:10px; } 50% { top:20px; } 100% { top:10px; } } /* #################### Slick Custom Css #################### */ .slideshow .slick-arrow { border:1px solid #000; display:none !important; } .slideshow img { outline:none; } [custom.js 코드]$(function(){ /* Slick Slider - Welcome*/ $('.slideshow').slick({ infinite: true, // 무한반복 dots: false, // 동그라미 네비게이션 사용안함 autoplay: true, // 자동 재생 autoplaySpeed: 2000, // 자동 재생 시 머무는 시간 fade: true, // 크로스 페이드 트랜지션 speed: 1000, // 자동 재생 트랜지션 시간 pauseOnHover: false // 마우스 오버될 때 멈춤 사용안함 }); }) /* TypeIt - Welcome */ $('#typing').typeIt({ strings: ["Business strategy.", "Innovation Plan.", "Creative Idea."], // 타이핑 텍스트 입력 speed: 100, // 알파벳 타이핑 속도 autoStart: true, // 자동 재생 사용 breakLines: false, // 줄 바꿈 사용안함 });
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
인스턴스 중단 후 재시작
프로젝트를 완성하고 aws 인스턴스 프리티어 사용량이 제한량에 거의 도달해서 항상 켜놓으면 안되겠다고 생각해서 잠깐 중단시켰다가 며칠후에 재시작 시켰는데 재시작 한 이후로 지도상에 핀이 안 보이는데 어떻게 해야할까요? pm2도 해놔서 인스턴스를 중단했다가 재시작한것 때문인거 같은데... mysql을 접속하려 했을때 이런 창이 뜹니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
에러는 안나는데 그림이 안뜹니다
그랩마켓 자바스크립트 적용하기 -2 편에서 다 되는데 농구공 그림이 안떠요 <html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="header"> <div id="header-area"> <img src="images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="images/banners/banner1.png"> </div> <h1>판매되는 상품들</h1> <div id="product-list"> </div> </div> <div id="footer"></div> </body> <script> var product = [{ name : '농구공', price : 10000, seller : '조던', imagUrl : '/images/products/basketball1.jpeg' },{ name : '축구공', price : 50000, seller : '메시', ImageUrl : '/images/prodocts/soccerball1.jpg' },{ name : '키보드', price : 10000, seller :'그랩', ImageUrl : '/images/prodocts/keyboard.jpg' }]; document.querySelector("#product-list").innerHTML = '<div class="product-card>'+ "<div>" + '<img class="product-img" src="images/products/basketball1.jpeg" />' + "</div>" + '<div class="product-contents">' + '<span class="product-name">농구공 1호</span>' + '<span class="product-price">50000원</span>' + '<div class="product-seller">' + '<img class="product-avatar" src="images/icons/avatar.png" />'+ "<span>그랩</span>" + "</div>" + "</div>" + "</div>" </script> </html>
-
미해결처음 만난 리액트(React)
오류
뭐가 문제일까요 똑같이 작성한 거 같은데 자꾸 빨간줄이 생겨요ㅜㅜ
-
해결됨[코드캠프] 시작은 프리캠프
안녕하세요. 제공되는 노션 학습자료는 어디서 확인가능한가요?
안녕하세요. 제공되는 노션 학습자료는 어디서 확인가능한가요?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
코드샌드박스 관련 질문
코드샌드박스가 많이 바뀐것 같아요.create 샌드박스 눌러도 바닐라 자바스크립트가 뜨질 않습니다.그리고 js 파일에서 console.log('test) 쓰고 실행은 어떻게하고 콘솔창은 어디에 있는건지 궁금해요.
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
모달창에서 반응형 보여주기
안녕하세요 선생님.혹시 Modal 창으로 포트폴리오를 보여 줄 시, 창크기를 줄여서 반응형이 구현된다는 걸 보여 줄 수 있는 방법이 있을까요? (모달창의 창크기가 조절이 되게끔 하는 방법)수업시간에 지나갔는지 기억이 잘 안나네요 ㅎㅎ; 혹시나 불가능하다면, 어쩔 수 없이 링크버튼이 연결된 버튼을 따로 주는 방법이 좋을까요? 항상 감사드립니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
포트폴리오 CSS Grid 반응형 레이아웃에서
여기서 align-items 랑 align-content가 개념이 잘 안잡혀요..ㅠ 인터넷에 검색해보니깐 한줄 두줄의 차이라고 하는데...모바일사이즈일때는 한줄이 아니니깐 align-content라고 쓴걸까요? 아니면 justify-items: center; 코드가 있어서 일까요?
-
미해결처음 만난 리액트(React)
Containment 질문 드립니다.
import { useState, useCallback } from "react"; import ThemeContext from "./ThemeContext"; import MainContent from "./MainContent"; function DarkOrLight(props) { const [theme, setTheme] = useState("light"); const toggleTheme = useCallback(() => { if (theme === "light") { setTheme("dark"); } else if (theme === "dark") { setTheme("light"); } }, [theme]); return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> <MainContent /> </ThemeContext.Provider> ) } export default DarkOrLight;import React from "react"; const ThemeContext = React.createContext(); ThemeContext.displayName = "ThemeContext"; export default ThemeContext;MainContent가 ThemeContext의 하위 컴포넌트입니다.그러면 <ThemeContext.Provider> 안에 있는 <MainContent /> 컴포넌트는 ThemeContext.Provider 안의 props.children으로 간주될텐데 ThemeContext 에 {props.children}가 없어도 <MainContent />가 표시되는 이유가 궁금합니다. .privider메서드(메서드로 지칭하는게 맞나요...?ㅎ)를 사용하면 자동으로 하위 컴포넌트를 표시하는 기능(암묵적으로 {props.children}를 사용한다던지...)이 있는 건가요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
이미지 부분에 cctv 영상을 넣고 싶은데요.
이미지 부분에 cctv 영상을 구현하고 싶은데, 혹시 .... api를 연동해서 어떻게 연결하면 되는지 알 수 있을까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
제이쿼리에서 focus와 click의 차이
jQuery에서 '클릭한다'는 동작의 실행 코드로 맨 위에서는 focus를 사용했고, 아래에서는 click을 사용하신 것은 input에 사용할때와 아닐 때의 차이인 것인가요?
-
미해결따라하며 배우는 HTML, CSS
안녕하세요 강사님 질문 있습니다.
강사님의 영상 약 11분 10초 대를 보면 go live를 한 후 h1태그를 추가 한 후에 새로고침 하면 웹 창에서 추가된 h1이 보이는데 제가 하면 아래와 같은 오류가 뜨면서 추가되지 않습니다. 어떻게 하면 될까요?Live Reload is not possible without a head or body tag.
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
노션 링크가 어디있나요 ?
노션 링크가 어디있나요 ? 찾기가 어렵네요..
-
해결됨CSS Flex와 Grid 제대로 익히기
flex-basis auto, 0 차이
flex-basis에서 auto로 설정하는 것과 0으로 설정하는 것의 차이가 무엇인지 궁금합니다.따로 코드를 짜서 실행하면 autof로 설정했을 때와 0으로 설정했을 때 결과물이 똑같아서 차이가 궁금합니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
expo 시작 오류
expo를 global로 설치하고 init까지 한 후npm start를 했을 때 일단 아래처럼 에러가 발생합니다.Unable to find expo in this project - have you run yarn / npm install yet?-> 이건 npm install을 해서 해결 했습니다. 그런데 그 후에도 또 아래와 같은 에러가 발생합니다.PS D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile> npm start> grab-market-mobile@1.0.0 start> expo startStarting project at D:\Programming\study\Inflearn\FullStack\project\grab-market-mobileStarting Metro BundlerFetchError: request to https://api.expo.dev/v2/sdks/49.0.0/native-modules failed, reason: self signed certificate in certificate chainFetchError: request to https://api.expo.dev/v2/sdks/49.0.0/native-modules failed, reason: self signed certificate in certificate chain at ClientRequest.<anonymous> (D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile\node_modules\node-fetch\lib\index.js:1501:11) at ClientRequest.emit (node:events:513:28) at TLSSocket.socketErrorListener (node:_http_client:494:9) at TLSSocket.emit (node:events:513:28) at emitErrorNT (node:internal/streams/destroy:157:8) at emitErrorCloseNT (node:internal/streams/destroy:122:3) at processTicksAndRejections (node:internal/process/task_queues:83:21)이건 어떻게 해결해야 하나요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
제이쿼리 검색창 모달 with 플렉스(Flexbox) 내용 중 궁금한 점
입력란과 버튼의 크기를 배분하기 위해 flex를 사용할 때, 부모 요소는 반드시 display: flex를 사용해야 하는 것인가요? flex와 display:flex가 상관관계가 있는 것인지 궁금합니다.
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
spoqa han sans neo
spoqa han sans neo글씨체 다운받았는데 피그마 할 때 text밑에 fonts에서 no matching font로 나오네요.아예 검색자체가 안되는데 무슨 문제인가요??
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
width must be speified for horizontal carousels 오류
안녕하세요.react-native-reanimated-carousel 사용 시,carousel의 prop으로 width를 정의했는데도,제목 처럼 "width must be speified for horizontal carousels" 오류가 발생합니다.어떻게 해결할 수 있을까요?? 강의 클론코딩 했는데, 위 오류에 앞서 "PanGestureHandler must be used as a descendant of GestureHandlerRootView" 오류가 발생했었는데, 인터넷 검색 결과로 <SafeAreaView> 바깥에 <GestureHandlerRootView> 선언하여 해결했는데, 이 영향도 일까요?? 코드 첨부합니다.import { StatusBar } from "expo-status-bar"; import { API_URL } from "./config/constant"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, SafeAreaView, } from "react-native"; import Carousel from "react-native-reanimated-carousel"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(() => { axios .get(`${API_URL}/products`) .then(function (result) { const products = result.data.products; setProducts(products); }) .catch(function (error) {}); axios .get(`${API_URL}/banners`) .then(function (result) { const banners = result.data.banners; setBanners(banners); }) .catch(function (error) {}); }, []); return ( <GestureHandlerRootView> <SafeAreaView style={styles.safeAreaView}> <View style={styles.container}> <ScrollView> <Carousel> data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem= {(obj) => { retrun( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.img_url}` }} /> </TouchableOpacity> ); }} </Carousel> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.status === "02" && ( <View style={styles.productBlur} /> )} <View> <Image style={styles.productImg} source={{ uri: `${API_URL}/${product.img_url}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={avatarImg} /> <Text style={styles.productSellerName}> {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.created_at).fromNow()} </Text> </View> </View> </View> ); })} </View> </ScrollView> </View> </SafeAreaView> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ headline: { fontSize: 24, fontWeight: "800", marginTop: 10, marginBottom: 10, }, container: { flex: 1, backgroundColor: "#fff", paddingTop: 32, margin: 10, }, productCard: { width: "100%", borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 10, }, productBlur: { position: "absolute", top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, productImg: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 14, }, productPrice: { fontSize: 16, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 14, }, productDate: { fontSize: 14, }, productList: { alignItems: "center", }, bannerImage: { width: "100%", height: 200, }, safeAreaView: { flex: 1, backgroundColor: "#fff", }, });
-
해결됨처음 만난 리액트(React)
Contex와 redux같은 전역 상태관리 라이브러리
Contex가 하위 컴포넌트들에서 해당 변수에 바로 접근이 가능하게 만들어주는 것은 이해가 되었습니다.하지만 한 가지 의문점이 있습니다.저의 짧은 지식으로는 redux같은 전역 상태 관리 라이브러리를 이용하면 모든 컴포넌트가 접근할 수 있는 store라는 공간이 생기는 것으로 알고 있습니다. 그래서 redux를 사용한다면 contex는 굳이 사용할 필요가 없는 것으로 생각됩니다. redux같은 전역 상태 관리 라이브러리를 이용할 때에도 context를 사용하는 경우가 있는지 궁금합니다. 그리고 이전 질문에서 엄밀히 말하면 context가 상태 관리는 아니라고 하셨는데 상태 관리와 context의 차이점을 잘 모르겠습니다.. 간략하게나마 차이점을 설명들을 수 있을까요?
