혼자 코딩하는 초보자를 위한 CodePen Display 실습법

웹 개발을 배우기 위해 가장 중요한 점은 바로 실습입니다. 특히 초보자라면, 코드를 작성하면서 바로 결과를 확인할 수 있는 도구가 필요합니다. 이때 유용한 도구가 바로 CodePen입니다. CodePen은 HTML, CSS, JavaScript를 실시간으로 작성하고 바로 결과를 볼 수 있게 해주는 웹 개발 플랫폼으로, 초보자들이 빠르게 학습할 수 있는 좋은 환경을 제공합니다.

이번 글에서는 CodePen Display 기능을 활용하여 초보자들이 실습을 통해 HTML과 CSS의 기초를 쉽게 배울 수 있도록 돕는 방법을 소개합니다.

1. CodePen Display란 무엇인가?

CodePen은 HTML, CSS, JavaScript 코드를 실시간으로 작성하고 결과를 확인할 수 있는 온라인 코드 편집기입니다. 초보자들이 코드 작성 후 바로 결과를 확인할 수 있기 때문에 매우 직관적이며 학습 효율이 높습니다.

Display 기능은 작성한 코드가 즉시 반영되어 실시간으로 화면에서 확인할 수 있도록 해주는데, 이를 통해 개발 과정에서 발생하는 문제를 빠르게 해결할 수 있습니다.

CodePen Display의 주요 기능

실시간 코드 반영: 코드를 작성하면 바로 실행 결과를 확인할 수 있어, 실수나 오류를 즉시 수정할 수 있습니다.
반응형 디자인 미리 보기: 다양한 화면 크기에서 웹 페이지가 어떻게 보일지 확인할 수 있어, 모바일 및 데스크톱 환경에 최적화된 디자인을 배울 수 있습니다.
자동 저장 기능: 실수로 작업을 잃어버리지 않도록 자동으로 저장됩니다. 이는 개발자에게 매우 편리한 기능입니다.

2. 실습: CodePen Display로 간단한 프로젝트 만들기

이제 CodePen에서 직접 실습을 진행하며 HTML과 CSS를 배우는 방법을 알아보겠습니다. 실습을 통해 CodePen의 Display 기능을 경험하고, 기본적인 웹 페이지를 만들어 보겠습니다.

Step 1: CodePen에 접속하여 새 프로젝트 만들기

CodePen에 접속합니다.
페이지 상단의 "New Pen" 버튼을 클릭하여 새 프로젝트를 시작합니다.
HTML, CSS, JavaScript 편집기 화면이 나타나면, 각 항목에 코드를 입력할 준비를 합니다.

Step 2: HTML 코드 작성

다음은 HTML 코드입니다. CodePen 편집기의 HTML 창에 아래 코드를 입력해 보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>나만의 CodePen</title>
</head>
<body>

  <h1>Welcome to CodePen!</h1>

  <div class="box"></div>
  <div class="box-2"></div>

</body>
</html>

Step 3: CSS 코드 작성

이제 CSS를 작성하여 두 개의 박스를 스타일링합니다. 아래의 코드를 CodePen의 CSS 창에 입력합니다.

.box {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  margin: 20px auto;
  border-radius: 10px;
}

.box-2 {
  width: 200px;
  height: 200px;
  background-color: #e74c3c;
  margin: 20px auto;
  border-radius: 50%; /* 원형으로 변경 */
}

3. 결과 확인

위 코드를 작성한 후, CodePen에서는 실시간으로 결과가 반영됩니다. .box 클래스는 파란색 사각형을 생성하고, .box-2 클래스는 빨간색 원을 만듭니다. CodePen에서는 바로 화면에 결과가 표시되므로, 실시간으로 스타일을 변경하거나 수정할 수 있습니다.

4. CSS 변경 및 실험

이제 CSS를 수정하여 다른 스타일을 실험해 봅니다. 예를 들어, 박스 색상을 변경하거나 크기를 조정할 수 있습니다. 아래와 같은 CSS를 추가하여 box-2의 색상을 바꾸거나 크기를 조정해 보세요.

.box-2 {
  background-color: #2ecc71;  /* 색상 변경 */
  width: 250px;               /* 크기 변경 */
  height: 250px;
}

5. 초보자가 자주 겪는 문제 해결

웹 개발을 배우는 과정에서 초보자들은 다양한 문제에 직면할 수 있습니다. CodePen에서는 오류 메시지를 실시간으로 제공하므로, 코드에서 발생한 문제를 빠르게 찾고 수정할 수 있습니다. 몇 가지 일반적인 문제와 해결 방법을 소개합니다.

디자인이 깨졌을 때: 반응형 미리 보기를 통해 다양한 화면 크기에서 어떻게 보이는지 확인할 수 있습니다. 이를 통해 모바일과 데스크톱 디자인을 최적화할 수 있습니다.
박스가 보이지 않을 때: CSS에서 width, height, background-color를 제대로 설정했는지 확인합니다. 또한, border-radius로 둥글게 만드는 것도 좋은 실험입니다.

마치며

CodePen Display 기능은 초보자들에게 실시간으로 결과를 확인하며 웹 개발을 배우기에 최적의 도구입니다. 이 실습을 통해 HTML과 CSS의 기초를 다지는 연습을 실천해 보세요! 점차적으로 더 복잡한 웹 페이지를 만들 수 있을 것입니다. CodePen을 활용하여 지속적으로 연습하며, 더 나은 웹 개발자로 성장할 수 있도록 연습해 봅시다

감사합니다.

디지털 공방