코드펜이란?
HTML, CSS, Javascript를 학습할 때 쓰는 툴 중 하나이다.
코드펜에 로그인하기
코드펜 사이트에 들어가서 오른쪽 위에 LOG In를 누르면 로그인 페이지가 나타나는데 소셜 로그인을 활용하여 로그인하면 편하다.
난 깃허브로 소셜 로그인을 하여 로그인하였다.
코드펜 설정하기
지금 하는 설정은 딱 한 번만 하면 되는 설정이다. 그러므로 한 번 설정해두면 또 설정할 일은 없을 것이다.
코드펜에 로그인하고 오른쪽 상단에 사용자 아이콘이 나와있다. 이를 클릭하여 나타나는 창에서 Settings를 클릭한다.
그 다음, Editor Preferences를 클릭한다.
이렇게 Editor Preferences에 들어가면 테마, 폰트 등을 설정할 수 있다.
난 밝은 테마를 좋아하기 때문에 High Contrast Light 테마를 선택했고 폰트 중에서는 Hack이 가독성이 좋다고 느껴져 폰트는 Hack를 선택했다. 폰트 크기는 본인 시력에 맞추면 된다.(시력이 안 좋으면 폰트 크기를 크게, 시력이 좋으면 적당하게 맞추면 될 것이다.)
그리고 폰트 종류, 크기를 바꾸려면 폰트를 설정할때 우측을 보면 나오는 아이콘을 클릭하거나 폰트 기능의 박스를 클릭하면 설정을 바꿀 수 있다.
그 후, 하단으로 내려보면 Editor Options란에서 Autocomplete가 체크 해제되어 있을텐데 이를 체크하여 준다. 이렇게 해두면 코드펜 내에서 코딩을 할때 코드펜으로부터 도움을 받을 수 있다.
