소개
기본 상식 퀴즈 채널을 만들었고, '이것도 모르면 한국인이 아니다' 라는 형태의 후킹 멘트를 쓰려고 합니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
스터디에서 공유받는 make 시나리오를 조금씩 수정하며 업로드해보고 있습니다.
문제와 보기가 아래로 내려오길 원해서 패딩/마진 조절했고, 보기는 둥근 모서리로 변경했습니다. (추가한 부분은 주석 달아놨습니다.)
그 외 보이는 면에 있어서 더 많이 수정하고 싶었으나 시간이 부족하여 다음 사례글때 디벨롭하여 작성해보도록 하겠습니다.
(추가)
padding은 요소 안쪽 여백 — 콘텐츠와 테두리 사이의 공간
margin: 요소 바깥쪽 여백 — 다른 요소와의 간격을 조정하는 공간
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
.stroked-text {
color: white;
font-weight: bold;
font-family: 'Noto Sans KR', sans-serif;
}
.background {
background-color: rgba(0, 0, 0, 0);
border-radius: 12px;
padding-top: 10rem; /* 상단 여백 추가하여 화면 아래로 이동 */
}
.correct-answer {
background-color: #F7E29C; /* 파스텔톤 노란색 */
color: #333; /* 더 명확한 가독성 확보 */
font-family: 'Noto Sans KR', sans-serif;
}
.incorrect-option {
background-color: rgba(128, 128, 128, 0.5);
color: white;
font-family: 'Noto Sans KR', sans-serif;
}
.option {
padding: 3rem;
text-align: center;
font-size: 3rem;
border-radius: 0.75rem;
width: 100%;
font-weight: 600;
margin-bottom: 1rem;
font-family: 'Noto Sans KR', sans-serif;
border-radius: 1.5rem; /* 더 부드러운 둥근 테두리 */
margin-bottom: 2rem; /* 옵션 사이의 간격 증가 */
}
.option:last-child {
margin-bottom: 0;
}
.question {
background-color: rgba(0, 0, 0, 0.5);
padding: 3rem;
text-align: center;
font-size: 5rem;
border-radius: 0.75rem;
width: 100%;
font-weight: 600;
color: white;
margin-bottom: 1rem;
font-family: 'Noto Sans KR', sans-serif;
margin-bottom: 3rem; /* 문제와 답 사이 간격 더 넓게 */
}
</style>
<div class="flex items-center justify-center h-screen bg-transparent" style="width: 1080px; height: 1920px;">
<div class="background w-full p-6 rounded-lg" style="max-width: 1080px;">
<h1 class="question text-center mb-8">
{{2.question}}
</h1>
<div class="space-y-6">
<div class="option {{if(2.options[1] = 2.answer; "correct-answer"; "incorrect-option")}}">
{{2.options[1]}}
</div>
<div class="option {{if(2.options[2] = 2.answer; "correct-answer"; "incorrect-option")}}">
{{2.options[2]}}
</div>
<div class="option {{if(2.options[3] = 2.answer; "correct-answer"; "incorrect-option")}}">
{{2.options[3]}}
</div>
</div>
</div>
</div>결과와 배운 점
지금 만든 쇼츠는 수정할 게 많이 보여서, 지우고 다시 업로드 할 예정입니다.
시간을 많이 투자해서 맞춤형 시나리오를 만들면 정말 편리할 것 같아 상호작용, 후킹 멘트 열심히 추가해볼 생각입니다! 다음 사례글에서는 양질의 후기를 가져오겠습니다 :)