설치 없이 코드 수정하고 실행하는 무료 코딩 학습 사이트, W3Schools

코딩을 배워보고 싶어도 처음에는 무엇을 설치해야 하는지부터 막막할 수 있습니다.

프로그램 설치와 설정에서 시간을 보내다 보면, 정작 코드는 실행해 보지도 못하는 경우가 있고요.

이럴 때 브라우저에서 예제를 바로 수정하고 실행할 수 있는 사이트를 이용하는 방법도 있습니다.

 

이번에 소개할 W3Schools입니다.

W3Schools 살펴보기

 

W3Schools는 기본 개념과 예제 코드를 함께 제공하는 코딩 학습 사이트입니다. 코딩을 처음 배우거나 새로운 언어의 기초를 익히려는 분들이 보기 좋은 구성입니다.

 

https://www.w3schools.com

W3Schools.com

 

HTML, CSS, JavaScript뿐 아니라 C, C++, Python, SQL 등의 자료도 있습니다.

배우고 싶은 언어를 선택한 뒤 설명을 읽고, 예제를 실행해 보는 방식으로 이용하면 됩니다.

기본 튜토리얼과 아래에서 사용할 예제 실행 기능은 무료입니다. 인증서나 Plus 등 별도로 판매하는 상품도 있으므로 구분해서 보면 되겠습니다.

예제를 직접 바꿔 보기

 

사이트 사용법은 HTML을 예로 들어 설명하겠습니다.

 

HTML은 웹 페이지의 제목이나 문단 같은 구조를 만드는 데 사용하는 언어입니다.

이번 예제로 HTML을 고른 이유는 간단합니다.

 

글자와 색상을 바꾸면 화면에서 바로 차이를 볼 수 있기 때문입니다.

 

HTML만 배울 수 있는 사이트라는 뜻은 아닙니다.

Python이나 C가 필요한 분은 해당 언어를 선택하면 됩니다.

 

아래에서는 HTML 문법을 외우기보다, ‘예제 열기 → 한 줄 수정하기 → 실행 결과 확인하기’ 순서로 따라가면 됩니다.

01HTML 튜토리얼 열기

사이트 상단에서 HTML을 선택합니다. 

왼쪽에는 주제별 목록이 있고, 본문에는 설명과 예제가 나옵니다. 아래는 첫 페이지에서 예제가 있는 부분까지 내려간 화면입니다.

왼쪽의 주제 목록과 예제 아래 실행 버튼 · 화면 출처: W3Schools

예제 아래의 초록색 [Try it Yourself]를 클릭합니다.

직접 해보라는 의미의 버튼인데요. 누르면 코드를 수정할 수 있는 편집기가 열립니다. 별도로 프로그램을 설치할 필요는 없습니다.

02코드와 결과 화면 확인하기

왼쪽은 코드 입력 영역, 오른쪽은 실행 결과 · 화면 출처: W3Schools

PC에서는 위와 같이 두 영역으로 나뉘어 보입니다.

• 왼쪽: 코드를 입력하거나 수정하는 곳
• 오른쪽: 입력한 코드의 실행 결과가 나오는 곳

왼쪽에 있는 This is a Heading이 오른쪽에서는 큰 제목으로 표시되어 있습니다. 이 제목을 바꿔 보겠습니다.

03제목 한 줄 수정하기

왼쪽 코드에서 <h1>으로 시작하는 줄을 찾습니다. 다른 줄은 그대로 두고, 해당 줄만 아래 내용으로 바꿉니다.

<h1 style="color: blue;">W3Schools 실행 테스트</h1>

• W3Schools 실행 테스트: 제목으로 표시할 문구
• color: blue;: 제목을 파란색으로 표시하는 설정

색상을 지정하는 부분은 CSS 문법입니다. 여기서는 HTML 제목에 색상 설정을 하나 붙였다고 이해하면 되겠습니다.

04Run을 눌러 결과 확인하기

수정했으면 편집기 위쪽의 초록색 [Run] 버튼을 클릭합니다. 입력한 코드를 실행하는 버튼입니다.

Run 실행 후 제목 문구와 색상이 변경된 모습 · 화면 출처: W3Schools

오른쪽에 파란색 ‘W3Schools 실행 테스트’가 표시된 것을 확인할 수 있습니다.

 

이번에는 blue를 red로 바꾸고 다시 실행해 보면 제목이 빨간색으로 바뀝니다. 이렇게 한 군데씩 수정하면 어떤 코드가 화면의 어느 부분을 바꾸는지 확인하기 쉽습니다.

 

코드를 수정하기만 하면 오른쪽 화면은 그대로입니다. 변경한 결과를 보려면 [Run]을 다시 눌러야 합니다.

HTML은 화면의 변화를 확인하는 식이고, 다른 언어에서는 해당 예제의 출력 결과를 확인하는 식으로 이용하면 됩니다. 실행 환경과 화면 구성은 언어마다 조금씩 다릅니다.

처음 공부할 때 볼 메뉴

 

Tutorials · 처음부터 공부할 때

처음 배우는 언어라면 Tutorials에서 왼쪽 목록의 앞부분부터 봅니다.

HTML이라면 Introduction → Basic → Headings → Paragraphs 순서로 기본 개념과 예제를 확인하면 됩니다.

Exercises · 배운 내용 확인하기

한두 항목을 읽었다면 연습문제를 풀어 봅니다.

답이 생각나지 않으면 해당 설명으로 돌아가 예제를 다시 실행해 보면 되고요.

References · 필요한 문법 찾아보기

참고 자료를 처음부터 모두 읽을 필요는 없습니다. 공부하다 궁금한 항목이 생겼을 때 찾아보면 됩니다.

예를 들어 링크를 만드는 <a> 태그가 궁금하다면 해당 항목의 설명과 예제를 확인합니다.

 

마무리

 

코딩을 처음 공부할 때는 설명을 읽어도 코드가 어떻게 동작하는지 감이 잘 오지 않을 수 있습니다.

W3Schools에서는 예제를 조금씩 바꾸고 바로 실행해 볼 수 있어, 그 차이를 눈으로 확인하기 좋습니다.

 

처음부터 개발 환경을 갖추는 것이 부담스럽다면 여기서 먼저 시작해 봐도 되겠습니다. 이후 직접 만들어 보고 싶은 것이 생겼을 때, 필요한 도구를 설치하고 작은 프로젝트로 이어가면 되고요.