묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
Grid 수직정렬 제대로 안됩니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS 중앙 정렬의 모든 것</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 활용도 높은 CSS3 속성을 활용한 실전 스킬과 팁--> <!-- CSS 중앙 정렬의 모든 것 --> <div class="element"> This is Content </div> <!-- <div> <img src="images/icon-lock.svg"> <span>해당 컨텐츠는 회원전용입니다.</span> </div> --> </body> </html>/* XEION CDN */ /* @import url('//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); */ /* Google Web Font */ /* @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); */ * { font-family: 'Raleway', sans-serif; } body { height: 100vh; /* Flex */ /* display: flex; justify-content: center; align-items: center; */ /* Grid */ /* display: grid; justify-content: center; align-items: center */ /* place-item */ display: grid; place-items: center; } .element { border: 5px solid #000; background-color: skyblue; color: #fff; width: 200px; height: 200px; /* Position */ /* position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform: translateX(-50%); transform: translateY(-50%); */ /* Margin */ /* margin: auto; */ } 선생님 강의와 똑같이 적용했는데 제 화면에서는 .element가 위쪽에 붙어있어서요. flex로 정렬했을 때는 중간에 잘 오는데 grid로 정렬하니까 수직 중앙 정렬이 안먹습니다. 왜 그런건가요?ㅠㅠ 이유를 알고싶습니다.
-
미해결React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
9강에서 'Ch-9-1. GitHub 저장소 링크' 오류
9강에서 'Ch-9-1. GitHub 저장소 링크'에 링크가 잘못 달려있네요. 뒤에 키값으로 찾아서 접속할 순 있는데 수정이 필요해 보입니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
87.JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)
안녕하세요.87.JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)강의에 다른 강의가 올라와 있는 것 같은데 좀 바꿔 주실 수 있으신가요?감사합니다.
-
미해결떠먹는 Three.js
맥북 듀얼모니터 사용 displaylink manager 사용시 화면이 안보입니다.
맥북 사용중이고 displaylink manager를 사용해서 듀얼모니터에 연결해서 강의를 듣고있습니다.그런데 강의 보기 너무불편합니다.아예 듀얼모니터 다 연결하면 검정화면으로 보여요저작권 보호를 위해 막아두신건 알겠습니다.해결방안으로 하드웨어 가속 끄기 설정이던데로컬에서 서버 실행시 threejs 가 안보이고 빈화면으로 보이게됩니다.이거 어떻게 못할까요ㅜㅠ 무단으로 복제해가는사람들은 어떻게든 복제해갑니다..강의들을때 너무 불편합니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
tailwind 설치 명령어 관련 질문
안녕하세요! 강의 노션에서는이렇게 나와있는데 npx tailwindcss init만으로는 tailwind.config.js만 설치되고, postcss.config.js는 설치가 안되는 게 아닌가요? npx tailwind init -p 명령어를 사용해야 하는지 여쭤보고 싶습니다! 그리고 위 두 명령어만 입력해서 tailwind를 사용하려고 하니 에러가 떠서 찾아보니까Vite가 postcss.config.js 읽다가 autoprefixer 플러그인을 불러오려고 했는데, 프로젝트에 autoprefixer 패키지가 설치되어 있지 않아서 터진 거야.라고 하더라구요npm install -D tailwindcss@3이 아니라 npm install -D tailwindcss@3 postcss autoprefixer 이 명령어를 사용해야 한다고 해서 사용해보니 에러가 해결된 상태입니다.노션에 적혀있는 명령어와 달라서 여쭤봅니다! npm install -D tailwindcss@3 postcss autoprefixernpm install -D taiㅇindcss@3 postcss autopnpm install -D tailwindcss@3 postcss autoprefixerrefixer
-
미해결모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]
수강 기한 연장 문의
쌩초보, 비전공자를 위한 [HTML 스타터] 부트캠프모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.][자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.] 이렇게 강의를 수강 중입니다. 수강 기한을 무제한으로 연장시켜주시면 감사하겠습니다!
-
미해결핵심만 골라배우는 HTML5
br 작성 방식
br과 같은 태그를 작성할 때어느 방식이 더 적절한 방식일까요?<br/> <br><br/>
-
미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
unregistered 이라 뜨며 작동하지 않습니다.
Sublime text를 실행했을때 unregistered 이라 뜨며, 크롬창이랑 같이 열어 실습을 해보았을때 서로 아무런 연결이 되지 않습니다. 어떻게 해결하면 될지 잘 모르겠습니다.
-
해결됨Tailwind CSS 실전 포트폴리오 퍼블리싱
14. 네비게이션 - 반응형 상단 네비게이션 <toggle 이후 md 이상 에서 메뉴 사라짐 현상> 간단 대응
md상태에서 모바일 크기로 변경 후 toggle 버튼 클릭 한 후에 사이즈를 다시 md 이상으로 변경하면 메뉴가 사라지는 현상이 있습니다.디버깅 모드에서 Elements를 보면 style="display: none;" 이 우선 적용이 되어서 발생하는 문제입니다.아래와 같이 코드를 추가하면 정상적으로 작동이 됩니다.단지 사이즈가 변경될 때마다 이벤트가 발생하게 되면 퍼포먼스 상에 문제가 있을 것도 같습니다. // 윈도우 사이즈에 따라서 직접 속성을 수정하는 것으로 했습니다. $(window).on('resize', function () { const $menu = $('.menu'); if (window.innerWidth >= 768) { $menu.removeAttr('style').removeClass('hidden'); } else { $menu.addClass('hidden'); } });
-
미해결애플 웹사이트 인터랙션 클론!
이미지 배경 문의
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요. 안녕하세요. 제가 스스로 영상을 찍어서 해보려고 하니 웹페이지 배경이 하얀색이라 영상 찍을때도 하얀색 바탕으로 하면 좋을거 같다고 생각이 들었는데요. 샘플 예제 동영상도 혹시 하얀색 배경에서 영상 촬영을 하신건지 아니면 프레임 추출해서 이미지를 배경제거를 해서 한건지 궁금해서요! 그리고 또 하나 요즘 애플에서는 스크롤이 아니라 부분적으로 영상처럼 작동하던데 그 기술도 인터랙티브 기술일까요? (아직 완강은 못해서 질문한 것일수도 있습니다)
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
도메인과 호스팅구매후 상태
강의에 대한 질문은 인프런 질문하기나, 1:1 커뮤니티 페이지에서 문의하시면 빠르게 답변 드리고 있습니다.(커뮤니티 주소 https://itconnect.dev/커뮤니티/) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요테마 파일과 CSS, PHP 파일은 아래 링크를 통해 받아보실 수 있습니다.https://drive.google.com/drive/folders/1KtkfsZe2uy5jNMps0F6gnqlEvZnq0mRN?usp=sharing
-
미해결[말 한마디로 뚝딱!] AI와 함께 나만의 수익화 웹사이트를 만드는 법
스프링부트 프로젝트 생성에서 java version
현재 spring boot 버전 설치에서 JAVA 버전을 선택해야 되는데요, 현재 24, 21, 17 버전만 제공되고 있습니다. 그리고 스프링 부트드 3.4.0 버전은 없고 아래와 같은데요, 혹시 21버전이나 17버전으로 진행해도 관계없을까요? Spring boot 버전은 몇으로 하는게 좋을지 궁금합니다. 그리고 intellij 말고 VS code 로 진행해도 관계없을까요?
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
newspaper 테마와 GP 테마 사용 문의
해당 강의 보니까 처음에는 newspaper 테마에 대해 강의하고 나중에는 GP 테마를 가지고 강의하는데요.newspaper 테마로 구성하고 싶은데 GP 테마에 보니까 [수익형 블로그 본격 제작] 이라고 되어 있어서 newspaper 테마로 구성하기보다 GP 테마로 사이트를 구성하는 게 나은 건지 궁금하여 문의 드립니다.그리고 강의에서 보니까 newspaper 테마는 비용을 한번만 지불하면 되는 거 같은데 맞는지 문의 드립니다.
-
미해결포트폴리오 어나더레벨
포트폴리오 방향성 질문 드립니다.
안녕하세요! 지방 사립 4년제 내년 8월 코스모스 졸업 예정인 학생입니다. 아직 많이 부족하지만 무작정 공부하는 것보다 취직할 때 필요한 요소가 뭔지를 알고 빠르게 포트폴리오를 채우고 싶어 이번 강의를 듣게 되었습니다.제 상황을 간략히 설명드리자면 그동안 진로를 정하지 못하고 이것저것 찍먹만 하다가 올해 하반기부터 백엔드로 진로를 정하고 본격적으로 학습하기 시작했습니다. 현재는 Spring 기초와 큰돌님 코딩테스트 강의 들으며 공부 중입니다. 공부를 하면 할수록 객체지향과 구현에 부족함을 절실히 느끼고 있습니다.현재 제가 한 프로젝트를 영끌해 보면 그나마 과제 수준의 데이터 분석 프로젝트 2건과 완성도 낮은 개인 프로젝트 1건이 전부고 수상 경력, 대외활동은 없습니다.이전에 진행한 개인 프로젝트는 LLM의 도움을 많이 받아서 Next.js+FastAPI+GeminiAPI를 활용하여 회원가입, 글쓰기 등 기본적인 CRUD, 작성한 게시물에 대해 AI에게 피드백을 받는 것을 구현하는 것 정도만 했습니다. 처음으로 웹 사이트를 만들다 보니 코드가 난잡하고, 기획/설계 없이 빠른 기능 구현에 힘을 쏟다 보니 한계가 보여 개발을 멈췄습니다. Q1. 기존에 한 개인 프로젝트는 어떻게 해야 할지 고민입니다.LLM의 도움을 많이 받기도 했고 취직에는 Spring이 유리하다고 생각해서, 포트폴리오용으로 살리는 게 나을지 폐기하고 새로운 프로젝트를 하는 게 나을지 고민입니다. 만약 포트폴리용으로 쓴다고 하면 코드와 구조를 개선해서 다시 만든다거나 Spring으로 새롭게 만들거나 해야 된다고 생각되는데 어떻게 생각하시나요? Q2. 부트캠프를 다니는 것을 고려 중인데 어떻게 생각하시는지 궁금합니다.혼자 공부하는 것도 한계가 있고 부트캠프를 하면서 팀 프로젝트도 할 수 있어서 좋은 기회가 될 거라고 생각합니다. 큰돌님이 추천하는 부트캠프 중 지금 시기에 할 수 있는게 SW마에스트로와 프로그래머스 백엔드 과정 정도뿐인데 SW마에스트로에 들어가기엔 지금 포트폴리오도 초라해서 프로그래머스 백엔드 과정을 고민중입니다.부트캠프 추천 영상에서 "강사의 질이 중요하다"고 하셨는데 강사의 경력을 판단하는 기준이 있는지도 궁금합니다. Q3. 팀 프로젝트 시작 시기와 팀원 구하는 팁 궁금합니다.이번 강의에서 팀 프로젝트의 중요성을 많이 강조하셔서 빠르게 팀 프로젝트를 완성하는 걸 목표로 하고 싶은데 제 실력이 팀원들에게 민폐가 될까 봐 망설여집니다. 어느정도 기술 구현 능력을 갖췄을 때 팀 프로젝트를 참여하는 게 좋을까요? 그리고 스터디를 통해 팀원을 구하는 걸 추천하셨는데 스터디를 하다보면 흐지부지 끝나는 경우가 많던데 결국 최대한 다양한 사람을 만나보는 것 밖에 답이 없을까요?
-
미해결기본을 확실히!! HTML의 모든 것
html
htmlda jiojsdoj
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[해결]그랩님 답변 주세요.
102강 강의를 듣고 있는데요,react-native-reanimated-carousel 설치 위해 노션에 링크대로npm install react-native-reanimated-carousel@3.3.0 명령어로 설치하고그 이후 expo install --npm react-native-reanimated react-native-gesture-handler 를 입력하여 터미널에서 설치 완료하였습니다질문 1.이후babel.config.js 파일에 가서 plugins: ["react-native-reanimated/plugin"], 추가 해야하는데 문제는 babel.config.js 파일이 존재하지 않아 어디에 플러그인 작성해야 하는지 모르겠습니다 첨부 사진package.json에 디펜던시를 보면 아래와 같아요"react": "19.1.0", "react-native": "0.81.5", "react-native-reanimated-carousel": "^3.3.0", "react-native-reanimated": "~4.1.1", "react-native-gesture-handler": "~2.28.0"질문 2. Babel 설정 위해 Cache 초기화 하는 부분도 위에 질문1이 순서대로 정상적으로 진행이 되지 않아스킵했는데 babel.config.js에 플러그인 문구부터 저장한 뒤 바벨 설정 캐시초기화 하는 것이 옳지요? 질문 3102강 시작부터 ~ 18분 56초 까지 타이핑한 grab-market-mobile의 App.js소스 내용아래와 같은데 이것을 실행하면 사진과 같이 안드로이드 스튜디오(runtime not ready)에서 에러 발생 아래 App.js 는 강의 전체 완성본 소스가 아니라 에러가 난 시점까지의 소스 입니다질문4->여기서 Carousel 부분 살펴보면 아래 App.js 소스에서 아래와 같이 작성하는 것 맞나요?만약 아래 작성 소스가 다르면 어떻게 작성 해야하는지 댓글에 소스 적어주세요<Carouseldata={banners}width={Dimensions.get("window").width} height={200}autoPlay={true}renderItem={(obj)=>{ return( <TouchableOpacity> <Imagesource={{uri:obj.item.imageUrl}} /> </TouchableOpacity> ) }} /> import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity } from "react-native"; import BasketballImage from "./assets/products/basketball1.jpeg"; import Avatar from "./assets/icons/avatar.png"; import {API_URL} from "./config/constants"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; import Carousel from "react-native-reanimated-carousel"; 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((result)=>{ setProducts(result.data.products); }).catch((error)=>{ console.error(error); }) axios.get(`${API_URL}/banners`).then((result)=>{ setBanners(result.data.banners); }).catch((error)=>{ console.error(error); }) },[]) return ( <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} renderItem={(obj)=>{ return( <TouchableOpacity> <Image source={{uri : obj.item.imageUrl}} /> </TouchableOpacity> ) }} /> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> { products.map((product, index)=>{ return (<View style={styles.productCard} key={product.id}> {product.soldout === 1 && <View style={styles.productBlur}/>} <View> <Image style={styles.ProductImage} source={{uri: `${API_URL}/${product.imageUrl}`,}} 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={Avatar} /> <Text style={styles.productSellerName} >{product.seller}</Text> </View> <Text style={styles.productDate}>{dayjs(product.createdAt).fromNow()}</Text> </View> </View> </View>); }) } </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', paddingTop: 32, }, productCard: { width: 320, borderColor: 'rgb(230,230,230)', borderWidth:1, borderRadius: 16, backgroundColor: "white", marginBottom: 8, }, ProductImage :{ width: '100%', height: 210 }, productContents : { padding: 8 }, productSeller : { flexDirection: 'row', alignItems: 'center' }, productAvatar: { width:24, height:24, }, productFooter: { flexDirection: 'row', justifyContent:'space-between', alignItems: 'center', marginTop: 12, }, productName : { fontSize: 16 }, productPrice: { fontSize: 18, fontWeight: '600', marginTop: 8 }, productSellerName: { fontSize: 16, }, productDate: { fontSize: 16, }, productList: { alignItems:"center", }, headline : { fontSize: 24, fontWeight: "800", marginBottom:24 }, productBlur : { position: 'absolute', top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, }); 에러 해결 차근차근 알려주셨으면 좋겠습니다---------------------------------------------------------------------------------------------질문 5 babel.config.js 없기에 프로젝트 루트에 파일을 직접 생성하고 module.exports = {presets: ['babel-preset-expo'],plugins: ['react-native-reanimated/plugin'],};위 소스입력 후 저장 완료 후 캐시 초기화를 위해 expo start -c 까지 차례대로 수행 후 ngrok과 모바일/서버로 연동 후 결과가 위 버전 에러와 다르게 새로운 에러가 발생했습니다어떻게 해결하죠? 질문6 아래 게시글 답변대로 질문 2까지 수행 하니 아래와 같은 에러가 발생질문7 아래게시글 답변에 질문 3 및 3-1은 하라는대로 실행해보면 에러가 발생할까 실행을 안했는데 3개를 입력해 줘도 괜찮은건가요?명령어 1: npm uninstall react-native-reanimated-carousel react-native-reanimated명령어 2:npm install react-native-reanimated-carousel@3.3.0 react-native-reanimated@^2.0.0명령어 3:expo install react-native-gesture-handler질문8 잘 되던 안드로이드 스튜디오가 로딩을 왜 못할까요?
-
해결됨포트폴리오 어나더레벨
포트폴리오 웹사이트에대해 질문드립니다.
큰돌님 안녕하세요. 알고리즘강의부터 유튜브까지 잘 시청하고있습니다.프론트엔드를 목표로 준비를 하고있는데 대부분 포트폴리오 페이지를 하나씩 구축을 하고 이력서와 같이 첨부하더라구요..과거에 리액트 + GSAP로 인터렉션 위주로 만들어놓은게 있지만 손볼것도 많고 요즘은 NextJS가 추세라하여 새로 만들어야할것같은데 이부분이 프론트 지원시 거이 필수적인지 궁금합니다.
-
해결됨구글 애드센스 수익형 워드프레스 블로그 만들기
Generate Press 받는 방법
https://itconnect.dev/커뮤니티/ 에서 generate press 테마를 받고자 했는데로그인을 해야 한다고 해서요. 근데 이미 이전에 만든 계정이 있는데 비밀번호를 몰라 forgot password를 누르니까 계정 대기 중이라고만 나오고 비밀번호 몇번 틀리니까 사이트가 잠겼다고 나오네요.theswice.co.kr 도메인 생성했는데요. gp 테마 좀 theswice@naver.com으로 보내주시면 감사하겠습니다.
-
미해결포트폴리오 어나더레벨
성능 개선에 대한 부분을 작성할 때 궁금한 점이 있습니다.
안녕하세요 큰돌님! 항상 유튜브 잘 보고 있습니다.저는 백엔드 개발자로 취업을 준비하고 있고, 현재 이력서와 포트폴리오를 만들기 위해 강의도 듣고 제 경험을 정리하고 있습니다.본 강의와 큰돌님의 유튜브에서 항상 성능 개선을 수치적으로 표현하라고 말씀하시는 것을 많이 들었습니다. 여기서 성능 개선에 있어서 제가 프로젝트를 할 때, 제 지식의 부족함으로 인해 성능이 안좋았던걸 개선한거에 대해서는 어떻게 적으면 좋을지 궁금합니다. 실제로, 웹에서 SSH 접속을 위한 프로젝트를 하면서 초기 SSH 접속을 할 때, sleep(500), 쉘에서 실행할 명령어를 송수신 하는 while문에서 sleep(10)을 설정 했었습니다. Java의 InputStream으로 입력값을 받도록 하였는데 개발 당시에는 안정적인 송수신을 위해서 sleep을 추가했는데, 리팩토링을 하는 과정에서 InputStream이 Blocking I/O의 특성으로 인해 불필요하다는 것을 알게 되었습니다. 이런 부분도 성능 개선 작업으로 적어도 되는지 궁금하고, 특히 면접에서 제 부족함?을 직접적으로 표현하지 않고 어떻게 말해야할지도 궁금합니다. 질문이 최대한 간략하게 적으려고 하다보니 두서없네요 ㅠㅠ. 감사합니다!
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
예제파일
혹시 예제파일들 어디서받나요?
