더그는 피아노를 좋아해

CodePen을 이용하여

블로그나 기타 홈페이지에 Javascript, CSS를 포함한 HTML을 첨부해봅시다.

1. CodePen 홈페이지 접속하기

하기 링크를 클릭하여 CodePen 홈페이지에 접속합니다.

URL : https://codepen.io/ 

2. 가입하기

CodePen을 이용하기 위해서는 가입이 필요합니다.

Sign up를 클릭하여 가입 후 이메일 인증까지 진행합니다.

3. 코드 작성

HTML, CSS, Javascript 각 란에 맞추어 소스코드를 작성합니다.

결과물이 함께 표시됩니다.

4. 소스 복사

편집기 우측 하단의 'HTML로 복사'버튼을 클릭하여 소스를 복사를 위한 창을 엽니다.

첨부양식을 Iframe으로 선택 후 CopyCode를 클릭하여 소스를 복사합니다.

5. 블로그 첨부(티스토리 기준)

첨부 시 작성모드를 기본모드가 아닌 HTML모드로 변경하여 첨부합니다. 

기본모드로 재변경하여 글 작성을 마무리합니다. 

(글 작성 및 업로드까지 마무리 해야 제대로 표시 됨)

6. 완성

아래와 같이 Javascript, CSS를 포함한 HTML이 첨부됩니다.

See the Pen Untitled by duglikespiano (@duglikespiano) on CodePen.

Color Scripter를 이용하여

블로그나 기타 홈페이지에 코드소스를 깔끔하게 첨부해봅시다.

1. Color Script 홈페이지 접속하기

하기 링크를 클릭하여 Color Script 홈페이지에 접속합니다.

URL : https://colorscripter.com/

2. 화면 설명

언어 : 소스코드에 맞는 언어를 선택합니다.

(기본값은 TXT로 지정 되어 있음)

스타일 패키지 : 취향에 따라 선택합니다.

(서브라임 블랙을 선택하면 배경이 어두워짐)

3. 세부설정

줄번호 복사 : 코드소스를 첨부 할 시, 줄 번호 표시여부를 설정합니다.

HTML태그 자체 복사 : 첨부한 소스코드에 표시 오류가 있을 경우 체크 합니다.

4. 소스 복사

편집기 우측 하단의 'HTML로 복사'버튼을 클릭하여 소스를 복사합니다.

5. 블로그 첨부(티스토리 기준)

첨부 시 작성모드를 기본모드가 아닌 HTML모드로 변경하여 첨부합니다. 

기본모드로 재변경하여 글 작성을 마무리합니다. 

(글 작성 및 업로드까지 마무리 해야 제대로 표시 됨)

6. 완성

아래와 같이 코드가 깔끔하게 첨부됩니다.

백엔드 개발자가 되기 위해 기술 블로그를 운영하려 합니다.

첫 글 작성을 위해 간단한 코드를 작성해봤습니다.

개발자가 되기위한 마음가짐이 준비됐는지 묻고있습니다.

I'm absolutely ready to go

를 입력하고 빈 곳을 클릭해보세요.

See the Pen Untitled by duglikespiano (@duglikespiano) on CodePen.

🎈Hello World!🎉