웹프로그래밍 기초 노트 정리

🏷️ HTML (HyperText Markup Language)

HTML은 웹 페이지의 뼈대와 구조를 정의하는 마크업 언어로, 화면에 어떤 정보가 어떤 의미를 가지는지 브라우저와 사용자에게 알려줍니다.

1. HTML의 역할

문서 구조 정의: 제목, 본문, 목록, 표, 이미지 등 웹 페이지를 이루는 요소들을 계층 구조로 배치합니다.
의미(시맨틱) 표현: <header>, <main>, <article>처럼 요소의 역할을 드러내는 태그를 사용해 문서의 의미를 명확히 합니다.
브라우저와의 약속: 브라우저는 HTML을 해석해서 화면에 표시하므로, 올바른 태그 구조가 곧 올바른 화면과 접근성으로 이어집니다.

2. 기본 용어 정리

태그(Tag): <요소명> 또는 <요소명>내용</요소명> 형태로 작성되며 요소의 종류와 역할을 나타냅니다. 예: <h1>, <p>
요소(Element): 시작 태그, 종료 태그, 그리고 그 안의 콘텐츠 전체를 통틀어 요소라고 부릅니다.
속성(Attribute): 태그에 추가 정보를 부여합니다. 예: <a href="https://example.com">링크</a>, <img src="photo.png" alt="프로필 사진">

3. 자주 사용하는 태그

태그	용도	비고 / 사용 팁
`<h1>` ~ `<h6>`	제목(Heading)을 나타내는 태그	페이지당 `<h1>`은 보통 1개만 사용하고, 큰 제목에서 작은 제목 순으로 계층 구조를 만듭니다.
`<p>`	문단(Paragraph)을 표현	텍스트를 문단 단위로 나누어 가독성을 높입니다.
`<a>`	하이퍼링크(Anchor)	`href` 속성으로 이동할 주소를 지정합니다. 예: `<a href="https://example.com">공식 사이트</a>`
`<div>`, `<span>`	레이아웃/스타일링을 위한 컨테이너	`<div>`는 블록 요소, `<span>`은 인라인 요소로 주로 CSS와 함께 사용합니다.

4. 기본 HTML 문서 구조 예시

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>나의 첫 웹페이지</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>웹프로그래밍 기초를 공부하는 중입니다.</p>
  </body>
</html>

🎨 CSS (Cascading Style Sheets)

CSS는 HTML로 구성한 구조에 색상, 여백, 글꼴, 레이아웃을 적용하여 웹 페이지를 시각적으로 꾸며 주는 스타일 시트 언어입니다.

1. CSS의 기본 개념

내용과 디자인의 분리: HTML은 무엇을 보여줄지, CSS는 어떻게 보여줄지를 담당합니다.
“Cascading(계단식)”: 여러 스타일이 동시에 적용될 때 우선순위(Selector, Specificity, 선언 위치 등)에 따라 최종 스타일이 결정되는 방식을 의미합니다.
반응형 디자인: 화면 크기에 따라 레이아웃을 조정하는 미디어 쿼리도 CSS의 중요한 기능입니다.

2. 기본 문법 구조

CSS는 다음과 같은 형식으로 작성합니다.

선택자(selector) {
  속성(property): 값(value);
}

예시:

.card {
  width: 260px;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

3. 선택자의 종류

요소 선택자: p, div, h1 → 문서 안의 해당 태그 전체에 스타일이 적용됩니다.
클래스 선택자: .note-content → 재사용성이 높고 가장 많이 사용되는 방식입니다.
ID 선택자: #header → 문서 내에서 유일한 요소에 사용하며, 우선순위가 높습니다.
자식/후손 선택자: .note-content p, ul > li → 특정 구조 안에 있는 요소에만 스타일을 적용할 수 있습니다.

4. 실무에서 자주 쓰이는 스타일 속성

레이아웃: display, flex, grid, position
박스 모델: margin, padding, border, box-sizing
타이포그래피: font-size, font-weight, line-height
색상/배경: color, background-color, background-image

5. 간단한 카드 레이아웃 예시

.card-list {
  display: flex;
  gap: 16px;
}

.card {
  flex: 1;
  padding: 20px;
  border-radius: 10px;
  background-color: #ffffff;
}

🚀 JavaScript

JavaScript는 웹 페이지에 동작, 이벤트, 상호작용을 추가하는 프로그래밍 언어로, HTML·CSS와 함께 프론트엔드의 핵심을 이룹니다.

1. JavaScript의 주요 역할

DOM 조작: HTML 문서를 객체 모델(DOM)로 바라보고 요소를 선택·추가·삭제·수정합니다. 예: 버튼을 눌렀을 때 문구 변경, 모달 창 열기 등
이벤트 처리: 클릭, 키보드 입력, 스크롤 등 사용자 행동에 반응하여 코드가 실행됩니다.
비동기 통신: fetch API 등을 사용해 서버와 데이터를 주고받으면서 페이지 전체를 새로고침하지 않고도 내용을 갱신할 수 있습니다.

2. 기본 문법 (변수, 함수)

// 변수 선언
const userName = "Student";   // 상수(재할당 불가)
let count = 0;                // 재할당 가능한 변수

// 함수 선언
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet(userName); // "Hello, Student!" 출력

3. DOM 선택과 이벤트 예시

// HTML: <button id="login-btn">로그인</button>

// 1. 요소 선택
const loginButton = document.getElementById("login-btn");

// 2. 클릭 이벤트 등록
loginButton.addEventListener("click", () => {
  alert("로그인 버튼이 클릭되었습니다!");
});

4. 탭 전환 로직(현재 페이지에서 실제로 사용 중)

document.addEventListener("DOMContentLoaded", () => {
  const tabButtons = document.querySelectorAll(".tab-button");
  const conceptSections = document.querySelectorAll(".concept-section");

  const switchTab = (conceptId) => {
    tabButtons.forEach(btn => btn.classList.remove("active"));
    conceptSections.forEach(sec => sec.classList.remove("active"));

    document
      .querySelector(`.tab-button[data-concept="${conceptId}"]`)
      ?.classList.add("active");
    document
      .getElementById(conceptId)
      ?.classList.add("active");
  };

  tabButtons.forEach(button => {
    button.addEventListener("click", () => {
      switchTab(button.getAttribute("data-concept"));
    });
  });

  switchTab("html");
});