코드연습창 — HTML/CSS/JS 배우기

HTML 기초 HyperText Markup Language

웹페이지의 뼈대를 만드는 언어입니다.

1. HTML이란?

HTML은 웹페이지의 구조를 만드는 언어입니다. 태그(tag)로 내용을 감싸서 의미를 부여합니다.

<!-- 기본 구조 -->
<!DOCTYPE html>
<html>
  <head>
    <title>페이지 제목</title>
  </head>
  <body>
    화면에 보이는 내용
  </body>
</html>

2. 제목 태그 (h1~h6)

제목을 표시합니다. h1이 가장 크고, h6이 가장 작습니다.

<h1>가장 큰 제목</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>

3. 문단과 텍스트

<p>일반 문단입니다.</p>
<strong>굵은 글씨</strong>
<em>기울어진 글씨</em>
<br> <!-- 줄바꿈 -->

4. 링크와 이미지

<!-- 링크 -->
<a href="https://example.com">
  클릭하세요
</a>

<!-- 이미지 -->
<img src="이미지URL" alt="설명">

5. 목록

<!-- 순서 없는 목록 -->
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
</ul>

<!-- 순서 있는 목록 -->
<ol>
  <li>첫 번째</li>
  <li>두 번째</li>
</ol>

6. div와 span

레이아웃을 나누는 데 사용하는 컨테이너 태그입니다.

<div> <!-- 블록 요소, 줄 차지 -->
  내용
</div>

<span> <!-- 인라인 요소, 줄 안에 -->
  내용
</span>

7. 입력 폼

<input type="text" placeholder="입력하세요">
<input type="number">
<input type="checkbox">
<button>버튼</button>
<select>
  <option>옵션1</option>
</select>

💡 핵심 정리: HTML은 여는 태그 <tag> 와 닫는 태그 </tag> 사이에 내용을 넣습니다. img, br, input 등 일부 태그는 닫는 태그가 없습니다.

CSS 기초 Cascading Style Sheets

웹페이지에 색상, 크기, 레이아웃 등 스타일을 입히는 언어입니다.

1. CSS 문법

/* 선택자 { 속성: 값; } */
h1 {
  color: red;
  font-size: 24px;
}

2. 색상과 배경

p {
  color: #333333;       /* 글자색 */
  background: #f5f5f7;  /* 배경색 */
  background: rgba(0,113,227,.1); /* 투명도 */
}

3. 박스 모델

모든 HTML 요소는 박스입니다. padding(안쪽), border(테두리), margin(바깥쪽)으로 구성됩니다.

div {
  width: 200px;
  height: 100px;
  padding: 20px;       /* 안쪽 여백 */
  border: 2px solid #333; /* 테두리 */
  margin: 10px;        /* 바깥 여백 */
  border-radius: 12px; /* 둥근 모서리 */
}

4. 텍스트 스타일

p {
  font-size: 16px;
  font-weight: 700;    /* 굵기: 100~900 */
  font-family: sans-serif;
  line-height: 1.8;   /* 줄 간격 */
  text-align: center;
  letter-spacing: -.02em;
}

5. Flexbox 레이아웃

요소를 가로/세로로 정렬하는 강력한 레이아웃 시스템입니다.

.container {
  display: flex;
  justify-content: center;  /* 가로 정렬 */
  align-items: center;     /* 세로 정렬 */
  gap: 16px;               /* 간격 */
  flex-wrap: wrap;          /* 줄바꿈 */
}

6. 선택자 종류

p { }           /* 태그 선택자 */
.box { }        /* 클래스 선택자 */
#title { }      /* id 선택자 */
p:hover { }     /* 마우스 올릴 때 */
div > p { }    /* div 바로 안의 p */

7. 애니메이션

.box {
  transition: all 0.3s ease;
}
.box:hover {
  transform: scale(1.1);
  background: #0071e3;
}

💡 핵심 정리: CSS는 선택자로 요소를 고른 뒤, { } 안에 속성: 값; 형태로 스타일을 지정합니다. 클래스(.name)를 잘 활용하면 재사용이 쉬워집니다.

JavaScript 기초 JS

웹페이지에 동작과 상호작용을 추가하는 프로그래밍 언어입니다.

1. 변수 선언

let name = '홍길동';    // 변경 가능
const PI = 3.14;        // 변경 불가
let count = 0;
let isOk = true;

console.log(name);       // 콘솔 출력

2. 조건문

let age = 20;

if (age >= 18) {
  console.log('성인입니다');
} else if (age >= 13) {
  console.log('청소년입니다');
} else {
  console.log('어린이입니다');
}

3. 반복문

// for 반복
for (let i = 0; i < 5; i++) {
  console.log(i);  // 0,1,2,3,4
}

// 배열 반복
const fruits = ['사과', '바나나', '딸기'];
fruits.forEach(f => console.log(f));

4. 함수

// 함수 선언
function greet(name) {
  return '안녕, ' + name + '!';
}

// 화살표 함수
const add = (a, b) => a + b;

console.log(greet('철수'));  // 안녕, 철수!
console.log(add(3, 5));      // 8

5. DOM 조작

HTML 요소를 JavaScript로 선택하고 변경합니다.

// 요소 선택
const el = document.getElementById('myId');
const el2 = document.querySelector('.myClass');

// 내용 변경
el.textContent = '새로운 내용';
el.style.color = 'red';

// 클래스 추가/제거
el.classList.add('active');
el.classList.remove('active');

6. 이벤트

const btn = document.getElementById('btn');

// 클릭 이벤트
btn.addEventListener('click', () => {
  alert('버튼 클릭!');
});

// 입력 이벤트
input.addEventListener('input', (e) => {
  console.log(e.target.value);
});

7. 배열과 객체

// 배열
const arr = [1, 2, 3];
arr.push(4);          // 추가
arr.filter(n => n > 2); // [3, 4]
arr.map(n => n * 2);   // [2, 4, 6, 8]

// 객체
const user = {
  name: '철수',
  age: 25,
  greet() { return '안녕!'; }
};
console.log(user.name);  // 철수

💡 핵심 정리: JavaScript는 HTML 요소를 선택(querySelector)하고, 이벤트(addEventListener)를 통해 사용자의 행동에 반응하며, DOM을 조작해 화면을 바꿉니다.