마크다운 알아보기
코들 파이썬 환경의 마크다운 셀에서 활용하는
마크다운 언어를 알아봅니다.
마크다운 언어는 문서를 쉽고 빠르게 작성할 수 있도록 도와주는 간단한 문법으로, Notion이나 Github 같은 다양한 서비스에서 활용되고 있어요.
코들에서도 수업자료 설명, 자동 채점 문제, 스튜디오 내 텍스트 셀 등 다양한 곳에서 마크다운을 활용하고 있는데요,
이번 문서에서는 마크다운 언어를 활용해 문서를 작성하는 법을 알아봅니다.
제목(Headers)
문장 앞에 #을 붙여서 제목 영역을 작성할 수 있어요. #의 개수에 따라 제목 크기를 조절할 수 있고, #가 많을 수록 작은 제목이 됩니다.
예를 들어 스튜디오 마크다운 셀에서 아래처럼 입력하고
실행 버튼을 누르거나 다른 셀을 클릭해 렌더링하면 아래처럼 크기가 다른 두 제목이 생긴 걸 볼 수 있어요.
마크다운을 지원하는 프로그램에 따라 지원하는 제목 크기의 개수는 다른데, 코들에서는 H1(#이 1개)부터 H6(#이 6개)까지 총 6가지 크기를 사용할 수 있어요. #을 일곱 개 타이핑하는 때부턴 제목으로 인식하지 않아 #이 그대로 노출됩니다.
굵은 글씨(Bold), 기울인 글씨(Italic)
문장의 일부를 굵은 글씨로 표현하려면 **로 텍스트를 감싸고, 기울인 글씨로 표시하려면 *로 텍스트를 감싸면 됩니다.
예를 들어 다음과 같이 입력하면
아래처럼 굵은 글씨의 '코들'과 기울인 글씨의 '더 똑똑한 컴퓨터실'을 확인할 수 있어요.
링크(Links)
문장의 일부를 클릭하면 다른 페이지로 이동하게 하고 싶다면 [ ]와 ( )를 사용해요. 대괄호 안에는 링크가 표시될 텍스트를, 소괄호 안에는 이동할 URL을 입력하면 됩니다.
예를 들어 다음과 같이 입력하면
아래처럼 텍스트가 파랗게 표시되고, 커서를 올리면 손가락으로 바뀌어요. 이걸 클릭하면 https://codle.io로 이동하는 것도 확인할 수 있습니다.
이미지 첨부
이미지는 !, [ ], ( )를 사용해서 삽입해요. 제일 앞에 느낌표를 추가하고 대괄호 안에는 이미지의 설명을, 소괄호 안에는 이미지의 URL을 넣으면 됩니다.
💡 내 컴퓨터에 있는 이미지를 삽입하고 싶다면 편집 중인 마크다운 셀에 파일을 드래그&드랍 하면 돼요.
예를 들어 다음과 같이 입력하면
아래처럼 이미지가 표시됩니다.
아쉽게도 마크다운은 이미지 크기 조절은 지원하고 있지 않아서, 이미지 크기를 조절하고 싶다면 변경이 필요해요.
위 예시에서 이미지의 가로 크기를 300px로 변경하고 싶다면,
<img alt="대괄호 안에 있던 이미지 설명" src="소괄호 안에 있던 이미지 URL" width="원하는 가로 크기" height="원하는 세로 크기"> 양식으로 변경하면 됩니다.
여기서 가로 크기, 세로 크기는 선택 사항이라 둘 중 하나만 있다면 원본 비율에 맞춰 나머지가 알아서 조절돼요.
💡 이미지를 드래그&드랍 한 경우에는 소괄호 안에 있던 attachment:OOO.oo 텍스트를 그대로 복사해서 위 예시의 src="여기"에 넣으면 됩니다.
코드
백틱 기호(`)를 사용해서 인라인 코드를 만들 수 있고, 코드 블럭을 만드려면 백틱 기호 세 개(```)로 텍스트를 감싸면 돼요.
백틱 기호는 일반적으로 키보드 제일 왼쪽 위에 위치합니다. 물결표(~)를 입력할 때 사용하는 키예요.
예를 들어 다음과 같이 입력하면
아래처럼 코드로 텍스트가 표시됩니다.
인용문(Blockquotes)
특정 문단을 > 뒤에 적어 인용문으로 작성하면 텍스트가 | 로 묶여 표시돼요.
말 그대로 인용할 때도 많이 사용하지만 코들 오리지널 콘텐츠에서는 요약, 첨언 등 일목요연하게 보였으면 하는 문장에 많이 사용됩니다.
예를 들어 다음과 같이 입력하면
아래처럼 표시됩니다.
가로선(Horizontal Rule)
마지막으로 텍스트 중간에 가로선을 추가하고 싶다면 ---, 또는 ___를 입력하면 돼요.
—
소개하지 않은 마크다운 언어로 표현할 수 있는 양식이 더 있어요. 더 알아보고 싶다면 참조 링크를 확인해보세요!
코들에서 제공되는 에디터로도 기본적인 마크다운을 활용할 수 있으니, 내용을 완전히 숙지하지 못했더라도 이용에는 문제가 없을 거예요.