잡동사니/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 |