๐ป ์ค์ต ํ๋ก์ ํธ๋ณ ์ฝ๋ ํ ํ๋ฆฟ & GitHub ๋ฐฐํฌ ๋ฐฉ๋ฒ
๐ป ์ค์ต ํ๋ก์ ํธ๋ณ ์ฝ๋ ํ ํ๋ฆฟ & GitHub ๋ฐฐํฌ ๋ฐฉ๋ฒ
1. ๐ ๋ธ๋ก๊ทธ ํ์ด์ง
๐ฆ ์ฝ๋ ํ ํ๋ฆฟ
index.html
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>๋์ ๋ธ๋ก๊ทธ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hyun์ ๋ธ๋ก๊ทธ</h1>
<div id="posts"></div>
<textarea id="newPost" placeholder="์ ๊ธ ์์ฑ..."></textarea>
<button onclick="addPost()">๊ธ ์ฌ๋ฆฌ๊ธฐ</button>
<script src="script.js"></script>
</body>
</html>
style.css
css
body {
font-family: sans-serif;
padding: 20px;
}
textarea {
width: 100%;
height: 100px;
}
script.js
javascript
function addPost() {
const text = document.getElementById("newPost").value;
const post = document.createElement("p");
post.textContent = text;
document.getElementById("posts").appendChild(post);
document.getElementById("newPost").value = "";
}
2. ๐จ ํฌํธํด๋ฆฌ์ค ์น์ฌ์ดํธ
๐ฆ ์ฝ๋ ํ ํ๋ฆฟ
index.html
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Hyun์ ํฌํธํด๋ฆฌ์ค</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Hyun</h1>
<p>ํ๋ก ํธ์๋ ๊ฐ๋ฐ์</p>
</header>
<section id="projects">
<h2>ํ๋ก์ ํธ</h2>
<div class="card">Todo ์ฑ</div>
<div class="card">๋ ์จ ์ฑ</div>
</section>
</body>
</html>
style.css
css
body {
font-family: sans-serif;
background: #f0f0f0;
}
.card {
background: white;
padding: 10px;
margin: 10px;
border-radius: 5px;
}
3. ๐ฎ ์ซ์ ๋ง์ถ๊ธฐ ๊ฒ์
๐ฆ ์ฝ๋ ํ ํ๋ฆฟ
index.html
html
<!DOCTYPE html>
<html>
<head>
<title>์ซ์ ๋ง์ถ๊ธฐ ๊ฒ์</title>
</head>
<body>
<h1>1~100 ์ฌ์ด ์ซ์๋ฅผ ๋ง์ถฐ๋ณด์ธ์!</h1>
<input type="number" id="guess">
<button onclick="checkGuess()">ํ์ธ</button>
<p id="result"></p>
<script src="script.js"></script>
</body>
</html>
script.js
javascript
const answer = Math.floor(Math.random() * 100) + 1;
function checkGuess() {
const guess = parseInt(document.getElementById("guess").value);
const result = document.getElementById("result");
if (guess === answer) result.textContent = "์ ๋ต!";
else if (guess < answer) result.textContent = "๋๋ฌด ์์์!";
else result.textContent = "๋๋ฌด ์ปค์!";
}
4. ๐ ๋ฐ์ดํฐ ์๊ฐํ ๋์๋ณด๋
๐ฆ ์ฝ๋ ํ ํ๋ฆฟ
index.html
html
<!DOCTYPE html>
<html>
<head>
<title>๋ฐ์ดํฐ ์๊ฐํ</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
script.js
javascript
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: '์ ์',
data: [12, 19, 3],
backgroundColor: ['red', 'blue', 'green']
}]
}
});
5. ๐ฌ ์ค์๊ฐ ์ฑํ ์ฑ (Firebase)
๐ฆ ์ฝ๋ ํ ํ๋ฆฟ
index.html
html
<!DOCTYPE html>
<html>
<head>
<title>์ฑํ
์ฑ</title>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-database.js"></script>
</head>
<body>
<input id="message" placeholder="๋ฉ์์ง ์
๋ ฅ">
<button onclick="sendMessage()">์ ์ก</button>
<ul id="chat"></ul>
<script src="script.js"></script>
</body>
</html>
script.js
javascript
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
databaseURL: "YOUR_DATABASE_URL"
};
firebase.initializeApp(firebaseConfig);
const db = firebase.database();
function sendMessage() {
const msg = document.getElementById("message").value;
db.ref("chat").push().set({ text: msg });
}
db.ref("chat").on("child_added", snapshot => {
const li = document.createElement("li");
li.textContent = snapshot.val().text;
document.getElementById("chat").appendChild(li);
});
๐ GitHub Pages ๋ฐฐํฌ ๋ฐฉ๋ฒ
๐ฆ ์คํ ์ ์ฐจ ๋ฐ์ค
GitHub์ ์ ์ ์ฅ์ ์์ฑ (์:
my-portfolio)๋ก์ปฌ์์ ํ๋ก์ ํธ ํด๋๋ฅผ Git์ผ๋ก ์ด๊ธฐํ
bashgit init git remote add origin https://github.com/USERNAME/my-portfolio.git git add . git commit -m "Initial commit" git push -u origin mainGitHub ์ ์ฅ์ → Settings → Pages ๋ฉ๋ด ํด๋ฆญ
Source:
mainbranch ์ ํ →/root์ ์ฅ ํ ๋ฐฐํฌ ์ฃผ์ ํ์ธ (์:
https://USERNAME.github.io/my-portfolio/)
๐ ์ฐธ๊ณ : GitHub Pages ๊ณต์ ๋ฌธ์