HTML, CSS, JavaScript는 웹 페이지를 구성하는 3가지 핵심 기술이라고 할 수 있다.
건물로 비유하자면
뼈대(HTML)
인테리어(CSS)
기능(JavaScript)
로 나뉠 수 있다.
HTML이란?
HTML(HyperText Markup Language)은 웹 페이지의 구조와 내용을 정의하는 언어.
<h1>,<p>,<input>과 같은 태그를 사용해 제목, 단락, 입력창의 정보를 브라우저에게 전달.
HTML은 태그(Tag) 를 이용해 문서 구조를 표현하는 언어(=Markup language)에 가까움.
모든 HTML 문서는 Tag를 기반으로 구조를 구성함.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>🛍️ 나만의 멋진 찜 목록</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/app.js"></script>
</head>
<body>
<header>
<h1>나만의 찜 목록</h1>
</header>
<main>
<section class="add-item-section card">
<form id="item-form"> ... </form>
</section>
<section class="wishlist-section card">
<ul id="item-list"> ... </ul>
</section>
</main>
</body>
</html>가장 중요한 구성 요소: Form 태그
= 사용자가 입력한 데이터를 서버로 보내는 역할 수행
<!DOCTYPE html> : 문서 형식이 HTML임을 명시
<head> : 문서의 내용, 제목, 인코딩 방식
<script src="./js/app.js"> : JavaScript를 어디서 가져올건지
<body>: 실제 화면에서 보이는 부분들이 하위에 구성
HTML의 핵심 구성 요소
태그(Tag)
- 문서의 특정 부분을 마크업하는데 사용되는 기본적인 단위 꺾쇠 괄호(<>)로 감싸인 HTML 명령어.
- <h1>은 제목, <input>은 입력창을 나타냄.
속성(Attribute)
- 태그에 대한 세부 설정을 뜻하며 <input> 태그 내에 이름="값” 형태로 작성되어 구체적인 설정 값을 부여합니다.
- type="text” : 타입이 문자열
- id="username" : 고유한 id가 username
- placeholder="아이디 입력" : 입력창 안내문
요소(Element)
태그와 속성이 합쳐져 실제 웹페이지를 구성하는 완전한 요소로
<input>..</input> 전체를 말합니다.
CSS
CSS(Cascading Style Sheets)는 HTML로 만든 뼈대에 디자인을 입히는 언어입니다. 색상, 레이아웃, 크기 등을 조정합니다.
핵심 개념 3가지
선택자(Selector)
누구를 꾸밀지 정함
h1 { color: blue; }박스 모델(Box Model)
모든 요소는 상자처럼 생겼음.
┌─────────────────────┐
│ Margin (바깥) │
│ ┌────────────────┐ │
│ │ Border (테두리) │ │
│ │ ┌────────────┐ │ │
│ │ │ Padding │ │ │
│ │ │ (내부여백) │ │ │
│ │ │ [Content] │ │ │
│ │ └────────────┘ │ │
│ └────────────────┘ │
└─────────────────────┘Display 속성
요소를 어떻게 배치할지 정함.
- block: 한 줄 통째로 차지 (예: div)
- inline: 필요한 만큼만 차지 (예: span)
- flex: 현대적인 레이아웃
JavaScript
JavaScript는 사용자의 행동(클릭, 입력)에 반응해서 웹 페이지를 동적으로 변경하는 언어.
핵심 기능 3가지
1. 이벤트 리스너 - 사용자 행동 감지
// 버튼이 클릭되면 함수 실행
button.addEventListener('click', function() {
alert('클릭됐어요!');
});
// 입력창에 글자를 입력하면 실시간 반응
input.addEventListener('input', function() {
console.log(input.value);
});2. DOM 제어 - 화면 변경하기
// HTML 값 읽기
let username = document.getElementById('username').value;
// HTML 생성하기
const newItem = document.createElement('li');
newItem.textContent = '새 항목';
// HTML에 추가하기
list.appendChild(newItem);
// HTML 삭제하기
element.remove();3. 서버와 통신 - 데이터 주고받기
// 데이터를 서버로 보내기
fetch('https://api.example.com/items', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: '새 상품', price: 10000 })
});세 기술이 함께 동작하는 과정
- HTML: 사용자가 입력할 수 있는 폼 생성
- CSS: 폼을 꾸밈
- JavaScript:
- 사용자가 버튼을 클릭하면 감지. (이벤트 리스너)
- 입력값을 읽어서 JSON 객체로 만듦. (DOM 읽기)
- 서버로 데이터를 보냄.(fetch)
- 서버의 응답을 받아 화면을 업데이트.(DOM 쓰기)
백엔드 개발자가 꼭 알아야 할 것
- HTML: <form> 태그의 name 속성이 데이터 전송의 핵심
- CSS: 레이아웃 문제가 생겼을 때 개발자 도구로 원인을 진단할 수 있어야 함
- JavaScript: fetch()로 서버와 통신하는 기본 원리 이해
'Camp > 웹 개발 기초' 카테고리의 다른 글
| [TIL] REST API란? Postman으로 Mock Server 만들기 (0) | 2026.06.04 |
|---|---|
| [TIL]서버와 HTTP (0) | 2026.06.03 |
| [TIL]WEB이란 무엇인가 (0) | 2026.06.01 |
| [TIL]프론트엔드와 백엔드 (0) | 2026.05.28 |