[GPT가 알려주는] HTML, CSS, JavaScript 기본 구조

heylo 2025. 4. 9. 18:48

좋아좋아~ 😎 웹 개발의 3대장인 HTML, CSS, JavaScript의 기본 구조를 딱 정리해줄게.
이건 웹 프로젝트의 뼈대 + 스타일 + 행동이라고 보면 돼!

🧱 1. HTML 기본 구조 (뼈대 만들기)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>나의 웹사이트</title>
  <link rel="stylesheet" href="style.css" /> <!-- CSS 연결 -->
</head>
<body>
  <h1>안녕하세요!</h1>
  <p>이건 HTML의 기본 구조입니다.</p>

  <button onclick="sayHello()">눌러보세요</button>

  <script src="main.js"></script> <!-- JavaScript 연결 -->
</body>
</html>

📌 구성 요소 요약

태그	역할
<!DOCTYPE html>	HTML5 문서 선언
<html>	HTML 전체 문서
<head>	문서 정보 (제목, 문자셋, 외부 파일 등)
<body>	사용자에게 보이는 내용 (화면에 나옴)

🎨 2. CSS 기본 구조 (스타일 입히기)

/* style.css */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
}

h1 {
  color: royalblue;
  font-size: 2.5em;
}

button {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: seagreen;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

📌 구성 요소 요약

구성	설명
선택자 { 속성: 값; }	스타일 지정 기본 문법
body, h1, button	어떤 요소를 꾸밀지 선택
색상, 글꼴, 여백, 정렬 등	다양한 시각 스타일 지정 가능

⚙️ 3. JavaScript 기본 구조 (행동 부여)

// main.js
function sayHello() {
  alert("안녕하세요! 자바스크립트에 오신 것을 환영합니다 😊");
}

실행결과 (VS Code + Live Server)

📌 구성 요소 요약

구성	설명
function 이름() { ... }	함수 정의
alert()	알림창 띄우기
onclick="sayHello()"	HTML에서 버튼 클릭 시 함수 실행

🧠 정리: HTML, CSS, JS 역할

구분	하는 일	확장자
HTML	내용 구조 만들기	.html
CSS	스타일 꾸미기	.css
JS	동작/인터랙션	.js