Taeyoung Kim
English

Engineering

웹 개발 기초 핵심 내용 요약

웹 개발 기초 핵심 내용 요약 학습 내용을 정리한 백필 노트입니다.

이 글은 2025년 학습 기록을 블로그 형식으로 정리한 백필 노트입니다.

Chapter 1. 과정 소개 및 웹 개발 이해하기

  • 핵심 목표: 교육 과정의 전체적인 목표와 흐름을 파악하고, 웹 개발의 기본 개념에 대한 큰 그림을 이해합니다.
  • 주요 개념:
    • 인터넷과 웹: 인터넷은 전 세계 컴퓨터를 연결하는 거대한 통신망(도로망)이며, 웹(WWW)은 인터넷 위에서 작동하는 가장 보편적인 서비스(자동차, 내비게이션 서비스)입니다.
    • 클라이언트와 서버: 사용자의 컴퓨터(브라우저)인 클라이언트가 정보를 **요청(Request)**하면, 웹사이트 정보를 저장한 서버가 해당 정보를 찾아 **응답(Response)**하는 방식으로 작동합니다.
    • 프론트엔드와 백엔드:
      • 프론트엔드: 사용자의 눈에 직접 보이고 상호작용하는 부분 (식당의 인테리어, 메뉴판)을 개발합니다. (HTML, CSS, JavaScript, React 등)
      • 백엔드: 데이터 저장, 사용자 인증 등 눈에 보이지 않는 서버 뒷단의 기능을 개발합니다. (식당의 주방, 창고 관리) (NodeJS, MongoDB 등)
    • 웹의 3대 핵심 기술:
      • HTML: 웹페이지의 구조와 뼈대를 만듭니다. (집의 골조)
      • CSS: 웹페이지의 디자인과 스타일을 담당합니다. (인테리어)
      • JavaScript: 웹페이지에 동적인 기능을 추가하여 상호작용을 가능하게 합니다. (전등 스위치, 자동문)
  • 개발 환경: WSL(Windows Subsystem for Linux)과 VSCode(코드 에디터)를 사용할 예정이며, 설치는 다음 시간에 진행됩니다.

Chapter 2. WSL 설치 및 기본 명령어

  • 핵심 목표: Windows 운영체제 안에 Linux 환경을 구축해주는 WSL을 설치하고, 터미널(CLI) 환경에서 기본적인 Linux 명령어를 익힙니다.
  • WSL 설치:
    1. '명령 프롬프트' 또는 'PowerShell'을 관리자 권한으로 실행합니다.
    2. wsl --install 명령어를 입력하고 실행합니다.
    3. 설치 완료 후 컴퓨터를 재시작합니다.
    4. 재시작 후 나타나는 Ubuntu 창에서 사용자 이름과 비밀번호를 설정합니다.
  • 주요 명령어:
    • pwd: 현재 작업 중인 디렉터리(폴더)의 경로를 확인합니다.
    • ls: 현재 디렉터리의 파일 및 폴더 목록을 봅니다.
    • cd [경로]: 지정한 경로로 디렉터리를 이동합니다. (cd ~: 홈 디렉터리로 이동, cd ..: 상위 디렉터리로 이동)
    • mkdir [폴더명]: 새로운 폴더를 생성합니다.
    • touch [파일명]: 비어있는 새 파일을 생성합니다.
    • rm [파일명]: 파일을 삭제합니다. (휴지통 없이 바로 삭제되므로 주의)
    • rmdir [폴더명]: 비어있는 폴더를 삭제합니다.
    • rm -r [폴더명]: 내용물이 있는 폴더를 포함하여 모두 삭제합니다. (매우 주의)

Chapter 3. VSCode 설정하기

  • 핵심 목표: 개발자들의 필수 코드 에디터인 VSCode를 설치하고, WSL과 연동하여 통합 개발 환경을 구축합니다.
  • VSCode 설치:
    1. 공식 웹사이트(code.visualstudio.com)에서 Windows용 설치 파일을 다운로드합니다.
    2. 설치 과정 중 'PATH에 추가(추가 작업 선택)' 옵션을 반드시 체크합니다.
  • 핵심 설정 및 확장 프로그램:
    • WSL 연동: VSCode 실행 후, 'Remote - WSL' 확장 프로그램을 설치합니다. 이후 WSL 터미널에서 code . 명령어를 입력하면 해당 폴더가 VSCode에서 열리며 WSL 환경과 연동됩니다.
    • 한국어 설정: 'Korean Language Pack for Visual Studio Code'를 설치합니다.
    • 유용한 확장 프로그램:
      • Live Server: HTML/CSS 변경 사항을 브라우저에 실시간으로 반영해줍니다.
      • Prettier - Code formatter: 코드 형식을 자동으로 예쁘게 정리해줍니다.

Chapter 4. HTML 기초 I: 문서 구조

  • 핵심 목표: 웹페이지의 뼈대를 구성하는 HTML의 기본 문서 구조를 이해하고, 제목, 문단, 목록 등 핵심 태그 사용법을 익힙니다.
  • 기본 구조: 모든 HTML 문서는 다음과 같은 기본 틀을 가집니다.
    • <!DOCTYPE html>: 이 문서가 HTML5 문서임을 선언합니다.
    • <html>: 전체 HTML 내용을 감쌉니다.
    • <head>: 페이지 제목, 문자 인코딩(<meta charset="UTF-8">) 등 보이지 않는 설정 정보를 담습니다.
    • <body>: 사용자에게 실제로 보이는 모든 콘텐츠(글, 이미지 등)를 담습니다.
  • 주요 태그:
    • <h1> ~ <h6>: 제목을 나타내며, 숫자가 클수록 크기가 작아집니다.
    • <p>: 문단(Paragraph)을 만듭니다.
    • <ul> (Unordered List): 순서 없는 목록(글머리 기호)을 만듭니다.
    • <ol> (Ordered List): 순서 있는 목록(숫자)을 만듭니다.
    • <li> (List Item): 각 목록의 항목을 나타냅니다. (<ul>이나 <ol> 안에 사용)
    • <br>: 강제 줄 바꿈을 합니다.
    • <hr>: 수평선을 그어 내용을 구분합니다.

Chapter 5. HTML 기초 II: 링크와 이미지

  • 핵심 목표: 웹페이지에 다른 페이지로 이동하는 링크(하이퍼링크)를 추가하고, 이미지를 삽입하여 콘텐츠를 풍부하게 만듭니다.
  • 주요 개념:
    • 경로(Path): 파일의 위치를 나타내는 주소. 현재 파일을 기준으로 하는 상대 경로와 최상위 위치부터 시작하는 절대 경로가 있습니다.
  • 링크 (<a> 태그):
    • &lt;a href="이동할 주소">표시될 텍스트&lt;/a> 형식으로 사용합니다.
    • href: 이동할 웹사이트 주소(URL)나 파일 경로를 지정합니다.
    • target="_blank": 링크를 새 탭에서 열도록 합니다.
  • 이미지 (<img> 태그):
    • &lt;img src="이미지 경로" alt="대체 텍스트"> 형식으로 사용하며 닫는 태그가 없습니다.
    • src: 이미지 파일의 경로(URL 또는 파일 경로)를 지정합니다.
    • alt: 이미지를 표시할 수 없을 때 대신 나타날 텍스트입니다. (웹 접근성을 위해 중요)
    • width="값": 이미지의 너비를 조절합니다.
  • 활용법:
    • 이미지를 &lt;a> 태그로 감싸면 클릭 가능한 이미지 링크를 만들 수 있습니다.
    • 페이지 내 특정 위치로 이동하려면, 목표 지점 요소에 id="이름"을 부여하고 링크는 &lt;a href="#이름">으로 설정합니다.

Chapter 6. CSS 기초 I: 텍스트 스타일링

  • 핵심 목표: 웹페이지의 디자인을 담당하는 CSS의 기본 문법을 익히고, HTML에 연결하여 글자의 색상, 크기, 모양 등 텍스트 스타일을 꾸밉니다.
  • CSS 연결: HTML 파일의 &lt;head> 태그 안에 &lt;link rel="stylesheet" href="styles.css"> 코드를 추가하여 외부 CSS 파일을 연결합니다.
  • 기본 문법: 선택자 &#123; 속성: 값; &#125;
    • 선택자: 스타일을 적용할 HTML 요소를 지정합니다. (예: h1, p, .special-class)
  • 주요 텍스트 관련 속성:
    • color: 글자 색상
    • font-size: 글자 크기 (예: 16px)
    • font-family: 글꼴 지정 (예: sans-serif)
    • font-weight: 글자 두께 (예: bold)
    • text-align: 텍스트 정렬 (예: center, left, right)
    • font-style: 글자 스타일 (예: italic 기울임꼴)
    • text-decoration: 밑줄(underline), 취소선(line-through) 등
    • line-height: 줄 간격
    • letter-spacing: 글자 사이 간격
    • text-transform: 대소문자 변환 (uppercase, lowercase)
    • text-shadow: 텍스트 그림자 효과

Chapter 7. CSS 기초 II: 박스 모델

  • 핵심 목표: 모든 HTML 요소를 사각형 상자로 보는 '박스 모델'의 개념을 이해하고, 이를 구성하는 속성들을 통해 요소의 크기와 배치, 간격을 조절합니다.
  • 박스 모델의 4가지 구성 요소 (안쪽부터):
    1. Content: 텍스트나 이미지 등 실제 내용이 들어가는 영역.
    2. Padding: 내용(Content)과 테두리(Border) 사이의 안쪽 여백.
    3. Border: 패딩을 감싸는 테두리.
    4. Margin: 테두리 바깥의 외부 여백. 다른 요소와의 간격을 결정합니다.
  • 주요 속성:
    • width, height: Content 영역의 너비와 높이.
    • padding: 안쪽 여백을 설정. (예: padding: 10px; 또는 padding-top: 5px;)
    • border: 테두리의 두께, 스타일(solid, dotted), 색상을 설정. (예: border: 1px solid black;)
    • margin: 바깥쪽 여백을 설정. (예: margin: 10px; 또는 margin-bottom: 20px;)
    • border-radius: 모서리를 둥글게 만듭니다.
  • 핵심 개념:
    • box-sizing: border-box;: 요소의 width와 height를 계산할 때 padding과 border를 포함시켜 레이아웃 계산을 직관적으로 만듭니다. (모든 요소에 적용하는 것을 권장)
    • 마진 상쇄 (Margin Collapsing): 인접한 두 블록 요소의 상하 마진이 겹칠 경우, 두 마진이 더해지지 않고 둘 중 더 큰 값으로 합쳐지는 현상입니다.