코드펜(CodePen) 티스토리에 적용하기 - 회원가입부터 소스작성까지
IT관련한 티스토리를 보면 여러 방법으로 소스코드를 적용하는 분들이 많이 있습니다. 그중에서 이번에는 HTML, CSS, JavaScript 언어에 대해 포스팅을 할 때 이용하기 좋은 코드펜에 대해 알아보도록 하겠습니다.
코드펜(CodePen)이란?
코드펜은 사용자에게 HTML, CSS, JavaScript 코드를 작성할 수 있는 기능을 제공해주고, 작성된 결과를 확인할 수 있도록 도와주는 코드 편집기입니다. 해당 코드 편집기의 좋은 점은 코드를 테스트하기 위해 전체적인 소스코드를 작성하지 않고, 일부분만 작성해도 원하는 실행결과를 나타내주는 것이 특징인데요.
예를 들어 우리가 JavaScript에서 alert('Hello World')를 출력하고 싶으면 Html코드를 작성한 뒤 <script> 태그안에 alert() 구문을 작성해야 실행이 됩니다. 반면 코드펜을 이용하면 alert() 구문만 실행하면 실행결과를 바로 확인할 수 있습니다. 이처럼 간단한 사용방법으로 인해 코드 테스트를 하고자 할 때 코드펜을 이용하면 쉽고 빠르게 테스트 결과를 확인해 볼 수 있어 꼭 티스토리 목적으로 코드펜을 접하기보단 다양한 코드테스트를 해볼 목적으로 코드펜을 이용하면 코드펜을 더 잘 이용하는 방법 중 하나이지 않나 싶습니다.
회원가입하기
먼저 코드펜(CodePen)을 이용하려면 코드펜 사이트에 접속한 뒤 회원가입을 진행해야겠죠?
구글에 코드펜이라고 검색하거나 해당 주소를 클릭해주세요.(https://codepen.io/)
코드펜 사이트에 접속하면 위와 같은 메인화면을 확인할 수 있습니다. (메인화면은 리뉴얼에 따라 달라질 수 있습니다.)
메인화면의 우측 위를 보시면 'Sign Up' 버튼을 확인할 수 있는데요. 회원가입을 위해 'Sign Up' 버튼을 클릭해 주세요.
'SignUp' 버튼을 클릭하면 위와 같은 화면이 나타나게 됩니다. 가입은 트위터, 깃허브, 페이스북으로도 진행할 수 있고, 하단의 이메일 정보를 입력하는 과정을 통해 회원가입을 진행할 수 있습니다. 만약 트위터, 깃허브, 페이스북 계정이 있는 분들은 해당 버튼을 클릭해서 가입을 진행해 주시면 되고, 여기서는 Email을 직접 입력해서 회원가입을 진행하는 방법에 대해서만 알아보도록 하겠습니다. 'Sign Up with Email' 버튼을 클릭해 주세요.
'Sign Up with Email' 버튼을 클릭하면 위와 같은 4개의 입력 필드값이 존재합니다. 4개의 필드값에 해당하는 Your Name(이름), Choose a username(닉네임정도로 이해하면 됩니다.), Email(이메일), Choose Password(비밀번호)를 순서대로 작성하신 후 하단의 'Submit' 버튼을 클릭해 주세요.
참고로 저의 경우 Name은 꼭 실제 이름을 입력할 필요는 없어 보이니 편하게 작성해 주시면 됩니다.
소스코드 작성
회원가입을 완료하면 이제 아래의 이미지와 같이 코딩을 할 수 있는 편집창을 확인할 수 있는데요.
해당 편집기에서 작성하고자 하는 코드를 작성하시면 되는데요. HTML만 작성하셔도 되고, HTML, CSS, JavaScript모두 작성하셔도 상관없습니다. 저의 경우 테스트로 HTML 편집화면에서 소스코드를 작성했습니다.
HTML부분에 아래의 코드를 복사해서 붙여 넣기 해주세요. 그러면 [그림 5]에 있는 흰색 영역에 'Hello'라는 텍스트값을 확인할 수 있습니다.
<html>
<head>
<title>Hello</title>
</head>
<body>
Hello
</body>
</html>
마치며
여기까지 CodePen 사이트에 접속한 후 소스코드를 작성해 봤습니다. 다음 포스팅에서는 CodePen을 통해 작성한 소스코드를 티스토리에 적용하는 방법에 대해서 알아보겠습니다.
'티스토리' 카테고리의 다른 글
| 코드펜(CodePen) 티스토리에 적용하기 - 소스적용 (1) | 2023.02.14 |
|---|
코드펜(CodePen) 티스토리에 적용하기 - 회원가입부터 소스작성까지
IT관련한 티스토리를 보면 여러 방법으로 소스코드를 적용하는 분들이 많이 있습니다. 그중에서 이번에는 HTML, CSS, JavaScript 언어에 대해 포스팅을 할 때 이용하기 좋은 코드펜에 대해 알아보도록 하겠습니다.
코드펜(CodePen)이란?
코드펜은 사용자에게 HTML, CSS, JavaScript 코드를 작성할 수 있는 기능을 제공해주고, 작성된 결과를 확인할 수 있도록 도와주는 코드 편집기입니다. 해당 코드 편집기의 좋은 점은 코드를 테스트하기 위해 전체적인 소스코드를 작성하지 않고, 일부분만 작성해도 원하는 실행결과를 나타내주는 것이 특징인데요.
예를 들어 우리가 JavaScript에서 alert('Hello World')를 출력하고 싶으면 Html코드를 작성한 뒤 <script> 태그안에 alert() 구문을 작성해야 실행이 됩니다. 반면 코드펜을 이용하면 alert() 구문만 실행하면 실행결과를 바로 확인할 수 있습니다. 이처럼 간단한 사용방법으로 인해 코드 테스트를 하고자 할 때 코드펜을 이용하면 쉽고 빠르게 테스트 결과를 확인해 볼 수 있어 꼭 티스토리 목적으로 코드펜을 접하기보단 다양한 코드테스트를 해볼 목적으로 코드펜을 이용하면 코드펜을 더 잘 이용하는 방법 중 하나이지 않나 싶습니다.
회원가입하기
먼저 코드펜(CodePen)을 이용하려면 코드펜 사이트에 접속한 뒤 회원가입을 진행해야겠죠?
구글에 코드펜이라고 검색하거나 해당 주소를 클릭해주세요.(https://codepen.io/)
코드펜 사이트에 접속하면 위와 같은 메인화면을 확인할 수 있습니다. (메인화면은 리뉴얼에 따라 달라질 수 있습니다.)
메인화면의 우측 위를 보시면 'Sign Up' 버튼을 확인할 수 있는데요. 회원가입을 위해 'Sign Up' 버튼을 클릭해 주세요.
'SignUp' 버튼을 클릭하면 위와 같은 화면이 나타나게 됩니다. 가입은 트위터, 깃허브, 페이스북으로도 진행할 수 있고, 하단의 이메일 정보를 입력하는 과정을 통해 회원가입을 진행할 수 있습니다. 만약 트위터, 깃허브, 페이스북 계정이 있는 분들은 해당 버튼을 클릭해서 가입을 진행해 주시면 되고, 여기서는 Email을 직접 입력해서 회원가입을 진행하는 방법에 대해서만 알아보도록 하겠습니다. 'Sign Up with Email' 버튼을 클릭해 주세요.
'Sign Up with Email' 버튼을 클릭하면 위와 같은 4개의 입력 필드값이 존재합니다. 4개의 필드값에 해당하는 Your Name(이름), Choose a username(닉네임정도로 이해하면 됩니다.), Email(이메일), Choose Password(비밀번호)를 순서대로 작성하신 후 하단의 'Submit' 버튼을 클릭해 주세요.
참고로 저의 경우 Name은 꼭 실제 이름을 입력할 필요는 없어 보이니 편하게 작성해 주시면 됩니다.
소스코드 작성
회원가입을 완료하면 이제 아래의 이미지와 같이 코딩을 할 수 있는 편집창을 확인할 수 있는데요.
해당 편집기에서 작성하고자 하는 코드를 작성하시면 되는데요. HTML만 작성하셔도 되고, HTML, CSS, JavaScript모두 작성하셔도 상관없습니다. 저의 경우 테스트로 HTML 편집화면에서 소스코드를 작성했습니다.
HTML부분에 아래의 코드를 복사해서 붙여 넣기 해주세요. 그러면 [그림 5]에 있는 흰색 영역에 'Hello'라는 텍스트값을 확인할 수 있습니다.
<html>
<head>
<title>Hello</title>
</head>
<body>
Hello
</body>
</html>
마치며
여기까지 CodePen 사이트에 접속한 후 소스코드를 작성해 봤습니다. 다음 포스팅에서는 CodePen을 통해 작성한 소스코드를 티스토리에 적용하는 방법에 대해서 알아보겠습니다.
'티스토리' 카테고리의 다른 글
| 코드펜(CodePen) 티스토리에 적용하기 - 소스적용 (1) | 2023.02.14 |
|---|
