html, css, JS 코드를 적용하고 바로 확인해 볼 수 있는 사이트 JSFiddle

 

 

코드를 확인하고 싶을때

html, css, java script등을 테스트해보고 싶은데 별도의 프로그램을 깔기 귀찮고 내 블로그나 홈페이지에 바로 적용해서 테스트하기에는 불편할때 간단하게 내 코드를 넣어보고 테스트해볼 수 있는 사이트가 있습니다. 코드를 넣고 간단하게 버튼 한번만 누르면 결과를 바로 확인해볼 수 있거든요. 아래의 글을 계속해서 읽어보고 어떻게 사용하는지도 알아보세요.

 

🎁 여러가지 방법으로 유용하게 사용가능한 FHD IPS 보조모니터 추천 

 

 

 

JSFiddle

이 사이트에서는 간단하게 내 코드를 가지고 테스트를 해볼 수 있습니다. 먼저 사이트로 접속하고 아래의 사용법을 계속해서 읽어보세요.

 

JSFiddle 바로가기

 

 

 

1. 처음 접속하면 검정화면으로 html, css, js등의 코드를 입력할 수 있는 창과 결과 화면을 볼 수 있는 백색바탕화면을 볼 수 있습니다. 

 

빈문서의 상태화면

 

 

 

2. 저는 html코드와 css코드를 넣어서 블로그에 적용할 색상이 변화하는 버튼을 넣어서 테스트중입니다.

 

편집기에 입력한 코드

 

 

 

3. 모든 코드가 준비되었다면 이제 좌측 상단의 Run을 눌러주세요.

 

Run이 보인다

 

 

 

4. Run을 누르면 이제 우측하단에 내가 입력한 코드에 맞는 결과물이 나타납니다. 여기서 눈으로 확인해보면서 색상을 변경하거나 코드를 수정하는 등의 여러가지 작업을 눈으로 보면서 확인이 가능합니다.

 

결과가 나온 창

 

 

5. 우측 상단에 보면 Setting을 볼 수 있는데 여기서는 다양한 설정을 하고 사용해볼 수 있습니다.  편집기의 레이아웃을 정하거나 테마, 코드의 형태등을 상세하게 설정할 수 있죠.

 

영문내용을 번역한 결과창

 

 

 

6. 컬러 팔레트 메뉴(Color Palette) 에서는 여러가지의 색상조합을 확인할 수 있고 직접 색상을 조절해서 사용해볼 수 있습니다. 이 색상은 편집기에서 사용되는 코드의 색상을 정해주는 것으로 사용이 됩니다.

 

 

 

 

 

저는 이 사이트를 티스토리블로그에서 html코드와 css작업을 할 때 종종 사용하기에 여러분도 사용해보면 좋을것 같아서 소개해드립니다. 즐겨찾기 해두고 필요할 때마다 꺼내서 사용해보세요. 

 

 

 

🎁 여러가지 방법으로 유용하게 사용가능한 FHD IPS 보조모니터 추천 

 

 

 

관련링크

 

이 글의 썸네일처럼 나도 쉽게 썸네일을 만들어보고싶다 생각하면 클릭

 

내 썸네일도 만들어보기

 

 

이 블로그에 쓰인 스킨 다운로드 받아서 내 블로그에 적용해보기

 

이 스킨 다운로드

 

 

 

관련글

이 글과 비슷한 관련 카테고리의 글을 함께 읽어보세요. 도움이 되는 정보가 많이 준비되어 있습니다.

 

윈도우 작업표시줄 시계에 요일까지 표시하는 방법 따라 하기

윈도우 작업표시줄 시계에 요일까지 표시하는 방법 따라 하기

 

간단하게 ai로 나만의 로고 만들기를 할 수 있는 사이트

간단하게 ai로 나만의 로고 만들기를 할 수 있는 사이트

 

컴퓨터 성능과 속도를 높이는 간단한 윈도우 설정 방법

컴퓨터 성능과 속도를 높이는 간단한 윈도우 설정 방법

 

 

 

참고하세요

· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 이 글에는 쿠팡, 알리익스프레스등의 파트너스 활동으로 인한 수익금을 얻는 링크가 있습니다.
· 이 블로그의 홈으로 가시려면 여기를 누르셔도 됩니다.

 

📣 JSFiddle 바로가기