HTML, CSS 질문하기 편리한 사이트 추천 : jsfiddle.net

1. HTML, CSS공부 근황

저는 시험이 끝난 뒤로 웹 프론트엔드 공부를 시작했습니다.

(+'웹 프론트엔드'의 개념은 제가 쓴 칼럼 '웹개발 : 프론트엔드와 백엔드의 차이 및 공부계획 총정리'에서 참고하실 수 있습니다.)

본격적으로 공부를 시작한 이후로 약 2주가 지난 것 같은데 매일 찔끔찔끔 공부하다보니 이제서야 HTML과 CSS의 개념을 거의 다 익히게 되었습니다.

 

그런데 HTML과 CSS가 프로그래밍 언어 중에선 가장 쉬운 축에 속한다지만 초심자가 공부하다보면 당연히 막히는 구간이 발생합니다.

저 또한 마찬가지였습니다.

그 때마다 질문을 하기 위해 막힌 부분의 코드를 복사해 선생님께 보내는 경우가 있었는데, 코딩창이 아니다보니 간혹가다 코드가 깨지거나 하여 코드를 알아볼 수 없는 문제가 발생하곤 했습니다.

2. jsfiddle.net 사이트 추천이유 2가지

이러한 문제를 해결하기 위해 고민하던 중 아주 유용한 사이트를 발견했습니다.

그 사이트를 여러분께 소개해드리려고 합니다.

jsfiddle 로고

바로 https://jsfiddle.net/ 이라는 사이트 입니다.

Create a new fiddle - JSFiddle

이 사이트가 좋은 이유는 크게 2가지로 추려볼 수 있습니다.

 

첫 번째, 웹상에서 코드를 짜서 바로바로 실행해볼 수 있다는 것입니다.

HTML, CSS뿐만 아니라 jQuery, Vue, React 등의 프로그래밍 언어도 지원하고 있어 활용도가 무궁무진합니다.

 

두 번째, 코딩을 하다가 막힌 부분이 생기는 경우 자신이 작성한 코딩창을 다른 사람이 그대로 볼 수 있는 URL을 생성하여 코드를 공유할 수 있습니다.

구체적으로 설명해보자면 jsfiddle 사이트 내에서 코드를 작성하고 'save'버튼을 누르면 새로운 URL주소가 생성이 됩니다. 그럼 이 URL주소를 그대로 복사하여 다른 사람에게 보내면 다른 사람은 원 코드 작성자가 작성 중인 코드를 동일한 화면에서 확인할 수 있습니다.

이러한 기능은 코딩을 하다가 모르는 부분이 있을 때 질문하기에도 용이하고, 코딩에 대한 협업을 할 때에도 유용하게 사용될 수 있는 등 활용가능성이 다양합니다.

3. jsfiddle.net 사이트 활용 사례

글로는 이해가 가지 않는 분들이 계실것 같아 직접 코딩을 하고 URL을 공유해보겠습니다.

아래 URL을 누르시면 제가 작성한 HTML과 CSS코드를 그대로 확인하실 수 있습니다.

https://jsfiddle.net/nk4za176/3/

Edit fiddle - JSFiddle

4. 파이썬 말고 HTML, CSS로 프로그래밍을 시작해보는 것은 어때?

보통 프로그래밍을 처음 배우는 사람들이 가장 많이 선택하는 언어가 파이썬(Python)이라고 알고있습니다.

저도 파이썬으로 프로그래밍 공부를 시작했습니다.

 

하지만 평소 웹 개발에 관심이 있는 분이시라면 HTML과 CSS로 프로그래밍을 시작해보는 것은 어떤가요?

 

혹자는 HTML과 CSS가 프로그래밍 언어가 아니라고 할 정도로 HTML과 CSS는 매우 배우기 쉬운 프로그래밍 언어입니다.

HTML과 CSS로 프로그래밍 공부를 시작하면 프로그래밍에 대한 흥미를 잃지 않고 지속시킬 수 있는 좋은 시작이 될 수도 있겠다는 생각이 듭니다.

 

여러분도 저와 함께 웹개발 하러가실래요?

 

+ 참고 칼럼 https://catchingupwith7years.tistory.com/19

웹개발 : 프론트엔드와 백엔드의 차이 및 공부계획 총정리 (feat. 테크보이 워니)