728x90
반응형
퀴즈 이펙트 : 객관식 확인하기 : CBT 유형(json)
수업 시간에 배운 내용을 복습하면서 해보겠습니다.
코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2 / JSON) / 완성화면
코드 블럭
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>퀴즈 이펙트07</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/quiz.css">
<!-- 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="ico/favicon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="ico/favicon.png"/>
<link rel="apple-touch-icon" href="ico/favicon.png"/>
</head>
<body>
<header id="header">
<h1><a href="../javascript14.html">Quiz</a> <em>객관식 확인하기 CBT 유형</em></h1>
<ul>
<li><a href="quizEffect01.html">1</a></li>
<li><a href="quizEffect02.html">2</a></li>
<li><a href="quizEffect03.html">3</a></li>
<li><a href="quizEffect04.html">4</a></li>
<li><a href="quizEffect05.html">5</a></li>
<li><a href="quizEffect06.html">6</a></li>
<li class="active"><a href="quizEffect07.html">7</a></li>
<li><a href="quizWebd_01.html">W1</a></li>
<li><a href="quizWebd_02.html">W2</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="quiz__wrap__cbt">
<div class="cbt__header">
<h2>2020년 1회 정보처리기능사 기출문제</h2>
</div>
<div class="cbt__time">남은 시간 59분 10초</div>
<div class="cbt__submit">답안지 제출하기</div>
<div class="cbt__conts">
<div class="cbt__quiz">
<!-- <div class="cbt">
<div class="cbt__question"><span>1</span>. 객체지향 프로그램에서 데이터를 추상화하는 단위는?</div>
<div class="cbt__question__img"><img src="img/gineungsaJC2023_01_01.jpg" alt="기능사"></div>
<div class="cbt__selects">
<div>
<input type="radio" id="select1">
<label for="select1"><span>클래스</span></label>
<input type="radio" id="select2">
<label for="select2"><span>메서드</span></label>
<input type="radio" id="select3">
<label for="select3"><span>상속</span></label>
<input type="radio" id="select4">
<label for="select4"><span>메시지</span></label>
</div>
</div>
<div class="cbt__desc">객체지향언어는 이다.</div>
<div class="cbt__keyword">객체지향언어</div>
</div> -->
</div>
</div>
<div class="cbt__aside">
<div class="cbt__info">
<div class="cbt__title">수험자 : <em>신동진</em></div>
<div class="cbt__score">
<span>전체 문제 수 : <em>60</em>문항</span>
<span>남은 문제 수 : <em>59</em>문항</span>
</div>
<div class="score"></div>
</div>
<div class="cbt__omr">
<!-- <div class="omr">
<strong>1</strong>
<input type="radio" id="omr0_1">
<label for="omr0_1">
<span class="label-inner">1</span>
</label>
<input type="radio" id="omr0_2">
<label for="omr0_2">
<span class="label-inner">2</span>
</label>
<input type="radio" id="omr0_3">
<label for="omr0_3">
<span class="label-inner">3</span>
</label>
<input type="radio" id="omr0_4">
<label for="omr0_4">
<span class="label-inner">4</span>
</label>
</div> -->
</div>
</div>
</div>
</main>
<!-- //main -->
</body>
</html>
구성
- 구역을 각각 나눠서 문제와 omr 카드 구역을 나누어줍니다.
- 문제의 구조를 문제, 문제 번호, 문제 이미지, 객관식 보기를 각각 태그를 사용해서 구성을 해줍니다.
- 문제를 풀 때 남은 시간과 문제를 다 풀고 답안 제출하기를 만들어줍니다.
- omr 카드 구역에 정보와 omr 카드 형식을 만들어줍니다.
- CSS는 각 태그에 알맞는 속성을 입력하고 속성 값을 입력해줍니다.
CSS1
/* header */
#header {
position: fixed;
left: 0;
top: 0;
background-color: #000;
color: #fff;
padding: 10px;
width: 100%;
z-index: 1000;
display: flex;
justify-content: space-between;
}
#header::before {
content: '';
border: 4px ridge #cacaca;
position: absolute;
left: 5px;
top: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
}
#header h1 {
font-size: 28px;
padding: 5px 5px 5px 10px;
font-family: 'DungGeunMo';
z-index: 10;
position: relative;
}
#header h1 a {
color: #fff;
}
#header h1 em {
font-size: 0.5em;
}
#header ul {
padding: 5px;
}
#header li {
display: inline;
z-index: 10;
position: relative;
}
#header li a {
color: #fff;
font-family: 'DungGeunMo';
border: 1px dashed #fff;
display: inline-block;
padding: 5px;
}
#header li.active a,
#header li a:hover {
background-color: #fff;
color: #000;
}
/* footer */
#footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #000;
text-align: center;
}
#footer a {
color: #fff;
padding: 20px;
display: block;
font-family: 'DungGeunMo';
z-index: 10;
position: relative;
}
#footer::before {
content: '';
border: 4px ridge #cacaca;
position: absolute;
left: 5px;
top: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
}
#main {
padding: 100px 0;
}
/* CBT 유형 */
.quiz__wrap__cbt {
padding: 0 20px;
font-family: 'PyeongChang';
}
.cbt__conts {
width: calc(100% - 300px);
background-color: #fff;
}
.cbt__header {
font-family: 'DungGeunMo';
width: calc(100% - 300px);
border: 8px ridge #cacaca;
margin-bottom: 20px;
padding: 20px;
background-color: #000;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.cbt__header > div > div {
background-color: #cacaca;
color: #000;
display: inline-block;
margin-left: 5px;
padding: 7px 20px;
border-radius: 20px;
}
.cbt__aside {
position: fixed;
right: 20px;
top: 180px;
width: 280px;
height: calc(100vh - 200px);
background-color: #fff;
border: 8px ridge #cacaca;
overflow-y: auto;
}
.cbt__time {
position: relative;
padding-left: 40px !important;
margin: 10px 0;
background-color: #cacaca;
padding: 5px 90px 5px;
border-radius: 50px;
color: #000;
position: fixed;
right: 30px;
top: 90px;
}
.cbt__time::before {
content: '';
position: absolute;
left: 12px;
top: 5px;
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E%0A");
animation: rotate 4s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.cbt__submit {
position: relative;
padding-left: 40px !important;
cursor: pointer;
margin: 15px 0;
background-color: #cacaca;
padding: 5px 120px 5px;
border-radius: 50px;
color: #000;
position: fixed;
right: 30px;
top: 125px;
}
.cbt__submit::before {
content: '';
position: absolute;
left: 12px;
top: 3px;
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10' /%3E%3C/svg%3E%0A");
}
.cbt__submit:hover {
background-color: #000;
color: #fff;
}
.cbt__submit:hover::before {
content: '';
position: absolute;
left: 12px;
top: 3px;
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='white' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10' /%3E%3C/svg%3E%0A");
}
.cbt__quiz {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.cbt__quiz .cbt {
width: 48%;
border: 8px ridge #cacaca;
margin-bottom: 10px;
padding: 10px;
}
.cbt__quiz .cbt.good {
position: relative;
}
.cbt__quiz .cbt.good::after {
content: '';
background-image: url(../img/o.png);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 400px;
position: absolute;
left: -100px;
top: -150px;
}
.cbt__quiz .cbt.bad {
position: relative;
}
.cbt__quiz .cbt.bad::after {
content: '';
background-image: url(../img/x.png);
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 400px;
position: absolute;
left: -100px;
top: -100px;
}
.cbt__info {
background-color: #000;
color: #fff;
border-bottom: 8px ridge #cacaca;
padding: 20px;
text-align: center;
}
.cbt__info .cbt__title {
text-decoration: underline;
text-decoration-color: #fff;
text-underline-offset: 4px;
margin-bottom: 5px;
}
.cbt__info span {
display: inline-block;
}
.cbt__omr {
padding: 20px;
overflow: hidden;
}
.cbt__omr .omr {
margin: 5px 0;
padding: 1px;
display: grid;
grid-template-columns: 50px 38px 38px 38px 38px;
grid-template-rows: 20px;
align-items: center;
}
.cbt__omr .omr input {
opacity: 0;
position: absolute;
width: 0;
height: 0;
}
.cbt__omr .omr strong {
display: inline-block;
text-align: center;
padding: 2px;
background-color: #000;
color: #fff;
font-family: 'Helvetica Neue';
margin-right: 10px;
font-weight: bold;
}
.cbt__omr .omr label {
box-shadow: 0 0 0 1px #000;
cursor: pointer;
line-height: 0.3;
text-align: center;
width: 28px;
height: 8px;
font-family: 'Helvetica Neue';
position: relative;
}
.cbt__omr .omr label::after {
background-color: #555;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
z-index: 1;
transition: width 0.1s linear;
}
.cbt__omr .omr input[type=radio]:checked + label::after {
width: 100%;
}
.cbt__omr .omr .label-inner {
background-color: #fff;
padding: 0.25em 0.13em;
transform: translateY(-0.25em);
width: 20px;
}
.cbt__question {
font-size: 1.4rem;
margin-bottom: 10px;
}
.cbt__question__img img {
max-width: 400px;
margin-bottom: 15px;
}
.cbt__question__img.hide {
display: none;
}
.cbt__question__desc {
border: 2px solid #cacaca;
padding: 10px;
margin-bottom: 10px;
}
.cbt__selects {
margin-bottom: 15px;
}
.cbt__selects label {
display: flex;
}
.cbt__selects label span {
font-size: 1rem;
padding: 10px 10px 10px 30px;
cursor: pointer;
color: #444;
position: relative;
}
.cbt__selects label span::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 1px solid #444;
border-radius: 50%;
text-align: center;
font-family: 'Helvetica Neue';
font-weight: bold;
line-height: 1.3;
font-size: 0.83em;
transition: all 0.25s;
}
.cbt__selects label:nth-of-type(1) span::before {
content: '1';
}
.cbt__selects label:nth-of-type(2) span::before {
content: '2';
}
.cbt__selects label:nth-of-type(3) span::before {
content: '3';
}
.cbt__selects label:nth-of-type(4) span::before {
content: '4';
}
.cbt__selects input {
position: absolute;
left: -9999px;
}
.cbt__selects input:checked + label span::before {
color: #fff;
box-shadow: inset 0 0 0 10px #000;
border-color: #000;
}
.cbt__selects label.correct span::before {
border-color: red;
box-shadow: inset 0 0 0 10px red;
color: #fff;
}
.cbt__desc {
background-color: #cacaca;
padding: 10px 10px 10px 40px;
margin-bottom: 5px;
position: relative;
}
.cbt__desc::before {
content: '';
position: absolute;
left: 15px;
top: 10px;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z' /%3E%3C/svg%3E ");
}
.cbt__desc.hide {
display: none;
}
.cbt__keyword {
background-color: #ff8080;
padding: 10px 10px 10px 40px;
position: relative;
}
.cbt__keyword::before {
content: '';
position: absolute;
left: 15px;
top: 10px;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59' /%3E%3C/svg%3E%0A");
}
JAVASCRIPT
<script>
const cbtQuiz = document.querySelector(".cbt__quiz");
const cbtOmr = document.querySelector(".cbt__omr");
const cbtSubmit = document.querySelector(".cbt__submit");
const cbtScore = document.querySelector(".cbt__score");
let quizScore = 0;
let questionAll = []; // 모든 퀴즈 정보
// 데이터 불러오기
const dataQuestion = () => {
fetch("json/gisa2020_01.json") // json파일 불러오는 형식
.then(res => res.json())
.then(items => {
questionAll = items.map((item, index) => {
const formattedQuestion = {
question: item.question,
number: index + 1
};
const answerChoices = [...item.incorrect_answers]; // 오답 불러오기
formattedQuestion.answer = Math.floor(Math.random() * answerChoices.length) + 1; // 정답을 랜덤으로 불러오기
answerChoices.splice(formattedQuestion.answer - 1, 0, item.correct_answer); // 정답을 랜덤으로 추가
// 보기를 추가
answerChoices.forEach((choice, index) => {
formattedQuestion["choice" + (index+1)] = choice;
});
// 문제에 대한 해설이 있으면 출력
if(item.hasOwnProperty("question_desc")){
formattedQuestion.questionDesc = item.question_desc;
}
// 문제에 대한 이미지가 있으면 출력
if(item.hasOwnProperty("question_img")){
formattedQuestion.questionImg = item.question_img;
}
// 해설이 있으면 출력
if(item.hasOwnProperty("desc")){
formattedQuestion.desc = item.desc;
}
// console.log(formattedQuestion);
return formattedQuestion;
});
newQuestion(); // 문제 만들기 실행문
})
.catch((err) => console.log(err));
};
// 문제 만들기
const newQuestion = () => {
const exam = [];
const omr = [];
questionAll.forEach((question, number) => {
exam.push(`
<div class="cbt">
<div class="cbt__question"><span>${question.number}</span>. ${question.question}</div>
<div class="cbt__question__img"></div>
<div class="cbt__selects">
<div>
<input type="radio" id="select${number}_1" name="select${number}" value="${number+1}_1" onclick="answerSelect(this)">
<label for="select${number}_1"><span>${question.choice1}</span></label>
<input type="radio" id="select${number}_2" name="select${number}" value="${number+1}_2" onclick="answerSelect(this)">
<label for="select${number}_2"><span>${question.choice2}</span></label>
<input type="radio" id="select${number}_3" name="select${number}" value="${number+1}_3" onclick="answerSelect(this)">
<label for="select${number}_3"><span>${question.choice3}</span></label>
<input type="radio" id="select${number}_4" name="select${number}" value="${number+1}_4" onclick="answerSelect(this)">
<label for="select${number}_4"><span>${question.choice4}</span></label>
</div>
</div>
<div class="cbt__desc hide">${question.desc}</div>
</div>
`);
omr.push(`
<div class="omr">
<strong>${question.number}</strong>
<input type="radio" id="omr${number}_1" name="omr${number}" value="${number}_0">
<label for="omr${number}_1"><span class="label-inner">1</span></label>
<input type="radio" id="omr${number}_2" name="omr${number}" value="${number}_1">
<label for="omr${number}_2"><span class="label-inner">2</span></label>
<input type="radio" id="omr${number}_3" name="omr${number}" value="${number}_2">
<label for="omr${number}_3"><span class="label-inner">3</span></label>
<input type="radio" id="omr${number}_4" name="omr${number}" value="${number}_3">
<label for="omr${number}_4"><span class="label-inner">4</span></label>
</div>
`);
});
let scoreTag = `
전체 문제 수 : ${questionAll.length}문항<br>
남은 문제 수 : 59문항
`;
cbtQuiz.innerHTML = exam.join('');
cbtOmr.innerHTML = omr.join('');
cbtScore.innerHTML = scoreTag;
};
// 정답 확인
const answerQuiz = () => {
const cbtSelects = document.querySelectorAll(".cbt__selects");
questionAll.forEach((question, number) => {
const quizSelectWrap = cbtSelects[number];
const userSelector = `input[name=select${number}]:checked`;
const userAnswer = (quizSelectWrap.querySelector(userSelector) || {}).value;
const numberAnswer = userAnswer ? userAnswer.slice(-1) : undefined;
if(numberAnswer == question.answer){
console.log("정답입니다.");
cbtSelects[number].parentElement.classList.add("good");
quizScore++;
} else {
console.log("오답입니다.");
cbtSelects[number].parentElement.classList.add("bad");
// 오답일 경우 정답 표시
const label = cbtSelects[number].querySelectorAll("label");
label[question.answer-1].classList.add("correct");
};
const quizDesc = document.querySelectorAll(".cbt__desc");
if(quizDesc[number].innerText == "undefined"){
quizDesc[number].classList.add("hide");
} else {
quizDesc[number].classList.remove("hide");
}
});
document.querySelector(".score").innerHTML = `총 점수는 ${Math.ceil((quizScore / questionAll.length) * 100)}점입니다.`
};
const answerSelect = () => {
};
cbtSubmit.addEventListener("click", answerQuiz);
dataQuestion();
</script>
자바스크립트 구성
문제 데이터 출력
- 문제의 데이터를 데이터가 있는 json 폴더를 불러옵니다.(https://github.com/dongjin6539/web2023/blob/main/javascript/quiz/json/gisa2020_01.json)
- 문제의 데이터를 배열로 불러오기 위해 .map 메서드를 사용해서 불러와줍니다.
- 변수를 만들어서 문제와 문제 번호를 불러오고 문제 보기를 오답과 정답을 불러와서 랜덤으로 나열하게 해줍니다.
- 문제의 보기를 추가하는 이유는 answerChoice의 index 값이 3이므로 +1을 해줘서 4개를 만들어줍니다.
- 문제에 대한 해설, 이미지가 있으면 출력하게끔 .hasOwnProperty( )를 사용해서 입력해줍니다.
- 리턴값 함수를 사용해서 문제의 데이터를 반환하게 해줍니다.
- 문제를 만들어줘야하는데 이전에 사용했던 https://dongjin6539.tistory.com/53 처럼 변수를 배열로 저장 후 변수에 .push 메서드를 사용하고 문제의 데이터가 객체에 저장되어있으므로 객체 값을 불러오는 형식으로 각각 입력해야 할 부분에 입력해줍니다.
- omr 카드 부분도 위와 같이 입력해줍니다.
- 들어가야 할 부분에 class 명을 확인 후 선택자를 변수로 만들어서 .innerHTML을 사용해서 콤마(,)를 없애주기 위해 .join('')를 사용해서 없애줍니다.
정답 확인
- 함수를 사용해서 정답확인을 해줍니다.
- 보기에 선택되는 부분을 선택자를 만들어줍니다.
- 문제가 다중이이므로 forEach( )를 사용해주고 각각 변수를 만들어줍니다.
- 보기의 번호를 변수로 만들고, 사용자가 체크한 부분을 변수로 만들고, 사용자가 체크한 부분의 값인지 아닌지 변수로 만들고, 사용자가 선택했는지 안했는지를 변수로 만들어줍니다.
- if문을 사용해서 사용자가 선택한 보기가 정답인지 오답인지를 확인해줍니다. 정답이면 맞은 표시를 오답이면 틀린 표시를 css 에서 넣은 이미지 스타일을 classList를 사용해서 이미지를 가져와 주는데 parentElement를 사용해서 부모 태그에 표시를 해줍니다.
- 오답일 때 정답을 체크를 해주는 스크립트를 입력해줍니다.
- 그리고 문제에 대한 해설이 있으면 해설이 나오게끔 해줍니다.
- 문제를 다 풀고 답안 제출하기를 클릭했으면 점수가 나오게 해줍니다.
참고
- json 폴더 불러오기
json 폴더 불러오는 형식
fetch(json폴더 경로)
.then(respone => respone.json( ))
.then(items => json.items)
.catch((err => console.log(err)) // 에러 찾기
JSON은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다. JSON이 Javascript 객체 문법과 매우 유사하지만 딱히 Javascript가 아니더라도 JSON을 읽고 쓸 수 있는 기능이 다수의 프로그래밍 환경에서 제공됩니다.
JSON은 문자열 형태로 존재합니다. 네트워크를 통해 전송할 때 아주 유용합니다. 데이터에 억세스하기 위해서는 네이티브 JSON 객체로 변환될 필요가 있습니다. 별로 큰 문제는 아닌 것이 Javascript는 JSON 전역 객체를 통해 문자열과 JSON 객체의 상호변환을 지원합니다.
JSON은 Javascript 객체 리터럴 문법을 따르는 문자열입니다. JSON 안에는 마찬가지로 Javascript의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언 그리고 다른 객체를 포함할 수 있습니다.
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON
- 속성, 메서드
| 속성, 메서드 | 설명 |
| hasOwnProperty( ) | 객체에 특정 속성이 존재하는지 여부를 나타내는 불리언 값을 반환합니다. |
| parentElement | 부모 태그 찾기입니다. 형식 : 기준태그.parentElement |
| map( ) | 데이터가 배열로 감싸고 안에 객체가 있어 불러올 경우 사용됩니다. |
| nth-of-type( ) | 동일한 유형(태그 이름)의 형제 사이의 위치를 기준으로 요소를 일치시킵니다. |
728x90
반응형
