1. 프론트엔드란 무엇인가?

프론트엔드와 백엔드의 차이, 웹의 구조

프론트엔드는 사용자가 직접 보고, 상호작용하는 웹의 화면(클라이언트) 부분을 의미합니다. 백엔드는 서버, 데이터베이스 등 보이지 않는 부분을 담당합니다. 프론트엔드 개발자는 HTML, CSS, JavaScript로 웹페이지를 만듭니다.

2. HTML의 기본 구조와 태그

문서 구조, 주요 태그, 예제 코드

HTML은 HyperText Markup Language의 약자로, 웹페이지의 뼈대를 담당합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>나의 첫 웹페이지</title>
</head>
<body>
  <h1>안녕하세요!</h1>
  <p>프론트엔드 개발을 시작합니다.</p>
</body>
</html>
  • 주요 태그: <h1>, <p>, <a>, <img>, <ul>, <li> 등

3. CSS의 역할과 활용

스타일링, 선택자, 레이아웃, 반응형 디자인

CSS(Cascading Style Sheets)는 HTML에 디자인을 입힙니다.

body { font-family: 'Noto Sans KR', sans-serif; }
h1 { color: #007acc; }
  • 선택자, 속성, 박스 모델, Flexbox, Grid, 미디어 쿼리 등

4. JavaScript의 기초

변수, 함수, 이벤트, DOM 조작, 예제 코드

JavaScript는 웹페이지에 동적인 기능을 추가합니다.

document.getElementById('btn').addEventListener('click', function() {
  alert('Hello, Frontend!');
});
  • 변수 선언(let, const), 함수, 이벤트 처리, DOM(Document Object Model) 조작

5. 실전: 간단한 웹페이지 만들기

HTML+CSS+JS 통합 예제, 실전 미니 프로젝트
  • 버튼 클릭 시 색상 변경, 입력값 검증, 모달 창 띄우기 등 실습 예시

6. 결론

프론트엔드의 기초를 익히면, 누구나 직접 웹사이트를 만들 수 있습니다. 공식 문서와 예제를 참고하며 실습해보세요.