웹 기초 정리 — HTML · CSS3 · JavaScript 한 장 요약

2026년 7월 31일 · 약 3분

Course Notes

백엔드 과정이어도 화면과 API를 잇는 웹 기초는 빠져선 안 됩니다.
강의 PDF 3종을 레포에 짧은 Markdown 요약으로 옮겨 두었습니다.

왜 지금 웹 기초인가

Spring Boot로 REST API를 만들기 전에 알아두면 좋은 것들입니다.

나중에 나오는 React · Spring Security 로그인 연동, JSP/EL, REST API 연동 수업이 훨씬 수월해집니다.

GitHub / Obsidian에서 바로 볼 수 있는 상대 링크 문서입니다.

원본 슬라이드:

PDF는 용량이 커서 레포에는 넣지 않았고, 핵심만 MD로 압축해 두었습니다.

HTML  = 뼈대 (무엇인지를 마크업)
CSS   = 옷   (어떻게 보일지)
JS    = 근육 (무엇이 일어날지)

브라우저 콘솔 또는 Node에서:

const items = ["HTML", "CSS", "JS"];
const lines = items.map((x, i) => `${i + 1}. ${x}`);
console.log(lines.join("\n"));

그다음 HTML 한 파일에 버튼 하나 두고:

<button id="btn">클릭</button>
<script>
  document.getElementById("btn").addEventListener("click", () => {
    alert("웹 기초 연결 완료");
  });
</script>

이 두 개가 되면 “구조 + 동작” 루프는 통과한 겁니다.

문서 허브도 같이 다듬는 중입니다.

백엔드로 가기 전 웹 3종 세트를 짧게라도 한 바퀴 돌아 두면, 이후 Spring·React 수업이 훨씬 잘 붙습니다.