강의자료 질문
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
강사님 ㅠ 강의자료에 필요한 자료 다운 받을 수 있는 링크 알려주시면 감사합니다 결제 후 다운받으려는데 파일이 어디에 있는 지 모르겠습니다ㅠ
- HTML/CSS
- jquery
- 모바일-디자인
- figma
- 포트폴리오
tkdrb228
댓글 1
좋아요 1
조회수 280
묻고 답해요
172만명의 커뮤니티!! 함께 토론해봐요.
header영역 스크룰방향이벤트 제작 강의 에서
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
header active가 실행하지 않습니다 오타가 있나 아무리 봐도 똑같이 코딩된 거 같은데 .. 왜그럴까요???
- HTML/CSS
- 포트폴리오
- 반응형-웹
- gsap
- scrolltrigger
Heajin Sohn
댓글 1
좋아요 0
조회수 272
선생님 혹시 SSV 파일을 json으로 변환할 방법이 있을까요?
미해결
파이썬으로 뭘 만들지? 남박사의 파이썬 알쓸파잡
안녕하세요. 선생님 수업을 통해 크롤링까지는 성공했습니다. HTTP POST 요청으로 받아왔는데요. 다만 Response가 넥사크로에서 사용하는 "SSV"형식으로 왔습니다. SSV:UTF-8 ErrorCode:string=0 ErrorMsg:string= Dataset:ds_PageList _RowType_ TAXNO:string(255) TAXIDX:string(255) MEMBNAM:string(255) TSDATE:string(255) TSTIME:string(255) ACQBID:string(255) CARD_NAME:string(255) HID:string(255) ACQHID:string(255) TERMID:string(255) MTRCNO:string(255) CDNO:string(255) AUTHNO:string(255) ISTMMON:string(255) CURRCODE:string(255) AMT1:bigdecimal(25) AMT2:bigdecimal(25) AMT3:bigdecimal(25) ACQDATE:string(255) DDCEDI:string(255) ...... <생략> 이렇게 못생긴 데이터가 왔는데요. 이걸 json으로 파싱하고싶어서요. 이리저리 혼자서 아스키코드 찾아보고 US, RS 사용해서 어떻게든 파싱은 했는데, 제가 짠 로직이 맞나 싶어서요. (일단 작동은 되는데.. ) 혹시 선생님이라면 어떻게 하실까 싶어서요. 이런걸 잘 파싱하려면 알고리즘을 공부해야되는걸까요? 아! 그리고 깃헙에 혹시 라이브러리가 있나 찾아봤는데요. 안나오더라구요. 이게 제일 슬펐어요. 그나저나 저런거 만드는 사람들은 정말 괴물같네요.. 저런걸 도대체 어떻게 만드는 걸까요? (코드가 본문에 저렇게 붙여넣어지는 기능도 신기하네요.. 저런건 또 어떻게 만드나요?)
- python
- 웹-크롤링
- gui
포포
댓글 2
좋아요 0
조회수 846
[미니블로그] MainPage.jsx의 PostList 컴포넌트 prop관련질문
미해결
처음 만난 리액트(React)
안녕하세요. 질 높은 강의 덕분에 많은 도움 받고 있습니다. 다름이아니라 미니블로그 를 학습하며 이해가 되지 않는 부분이 있어서 질문드립니다. 44번째줄의 navigate(`/post/${item.id}`) 에 대한 질문입니다. item.id 값으로 data.id 의 값이 들어가는 것으로 확인했습니다. 제가 궁금한 것은 어떠한 방식으로 data.id 의 값이 item.id 값으로 들어가는지 도무지 이해가 되질 않습니다. 관련해서 답변주실 수 있으실까요?
- HTML/CSS
- javascript
- react
김아무개_본계정
댓글 2
좋아요 1
조회수 544
React 18에서 ReactDOM.render()를 지원하지 않는 문제
미해결
처음 만난 리액트(React)
Chapter 06 실습 문제에서 다음과 같은 경고와 함께 콘솔 로그가 나오지 않았습니다. Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot React 18버전에서는 ReactDOM에 렌더링하는 방식이 아니라 root를 먼저 만들고 root의 렌더링을 하는 방식으로 바뀌었다고 합니다.. 먼저, 실습 자료에서 따라 작성했던 코드입니다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import reportWebVitals from './reportWebVitals'; import NotificationList from "./chapter_06/NotificationList"; ReactDOM.render( <React.StrictMode> <NotificationList /> </React.StrictMode>, document.getElementById('root') ) reportWebVitals(); Notification element는 순서대로 제대로 출력되는걸 보아서 JSX element는 제대로 작성한 것 같았고 콘솔 로그가 나오지 않으며 위에 작성한 오류만 나와 react 버전 문제인가 해서 공식문서를 참조해 다음과 같이 변경했습니다. import React from 'react'; import { createRoot } from 'react-dom/client'; import './index.css'; import reportWebVitals from './reportWebVitals'; import NotificationList from "./chapter_06/NotificationList"; const container = document.getElementById('root'); const root = createRoot(container); root.render( <NotificationList /> ); reportWebVitals(); ReactDOM을 직접 사용하지 않고, root를 만든 다음 root에서 렌더링을 하는 방식으로 변경하라고 해서 이렇게 했더니 콘솔 로그가 제대로 나왔습니다. 그런데 문제가 있는게 이전에는 Notification element가 1, 2, 3 순서대로 출력이 되었는데 root에 직접 렌더를 하니 1번과 2번 element가 동시에 출력되는 문제가 생깁니다.. 로그를 확인해보니 1번 2번 element는 componentDidMount() 이후 Update()를 실행하지 않고 WillUnmount()가 되어버립니다. WillUnmount() 이후에 한 번 더 DidMount()가 되고, Update()로 넘어가지만, 이 이후에도 1번 2번이 같이 호출되고, 그 다음에 3번이 호출됩니다. 3번 역시 DidMount() 이후 Update() 없이 WillUnmount()되고 다시 DidMount()가 됩니다 3번은 Update()되지 않습니다.. 이 이후에는 공식문서에서 해결책을 찾을수가 없어서 문의드립니다..
- HTML/CSS
- javascript
- react
Skyleester
댓글 3
좋아요 1
조회수 1209
styled-components 안에 스타일 색상이 선생님과 다르게 뜨는데 이유를 알고 싶습니다!
미해결
처음 만난 리액트(React)
styled-component를 사용해서 코드를 작성했을 때 제 코드는 위와 같이 다 초록색으로 뜨는데 선생님 코드를 보면 CSS코드처럼 색상이 구분되어있습니다. 혹시 어떻게 해야지 색상이 구분이 되는건지 알 수 있을까요?!
- HTML/CSS
- javascript
- react
김혜나
댓글 1
좋아요 1
조회수 325
logo와 video의 html 순서 문제
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요, 강의 영상에서 페이지의 요소들을 모두 position 속성을 이용해 배치할거라 html 태그의 순서는 상관없다고 하셔서 시험삼아 logo 요소를 video 요소의 앞에 배치시켜봤습니다. 그랬더니 아래 화면처럼 logo 요소가 video의 위에 위치하고 z-index를 주거나 배경색을 transparent로 설정해도 바뀌지 않더라고요. 로고가 비디오 위에 오는건 html 태그의 순서의 영향이 있는거 같은데, 그러면 실제 웹사이트를 만들때도 html 태그들의 순서를 고려해서 배치해야 하나요? 사용한 html와 css 스크립트는 댓글에 첨부했습니다
- HTML/CSS
- jquery
hyoseok BANG
댓글 2
좋아요 0
조회수 273
안녕하세요! 강의내용을 기반으로 변형해서 개인포트폴리오용으로 만들 때
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
강의내용을 기반으로 변형해서 개인포트폴리오용으로 만들 때 1.실제있는 모바일 웹사이트를 기반으로 제가 리뉴얼해서 만들어야하는건가요 ?? 2.그럼 사이트 안에 들어가는 이미지 같은 건 그 웹사이트에 있는 사진을 가져다가 개인 포트폴리오용에 써도 되는지(?)안된다면 어디서 사진을 갖다 써야하는지 궁금합니다.
- HTML/CSS
- jquery
- 모바일-디자인
- figma
- 포트폴리오
예림
댓글 1
좋아요 1
조회수 246
npx create-react-app 오류
미해결
처음 만난 리액트(React)
프로젝트 생성하는 데 오류가 생겨 질문 드립니다
- HTML/CSS
- javascript
- react
댓글 2
좋아요 0
조회수 1134
리액트 DOM부분 수정
미해결
처음 만난 리액트(React)
DOM화면의 일부만 찾아서 수정해서 사용자에게 응답해준다고 하였는데 AJAX비동기 통신도 일부 구역만 변경해서 보여주는데 서로 관련이 있나요?? 아직 리액트 처음이라 궁금해서 질문 드려봅니다.
- HTML/CSS
- javascript
- react
이동영
댓글 1
좋아요 1
조회수 260
DAY11 영상에 오타있네요
미해결
기초 알고리즘 코딩테스트 40일 완성 (by 하루코딩)
최댓값 문제 2566번인데 2556번(별 찍기 - 14)로 숫자가 잘못되어있습니다. 수정 부탁드립니다.
- python
- java
- 코딩-테스트
kairs294702
댓글 2
좋아요 0
조회수 292
scss에 active 적용하는 방법
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
이 햄버거 버튼을 active 넣었을때 바꾸려고 하는데 scss에는 도대체 어떻게 넣는지 너무 궁금해요 제가 강의 들으면서 계속 겪는 문제인데 scss에 .active를 적용해도 아무것도 안돼네요 scss 에 active 적용하려면 도대체 어떻게 해야할 지 모르곘어요 항상 강의들으면서 이 부분에서 막히는데 어떻게 해야할 지 도움 구합니다
- HTML/CSS
- javascript
- jquery
tkddnjs1018
댓글 1
좋아요 1
조회수 341
그대로 넣으면 map을 찾지 못한다는 오류가 나옵니다
미해결
처음 만난 리액트(React)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이런 오류가 나오면서 따로 실행이 되지 않습니다
- HTML/CSS
- javascript
- react
rkrdh727
댓글 2
좋아요 1
조회수 483
섹션2 리액트 가져오기에서 react@17 말고 18을 불러와도 상관없나요?
미해결
처음 만난 리액트(React)
안녕하세요! 실습을 하던 도중 react@17 을 가지고 오는 것을 알게되었습니다! 현재 react@18도 나온 것 같은데 17로 실습하는게 나은지 18로도 해도 되는건지 여쭤보고 싶었습니다. 밑에 처럼 바꿔도 되는걸까요? <!-- 리액트 가져오기 --> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <!-- 리액트 컴포넌트 가져오기 --> <script src="MyButton.js"></script>
- HTML/CSS
- javascript
- react
김혜나
댓글 1
좋아요 1
조회수 652
useQuery랑 queryClient.getQueryData랑 차이점이 있을까요??
해결됨
Next + React Query로 SNS 서비스 만들기
기본적으로 캐싱된 데이터가 있으면, 그 데이터를 가지고 오는 것으로 알고 있는데, const { data} = useQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends}); const data = queryClient.getQueryData(['posts', 'recommends']); 두 가지 차이점이 있는지 궁금합니다.
- react
- next.js
- react-query
- next-auth
- msw
oct.wanga
댓글 2
좋아요 -1
조회수 1871
반응형이 안먹힐때 뭐가 문제일까요?? ㅜㅠ
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
■ 질문 남기실 때 꼭! 참고해주세요. font-size: 2.2em; 을했는데 크롬 디바이스툴에서는 전혀 줄어들지 않네요 ㅜㅠ 어떻게 해야할지 질문드립니다 저 크롬이 문제인가요??
- HTML/CSS
- javascript
- jquery
tkddnjs1018
댓글 2
좋아요 1
조회수 1218
skill 섹션 질문
해결됨
면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
선생님 안녕하세요! 제가 포토샵 공부는 하고 있는데 포토샵이 아직 익숙치는 않아서 skill 섹션에 포토샵 대신에 figma를 넣고 싶은데요 올려주신 참고 텍스트에는 Figma가 없어서 혼자 이렇게 저렇게 적어보았는데 썩 좋아보이지가 않네요ㅠㅠ 괜찮은 문구 짧게나마 부탁좀 드려도 될까요?
- HTML/CSS
- jquery
- 포트폴리오
이종주
댓글 1
좋아요 1
조회수 261
react-intersection-observer 무한스크롤페이지 중복호출문제
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 강의 잘 보고 있습니다. 다름아니라 무한스크롤 부분 구현중(개인 프로젝트에 해당 부분만 먼저 적용중이라 jsonplaceholder API로 호출하고 있습니다) fetchNextPage가 2번씩호출이 되어서 delay도 조정해보았는데 계속 2번씩호출이 되서 로직에 혹시 문제가 있는지 봐주실수 있을지부탁드립니다. 0. 콘솔에 확인한 결과 처음 화면에 ref가 렌더되고 그 이후 data fetching이 완료되어 isFetcing이 false가 되었는데, data를 map으로 div로 뿌리는 렌더링 과정에 시간이 소모되어 inView는 true && isFetching도 false가 되어서 div가 화면에 나타나고 ref div를 가리기 전에 data fetching을 한번씩 더 하고 있는 상황입니다. 감사합니다
- react
- next.js
- react-query
- next-auth
- msw
나무아르볼
댓글 3
좋아요 0
조회수 1369
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
@media (max-width:768px) { /* html { scroll-behavior: smooth; } */ /* Entire Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; } /* Header */ header { transition: 0.5s; z-index: 100; } header.active { background-color: #fff; border-bottom: 1px solid #eee; } .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); transition: 0.5s; } .gnb.active { right:0; } .menu { margin-top: 60px; line-height: 40px; } .menu a { display: block; text-align: right; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; top: 20px; right: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } /* go to top */ .gototop { position: fixed; bottom: 20px; left: 20px; border: 1px solid #fff; display: block; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 50px; transform: translateY(0px); opacity: 0; } .gototop.active { opacity: 1; } .btn-hiring { right: 20px; bottom: 20px; } .cd-vertical-nav { display: none; } /* Show Hide Section */ /* #home, #about, #project, #plan, #awards, #location, #contact { display: none; } */ /* ############# section : Home ############# */ .home-inner { height: 100vh; } .welcome-text { transform: translate(-50%, -50%) scale(0.7); width: 100%; /* border: 2px solid red; */ } .home-heading { left: 20px; } .home-heading span { font-size: 50px; } }
- HTML/CSS
- jquery
- 웹-디자인
- 반응형-웹
audlovewns
댓글 1
좋아요 2
조회수 252
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
/* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* source sans */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200;300;400;600&display=swap'); /* Overpass */ @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* Reset CSS */ * { box-sizing: border-box; } ul { list-style: none; padding: 0; } a { text-decoration: none; } /* Default CSS */ body { font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout */ .cd-section { height: 100vh; } .cd-section > div { height:100%; position: relative; } .content { background-color: #ddd; position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; overflow: hidden; } /* Header */ header { position: fixed; top:0; left:0; width: 100%; } .gnb-inner { /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; line-height: 60px; } .logo { float: left; } .logo img { padding-top: 17px; } .gnb { float: right; } .menu { display: none; } .menu a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; } /* Hiring button */ .btn-hiring { position: fixed; right: 50px; bottom: 50px; color: #fff; background-color: #000; padding: 10px 20px; border-radius: 20px; box-shadow: 5px 5px 20px rgb(0, 0, 0, 0.3); transition: 0.5s; } .btn-hiring .fa-solid { transform: rotateY(180deg); margin-right: 5px; } .btn-hiring:active { transform: scale(0); } /* ############# section : Home ############# */ .home-inner { background-color: #fff; height: 100%; } .home-inner::before { content: ''; background-color: #000; position: absolute; width: 0; height: 100%; top: 0; left: 0; animation: overlay 1s 2.5s ease-in-out; /* display: none; */ } .welcome-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; font-weight: 300; text-align: center; line-height: 1.2em; margin: 0; font-family: 'Source Sans 3', sans-serif; animation: slideup 2s linear; animation-fill-mode: both; /* display: none; */ } .welcome-text span { display: block; font-size: 26px; } .welcome-text span .fa { color: crimson; } .opacity-image { background: url('images/section-bg-01.jpg') no-repeat center center; background-size: cover; height: 100%; opacity: 0; animation: opacity-image 1s 3s ease-in both; /* display: none; */ } .home-heading { /* display: none; border: 1px solid red;*/ position: absolute; top: 50%; /* left: 40%; */ left: 300px; /* margin-left: 200px; */ transform: translateY(-50%); } .home-heading span { display: block; font-size: 115px; color: #fff; font-weight: 600; width: 0; overflow: hidden; animation: reveal 1s 3s ease-in-out both; } .home-heading span:nth-child(1) { animation-delay: 3s; } .home-heading span:nth-child(2) { animation-delay: 3.2s; } .home-heading span:nth-child(3) { animation-delay: 3.4s; } @keyframes slideup { 0% { opacity: 0; margin-top: 50px; } 20% { opacity: 1; margin-top: 0; } 80% { opacity: 1; margin-top: 0; } 100% { opacity: 0; } } @keyframes overlay { 0% { width: 0; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; /* right: 0; */ left: 100%; } } @keyframes opacity-image { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes reveal { 0% { width: 0; } 100% { width: 100%; } }
- HTML/CSS
- jquery
- 웹-디자인
- 반응형-웹
audlovewns
댓글 1
좋아요 2
조회수 333
인기 태그
인프런 TOP Writers
- 정현섭 8
- 닉네임 5
- eggmun(문성진) 4
- 김보노 3
- 박효정 3
- Like me black 3
- 코코리코코 3
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- [프로젝트] 앱 출시 목표 6개월간 함께할 사이드 프로젝트 팀원 모집 vsvx13
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS