인프런 커뮤니티 질문&답변
작성한 질문수
이미지버전에서 부트스트랩 이미지하고 텍스트도 이용하고 싶어요
작성
·
392
0
부트스트랩의 그리드 카드 텍스트도 이용하고 싶어서
그리드카드의 코드를 복사해서 텍스틀 추가하고나서
왼쪽 이미와 오른쪽 이미지의 텍스트를 따로따로 넣고싶어서
start.js 에서
function goText(qidx){
var l = document.querySelector('.card-body left');
var r = document.querySelector('.card-body right');
l.innerHTML = qnaList[qIdx].a.answerleft;
r.innerHTML = qnaList[qIdx].a.answerright;
for(let i in qnaList[qIdx].a.answerleft){
addAnswer(qnaList[qIdx].a[i].answerleft, qIdx, i);
}
for(let i in qnaList[qIdx].a.answerright){
addAnswer(qnaList[qIdx].a[i].answerright, qIdx, i);
}
}
이런식으로 추가하고
data.js 에는
q: '1. 질문?',
a: [
{ answerleft: 'a. 답', type: [1, 2, 4, 9] },
{ answerright: 'b. 답', type: [0, 3, 6, 5, 10, 8] },
]
이런식으로 만들었습니다.모르겠어서 ㅜㅜ 어떻게 풀어가야할까요
settimeout도 만들어야하나요?
답변 1
0
안녕하세요, 인프런 AI 인턴이에요.
부트스트랩의 그리드 카드를 이용하여 이미지와 텍스트를 함께 보여주기 위해서는 일단 베이스가 되는 HTML 코드가 필요합니다. 그리드 카드는 다음과 같은 HTML 코드로 구성됩니다.
<div class="card">
<div class="row">
<div class="col-md-4">
<img src="이미지경로" class="img-fluid">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">제목</h5>
<p class="card-text">텍스트</p>
</div>
</div>
</div>
</div>
위의 코드에서 이미지 부분을 보면 col-md-4 부분으로 설정되어 있습니다. 이것은 부트스트랩 그리드 시스템에서 정의된 클래스이며, 화면 크기가 desktop 이상일 때 1⁄3 너비의 열을 차지합니다. 텍스트 부분은 col-md-8 로 설정되어 있으며 2⁄3 너비의 열을 차지합니다.
따라서, 이미지와 텍스트가 함께 나타나는 그리드 카드를 만들기 위해서는 위의 HTML 코드를 사용하시면 됩니다. 이미지 경로와 텍스트 내용은 data.js 파일에서 가져와서 적용하면 됩니다.
그리드 카드를 동적으로 생성하기 위해서는 setInterval 함수를 사용할 수 있습니다. setInterval 함수를 이용하면 일정 시간마다 함수를 실행할 수 있습니다. 따라서, setInterval 함수를 사용하여 goText 함수를 일정 시간마다 실행하도록 만들면 됩니다.
하지만, setTimeout 함수는 실행시키는 함수를 일정 시간 이후에 한 번만 실행시키기 때문에, setInterval 함수를 사용하는 것이 더 적합합니다.
아래는 goText 함수를 수정한 코드입니다.
function goText(qIdx){
var cardleft = document.querySelector('.card-left');
var cardright = document.querySelector('.card-right');
cardleft.querySelector('img').src = qnaList[qIdx].a.answerleft.img;
cardleft.querySelector('.card-title').innerHTML = qnaList[qIdx].a.answerleft.title;
cardleft.querySelector('.card-text').innerHTML = qnaList[qIdx].a.answerleft.text;
cardright.querySelector('img').src = qnaList[qIdx].a.answerright.img;
cardright.querySelector('.card-title').innerHTML = qnaList[qIdx].a.answerright.title;
cardright.querySelector('.card-text').innerHTML = qnaList[qIdx].a.answerright.text;
for(let i in qnaList[qIdx].a.answerleft){
addAnswer(qnaList[qIdx].a[i].answerleft, qIdx, i);
}
for(let i in qnaList[qIdx].a.answerright){
addAnswer(qnaList[qIdx].a[i].answerright, qIdx, i);
}
}
setInterval(function() {
goText(현재 질문 번호);
}, 1000); // 1초마다 실행
위 코드에서 cardleft와 cardright는 그리드 카드가 위치하는 div 태그의 클래스 이름으로 설정한 것입니다. 이 이름으로 지정되는 div 태그 안에서 내부 태그를 찾아서 사용합니다.
마지막으로 data.js 파일에서 qnaList의 형태를 다음과 같이 수정해야 합니다.
qnaList = [
{
q: '1. 질문?',
a: {
answerleft: {
img: '이미지경로',
title: '왼쪽 이미지 제목',
text: '왼쪽 이미지 텍스트'
},
answerright: {
img: '이미지경로',
title: '오른쪽 이미지 제목',
text: '오른쪽 이미지 텍스트'
}
}
}
];
이렇게 qnaList에서 직접 이미지 경로와 텍스트 내용을 가져와서 사용할 수 있도록 수정합니다.
아마도 해당 코드를 추가하고 실행하면 원하시는 결과를 얻을 수 있을 거라 생각됩니다. 이상입니다!