차근차근 함께 걸어가다 보면 목표 지점에 도달할 거예요!
지치고 힘들 때, 신나고 기쁠 때 모두모두 함께 해요🎈

학습하며 궁금한 점이 생기시면 앞뒤양옆 편하게 물어봐주세요!! 😊  

---

기본 에디팅 템플리팅 (변검 ver.)

필수 확인사항

• 최대한 변검 템플릿을 활용해주세요. (--- /notice-box /notice-box-blue /notice-box-red /text-box /text-box-gray 등)
• 자잘한 여백(margin/padding), 폰트 사이즈 수정 등은 변검 템플릿의 디자인을 해치지 않는 선에서 에디터가 자율적으로 진행합니다. 

메인 컬러 팔레트

• #00c471 - 그린
• #343a40 - 블랙
• #0075ff - 블루
• #e5503c - 레드

Heading1

# Heading1 후 [Bold]

 

Heading2

## Heading2 후 [Bold]

 

Heading3

### Heading3 후 [Bold]

 

Heading4

#### Heading4 후 [Bold]

 

italic

*italic*

 

bold

**bold**

 

code

`code`

 

 

code

```code

 

 

• unorderedlist

- unorderedlist
* unorderedlist

 

 

1. orderedlist

1. orderedlist

 

 

---

---

기본 템플릿 명령어 (변검 ver.)

Paragraph

/header *모바일 기준 2줄 이내로 작성

 

 

Paragraph

/gradiant-header *모바일 기준 2줄 이내로 작성

 

 

 

/gap

gap 명령어를 이용하면 40px 이 띄어집니다.
에디팅에서는 분홍색으로 표시되지만 실제로는 투명한 색이니 걱정하지 말고 사용해주세요.

 

 

_{이미지에 대한 설명}

/img+caption *<sub style="display: block;"></sub>으로 캡션 종속시킬 것

 

/card2 *<sub style="display: block;"></sub>으로 캡션 종속시킬 것

card2는 2개의 강의 카드가 나열됩니다. 에디터와 실제 보이는 화면이 다를 수 있지만 신경쓰지 않으셔도 됩니다.

 

 

/card3 *<sub style="display: block;"></sub>으로 캡션 종속시킬 것

card3 은 3개의 강의 카드가 나열됩니다. 에디터와 실제 보이는 화면이 다를 수 있지만 신경쓰지 않으셔도 됩니다.

 

 

/card4 *<sub style="display: block;"></sub>으로 캡션 종속시킬 것

card4 는 4개의 강의 카드가 나열됩니다. 에디터와 실제 보이는 화면이 다를 수 있지만 신경쓰지 않으셔도 됩니다.

 

/notice-box *강의 주의사항, 참고사항 등

 

/notice-box-red *강의 주의사항, 참고사항 등

 

/notice-box-blue *강의 주의사항, 참고사항 등

 

/qna-box *자주 묻는 질문

 

여기에 입력해주세요

/button *랜딩페이지 이동을 위한 버튼

 

여기에 입력해주세요

/large-button *랜딩페이지 이동을 위한 버튼

 

/image

중앙정렬이 된 이미지를 넣고 싶을 때 사용하시면 됩니다.

 

/flex-box *2단 이미지/텍스트 배열

 

/flex-box-right *2단 텍스트/이미지 배열

 

/flex-hook *2단 이미지/텍스트 배열

 

/flex-hook-right *2단 텍스트/이미지 배열

 

/text-box *구분 영역 등에 활용

 

/text-box-gray *구분 영역 등에 활용

 

/feature-4 *수강 타겟, 다단 스킬 표현 등에 활용 (Bulma 참조)

/profile *지식공유자 프로필 등에 활용

 

단축키 없음 *요청 예정 *모바일에서 이미지 깨짐

반응형 박스 *현재 단축키 없음, 코드를 긁어서 사용해주세요

<div style="margin-top: 24px; margin-bottom: 24px; padding: 24px; border-radius: 8px; border: 1px solid #DEE2E6;">
<div class="flex-box" style="margin: 0;">
<div class="flex-box__img" style="margin: 0;">
<h4 style="margin-top: 0;"><span style="color: #0075ff;"><strong>#1.</span><br />여기에 제목을 <br />입력하세요</strong></h4>
</div>
<div class="flex-box__desc" style="margin: 0;">
<p style="margin-bottom: 0; font-size: 15px;">여기에 내용을 입력하세요</p>
</div>
</div>
</div>

---

버튼 없는 알약 (1개)

#알약

<p><span style="color: #ffffff; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;">#알약</span></p>

버튼 없는 알약 (여러 개)

#알약 #알약 #알약

<p><span style="color: #ffffff; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;">#알약</span> <span style="color: #ffffff; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;">#알약</span> <span style="color: #ffffff; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;">#알약</span></p>

버튼 있는 알약 (1개)

#알약

<p><span style="color: #ffffff; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span></p>

버튼 있는 알약 (여러 개)

#알약#알약#알약

#알약#알약#알약

<p style="line-height: 180%;"><span style="color: #ffffff; margin-right: 5px; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span><span style="color: #ffffff; margin-right: 2px; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span><span style="color: #ffffff; margin-right: 2px; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span></p>
<p style="line-height: 180%; margin: 0px; padding: 0px;"><span style="color: #ffffff; margin-right: 2px; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span><span style="color: #ffffff; margin-right: 2px; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span><span style="color: #ffffff; margin-right: 2px; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span></p>

---

네모 박스 안에 회색 박스 넣기

<div style="padding: 1.8rem; border: 1px solid #ededed; margin-bottom: 2rem;">
<h4><strong>내용을 입력하세요.</strong></h4>
<p>내용을 입력하세요.</p>
<div style="padding: 1.6rem; border: 1px solid #E9ECEF; background-color: #f8f9fa; margin-top: 2rem;">
<p style="font-size: 0.9rem;"><strong>내용을 입력하세요.</strong><br />내용을 입력하세요.</p>
</div>
</div>

---

모바일 반응형 박스 : 사진 2개 (flex-box)

 

<div style="margin-top: 16px; margin-bottom: 0; padding: 18px; border-radius: 8px; border: 1px solid #DEE2E6;">
<div class="flex-box" style="margin-bottom: 0;">
<div class="flex-box__img"><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<div class="flex-box__desc" style="margin-bottom: 0;">
<p style="margin-bottom: 0;"><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" style="color: #000000; font-size: medium;" /></p>
</div>
</div>
</div>

모바일 반응형 박스 : 사진 + 글 (flex-box)

 

<div style="margin-top: 16px; margin-bottom: 0px; padding: 24px; border-radius: 8px; border: 1px solid #DEE2E6;">
<div class="flex-box">
<div class="flex-box__img"><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<div class="flex-box__desc">
<h4><strong>내용을 입력해주세요.</strong></h4>
<p>내용을 입력해주세요.<br />내용을 입력해주세요.<br />내용을 입력해주세요.<br />내용을 입력해주세요.<br />내용을 입력해주세요.</p>
</div>
</div>
</div>

---

강의 상세 소개