목차(클릭하세요)
코드박스가 초보자를 위한 미래다!!
1. 웹(web)의 3대 기본 언어 이해하기
•
HTML = 집의 뼈대와 구조 (벽, 문, 창문의 위치)
•
CSS = 집의 인테리어와 디자인 (색깔, 가구 배치, 조명)
•
JavaScript = 집의 전기와 자동화 시스템 (스위치, 자동문, 스마트홈)
1-1. HTML
핵심 개념: 웹페이지에 나타나는 모든 요소의 배치와 내용을 기술하는 언어
•
태그(Tag): <div>, <p>, <h1> 등으로 요소를 감싸는 방식
•
시맨틱: 의미있는 태그 사용 (<header>, <nav>, <main>)
•
구조화: 논리적인 문서 구조 만들기
1-2.CSS( Cascading Style Sheets)
핵심 개념: 웹 페이지 요소의 스타일을 정할 때 사용하는 언어
•
선택자(Selector): 어떤 요소를 꾸밀지 선택
•
속성(Property): 색상, 크기, 위치 등의 스타일
•
반응형: 다양한 화면 크기에 맞춰 조정
1-3.JavaScript
핵심 개념: 웹 페이지에 동적인 기능(움직이거나 변화하는)을 장착할 수 있게 도와주는 언어
•
이벤트: 사용자의 행동에 반응
•
DOM 조작: HTML 요소를 동적으로 변경
•
비동기: 서버와 통신하며 데이터 주고받기
2. 자바스크립트(=JS)는 어떻게 실행되나?
JavaScript 코드는 마치 연료와 같고, JavaScript 엔진은 이 연료를 실제 동작으로 바꿔주는 자동차 엔진2-1. JavaScript 엔진
•
JavaScript 코드를 컴퓨터가 이해할 수 있는 언어로 번역하고 실행해주는 프로그램
[주요 JavaScript 엔진들]
•
V8 (Chrome, Node.js) - 구글이 만든 가장 빠른 엔진, 자바스크립트 엔진에서 현재 가장 잘 나감.
•
SpiderMonkey (Firefox) - 최초의 JavaScript 엔진
•
JavaScriptCore (Safari) - 애플의 엔진
2-2. 크롬 개발자 도구 실행
•
개발자 도구 실행방법
◦
Windows/Linux: F12 또는 Ctrl + Shift + I
◦
우클릭: "검사" 또는 "개발자 도구"
2-3. 콘솔이란?
JavaScript의 놀이터•
콘솔: 브라우저에서 JavaScript 코드를 즉석에서 실행하고 결과를 확인할 수 있는 대화형 환경
•
콘솔의 사용목적: JS의 동작을 기록(log)하거나 표시할 목적으로 사용
•
console.log : 괄호안의 문자열을 콘솔에 출력하는 명령어
console.log("안녕하세요!");
JavaScript
복사
2-4.또 다른 JS명령어
console.warn("주의하세요!");
JavaScript
복사
3. 웹 에디터로 JS편집하기
3-1. 코드샌드박스(추천)
[특징]
•
실제 개발환경과 거의 동일한 경험
•
파일 구조를 제대로 관리 가능
•
실시간 협업 가능
•
VS Code와 유사한 개발 환경을 제공하며, 여러 파일·폴더를 생성하고 NPM 패키지까지 사용가능
•
React, Vue, Node.js 등 다양한 프레임워크, 라이브러리를 쉽게 적용 가능해 실제 프로젝트 수준의 개발과 실습에 훨씬 적합
[사용법]
2.
"Create Sandbox" 클릭(또는 Create )
3.
템플릿 선택 (Vanilla JS, React, Vue 등)
4.초기설정이 끝나면
이런 환경이 보여짐
[Vaniila는 무엇?]
•
Vaniila JS는 어떤 라이브러리나 프레임워크도 적용되지 앟은 순수한 자바스크립트를 의미
•
Vaniila 단어의 어원은 스페인어로 ‘콩’인데, 요즘은 ‘핵심’ 또는 ‘근본’이라는 뜻으로 확장.
[mjs는 무엇?]
•
.mjs 확장자는 JavaScript 모듈(Module) 파일을 의미
•
ES6(ECMAScript 2015)부터 도입된 import / export 문법을 사용할 때 공식적으로 권장되는 확장자
•
Node.js에서 구분이 필요한 관계로 사용됨
[간단 테스트]
// index.mjs
import './styles.css';
const app = document.getElementById('app');
// 투두리스트 만들기
const todos = [];
function renderTodos() {
app.innerHTML = `
<h1>My Todo App</h1>
<input type="text" id="todoInput" placeholder="할 일을 입력하세요">
<button onclick="addTodo()">추가</button>
<ul>
${todos.map((todo, index) =>
`<li>${todo} <button onclick="deleteTodo(${index})">삭제</button></li>`
).join('')}
</ul>
`;
}
window.addTodo = () => {
const input = document.getElementById('todoInput');
if (input.value.trim()) {
todos.push(input.value);
input.value = '';
renderTodos();
}
};
window.deleteTodo = (index) => {
todos.splice(index, 1);
renderTodos();
};
renderTodos();
JavaScript
복사
•
위 코드를 집어넣고 실행화면 확인
•
[코드 샌드박스의 핵심 기능]
◦
콘솔창 바로 접속
◦
코드페이지 바로 보기
3-1-1.코드 샌드박스 기본설정
•
Code completion by Codelium (...) : 코드 자동완성 기능
◦
사용법: 코드를 타이핑하다가 Ctrl + Space (또는 Cmd + Shift + Space)를 누르면 AI가 다음에 올 코드를 예측해서 제안
•
Enable VIM extension: VIM 텍스트 에디터의 키보드 단축키 방식 사용
◦
끄는 것을 추천
◦
VIM이란? —> 마우스 없이 키보드만으로 모든 편집을 하는 에디터
•
Use pointer cursors : 포인터 커서 사용
◦
기능: 클릭 가능한 요소(버튼, 링크 등)에 마우스를 올리면 손가락 모양 커서로 변경
3-1-2.코드 샌드박스 babel변경
•
바벨이란?
◦
Babel은 **자바스크립트 컴파일러(트랜스파일러)
◦
최신 자바스크립트(ES6~ES2023)를 구형 브라우저나 오래된 환경이 이해할 수 있는 ES5 코드로 변환해주는 역할 담당
◦
필요한 이유: 브라우저마다 지원하는 자바스크립트 버전이 다르기 때문에, Babel이 중간에서 번역해줘야 모든 환경에서 같은 코드가 동작
•
parcel?
◦
여러 개의 HTML, JS, CSS 파일을 한 덩어리로 묶어 웹 브라우저가 빠르게 실행할 수 있도록 만들어 주는 포장 도구
[바벨 변경방법]
package.son을 직접 변경하기
•
변경전
{
"name": "javascript",
"version": "1.0.0",
"description": "The JavaScript template",
"scripts": {
"start": "parcel ./src/index.html",
"build": "parcel build ./src/index.html"
},
"devDependencies": {
"parcel": "^2.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.2.0"
},
"keywords": ["css", "javascript"]
}
JavaScript
복사
•
변경후
{
"name": "javascript",
"version": "1.0.0",
"description": "The JavaScript template",
"scripts": {
"start": "parcel ./src/index.html",
"build": "parcel build ./src/index.html"
},
"devDependencies": {
"parcel": "^2.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.2.0",
"@babel/core": "^7.22.0",
"@babel/preset-env": "^7.22.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.22.0"
},
"keywords": ["css", "javascript"]
}
JavaScript
복사
3-2.코드펜
•
빠른 프로토타이핑
•
CSS 애니메이션 실험
•
간단한 JS 기능 테스트
•
HTML, CSS, JS 각각의 패널에서 작업가능
3-3.JSfiddle
•
일회성 프론트엔드 스크립트공유하는데 최적화
•
코드 여러 버전 저장, 교차 시험 등 프로토타이핑에 적합
4. HTML태그에 대한 기초들
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>양파고의 AI & 프로그래밍 블로그</title>
</head>
<body>
<!-- 실제로 동작하는 간단한 웹페이지 -->
<header style="background: #4CAF50; color: white; padding: 20px; text-align: center;">
<h1>🤖 양파고의 AI & 프로그래밍 블로그</h1>
<nav>
<ul style="list-style: none; padding: 0; display: flex; justify-content: center; gap: 20px;">
<li><a href="#home" style="color: white; text-decoration: none; padding: 10px;">🏠 홈</a></li>
<li><a href="#projects" style="color: white; text-decoration: none; padding: 10px;">💻 프로젝트</a></li>
<li><a href="#about" style="color: white; text-decoration: none; padding: 10px;">👋 소개</a></li>
</ul>
</nav>
</header>
<main style="max-width: 800px; margin: 0 auto; padding: 20px;">
<article style="background: #f9f9f9; padding: 20px; border-radius: 10px; margin: 20px 0;">
<h2>🚀 오늘의 개발 일기</h2>
<p>오늘은 <strong>JavaScript</strong>로 웹페이지를 만들면서 <em>HTML</em>도 배웠다! 생성형AI로 프로그래밍 날먹+찍먹.</p>
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=200&fit=crop"
alt="프로그래밍하는 모습"
style="width: 100%; max-width: 400px; border-radius: 8px; margin: 10px 0;">
<p>🔗 유용한 학습 자료들:</p>
<ul>
<li><a href="https://yangphago.oopy.io/" target="_blank">양파고 블로그 바로가기</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript" target="_blank">JavaScript 공부하기</a></li>
<li><a href="https://codesandbox.io" target="_blank">CodeSandbox에서 연습하기</a></li>
</ul>
</article>
<article id="projects" style="background: #fff3cd; padding: 20px; border-radius: 10px; margin: 20px 0;">
<h2>💻 내가 배운 프로그래밍 언어들</h2>
<table style="width: 100%; border-collapse: collapse;">
<tr style="background: #007bff; color: white;">
<th style="padding: 10px; border: 1px solid #ddd;">언어</th>
<th style="padding: 10px; border: 1px solid #ddd;">용도</th>
<th style="padding: 10px; border: 1px solid #ddd;">난이도</th>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #ddd;">JavaScript</td>
<td style="padding: 10px; border: 1px solid #ddd;">웹 개발</td>
<td style="padding: 10px; border: 1px solid #ddd;">⭐⭐⭐</td>
</tr>
<tr style="background: #f8f9fa;">
<td style="padding: 10px; border: 1px solid #ddd;">Python</td>
<td style="padding: 10px; border: 1px solid #ddd;">AI & 데이터 분석</td>
<td style="padding: 10px; border: 1px solid #ddd;">⭐⭐</td>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #ddd;">HTML/CSS</td>
<td style="padding: 10px; border: 1px solid #ddd;">웹 디자인</td>
<td style="padding: 10px; border: 1px solid #ddd;">⭐</td>
</tr>
</table>
</article>
<section id="about" style="background: #d1ecf1; padding: 20px; border-radius: 10px; margin: 20px 0;">
<h2>👋 자기소개</h2>
<p>안녕하세요! AI와 프로그래밍에 관심이 많은 고등학생 양파고입니다. Claude와 함께 웹 개발을 배우고 있어요!</p>
<h3>🎯 현재 학습 중인 것들:</h3>
<ul>
<li>🌐 JavaScript로 동적 웹페이지 만들기</li>
<li>🤖 AI 도구 활용한 효율적인 코딩</li>
<li>📱 반응형 웹디자인</li>
</ul>
<form style="margin-top: 15px;">
<label>💬 개발 관련 질문이나 의견을 남겨주세요:</label><br>
<textarea placeholder="JavaScript나 AI에 대해 궁금한 것이 있다면 여기에 써주세요!"
style="width: 100%; height: 80px; margin: 10px 0; padding: 10px; border-radius: 5px; border: 1px solid #ccc;"></textarea><br>
<button type="button"
style="background: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;"
onclick="alert('의견이 등록되었습니다! 함께 공부해요! 🚀')">의견 남기기</button>
</form>
</section>
</main>
<footer style="background: #343a40; color: white; text-align: center; padding: 20px; margin-top: 40px;">
<p>© 2025 양파고의 AI & 프로그래밍 블로그 |
<a href="mailto:yangphago@example.com" style="color: #ffc107;">📧 연락하기</a> |
<a href="https://github.com" target="_blank" style="color: #ffc107;">💻 GitHub</a>
</p>
</footer>
</body>
</html>
HTML
복사
문서 구조 태그
태그 | 용도 | 설명 |
<!DOCTYPE html> | HTML5 문서 선언 | 문서 맨 위에 작성 |
<html> | 전체 문서 | 모든 내용을 감싸는 최상위 태그 |
<head> | 문서 정보 | 제목, CSS, JS 등 메타 정보 (화면에 안 보임) |
<body> | 본문 내용 | 실제 화면에 보이는 모든 내용 |
<main> | 메인 콘텐츠 | 페이지의 주요 내용 |
<section> | 섹션 구분 | 논리적으로 구분되는 영역 |
<article> | 독립적인 글 | 블로그 포스트, 뉴스 기사 등 |
<header> | 헤더 영역 | 페이지/섹션 상단부 |
<footer> | 푸터 영역 | 페이지/섹션 하단부 |
<nav> | 내비게이션 | 메뉴, 링크 모음 |
텍스트 관련 태그
태그 | 용도 | 예시 |
<h1> ~ <h6> | 제목 | h1이 가장 크고 중요함 |
<p> | 문단 | 일반적인 텍스트 블록 |
<span> | 인라인 텍스트 | 텍스트 일부만 스타일링 |
<strong> | 굵게 (중요함) | 의미적으로 중요한 텍스트 |
<em> | 기울임 (강조) | 강조하고 싶은 텍스트 |
<br> | 줄바꿈 | 강제 줄바꿈 (닫는 태그 없음) |
링크와 미디어
태그 | 용도 | 주요 속성 |
<a> | 링크 | href="URL" |
<img> | 이미지 | src="경로", alt="설명" |
<video> | 비디오 | src="경로", controls |
<audio> | 오디오 | src="경로", controls |
목록 태그
태그 | 용도 | 설명 |
<ul> | 순서 없는 목록 | 불릿 포인트 목록 |
<ol> | 순서 있는 목록 | 번호가 매겨진 목록 |
<li> | 목록 항목 | ul, ol 안에서 사용 |
표와 폼
태그 | 용도 | 설명 |
<table> | 표 | 테이블 전체를 감싸는 태그 |
<tr> | 표 행 | 테이블의 가로줄 |
<td> | 표 셀 | 테이블의 일반 셀 |
<th> | 표 헤더 | 테이블의 제목 셀 |
<form> | 폼 | 사용자 입력을 받는 양식 |
<input> | 입력 필드 | 텍스트, 버튼, 체크박스 등 |
<button> | 버튼 | 클릭 가능한 버튼 |
<select> | 드롭다운 | 선택 목록 |
<textarea> | 긴 텍스트 입력 | 여러 줄 텍스트 입력창 |
기억해야 할 우선순위
필수 (반드시 알아야 함)
•
div, p, h1-h6, span
•
a, img, button
•
ul, ol, li
중요 (자주 사용)
•
form, input, textarea
•
table, tr, td
•
header, main, footer
5. JS문법 버전차이
•
ES5(ECMAScript 5)와 ES6(ECMAScript 2015)의 차이란?
◦
ES5: 현재 JS 문법의 기초를 세운 세대.
◦
ES6: 현대 자바스크립트의 시작점. 가독성·생산성을 크게 높인 기능 다수 도입.
[변순선언시]
// ES5
var x = 10;
var y = 20;
console.log(x + y); // 30
// ES6
let x = 10;
const y = 20; // 상수
console.log(x + y); // 30
JavaScript
복사
[함수사용시]
// ES5
var add = function(a, b) {
return a + b;
};
console.log(add(2, 3)); // 5
// ES6
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
JavaScript
복사
[문자열 템플릿 리터럴]
// ES5
var name = "Yangphago";
var msg = "Hello, " + name + "!";
console.log(msg); // Hello, Yangphago!
// ES6
let name = "Yangphago";
let msg = `Hello, ${name}!`;
console.log(msg); // Hello, Yangphago!
JavaScript
복사