web

클론 코딩 프로젝트 1

클론 코딩 프로젝트 1입니다. HTML, CSS, JavaScript 역할, 정적 웹 프로젝트 구조, index.html/style.css/main.js 예제와 로컬 실행을 정리했습니다.

devmes

• 조회 197

클론 코딩 프로젝트 1

이 프로젝트는 HTML, CSS, JavaScript의 역할을 나누어 이해하고, 작은 정적 웹페이지를 직접 만들어 보는 클론 코딩 입문이다. 완성된 사이트를 그대로 복사하는 것이 목적이 아니라, 화면을 구성하는 구조와 스타일, 동작이 어떻게 연결되는지 이해하는 것이 목표다.

웹사이트와 브라우저

웹사이트는 HTML, CSS, JavaScript, 이미지 같은 파일의 조합이고, 브라우저는 이 파일들을 해석해 사용자가 볼 수 있는 화면으로 렌더링한다. 개발자는 브라우저가 이해할 수 있는 형태로 문서 구조, 표현, 동작을 작성한다.

HTML, CSS, JavaScript 역할

  • HTML: 제목, 문단, 링크, 이미지, 버튼처럼 콘텐츠 구조를 만든다.
  • CSS: 색상, 간격, 레이아웃, 반응형 화면처럼 보이는 방식을 정한다.
  • JavaScript: 클릭, 입력, 상태 변경 같은 상호작용을 처리한다.

프로젝트 구조

clone-project-1/
├── index.html
├── style.css
└── main.js

index.html

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Clone Project 1</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="profile">
    <h1>Devmes</h1>
    <p>Linux, network, Python study notes</p>
    <button id="themeButton" type="button">Toggle theme</button>
  </main>
  <script src="main.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f5f7fb;
  color: #17202a;
}

.profile {
  max-width: 640px;
  margin: 80px auto;
  padding: 32px;
  border: 1px solid #d8dee9;
}

body.dark {
  background: #111827;
  color: #f9fafb;
}

main.js

const button = document.querySelector("#themeButton");

button.addEventListener("click", () => {
  document.body.classList.toggle("dark");
});

실행

mkdir -p clone-project-1
cd clone-project-1
python3 -m http.server 8000

브라우저에서 http://127.0.0.1:8000/을 열고 버튼을 눌러 테마가 바뀌는지 확인한다.

BGM EVER