코드펜 설정이 적용되었는지 확인하기
전 글인 코드펜 설정하기를 완료하였다면 설정한 코드펜 창을 닫아준다.
(아직 하지 않았다면 전글을 참고하자 - https://velog.io/@chrios99/%EC%BD%94%EB%93%9C%ED%8E%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-HTML-CSS-Javascript-%ED%95%99%EC%8A%B5%ED%95%98%EA%B8%B0)
그 후, 새 창을 열어 codepen.io/pen를 주소창에 입력하여 들어가준다. 그러면 전 글에서 설정한 내용이 반영되어 코드펜에 적용되어있을 것이다.
참고) 코드펜의 설정을 완료한 후, 본인 계정 아이콘을 눌러 New pen를 눌러 들어가도 된다.
코드펜의 레이아웃 바꾸기
이제 코드펜의 레이아웃을 바꿔보자. 아마 코드펜 설정을 완료하고 codepen.io/pen에 들어가보면 위의 사진처럼 레이아웃이 설정되어있을 것이다 .
오른쪽 상단에 있는 Settings 버튼의 오른쪽에 있는 버튼을 클릭해보면 레이아웃을 설정할 수 있을 것이다. 여기서 난 에디터를 좌측으로 옮겼다.
에디터를 좌측으로 옮기면 이런 형태로 변한다.
HTML, CSS, JavaScript 하나만
위의 사진을 보면 HTML, CSS, JavaScript의 코드창이 골골루 분배되어있는데 이 중 하나가 나머지의 코드창을 사용할 수 있게 할 수 있다.
예를 들어, HTML를 넓게 사용하고 싶다면 HTML의 버튼을 더블클릭하면 HTML의 코드창을 넓게 사용할 수 있다.
CSS, JavaScript도 마찬가지로 코드창을 넓힐 수 있다.
만약, HTML, CSS, JavaScript를 다시 코드창을 원래대로 사용하고 싶다면 HTML, CSS, JavaScript버튼 중 하나를 더블클릭하면 원래대로 돌아온다.
코드펜이 사용하기 좋은 이유
코드펜이 사용하기 좋은 이유는 코드를 기술하고 저장을 인터넷에서 할 수 있기 때문이다. 예를 들어 보자.
HTML, CSS, JavaScript 하나만에서처럼 HTML를 더블클릭하면 주소창의 URL이 바뀐다. 이를 Ctrl + s 키를 눌러서 저장을 할 수 있다. 이렇게 저장한 URL를 주소창에 입력을 하면 저장되어있는 코드펜 작업으로 이동할 수 있다.
예를 들어, HTML 코드창에 다음의 코드를 기술해보자.
<head> Hi, there! </head>이후, Ctrl + s 키를 눌러 저장하고 다른 URL에 들어갔다가 저장해둔 코드펜 URL로 들어가면 저번에 저장해둔 코드펜 작업이 나타난다.
이렇게하면 어디서든 코드펜을 통해 하던 HTML, CSS, JavaScript 작업을 이어서 할 수 있다.
저장한 코드는 어딨지?
여기서 한가지 궁금증이 생길 것이다. 인터넷에 저장한다고 그랬는데 그럼 저장한 URL은 어디에 나타나있지? 같은 궁금증 말이다.
그럼 어디에 있는걸까? 본인 계정 아이콘을 누르고 Your Work에 들어가면 코드펜을 이용하여 한 작업이 저장되어있을 것이다.
이렇게 코드펜에 저장된 작업 하나하나를 펜이라고 한다. 이렇게 기록이 남기 때문에 복습할때 유용하다.
