Codepen.io

Codepen이라고 검색하면 아래의 링크(https://codepen.io/)가 나오는데요. 웹 브라우저에서 바로 간단한 Front End를 코딩할 수 있는 사이트입니다.

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

로그인을 하지 않아도 코딩 테스트가 가능하나 회원가입 후 사용하면 더 많은 기능들을 이용할 수 있기에 가입 후 사용을 추천 드립니다. 사이트의 전반적인 모습은 아래와 같으며 우상단 'Profile 아이콘' 클릭 후 'New pen'을 선택하면 HTML/CSS 레이아웃 화면이 나타납니다.

사용 방법

사용법의 경우 매우 간단합니다. HTML/CSS/JS 입력창에 코딩을하면 우측 워크스페이스 부분에 바로 GUI가 직관적으로 나타납니다.예시로 블로그 HTML Example에 있는 글 테두리 코드를 추가해보면 실시간으로 업데이트되어 우측에 GUI가 업데이트 됨을 확인할 수 있습니다.

번거로운 설정없이 HTML/CSS/JS에 대한 웹사이트에서 지원하는 기능 및 사용자들이 올려둔 자료들도 많으니 한번 사용해보시는 것을 추천드리며, 간단한 코드 수정 및 확인이 필요할 경우 유용할 것으로 보이네요. 업무용 HTML Report 파일을 한번 불러와본 모습입니다.