치트시트 📌

<h1>My website</h1>

가장 큰 제목. 페이지에 한 번만 — 책 제목처럼.

<h2>Chapter</h2>

더 작은 제목. <h6>(가장 작은 것)까지 있어요.

<p>Hi, this is text.</p>

일반 텍스트 문단.

<strong>important</strong>

글자를 굵게 만들어요.

<em>interesting</em>

기울임(비스듬한) 글자.

<a href="https://example.com">Click</a>

링크. href에 연결할 주소를 넣어요.

<img src="dog.jpg" alt="My dog">

이미지. src = 이미지 파일, alt = 안 불러와졌을 때 설명.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

글머리 기호 목록. 각 항목은 <li>.

<ol>
  <li>step 1</li>
  <li>step 2</li>
</ol>

번호 매긴 목록 — 번호는 브라우저가 알아서 붙여요.

<div class="card">...</div>

같이 묶을 것들을 담는 상자. class 이름은 직접 지어요.

<!-- note to myself -->

주석. 브라우저는 무시해요 — 나만 보는 메모예요.

h1 {
  color: red;
}

모든 <h1> 제목이 빨간색이 돼요.

.card {
  background: yellow;
}

class="card"인 것은 노란 배경. 점(.)은 "이 class를 찾아"라는 뜻.

p {
  font-size: 20px;
}

문단 글자 크기. 숫자가 클수록 글자도 커요.

body {
  font-family: Arial;
}

페이지 전체 글꼴.

.card {
  padding: 16px;
}

안쪽 여백 — 내용과 상자 가장자리 사이.

.card {
  margin: 16px;
}

바깥 여백 — 주변 것들과의 거리.

.card {
  border: 2px solid black;
}

테두리: 두께, 선 종류, 색.

.card {
  border-radius: 12px;
}

모서리를 둥글게. 숫자가 클수록 더 둥글어요.

.menu {
  display: flex;
  gap: 10px;
}

안의 것들이 가로로 10px 간격으로 나란히. 메뉴의 마법!

img {
  width: 200px;
}

이미지 너비. 높이는 자동으로 맞춰져서 찌그러지지 않아요.

const name = 'Kate';

변수 — 이름표 붙은 상자에 뭔가 보관해요.

let points = 0;
points = points + 1;

let은 바꿀 수 있는 상자. 여기서는 점수를 1 더해요.

alert('Hi!');

메시지 창이 떠요. 첫 실험에 좋아요.

console.log('it works');

콘솔(F12)에 메시지 출력 — 프로그래머용 비밀 창.

document.querySelector('h1')

페이지에서 첫 <h1>을 찾아서 다룰 수 있게 해요.

element.textContent = 'New text';

찾은 요소 안의 글자를 바꿔요.

element.addEventListener('click', () => {
  alert('Clicked!');
});

누군가 클릭하면 안의 코드가 실행돼요.

if (points > 10) {
  alert('You won!');
}

조건: 괄호 안이 참일 때만 안의 코드가 실행돼요.

element.classList.toggle("dark");

class가 없으면 추가, 있으면 제거. 다크 모드가 바로 이렇게 작동해요.

const r = await fetch(address);

API에 요청을 보내고 답을 기다려요(await).

const data = await r.json();

응답을 다룰 수 있는 객체로 바꿔요.

data.current_weather.temperature

점(.)으로 객체에서 값을 꺼내요 — 다른 객체와 같아요.

await fetch('/ask', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ question }),
});

POST = 서버로 데이터 보내기. body에 객체를 문자열로 바꾼 것을 넣어요.

{ "city": "Prague", "temperature": 21 }

JSON — API의 공통 언어. 문자는 따옴표, 숫자는 없이.

JSON.stringify(obj)

객체를 JSON 문자열로 바꿔요(보내기 전).

JSON.parse(text)

JSON 문자열을 객체로 되돌려요(받은 후).

process.env.AI_KEY

서버에서: .env 파일에서 비밀 키 읽기. 키는 브라우저에 넣으면 안 돼요!

cd my-website

my-website 폴더로 이동(cd = change directory).

ls

현재 폴더 내용 보기(Windows: dir).

node server.js

Node.js로 server.js 파일 실행.

npm install

프로젝트에 필요한 패키지 모두 다운로드.

git status

마지막 저장 이후 프로젝트에서 바뀐 것 보기.

git add .

모든 변경을 저장 준비(점 = 전부).

git commit -m "Added a menu"

변경을 기록에 저장하고 무엇을 했는지 메모.

git push

저장한 변경을 GitHub에 보내기.