만두쌤의
코딩 한 꼬집

02 / WEB MAKING

HTML·CSS·JavaScript로 첫 웹페이지를 만들어요.

웹페이지는 내용과 모양, 동작이 함께 만들어져요. 세 가지 역할을 나눠서 살펴보면 작은 화면부터 스스로 고칠 수 있어요.

HTML: 페이지에 무엇을 담을까요?

HTML은 제목, 문단, 링크, 버튼처럼 내용의 역할을 표시해요. 먼저 소개 페이지의 제목과 한 줄 설명을 만들어 보세요.

<h1>나의 첫 번째 웹페이지</h1>
<p>내가 좋아하는 것들을 소개해요.</p>
<button>응원하기</button>

제목과 문단에 같은 태그를 쓰기보다 역할에 맞는 태그를 고르면 내용을 이해하기 쉬워요. 버튼에는 누르면 할 일을 알 수 있는 문구를 적어 주세요.

CSS: 어떤 분위기로 보여 줄까요?

CSS는 색, 크기, 간격 같은 모양을 정해요. 아래 코드는 버튼에 초록색 배경과 여백을 더해요.

button {
  background: #24533c;
  color: white;
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
}

배경색과 글자색을 함께 생각해 보세요. 글자를 읽기 쉬운지 확인하고, padding 값을 바꿔 버튼 크기의 차이를 비교해요.

JavaScript: 누르면 무엇이 바뀔까요?

JavaScript는 사용자의 행동에 반응해요. 버튼을 누르면 버튼 안의 문구를 바꾸는 예제예요.

const button = document.querySelector("button");
button.addEventListener("click", () => {
  button.textContent = "응원해 줘서 고마워요!";
});

위 HTML에 버튼이 만들어진 뒤 이 코드를 실행해야 해요. 선택한 요소가 맞는지, 클릭할 때 실행할 내용이 어디인지 짚어 보세요.

작은 수정부터 시작해요

  1. 예제에서 제목 한 줄을 내 소개로 바꿔요.
  2. 색이나 여백을 한 가지만 바꾸고 화면을 비교해요.
  3. 버튼을 눌러 예상한 반응이 나오는지 확인해요.
  4. 좁은 화면에서도 글자와 버튼이 읽히는지 살펴봐요.

웹 만들기 활동에서는 코드를 고치고 동작을 실험해요. 먼저 화면의 질문을 읽고, 수정이 어떤 결과를 만들지 예상해 보세요.

읽은 내용을 직접 확인해 볼까요?

웹 만들기 활동 시작하기

학습자는 무료로, 회원가입 없이 시작할 수 있어요.