🖥️ CSS
1) 역할
- HTML이 뼈대라면 CSS는 옷이다. CSS를 디자인 하기 위해 <background-color>, <border> 등 여러 디자인 태그를 이용할 수 있다.
2) 기본 구조
- 기본적인 문법 구조
선택자 {
속성: 값;
}- 내부에서 CSS 사용
HTML 파일 <head> 태그 안에 <style> 태그를 열어 CSS를 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>🛍️ 나만의 멋진 찜 목록</title>
<!-- CSS 연결 -->
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
margin: 0;
background-color: #f4f7f6; /* 밝은 회색 배경 */
color: #333;
line-height: 1.6;
}
...
</style>
<script src="./js/app.js"></script>
</head>
...
- 외부에서 CSS 연결
별도의 .css 파일을 만들어 <link> 태그로 HTML <head> 안에서 연결
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>🛍️ 나만의 멋진 찜 목록</title>
<!-- CSS 연결 -->
<link rel="stylesheet" href="style.css">
<script src="./js/app.js"></script>
</head>
...
📃 Java Script
1) 역할
- 사용자의 활동과 입력 값에 따라 '동적'으로 동작하는 기능 담당한다.
- newItem 객체를 JSON이라는 형태에 담아, HTTP라는 '규칙'을 통해 백엔드 서버로 '요청(Request)'
2) 기본 구조
- 내부/외부에서 연결 가능(CSS와 연결 방식 동일)
//외부에서 연결
<script src="./js/app.js" defer></script>
//내부에서 연결
<script>
const API_URL = 'https://[YOUR-MOCK-SERVER-ID].mock.pstmn.io/items'; // <<===== 이 부분을 Postman Mock Server URL로 변경하세요!
// API_URL에 placeholder가 포함되어 있으면 '연결 안 됨(Demo 모드)'으로 간주
const isApiConnected = !API_URL.includes('[YOUR-MOCK-SERVER-ID]');
...
</script>
- 변수: 값 저장
- const (상수) : 저장 후 불가면
- let (변수) : 저장 후 가변
- app.js 파일의 맨 윗부분이 모두 변수를 선언하는 부분입니다.
- 함수: 기능 꾸러미
- 함수를 실행시켜 함수에 구현되 기능을 실행
- function 이름(매개변수) { ... } 형태
- app.js에서는 addItemToDOM이나 fetchItems가 함수
- 이벤트 리스너: 행동 감지기
- "사용자가 (무엇을) 하면, (어떤 함수를) 실행해라"는 구조
- 요소.addEventListener('이벤트종류', 함수); 형태
- app.js의 폼(Form) 제출(POST)과 삭제(DELETE) 로직이 대표적인 예시
3) 주요 기능
- 이벤트처리: 찜 목록 추가, 삭제 등 이벤트 감지하여 기능 실행
- 문서 제어: HTML 값 읽고 쓰기, 수정, 삭제 기능
- 서버와 통신: fetch() 가 서버에 데이터를 전송하는 함수
'🔌 SPARTA > Courses' 카테고리의 다른 글
| Java 기초문법(2) (0) | 2026.01.08 |
|---|---|
| Java 기초문법(1) (0) | 2026.01.08 |
| GIT (0) | 2026.01.06 |
| HTTP와 REST API (1) | 2026.01.05 |
| 웹개발의 기초 (0) | 2026.01.02 |