잡동사니/GPT가 알려주는

[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