JSFiddle과 코드펜 삽입은 이상 없었다

전에 새 에디터에서 CSS가 사라진다고 적었다. 그래서 온라인 코드 편집기인 JSFiddle과 코드펜(CodePen)의 코드를 작성하여 거기에서 작성한 것을 퍼와 삽입하는데 그것을 점검하고자 한다. 참고로 글에 나오는 온라인 코드 편집기인 JSFiddle은 100% 무료이고 코드펜(CodePen)은 부분 유료이다. 그리고 아래 글에서 JSFiddle과 CodePen에 대해서 부족하지만 적었었다.

 

JSFiddle에서 CodePen으로

JSFiddle

 

이 블로그는 부트스트랩3를 사용했기 때문에 아래는 예전에 부트스트랩 4에서 캐러셀(Carousel)이 어떤지 보기 위해 JSFiddle에 만든 것이다. 부트스트랩 4 캐러셀을 자바스트립트로 퍼왔다.

 

 

위 소스와 결과는 부트스트랩 4 캐러셀이고 20.06.16.에 출시한 부트스트랩 5 알파를 보니 부트스트랩4와 비슷한 것 같다. 부트스트랩 3도 겉모양은 거의 비슷하다. 다만 소스가 다르고 슬라이드 이동 아이콘도 3은 원이나 4, 5 알파는 직사각형이다. 

 

 

코드펜(CodePen)

 

아래는 JSFiddle과 비슷한 코드펜(CodePen)이라는 온라인코드편집기이다. 위와 마찬가지로 소스는 자바스크립트이며 아이프레임(iframe)을 사용해서도 퍼올 수 있다. 기본은 자바스크립트니 기본으로 퍼온다. 참고로 위에서 적은 JSFiddle은 100% 무료지만 코드펜은 부분 유료로 제공한다.

 

 

See the Pen gOPEWdQ by 백전백승 (@100_jskim) on CodePen.

 

영역이 나타남

 

무엇보다 새 에디터를 사용하면 새 에디터에 자바스크립트 영역이 나와 기본모드에서 어느 곳에 자바스크립트가 있는지 알 수 있어서 좋다. 구에디터를 사용할 때는 HTML로 확인해야만 했다.

 

자바스트립트 영역 나타남

 

특정 태그가 없어지지 않았다

 

아래 내용은 이 글과 관계없는 내용이니 더보기 안에 넣으려고 한다. 예전에 동영상을 반응형으로 만들기 위해 HTML 태그 등을 추가하면 태그가 사라졌는데 이제는 없어지지 않는다. 

 

태그가 없어진다는 내용을 아래 글에서 적었는데 적은 시간을 보니 4월 19일으로 몇 달 동안 일부를 수정한 모양이다.

HTML 태그 안 없어지게 동영상 삽입