코드펜에서 바로 실행하기 (코드펜에 이미지 올리기)

코드펜에서 내가 작업한 프로젝트를 바로 실행하기 위해서는 '이미지'가 같이 보여져야 한다. 근데 티스토리나 블로그처럼 이미지를 파일 형식으로 올리는게 안된다. (구글에 검색해보니 깃허브에 이미지를 먼저 올린 후, 거기서 생성된 URL 주소 형식으로 가지고 와야 한다고 한다. )

 

* 코드펜에 이미지 올리는 방법 * 

(1) 깃허브 접속 (깃허브에 이미지 올리기)

(2) 깃허브에서 생성된 이미지 URL을 코드펜에 붙혀주기 

 

(1) 깃허브 접속 (깃허브에 이미지 올리기)

1. 깃허브 페이지에서 이미지를 업로드할 프로젝트 클릭

 Issues 페이지 클릭 →  New Issue 클릭

2. Issue에 업로드한 이미지 소스코드 Ctrl + C , Ctrl+v

 

이미지를 마우스로 옮겨다 놓으면, 이렇게 소스코드가 자동으로 생성된다 

생성된 코드를 Ctrl+C 해서 → Add a README 페이지 붙혀준다 

 

간략한 설명을 위해 

* 이미지 올리기 태그를 같이 적어줬다 

마지막으로 맨 밑으로 내려와서  Commit new File 클릭을 해준다 

이렇게 이미지가 프로젝트에 올라간것을 확인 할 수 있다

(2) 깃허브에서 생성된 이미지 URL을 코드펜에 붙혀주기 

깃허브에서 생성받은 이미지 소스코드를 <img src = "" > 태그 안에 넣어주면 된다