강의 내용은 아니지만 따로 뭔가를 더 하고싶어서 그런데화면은 잘 나왔는데 text-align: center;로 중앙배치 했지만 세로가 위쪽에있는데 세로도 중앙배치 하려면 어떻게 해야하나요?

 // PostListItem.jsx import React from "react"; import styled from "styled-components"; const Wrapper = styled.div` width: calc(100% -32px); padding: 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid grey; border-radius: 8px; cursor: pointer; background: white; :hover { background: lightgrey; } `; const TitleText = styled.p` font-size: 20px; font-weight: 500; `; // 글의 제목만 표시 function PostListItem(props) { const { post, onClick } = props; return ( <Wrapper onClick={onClick}> <TitleText>{post.title}</TitleText> </Wrapper> ); } export default PostListItem; // PostList.jsx import React from "react"; import styled from "styled-components"; import PostListItem from "./PostListItem"; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: flex-start; justify-content: center; :not(:last-child) { margin-bottom: 16px; } `; function PostList(props) { const { posts, onClickItem } = props; return ( <Wrapper> {posts.map((post) => { return ( <PostListItem key={post.id} post={post} onClick={() => { onClickItem(post); }} /> ); })} </Wrapper> ); } export default PostList;   안녕하세요, 소플님. mini-blog 프로젝트 실습 질문합니다.박스 테두리가 강의 영상과 다르게 나오는데 style부분에서 어느 파일을 고쳐야 할지 잘 모르겠습니다.좋은 강의 무료로 해주셔서 감사합니다!

제가 슬릭 슬라이더 pc를 모바일로 바꾸려고 하는데요..제이쿼리에서 바꿀 방법 없을까요???아래 같이 추가햇는데 안먹어서 질문합니다 ㅠㅠ /* product */ $('.sales-presentation').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, dotsClass : "slick-dots", //아래 나오는 페이지네이션(점) css class 지정 draggable : true, //드래그 가능 여부 responsive: [ // 반응형 웹 구현 옵션 { breakpoint: 960, //화면 사이즈 960px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:3 } }, { breakpoint: 768, //화면 사이즈 768px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:2 } } ] });

안녕하세요강의 재미있게 잘 듣고 있습니다제가 궁금한 것은 예제 삼아 다른 코드를 테스트해보고 있는데 문제는 붙임 코드를 실행하면 4열로 형성된 카드 안에 더미 텍스트와 버튼들이 있어야 하는데 border 밖에 형성되어서 아무리 옵션을 바꿔도 변화가 없습니다강사님의 명쾌한 해답을 듣고 싶어요 <div className="grid grid-cols-12 gap-6"> <div className="col-span-12 lg:col-span-6 xxxl:!col-span-3"> <div className="box border-t-[5px] border-t-danger dark:border-t-danger"> <div className="box-header"> <h5 className="font-semibold text-xl text-danger text-center">New Project <span className="font-normal text-xs text-gray-500 dark:text-white/70">(03)</span></h5> </div> <div className="box-body overflow-auto"> <div className="gap-4 grid" id="task-left"> <div ref={leftContainerRef} onMouseEnter={OnDivChange} className='firstdrag' id="new-tasks-draggable" data-view-btn="new-tasks"> <div className="box task-box"> <div className="box-body space-y-4"> <div className="flex"> <div className="flex space-x-3 rtl:space-x-reverse"> <img src={"../../assets/img/logos/4.png"} className="p-1 h-full avatar avatar-sm bg-gray-100 dark:bg-black/20 rounded-sm" alt="logo" /> <div className="my-auto hidden sm:block"> <h5 className="text-base font-semibold w-44 truncate">Zanex Laravel Project</h5> <p className="text-gray-500 dark:text-white/70 text-xs my-auto flex space-x-1 rtl:space-x-reverse"><i className="ri-calendar-line"></i><span>05-12-2022</span></p> </div> </div> <div className="ltr:ms-auto rtl:mr-auto hs-dropdown ti-dropdown [--placement:left-top]"> <Link aria-label="anchor" href="#!" scroll={false} className="hs-dropdown-toggle ti-dropdown-toggle hover:bg-transparent dark:hover:bg-transparent inline-flex !p-0 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border-0 font-medium text-gray-500 shadow-none align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 transition-all dark:text-white/70"> <i className="ri ri-more-2-line text-lg leading-none"></i> </Link> <div className="hs-dropdown-menu w-40 min-w-[10rem] mt-0 transition-none ti-dropdown-menu"> <Link className="ti-dropdown-item" href="#!" scroll={false} ><i className="ri-eye-line"></i>View</Link> <Link className="ti-dropdown-item" href="#!" scroll={false} ><i className="ri-edit-2-line"></i>Edit</Link> <Link className="task-remove ti-dropdown-item" href="#!" scroll={false} ><i className="ri-delete-bin-6-line"></i>Delete</Link> </div> </div> </div> <div> <p className="mb-2">Justo kasd duo sanctus et elitr et, sed diam clita lorem sed eirmod, clita labore tempor et sanctus et ipsum stet, eos.</p>

깃 복붙도 해봤는데 계속 저래요... ㅜㅜ

우선, 강의대로 따라했을 때 index.html 에서는 헤더와 푸터 인클루드가 잘됩니다. 따로 test.html 을 만들어서 인클루드 해봐도 잘 됩니다.  하지만 html/class-detail.html 에 인클루드를 하면 헤더와 푸터가 인클루드 되지 않습니다. custom.js 의 경로를 바꿔봐도 안되네요 ㅜㅜ인클루드가 안되는 이유를 알 수 있을까요 ?

import React, {useState, useEffect} from "react"; import useCounter from "./useCounter"; const MAX_CAPACITY = 10; //최대 카운트 function Accommodate(props){ const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); useEffect(() => { console.log("===========배열없음"); console.log("useEffect is Called"); console.log(`isFull : ${isFull}`); }); //의존성 배열 없음 useEffect(() => { setIsFull(count >= MAX_CAPACITY); console.log("===========배열있음"); console.log(`Current count value : ${count}`); }, [{count}]); //의존성 배열 있음 return ( <div style={{padding : 16}}> <p>{`총 ${count}명 수용했습니다`}</p> <button onClick={increaseCount} disabled={isFull}>입장</button> <button onClick={decreaseCount}>퇴장</button> {isFull && <p style={{color:"red"}}>정원이 가득찼습니다.</p>} </div> ); } export default Accommodate;import React, { useState } from "react"; //custom Hook //초기 카운트 값을 파라미터로 받아서 카운트라는 이름의 //state를 생성하여 값을 제공하고 증감을 편리하게 할 수 있도록 하는 함수 function useCounter(initialValue){ const [count, setCount] = useState(initialValue); const increaseCount = () => setCount((count) => count+1); const decreaseCount = () => setCount((count) => Math.max(count-1,0)); return [count, increaseCount, decreaseCount]; } export default useCounter;import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter03_jsx/Library'; //컴포넌트 추가 import Clock from './chapter04_elements/Clock'; import CommentList from './chapter05_component_props/CommentList'; import NotificationList from './chapter06_state/NotificationList'; import Accommodate from './chapter07_hook/Accommodate'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( //<React.StrictMode> <Accommodate /> //</React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 위와 같이 Accomodate.jsx를 작성했습니다만 정원을 다 채웠을 경우 배열 있음이 한번 더 출력되는 현상이 나왔습니다.의존성 배열이 있는 부분의 ,{count}만 넣으면 오류 워닝이 떠서 배열 취급하기 위해 []를 추가했습니다.[]를 빼고 실행했을 경우 최대 카운트가 먹히지 않아 무한정으로 들어갑니다.제가 뭔가 잘못 한 걸까요?

별도로 지정하지않은 상호작용이 필요한 모든 콘텐츠는 임시링크를 적용하고 탭키로 이동 선택할수 있어야 한다라는 기술적 준수사항에, 푸터의 패밀리사이트 항목들도 해당되나요?

해당 부분만 흰색으로 양옆에 나오는데, 왜 그런걸까요 ?

레이아웃이 선생님께서 올려주신 영상과 다르게 이렇게 나오네요 무슨 문제일까요 ? @charset "utf-8";/*레이아웃*/#wrap{width:100%;}#header{width:100%; height:325px; background: #111;}#contents{width:100%; height:800px; background: #222;}#footer{width: 100%; height: 200px; background:#333;}

  라이브서버로 열기를 해봐도 웹 브라우저가 열리지 않고 있습니다. 구글링 해서 파일명에 영어나 ., 띄어쓰기 한글 등이 들어가면 안되는 점도 숙지하고 작업했으며 설정도 다음과 같이 수정했고, 브라우저를 열어 직접 ip주소를 쳐 봐도 1번째 사진과 같이 뜨고 실행이 되질 않습니다ㅜㅜ 또 어떤 방법을 써봐야 할까요 선생님?

혹시 수험자 제공텍스트를 끊어써도 될까요?제공된 수업영상에는 줄바꿈으로만 하셨는데한 슬라이드에 제공되는 한 줄의 텍스트를 타입툴 여러개로 끊어써서 이동시켜도 되나하구요.한 단어만 회전시키거나 다른 글씨체로 해도 되는지 궁금합니다!

안녕하세요! 수강을 막 시작하여 학습파일을 다운로드 했습니다.수업에서는 강의자료 폴더명으로 '2023_인프런_포트폴리오메인' 이라는 폴더가 첨부파일로 있다고 하셨는데, 다운받아보니 '학생첨부용_수강학습파일' 폴더 밖에 없어서 문의드립니다.참고할 수 있도록 학습본 말고 완성된 전체본도 받아볼 수 있을까요?

D유형 최종본제작 - D1갤러리 이미지 3개 사용하라고 나와있는데 저렇게 많이 나열하는게 맞나요? 그리고 완성본 화면줄이면 이미지 전부 갤러리 탭보더 밖으로 나와서 배열되는데.. css제대로 된게 맞을까요   

html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>starUp Mata : App Official Landing</title> <link rel="icon" href="images/logo_a.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.js"></script> <!--Custom csss & 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_pc.png"></a> </div> <div class="gub"> <a href="#none">아비브소개</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> <a href="#none"></a> --> </div> <div class="login"> <a href="#none">로그인</a> </div> </div> </header> <!-- welcome --> <section class="welcome"> <div class="slideshow"> <img src="images/slide-welcome-01.jpg"> <img src="images/slide-welcome-02.jpg"> <img src="images/slide-welcome-03.jpg"> </div> <div class="welcome-heading"> <span>창의적인 아이디어를 만드는 가장 빠른 방법</span> <h1> An idea solution of startup for your <em>3가지 타이핑 텍스트 자리</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> <!-- ceo-access --> <section class="ceo-access"></section> <!-- banner --> <section class="banner"></section> <!-- feature --> <section class="feature"></section> <!-- vision --> <section class="vision"></section> <!-- faq --> <section class="faq"></section> <!-- review --> <section class="review"></section> <!-- focus --> <section class="focus"></section> <!-- guide --> <section class="guide"></section> <!-- news --> <section class="news"></section> <!-- footer --> <footer></footer> </div> </body> </html>1000자 이상 안올라 간다해서 댓글에 남길게요

수강생 참고자료 및 완성본 다운로드 => 다운로드 해도 소스 텍스트가 없습니다. ㅜㅜ 못 찾는건지 모르겠는데...찾지못해서 일일이 치고 있어요. 소스텍스트가 어디있는지 알려주세요.

썸네일 이미지가 뜨지 않습니다!그리고 css도 안먹힙니다.더불어if (!data) { return <DiaryContainer></DiaryContainer>; } 위의 코드가 없으면 화면이 웹드라우저에 뜨지 않습니다. import { DiaryContainer, ResultTitle, Divider, CardContainer, CardTitle, CardContent, ActionListItem, } from "./CommonStyles"; import { LoadingOutlined, CheckCircleTwoTone, HeartTwoTone, SmileTwoTone, MessageTwoTone, SoundTwoTone, } from "@ant-design/icons"; import { Image } from "antd"; import styled from "styled-components"; const ThumbnailImage = styled(Image)` max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px; display: block; `; const DiaryDisplay = ({ data, isLoading }) => { if (isLoading) { return ( <DiaryContainer> 불러오는중... <LoadingOutlined /> </DiaryContainer> ); } if (!data) { return <DiaryContainer></DiaryContainer>; } return ( <DiaryContainer> <ResultTitle>{data.title}</ResultTitle> <Divider /> <CardContainer> <CardTitle> <CheckCircleTwoTone twoToneColor="#FF9AA2" style={{ marginRight: "6px" }} /> 요약 </CardTitle> <CardContent>{data.summary}</CardContent> </CardContainer> <ThumbnailImage src={data.thumbnail} alt="Thumbnail" fallback="데이터:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==" /> <Divider /> <CardContainer> <CardTitle> <HeartTwoTone twoToneColor="#FFB7B2" style={{ marginRight: "6px" }} /> 감성일기장 </CardTitle> <CardContent>{data.emotional_content}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SmileTwoTone twoToneColor="#FFDAC1" style={{ marginRight: "6px" }} /> 내가 느낀 감정 </CardTitle> <CardContent>{data.emotional_result}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <MessageTwoTone twoToneColor={"#B5EAD7"} style={{ marginRight: "6px" }} /> 심리 분석 </CardTitle> <CardContent>{data.analysis}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SoundTwoTone twoToneColor="#C7CEEA" style={{ marginRight: "6px" }} /> GPT 조언 </CardTitle> <CardContent> {data.action_list.map((action, index) => ( <ActionListItem key={index}>{action}</ActionListItem> ))} </CardContent> </CardContainer> </DiaryContainer> ); }; export default DiaryDisplay; 코드는 이렇습니다.썸네일은 원래 본 강의의 깃허브에서 내려받은 코드로도 안돼서 고친 것입니다. 원래코드도 이미지가 안떳습니다 ㅠㅠ어떻게 문제를 해결할 수 있을까요?

E유형 로고 작성하는 부분에 "심벌과 로고명이 포함된 완전한 형태로 디자인한다." 라고 되어있는데 심벌은 따로 이미지가 주어지는지 혹은 심벌로 따로 만들어야 하는지, 만약에 footer_logo 부분에도 심벌을 포함해서 만들어야 하는지 궁금합니다.

import styled from "styled-components"; const Wrapper = styled.div` padding: 1rem; display: flex, flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: lightgrey; `; const Block = styled.div` padding: ${(props) => props.padding}; border: 1px solid black; border-radius: 1rem; background-color: ${(props) => props.backgroundColor}; color: white; font-size: 2rem; font-weight: bold; text-align: center; `; const blockItems = [ { label: "1", padding: "1rem", backgroundColor: "red", }, { label: "2", padding: "3rem", backgroundColor: "green", }, { label: "3", padding: "2rem", backgroundColor: "blue", }, ]; function Blocks(props) { return ( <Wrapper> {blockItems.map((blockItem) => { return ( <Block padding={blockItem.padding} backgroundColor={blockItem.backgroundColor} > {blockItem.label} </Block> ); })} </Wrapper> ); } export default Blocks;style-componets를 install 하고 실습 코드를 실행했을 때, 강의에서 나온 결과 화면과 다른 화면이 나옵니다. 개발자 도구를 켜면 다음과 같이 display: flex; flex-direction: row 스타일이 적용되지 않은 것 같습니다.Wrapper 의 css 속성이 적용되지 않은 것 같은데, 원인을 못찾겠습니다. 답변주시면 감사하겠습니다.

안녕하세요? 강의 잘 보고 있습니다. F, B 카드가 있고 뒤집는 거잖아요? F에 z-index를 1을 주었기 때문에 B보다 앞에 있어서 F->B 순서로 보이구요. 여기서 궁금한 것은 실물 카드로 생각을 해보았을 때, F카드 밑에 B 카드가 있는거죠. [1번] backface-visibility: hidden을 주지 않았을 때 가드를 뒤집게 되면 B카드 밑에 F 카드가 있는게 아닌가요? [2번] 아니면 뒤집혀진 상태에서도 F의 z-index 1로 인해서 다시 F->B 상태로 되어 있는 건가요?제 생각은 실물 카드로 보면 뒷면이 보이더라도 B의 뒷면이 보여야 할거 같은데 F의 뒷면이 보여서 질문 드립니다.[1]번인 경우 F의 뒷면이 보이는게 이해가 안되고, 만약 [2]번인 경우 F 카드가 B 카드보다 위에 있다는 건데 뒷면을 안보여준다고 해도 그래도 F 카드가 보여야 할 것 같아서요.--------------------------------------------------제가 다시 생각해봤는데요. z-index 1이니깐 F 가 B 보다 무조건 위에 있는 건 맞으나, 실물 카드처럼 딱 붙어있는게 아니니깐 F는 위에서 돌고, B는 밑에서 돌고 F 뒷면, B 뒷면으로 있는 상태가 맞을까요? 여기서 뒷면은 안보이도록 해줬으니 B만 보이는거구요.