무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
emmet 플러그인
emmet 플러그인 설치했는데 id와 class attribute가 강의화면에서처럼 적용되지 않습니다. section#main 치고 엔터 누르면 <section id="main"></section>이 아닌 #<main> </main> 이렇게 완성됩니다. 클래스도 마찬가지고요. 어떻게 해결할수 있을까요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
qna페이지에서 선택한 내용들이 result페이지에서 나오게 하고 싶습니다. 혹시 도움받을 수 있을까요?
안녕하세요. 더우신데 고생 많으십니다. 염치없지만, 도움을 받고자 이렇게 문의를 남기게 되었습니다. 초보인 저의 머리로는 코드를 짜기가 더이상 어려웠습니다..ㅜ 혹시 사진처럼, 상단에 자신이 qna에서 선택한 내용들을 정리해서 result페이지에서 나오게 할 수 있을까요? 혹시 코드를 아시다면 정말 죄송하지만 부탁드려도 될까요?..ㅜ 바쁘시다면, tip이라도 알려주시면 제가 찾아서 한번 해보겠습니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
카카오톡으로 공유하기를 했을때 공유 이미지가 계속 강의 속 이미지인 '소'로 뜹니다.
안녕하세요. 판다코딩님 덕분에 한층 발전해나가고 있는 학생입니다. 코딩을 처음 해보는데, 이렇게 멋진 홈페이지를 만들 수 있어서 정말 감사했습니다. :) 한 가지 문제가 있어서 문의드립니다. "카카오톡으로 공유하기를 했을때 공유 이미지가 계속 강의 속 이미지인 '소'로 뜹니다." <과정> 1. start 파일에서 기존 이미지들은 다 삭제하고, 제가 만든 이미지들을 4장 넣었습니다. 2. 다른 이미지들의 파일 이름을 image-0.png, image-1.png, image-2.png, image-3.png 로 했습니다. 3. image-0 / image-2 / image-3은 모두 제가 만든 이미지로 공유가 되는데, image-1만 이미지가 바뀌지 않고, 기존 강의에서 image-1.png였던 '소'로 뜹니다. 4. start파일에는 '소' 이미지를 삭제해서 없는데, 왜 계속 뜨는지 의문이 듭니다.... 혹시 도움 부탁드려도 될까요..? <코드> [data.js]코드 /* 아스트라제네카,0 화이자,1 모더나,2 얀센,3 */ const qnaList = [ { q: '예방접종 맞은 코로나(COVID-19) 백신은 어떻게 되나요?', a: [ { answer: '아스트라제네카', type: [0] }, { answer: '화이자', type: [1] }, { answer: '모더나', type: [2 ] }, { answer: '얀센', type: [3 ] }, ] }, { q: '성별은 어떻게 되나요?', a: [ { answer: '남성', type: [] }, { answer: '여성', type: [] }, ] }, { q: '연령대는 어떻게 되나요?', a: [ { answer: '18-29세', type: [] }, { answer: '30-39세', type: [] }, { answer: '40-49세', type: [] }, { answer: '50-59세', type: [] }, { answer: '60-69세', type: [] }, { answer: '70-79세', type: [] }, { answer: '80세 이상', type: [] }, ] }, { q: '몇차 접종인가요?', a: [ { answer: '1차 ', type: [] }, { answer: '2차 ', type: [] }, ] }, { q: '접종 후 열이 있었나요?', a: [ { answer: '38.4℃ 이하', type: [] }, { answer: '38.5-38.9℃', type: [] }, { answer: '39.0-40℃', type: [] }, { answer: '40.1℃ 이상', type: [] }, ] }, { q: '접종부위에 통증이 있었나요?', a: [ { answer: '통증은 있으나 약 먹을 정도는 아님', type: [] }, { answer: '1~2일 약을 먹어야 팔을 움직이는데 지장이 없음', type: [] }, { answer: '3일 이상 통증이 지속되거나 약을 먹어도 통증조절이 안되어 팔을 움직이기 어려운 경우', type: [] }, { answer: '없음', type: [] }, ] }, { q: '접종부위에 부기나 발적이 있었나요?', a: [ { answer: '직경 5cm 이하', type: [] }, { answer: '5.1~10cm 움직이기 불편', type: [] }, { answer: '10cm 이상 활동 어려움', type: [] }, { answer: '농양', type: [] }, { answer: '없음', type: [] }, ] }, { q: '토하거나 메스꺼운 증상이 있었나요?', a: [ { answer: '일상생활이 불편한 정도는 아님', type: [] }, { answer: '하루(24시간)에 1~2회 발생', type: [] }, { answer: '하루(24시간)에 3회 이상 발생', type: [] }, { answer: '없음', type: [] }, ] }, { q: '두통, 관절통, 근육통 등 통증이 있었나요?', a: [ { answer: '두통', type: [] }, { answer: '관절통', type: [] }, { answer: '근육통', type: [] }, { answer: '없음', type: [] }, ] }, { q: '피로감이 있었나요?', a: [ { answer: '있음', type: [] }, { answer: '없음', type: [] }, ] }, { q: '알레르기 반응이 있었나요?(예: 두드러기, 발진, 손이나 얼굴 부기 등)', a: [ { answer: '발진', type: [] }, { answer: '두드러기', type: [] }, { answer: '소양감(가려움증)', type: [] }, { answer: '부기(얼굴, 입술)', type: [] }, { answer: '없음', type: [] }, ] }, { q: '접종일-증상발생일 기간이 어떻게 되시나요?', a: [ { answer: '0일', type: [] }, { answer: '1일', type: [] }, { answer: '2일', type: [] }, { answer: '3일', type: [] }, { answer: '4일', type: [] }, { answer: '5일', type: [] }, { answer: '6일', type: [] }, { answer: '7일 이상', type: [] }, ] }, ] const infoList = [ { name: '당신의 증상 비율(%)는 다음과 같습니다.', desc: '※아스트라제네카 백신 접종 후, 이상반응 신고자(78,058명)에서의 증상 비율입니다. ※코로나19 예방접종 후 이상반응으로 의심되어 신고된 건으로 의료기관에서 신고한 정보를 기반으로 산출하였으며, 백신과 이상반응 간 인과성을 제시하는 것은 아닙니다. 신고 현황 분류는 새로운 정보 추가시 변경 될 수 있습니다. [출처 : 질병관리청 코로나19예방접종대응추진단 이상반응관리팀]' }, { name: '당신의 증상 비율(%)는 다음과 같습니다.', desc: '※화이자 백신 접종 후, 이상반응 신고자(37,813명)에서의 증상 비율입니다. ※코로나19 예방접종 후 이상반응으로 의심되어 신고된 건으로 의료기관에서 신고한 정보를 기반으로 산출하였으며, 백신과 이상반응 간 인과성을 제시하는 것은 아닙니다. 신고 현황 분류는 새로운 정보 추가시 변경 될 수 있습니다. [출처 : 질병관리청 코로나19예방접종대응추진단 이상반응관리팀]' }, { name: '당신의 증상 비율(%)는 다음과 같습니다.', desc: '※모더나 백신 접종 후, 이상반응 신고자(4,766명)에서의 증상 비율입니다. ※코로나19 예방접종 후 이상반응으로 의심되어 신고된 건으로 의료기관에서 신고한 정보를 기반으로 산출하였으며, 백신과 이상반응 간 인과성을 제시하는 것은 아닙니다. 신고 현황 분류는 새로운 정보 추가시 변경 될 수 있습니다. [출처 : 질병관리청 코로나19예방접종대응추진단 이상반응관리팀]' }, { name: '당신의 증상 비율(%)는 다음과 같습니다.', desc: '※얀센 백신 접종 후, 이상반응 신고자(7,577명)에서의 증상 비율입니다. ※코로나19 예방접종 후 이상반응으로 의심되어 신고된 건으로 의료기관에서 신고한 정보를 기반으로 산출하였으며, 백신과 이상반응 간 인과성을 제시하는 것은 아닙니다. 신고 현황 분류는 새로운 정보 추가시 변경 될 수 있습니다. [출처 : 질병관리청 코로나19예방접종대응추진단 이상반응관리팀]' }, ] [share.js]코드 const url = 'https://mycorona1.netlify.app/'; function setShare(){ var resultImg = document.querySelector('#resultImg'); var resultAlt = resultImg.firstElementChild.alt; const shareTitle = '코로나(COVID-19) 백신 예방접종 후 건강상태 결과'; const shareDes = infoList[resultAlt].name; const shareImage = url + 'img/image-' + resultAlt + '.png'; const shareURL = url + 'page/result-' + resultAlt + '.html'; Kakao.Link.sendDefault({ objectType: 'feed', content: { title: shareTitle, description: shareDes, imageUrl: shareImage, link: { mobileWebUrl: shareURL, webUrl: shareURL }, }, buttons: [ { title: '결과확인하기', link: { mobileWebUrl: shareURL, webUrl: shareURL, }, }, ] }); } [result-0.html]코드 <!DOCTYPE html> <html lang="ko" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name"author" content="My Corona"> <meta name"keywords" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기"> <meta name"description" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기"> <!-- sns share --> <meta property="og:url" content="https://mycorona1.netlify.app" /> <meta property="og:title" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기" /> <meta property="og:type" content="website" /> <meta property="og:image" content="../img/메인 사진.jpg" /> <meta property="og:description" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기" /> <!--favicon--> <link rel="shortcut icon" href="../img/favicon.ico"> <link rel="apple-touch-icon-precomposed" href="../img/favicon.ico"/> <title>코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../css/default.css"> <link rel="stylesheet" href="../css/result.css"> </head> <body> <section id="shareResult" class="mx-auto my-5 pb-5 px-3"> <h4 class="pt-5">당신의 결과는?</h4> <div class="resultname"> <p>당신의 증상 비율(%)는 다음과 같습니다.</p> </div> <div id="resultImg" class="my-3 col-lg-6 col-md-8 col-sm-10 col-12 mx-auto"> <img src="../img/image-0.png" alt="0" class="img-fluid"> </div> <div class="resultDesc"> <p>※아스트라제네카 백신 접종 후, 이상반응 신고자(78,058명)에서의 증상 비율입니다. ※코로나19 예방접종 후 이상반응으로 의심되어 신고된 건으로 의료기관에서 신고한 정보를 기반으로 산출하였으며, 백신과 이상반응 간 인과성을 제시하는 것은 아닙니다. 신고 현황 분류는 새로운 정보 추가시 변경 될 수 있습니다. [출처 : 질병관리청 코로나19예방접종대응추진단 이상반응관리팀]</p> </div> <script type="text/javascript"> function moveHome(){ location.href = "/index.html"; } </script> <button type="button" class="gohome mt-3 py-2 px-3" onclick="js:moveHome()">나도 검사해보기</button> </section> </body> </html> [문제의 result-1.html]코드 <!DOCTYPE html> <html lang="ko" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name"author" content="My Corona"> <meta name"keywords" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기"> <meta name"description" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기"> <!-- sns share --> <meta property="og:url" content="https://mycorona1.netlify.app" /> <meta property="og:title" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기" /> <meta property="og:type" content="website" /> <meta property="og:image" content="../img/메인 사진.jpg" /> <meta property="og:description" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기" /> <!--favicon--> <link rel="shortcut icon" href="../img/favicon.ico"> <link rel="apple-touch-icon-precomposed" href="../img/favicon.ico"/> <title>코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../css/default.css"> <link rel="stylesheet" href="../css/result.css"> </head> <body> <section id="shareResult" class="mx-auto my-5 pb-5 px-3"> <h4 class="pt-5">당신의 결과는?</h4> <div class="resultname"> <p>당신의 증상 비율(%)는 다음과 같습니다.</p> </div> <div id="resultImg" class="my-3 col-lg-6 col-md-8 col-sm-10 col-12 mx-auto"> <img src="../img/image-1.png" alt="1" class="img-fluid"> </div> <div class="resultDesc"> <p>※화이자 백신 접종 후, 이상반응 신고자(37,813명)에서의 증상 비율입니다. ※코로나19 예방접종 후 이상반응으로 의심되어 신고된 건으로 의료기관에서 신고한 정보를 기반으로 산출하였으며, 백신과 이상반응 간 인과성을 제시하는 것은 아닙니다. 신고 현황 분류는 새로운 정보 추가시 변경 될 수 있습니다. [출처 : 질병관리청 코로나19예방접종대응추진단 이상반응관리팀]</p> </div> <script type="text/javascript"> function moveHome(){ location.href = "/index.html"; } </script> <button type="button" class="gohome mt-3 py-2 px-3" onclick="js:moveHome()">나도 검사해보기</button> </section> </body> </html>
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
data 질문 갯수관련해서 질문드립니다!
안녕하세요! 제가 원본의 질문 갯수 12개에서 질문 갯수를 늘리고자 합니다! 그래서 질문 하나를 추가하고 endpoint 값도 13으로 맞춰줬는데 qna페이지에서 이렇게 오류가 나네요...!ㅠㅠㅠ 제가 완전 초보가 뭘 놓친건지 모르겠어서 여쭤보려 댓글답니다!
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
좋은강의 너무 감사합니다. 사용자 응답 관련 질문
해당 링크에 접속한 응답자의 결과를 따로 저장할 수 있는 방법의 강의를 기획하고 계신다는 글을 확인했습니다. 언제쯤 볼 수 있을까요? 좋은 강의 너무 감사합니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
판다코딩님 강의 짱짱 좋아요(질문 있어요)
예전부터 심리테스트 페이지를 직접 제작해 보고 싶었는데 너무나 코알못이라 하다가 포기했었습니다 ㅜㅅㅜ 그러던 중 판다님 심리테스트 제작 강의를 보게되었고 시작부터 배포까지 너무나 자세한 설명에 결국 완성하게 되었습니다 행복.. 아직은 판다님 코드 복붙 수준에 이미지만 바꾼 정도지만.. 앞으로 더 배워서 제 스타일로 더욱 발전시켜 보겠습니다!!! 아 그리고 메인페이지에서 시작버튼을 두번 이상 누르면(연속 더블클릭) 첫번째 qna 페이지에 선택버튼들이 6개, 9개, 쭉쭉.. 등장하는 오류가 있습니다 제가 만든 코드의 오류인줄 알았는데 판다님이 완성시킨 사이트에서도 적용되길래 해결 방법을 알고싶습니다. 감사합니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
atom.io 패키지 설치 오류가 발생합니다.
Installing “emmet@2.4.3” failed.Show output… Compiler tools not found Packages that depend on modules that contain C/C++ code will fail to install. Read here for instructions on installing Python and Visual Studio. Run apm install --check after installing to test compiling a native module. ㅇatom.io 에서 Install-packages 에서 emmet, atom beatuy를 설치하려고 했으나, 이런 오류가 나옵니다. 혹시 어떻게 해야하는지 아실까요..? ㅠ
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
버튼이 등장할때 fadeIn애니메이션이 등장하지 않습니다...
제가 확인했을 때 코드 완전히 똑같이 따라한것같은데 어느 파일의 어느 함수 부분을 고쳐야 애니메이션이 등장할까요? 자세한 코드 확인 말고 그냥 짐작가는 곳을 말씀해주시면 좋겠습니다 ㅠ fadeIn 함수도 애니메이션 파일에 잘 만들어놨습니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
확인 부탁드립니다!!
계속 11번 문제만 클릭하면 gost.js:84 Uncaught TypeError: Cannot read property 'q' of undefined at goNext (gost.js:84) at gost.js:72 이런 오류가 뜹니다 ㅜㅜ 84번 라인 코드 ↓ q.innerHTML = qnaList[qIdx].q; 72번 라인 코드 ↓ goNext(++qIdx); 뭐가 문제일 까요 ㅠㅠ
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
start.js 부분에서 goNext 함수 관련 질문 입니다.
goNext라는 함수를 실행시키지 않았는데, q라는 변수 안에 innerHTML이 왜 들어가는지 궁금합니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
안녕하세요 질문드립니다
퀄리티 높은 강의를 무료로 제공해주셔서 감사합니다. 강의를 듣다가 궁금한 점이 생겨서 글 남깁니다. 화면전환 파트 강의를 듣는데 자바스크립트를 이용해서 display none이랑 block을 통해 화면 전환하는 방법이 나오는데 아예 html을 새로 만들어서 버튼을 눌렀을때 두번째 html로 링크해주어 화면을 전환하는 방법도 있는걸로 알고있는데 어느게 더 일반적인가요? 감사합니다
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
프로그래스바에 애니메이션을 추가하고 싶어요!
안녕하세요! 강의 너무너무 잘 듣고 있습니다! 한가지 궁금한 점이 있는데, 프로그레스 바에 점점 차오르는 애니메이션을 추가하고 싶어서 코드를 따로 작성을 했는데 첫번째 질문에서 프로그레스바 애니메이션이 적용은 되는데 두번째 질문부터는 적용이 안되어서 어떻게 하면 될 지 궁금해서 질문 남깁니다..! .status { height: 20px; width: 80%; background-color: #F8EFFB; border-radius: 20px; justify-content: flex-start; display: flex; } .statusbar { height: 100%; border-radius: 20px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,d8d0ef+50,cec7ec+51,c1bfea+100;Purple+3D+%231 */ background: #ebe9f9; /* Old browsers */ background: -moz-linear-gradient(top, #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebe9f9', endColorstr='#c1bfea', GradientType=0); /* IE6-9 */ animation: load 1s normal forwards; }
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
질문이요!!
css 꾸밀떄, .answerBox는 왜 안되는거죠?? .answerList 클래스를 꼭 만들어서 사용해야 하나요? 그이유도 궁금합니다..
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
질문이요!!!
안녕하세요. 밑에 사진처럼 두개를 만들었는데, 이유가 무엇인가요?? 단지 크롬에서 작동하기위해 @-webkit-를 사용한것인가요? 아니면 @keyframes 하나만 해도 상관없는건가요? @keyframes @-webkit-keyframes
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
뭐가 문제일까요..???
버튼이 안만들어지는데 뭐가 문제일까요..?ㅠㅠㅜ
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
배경 설정 질문
삭제된 글입니다
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
atom 사용시 문제ㅠㅠ
https://blog.naver.com/petitcoding7723/222439588713 위의 블로그에 문제현상을 동영상으로 올렸습니다. 분명히 저는 4를 수정하려고 했는데 어느 순간 커서가 이동해서 아래쪽에 있는 내용이 수정이 됩니다. 심지어 지웠던 내용이 다시 복구되기도 합니다. atom을 쓰면서 계속 이 현상이 발생합니다. 지금 여태까지는 그냥 천천히 하다보니 크게 문제 되지 않았는데 점점 속도가 붙다보니 이런문제가 골치아파지네요...
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
공유하기 대신 상품 링크를 넣고 싶어요
안녕하세요 판다코딩님! 덕분에 어려운 코딩을 쉽게쉽게 구현할 수 있어서 정말 큰 도움이 되고 있습니다! 결과값에 따라 "공유하기" 대신에 상품링크를 걸어서 "구매하러가기" 이런식으로 구현해보고 싶은데 가능할까요? 현재 떠오르는 아이디어는data.js에 링크들을 넣어두고 결과값에 따라 각각 링크들을 불러오는 식의 코딩을 해보려고 하는데 어떻게 해야할지 잘 감이 오질 않네요...
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
변수 선언에 관한 질문이 있습니다.
안녕하세요. 변수 선언 방식에 대해서 질문이 있습니다. 찾아보니까 var, let, const 다 변수를 선언하는 방식이지만 그 특성은 다른것을 확인했는데요. 판다코딩님께서는 var, let, const를 경우에 따라서 구별하여 사용하시는 것 같습니다. 어떤 경우에따라서 이렇게 구분하여 사용하시는지 알려주시면 감사하겠습니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
질문과 버튼 사이에 사진을 추가하고 싶습니다.
문제 사진 버튼 이런 구성으로 만들고 싶은데 어떻게 하는지 궁금합니다. 질문과 버튼의 글씨가 바뀌는 것처럼 사진도 질문마다 바뀌고 페이드인/아웃 효과도 주고 싶습니다.