/

[deprecated] 인프랩 A to C : 콘텐츠 OJT

콘텐츠 파트에 새로 합류하신 여러분, 반갑습니다. 앞으로 콘텐츠 파트에서 여러분이 수행하실 업무 전반을 알려드릴게요 :)

(4.9) 수강평 9개

수강생 57명

인프랩

이런 걸
배워요!

  • 콘텐츠 에디터 수행 업무

  • MD 수행 업무

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

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

기본 에디팅 템플리팅 (변검 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>으로 캡션 종속시킬 것

 

caption

title

description

caption

title

description

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

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

 

 

caption

title

description

caption

title

description

caption

title

description

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

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

 

 

caption

title

description

caption

title

description

caption

title

description

caption

title

description

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

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

 

제목을 입력해주세요.

  • 이곳에 내용을 입력해주세요
  • 이곳에 내용을 입력해주세요
  • 이곳에 내용을 입력해주세요
  • 이곳에 내용을 입력해주세요
  • 이곳에 내용을 입력해주세요
/notice-box *강의 주의사항, 참고사항 등

 

제목을 입력해주세요.

  • 이곳에 내용을 입력해주세요
  • 이곳에 내용을 입력해주세요
  • 이곳에 내용을 입력해주세요
  • 이곳에 내용을 입력해주세요
  • 이곳에 내용을 입력해주세요
/notice-box-red *강의 주의사항, 참고사항 등

 

제목을 입력해주세요.

  • 이곳에 내용을 입력해주세요
  • 이곳에 내용을 입력해주세요
  • 이곳에 내용을 입력해주세요
  • 이곳에 내용을 입력해주세요
  • 이곳에 내용을 입력해주세요
/notice-box-blue *강의 주의사항, 참고사항 등

 

Q. 타이틀 영역입니다.

본문 영역입니다. 수정해주세여.

/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 참조)

장기효 (캡틴판교)

  • 현 프런트엔드 개발자
  • "Do it! Vue.js 입문" 저자
  • 네이버, 이베이코리아, 삼성, LG, SK그룹 등 Vue.js 강의
  • 패스트캠퍼스 Vue.js 정복캠프 강의
  • Google 웹 기술 공식 사이트 번역자
  • 기술 블로그 , Github 
/profile *지식공유자 프로필 등에 활용

 

여기에 제목을 입력해주세요

여기에 내용을 입력해주시면, 더 뚜렷하게 학습 내용을 강조할 수 있어요! 
1~3줄 정도로 간결하게 작성하는 것을 권장합니다.

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

#1.
여기에 제목을
입력하세요

여기에 내용을 입력하세요

반응형 박스 *현재 단축키 없음, 코드를 긁어서 사용해주세요
<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>

추가 설명 : 알약 클릭시 스크롤다운 방법

  • 만약 스크롤다운을 만들고 싶다면 <a href="여기"> 에 간단한 값을 입력해주고, 스크롤 다운할 위치의 태그에 id 값으로 위 a 태그의 '여기'에 해당하는 값을 입력해주세요.
    예) <a href="typeA"> && <div id="typeA">
  • 이해가 어렵다면 @로빈을 소환해주세요!

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

내용을 입력하세요.

내용을 입력하세요.

내용을 입력하세요.
내용을 입력하세요.

<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>

강의 상세 소개

Part 1. 내용을 입력해주세요.

  • 내용을 입력해주세요.
  • 내용을 입력해주세요.
  • 내용을 입력해주세요.

Part 2. 내용을 입력해주세요.

  • 내용을 입력해주세요.
  • 내용을 입력해주세요.
  • 내용을 입력해주세요.
  • 내용을 입력해주세요.
<div style="margin-top: 20px; text-align: left;">
<div class="card-wrapper card-wrapper-2" style="display: flex; flex-wrap: wrap;">
<div class="card-el" style="flex: 1 0 auto; margin-bottom: 16px; padding: 0 6px;">
<div style="padding: 22px; border-radius: 8px; border: 1px solid #DEE2E6; height: 200px;">
<p style="font-size: 0.9rem; margin-top: 0;"><span style="font-size: 14.4px;"><b>Part 1. 내용을 입력해주세요.</b></span></p>
<ul style="margin-bottom: 0;">
<li style="font-size: 0.85rem;">내용을 입력해주세요.</li>
<li style="font-size: 0.85rem;">내용을 입력해주세요.</li>
<li style="font-size: 0.85rem;">내용을 입력해주세요.<br /><br /></li>
</ul>
</div>
</div>
<div class="card-el" style="flex: 1 0 auto; margin-bottom: 16px; padding: 0 6px;">
<div style="padding: 22px; border-radius: 8px; border: 1px solid #DEE2E6; height: 200px;">
<p style="font-size: 0.9rem; margin-top: 0;"><span style="font-size: 14.4px;"><b>Part 2.&nbsp;</b></span><b>내용을 입력해주세요.</b></p>
<ul style="margin-bottom: 0;">
<li style="font-size: 0.85rem;">내용을 입력해주세요.</li>
<li style="font-size: 0.85rem;">내용을 입력해주세요.</li>
<li style="font-size: 0.85rem;">내용을 입력해주세요.</li>
<li style="font-size: 0.85rem;">내용을 입력해주세요.</li>
</ul>
</div>
</div>
</div>

짧은 문단 나누기

<hr style="width: 70px; margin: 1rem auto; border-top: 1px solid #ccc;" />

토글 기능

내용을 입력해주세요.

Q. 내용을 입력해주세요.
A. 내용을 입력해주세요.

Q. 내용을 입력해주세요.
A. 내용을 입력해주세요.

 

<details style="color: #343a40; margin-top: 2rem;" open="open">
<summary style="color: #343a40; font-size: 15px;"><span style="background-color: #fbeeb8;"><strong>내용을 입력해주세요.</strong></span></summary>
<div class="ql-block" data-block-id="block-f2cf9290-7160-4251-93b6-f3ae31ea808b">
<p class="p2" style="color: #000000; margin: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 13px; line-height: normal; font-family: 'Apple SD Gothic Neo'; letter-spacing: normal;"><sup><span style="color: #495057; text-align: center;"><strong>Q. 내용을 입력해주세요.</strong><br />A. 내용을 입력해주세요.</span></sup></p>
<p class="p2" style="color: #000000; margin: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 13px; line-height: normal; letter-spacing: normal;"><strong style="color: #495057; text-align: center;">Q. 내용을 입력해주세요.</strong><br style="color: #495057; text-align: center;" /><span style="color: #495057; text-align: center;">A. 내용을 입력해주세요.</span></p>
</div>

모바일 2개씩 보이게 설정

내용을 입력해주세요.

내용을 입력해주세요.

내용을 입력해주세요.

내용을 입력해주세요.

내용을 입력해주세요.

내용을 입력해주세요.

<div style="margin-top: 16px; margin-bottom: 16px; padding: 24px; border-radius: 8px; border: 1px solid #DEE2E6;">
<div class="card-wrapper card-wrapper-3" style="display: flex; flex-wrap: wrap;">
<div class="column is-one-third is-6-mobile">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<p style="display: block; text-align: center; font-size: 0.9rem;">내용을 입력해주세요.</p>
</div>
<div class="column is-one-third is-6-mobile">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<p style="display: block; text-align: center; font-size: 0.9rem;">내용을 입력해주세요.</p>
</div>
<div class="column is-one-third is-6-mobile">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<p style="display: block; text-align: center; font-size: 0.9rem;">내용을 입력해주세요.</p>
</div>
<div class="column is-one-third is-6-mobile">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<p style="display: block; text-align: center; font-size: 0.9rem;">내용을 입력해주세요.</p>
</div>
<div class="column is-one-third is-6-mobile">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<p style="display: block; text-align: center; font-size: 0.9rem;">내용을 입력해주세요.</p>
</div>
<div class="column is-one-third is-6-mobile">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<p style="display: block; text-align: center; font-size: 0.9rem;">내용을 입력해주세요.</p>
</div>
</div>
</div>

이미지 2개 가운데 정렬

 

<div style="display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; margin: 0;">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
</div>

변검 이전 버전 템플릿 명령어

변검으로 추가된 템플릿과 달리 디자인이 일관적이지 않습니다.
부득이한 경우 외에는 최대한 사용을 지양해주세요!
(변검 ver. 를 메인으로 사용해주세요.)

Marked 

/mark

 

 

HEADER

/header

 

 

HEADER

/header-grad 

 

 

small 

/pill-small

 

 

pill header

/pill-title

 

 

📣 공지사항• 내용을 입력해주세요

/notice 

 

 

Q. 질문을 작성하세요
A. 답변을 작성하세요.

/qna

 

Title

Title
Description

Title
Description

Title
Description

 
/another

 

추가되어야하거나 추가시키고 싶은 템플릿이 있다면 @PAPICO 에게 DM을 보내시면 커뮤니케이션을 통해 추가하도록 하겠습니다!

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 콘텐츠파트 신규 입사자

  • 콘텐츠파트 업무가 궁금한 분들

  • 인프런 강의 운영 과정을 알고 싶은 분들

안녕하세요
인프런입니다.

배움의 기회는 경제적, 물리적 한계에서 자유로워야 한다고 생각합니다.
우리는 성장기회의 평등을 추구합니다.

커리큘럼

전체

48개

수업 자료

가 제공되는 강의입니다.

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!