Skip to content

Commit

Permalink
퀴즈 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@Front-line-dev
Front-line-dev committed Aug 27, 2023
1 parent 9b9999a commit 05ed81a
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 26 deletions.
14 changes: 7 additions & 7 deletions src/quiz/10.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "backdrop-filter",
"category": "3",
"defaultUserHtml": "<main>\n <div class=\"video_container\">\n <img src=\"../assets/thumbnail.jpg\" >\n </div>\n <div class=\"overlay\">\n <button class=\"play_button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"100\" viewBox=\"0 -960 960 960\" width=\"100\">\n <path d=\"M320-203v-560l440 280-440 280Z\"/>\n </svg>\n </button>\n </div>\n</main>",
"defaultUserCss": "main {\n position: relative;\n}\n\n.video_container {\n}\n\n.video_container img {\n}\n\n.overlay {\n}\n\n.overlay .play_button {\n width: 150px;\n height: 150px;\n background-color: rgba(255, 255, 255, 0.3);\n /* blur 5px */\n}",
"answerHtml": "<main>\n <div class=\"video_container\">\n <img src=\"../assets/thumbnail.jpg\" >\n </div>\n <div class=\"overlay\">\n <button class=\"play_button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"100\" viewBox=\"0 -960 960 960\" width=\"100\">\n <path d=\"M320-203v-560l440 280-440 280Z\"/>\n </svg>\n </button>\n </div>\n</main>",
"answerCss": "main {\n position: relative;\n}\n\n.video_container {\n\n}\n\n.video_container img {\n width: 100%;\n vertical-align: top;\n}\n\n.overlay {\n position: absolute;\n inset: 0;\n}\n\n.overlay .play_button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 150px;\n height: 150px;\n background-color: rgba(255, 255, 255, 0.3);\n border: none;\n border-radius: 50%;\n backdrop-filter: blur(5px);\n}"
}
"name": "backdrop-filter",
"category": "3",
"defaultUserHtml": "<main>\n <div class=\"video_container\">\n <img src=\"../assets/thumbnail.jpg\" >\n </div>\n <div class=\"overlay\">\n <button type=\"button\" class=\"play_button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"100\" viewBox=\"0 -960 960 960\" width=\"100\">\n <path d=\"M320-203v-560l440 280-440 280Z\"/>\n </svg>\n </button>\n </div>\n</main>",
"defaultUserCss": "main {\n position: relative;\n}\n\n.video_container {\n}\n\n.video_container img {\n}\n\n.overlay {\n}\n\n.overlay .play_button {\n width: 150px;\n height: 150px;\n background-color: rgba(255, 255, 255, 0.3);\n /* blur 5px */\n}",
"answerHtml": "<main>\n <div class=\"video_container\">\n <img src=\"../assets/thumbnail.jpg\" >\n </div>\n <div class=\"overlay\">\n <button type=\"button\" class=\"play_button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"100\" viewBox=\"0 -960 960 960\" width=\"100\">\n <path d=\"M320-203v-560l440 280-440 280Z\"/>\n </svg>\n </button>\n </div>\n</main>",
"answerCss": "main {\n position: relative;\n}\n\n.video_container {\n\n}\n\n.video_container img {\n width: 100%;\n vertical-align: top;\n}\n\n.overlay {\n position: absolute;\n inset: 0;\n}\n\n.overlay .play_button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 150px;\n height: 150px;\n background-color: rgba(255, 255, 255, 0.3);\n border: none;\n border-radius: 50%;\n backdrop-filter: blur(5px);\n}"
}
14 changes: 7 additions & 7 deletions src/quiz/11.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "news",
"category": "3",
"defaultUserHtml": "<main>\n <p>\n <img src=\"../assets/thumbnail.jpg\" width=\"50\" height=\"50\">\n <img src=\"../assets/thumbnail.jpg\" width=\"50\" height=\"210\">\n <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.\n Sed, hic error non quia explicabo asperiores ullam ex deleniti quasi eligendi.\n Doloremque quia aspernatur eligendi hic,\n </span>\n </p>\n</main>\n<footer>\n This is Footer\n</footer>",
"defaultUserCss": "main {\n border: 1px solid black;\n padding: 0.5em;\n}\n\np {\n margin: 0;\n}\n\np img:first-of-type {\n margin-right: 0.5em;\n}\n\np img:last-of-type {\n margin-left: 0.5em;\n}\n\nfooter {\n margin-top: 0.5em;\n background-color: lightgreen;\n text-align: center;\n line-height: 2em;\n}",
"answerHtml": "<main>\n <p>\n <img src=\"../assets/thumbnail.jpg\" width=\"50\" height=\"50\">\n <img src=\"../assets/thumbnail.jpg\" width=\"50\" height=\"210\">\n <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.\n Sed, hic error non quia explicabo asperiores ullam ex deleniti quasi eligendi.\n Doloremque quia aspernatur eligendi hic,\n </span>\n </p>\n</main>\n<footer>\n This is Footer\n</footer>",
"answerCss": "main {\n border: 1px solid black;\n padding: 0.5em;\n}\n\np {\n margin: 0;\n overflow: hidden;\n word-break: break-all;\n}\n\np::first-letter {\n font-size: 2em;\n}\n\np img:first-of-type {\n float: left;\n margin-right: 0.5em;\n}\n\np img:last-of-type {\n float: right;\n margin-left: 0.5em;\n object-fit: cover;\n}\n\nfooter {\n margin-top: 0.5em;\n background-color: lightgreen;\n text-align: center;\n line-height: 2em;\n}"
}
"name": "news",
"category": "2",
"defaultUserHtml": "<main>\n <p>\n <img src=\"../assets/thumbnail.jpg\" width=\"50\" height=\"50\">\n <img src=\"../assets/thumbnail.jpg\" width=\"50\" height=\"210\">\n <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.\n Sed, hic error non quia explicabo asperiores ullam ex deleniti quasi eligendi.\n Doloremque quia aspernatur eligendi hic,\n </span>\n </p>\n</main>\n<footer>\n This is Footer\n</footer>",
"defaultUserCss": "main {\n border: 1px solid white;\n padding: 0.5em;\n color: white;\n}\n\np {\n margin: 0;\n}\n\np img:first-of-type {\n margin-right: 0.5em;\n}\n\np img:last-of-type {\n margin-left: 0.5em;\n}\n\nfooter {\n margin-top: 0.5em;\n background-color: lightgreen;\n text-align: center;\n line-height: 2em;\n}",
"answerHtml": "<main>\n <p>\n <img src=\"../assets/thumbnail.jpg\" width=\"50\" height=\"50\">\n <img src=\"../assets/thumbnail.jpg\" width=\"50\" height=\"210\">\n <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.\n Sed, hic error non quia explicabo asperiores ullam ex deleniti quasi eligendi.\n Doloremque quia aspernatur eligendi hic,\n </span>\n </p>\n</main>\n<footer>\n This is Footer\n</footer>",
"answerCss": "main {\n border: 1px solid white;\n padding: 0.5em;\n color: white;\n}\n\np {\n margin: 0;\n overflow: hidden;\n word-break: break-all;\n}\n\np img:first-of-type {\n float: left;\n margin-right: 0.5em;\n}\n\np img:last-of-type {\n float: right;\n margin-left: 0.5em;\n object-fit: cover;\n}\n\nfooter {\n margin-top: 0.5em;\n background-color: lightgreen;\n text-align: center;\n line-height: 2em;\n}"
}
14 changes: 7 additions & 7 deletions src/quiz/12.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "유사 masonry",
"category": "2",
"defaultUserHtml": "<main>\n <div class=\"item\">1</div>\n <div class=\"item\">2</div>\n <div class=\"item\">3</div>\n <div class=\"item\">4</div>\n</main>",
"defaultUserCss": "main {\n width: 210px;\n height: 210px;\n}\n\n.item {\n width: 100px;\n height: 100px;\n background-color: white;\n border-radius: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n}",
"answerHtml": "<main>\n <div class=\"item\">1</div>\n <div class=\"item\">2</div>\n <div class=\"item\">3</div>\n <div class=\"item\">4</div>\n</main>",
"answerCss": "main {\n width: 210px;\n height: 210px;\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.item {\n width: 100px;\n height: 100px;\n background-color: white;\n border-radius: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n}\n\n.item:nth-child(1) {\n height: 50px;\n}\n\n.item:nth-child(2) {\n height: 150px;\n}\n\n.item:nth-child(3) {\n margin-top: -100px;\n height: 150px;\n}\n\n.item:nth-child(4) {\n height: 50px;\n}"
}
"name": "유사 masonry",
"category": "2",
"defaultUserHtml": "<main>\n <div class=\"item\">1</div>\n <div class=\"item\">2</div>\n <div class=\"item\">3</div>\n <div class=\"item\">4</div>\n</main>",
"defaultUserCss": "/* height: 50px, 150px */\n/* gap: 10px */\n\nmain {\n width: 210px;\n height: 210px;\n}\n\n.item {\n width: 100px;\n height: 100px;\n background-color: white;\n border-radius: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n}",
"answerHtml": "<main>\n <div class=\"item\">1</div>\n <div class=\"item\">2</div>\n <div class=\"item\">3</div>\n <div class=\"item\">4</div>\n</main>",
"answerCss": "main {\n width: 210px;\n height: 210px;\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.item {\n width: 100px;\n height: 100px;\n background-color: white;\n border-radius: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n}\n\n.item:nth-child(1) {\n height: 50px;\n}\n\n.item:nth-child(2) {\n height: 150px;\n}\n\n.item:nth-child(3) {\n margin-top: -100px;\n height: 150px;\n}\n\n.item:nth-child(4) {\n height: 50px;\n}"
}
6 changes: 3 additions & 3 deletions src/quiz/20.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "마지막 아이템만 말줄임",
"category": "1",
"defaultUserHtml": "<main>\n <ul>\n <li>1번 아이템</li>\n <li>2번 아이템</li>\n <li>가로가 길 경우 마지막 아이템만 말 줄임</li>\n </ul>\n</main>",
"category": "2",
"defaultUserHtml": "<main>\n <ul>\n <li>1번</li>\n <li>2번</li>\n <li>가로가 길 경우 마지막 아이템만 말 줄임 가로가 길 경우 마지막 아이템만 말 줄임</li>\n </ul>\n</main>",
"defaultUserCss": "main {\n color: #fff;\n}\n\nul {\n padding: 5px 0;\n border: 1px solid #fff;\n}\n\nli {\n position: relative;\n list-style: none;\n padding: 0 10px;\n}\n\nli + li::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 1px;\n background-color: grey;\n content: '';\n}",
"answerHtml": "<main>\n <ul>\n <li>1번 아이템</li>\n <li>2번 아이템</li>\n <li>가로가 길 경우 마지막 아이템만 말 줄임</li>\n </ul>\n</main>",
"answerHtml": "<main>\n <ul>\n <li>1번</li>\n <li>2번</li>\n <li>가로가 길 경우 마지막 아이템만 말 줄임 가로가 길 경우 마지막 아이템만 말 줄임</li>\n </ul>\n</main>",
"answerCss": "main {\n color: #fff;\n}\n\nul {\n display: flex;\n padding: 5px 0;\n border: 1px solid #fff;\n}\n\nli {\n position: relative;\n flex: 0 0 auto;\n list-style: none;\n padding: 0 10px;\n}\n\nli + li::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 1px;\n background-color: grey;\n content: '';\n}\n\nli:last-of-type {\n flex: 0 1 auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}"
}
4 changes: 2 additions & 2 deletions src/quiz/21.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "메뉴판",
"category": "3",
"defaultUserHtml": "<main>\n <h1>Menu</h1>\n <ul>\n <li>\n <span>짜장면</span>\n <span>7000원</span>\n </li>\n <li>\n <span>짬뽕</span>\n <span>10000원</span>\n </li>\n <li>\n <span>탕수육</span>\n <span>20000원</span>\n </li>\n </ul>\n</main>",
"defaultUserCss": "main {\n color: #fff;\n background-color: #444;\n}\n\nh1 {\n text-align: center;\n}\n\nul {\n padding: 20px 10px;\n}\n\nli {\n list-style: none;\n margin-top: 10px;\n}\n\nli span:first-child {\n padding-right: 10px;\n}\n\nli span:last-child {\n padding-left: 10px;\n}\n\n/* 점선은 텍스트 정중앙에 위치, 높이 2px */",
"defaultUserCss": "main {\n color: #fff;\n background-color: #444;\n}\n\nh1 {\n margin-top: 10px;\n text-align: center;\n}\n\nul {\n padding: 20px 10px;\n}\n\n/* 구분선과 텍스트 사이 간격 10px */\n/* 점선은 텍스트 정중앙에 위치, 높이 2px */\n\nli {\n list-style: none;\n margin-top: 10px;\n}\n\nli::before {\n content: \"\";\n}\n\nli span:first-child {\n\n}\n\nli span:last-child {\n\n}",
"answerHtml": "<main>\n <h1>Menu</h1>\n <ul>\n <li>\n <span>짜장면</span>\n <span>7000원</span>\n </li>\n <li>\n <span>짬뽕</span>\n <span>10000원</span>\n </li>\n <li>\n <span>탕수육</span>\n <span>20000원</span>\n </li>\n </ul>\n</main>",
"answerCss": "main {\n color: #fff;\n background-color: #444;\n}\n\nh1 {\n text-align: center;\n}\n\nul {\n padding: 20px 10px;\n}\n\nli {\n display: flex;\n position: relative;\n justify-content: space-between;\n list-style: none;\n margin-top: 10px;\n}\n\nli::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n transform: translateY(-50%);\n border-top: 2px dashed #fff;\n content: \"\";\n}\n\nli span {\n position: relative;\n background-color: #444;\n}\n\nli span:first-child {\n padding-right: 10px;\n}\n\nli span:last-child {\n padding-left: 10px;\n}"
"answerCss": "main {\n color: #fff;\n background-color: #444;\n}\n\nh1 {\n margin-top: 10px;\n text-align: center;\n}\n\nul {\n padding: 20px 10px;\n}\n\n/* 구분선과 텍스트 사이 간격 10px */\n/* 점선은 텍스트 정중앙에 위치, 높이 2px */\n\nli {\n display: flex;\n align-items: center;\n list-style: none;\n margin-top: 10px;\n gap: 10px;\n}\n\nli::before {\n flex: 1 1 0;\n order: 2;\n border-top: 2px dashed #fff;\n content: \"\";\n}\n\nli span:first-child {\n order: 1;\n}\n\nli span:last-child {\n order: 3;\n}"
}

0 comments on commit 05ed81a

Please sign in to comment.