Engineering

HTML, CSS 첫걸음: 웹 개발 기초

HTML, CSS 첫걸음: 웹 개발 기초 학습 내용을 정리한 백필 노트입니다.

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

1. 개요: 왜 HTML, CSS를 배워야 하는가?

웹을 구성하는 HTML, CSS, JavaScript의 학습은 웹과 IT 전반의 과거, 현재, 미래를 이해하는 데 큰 도움을 줍니다. 특히 기획, 디자인, 기술 영업 등 개발과 밀접하게 협업하는 직군에게는 프로덕트를 구조적으로 보는 능력을 키워주며, 이는 많은 기업에서 비전공자에게 개발 경험을 요구하는 이유이기도 합니다.

2. 웹의 3요소: HTML, CSS, JavaScript

| 언어 | 역할 | 핵심 | | --- | --- | --- | | HTML | 웹의 구조 담당 | 페이지에 제목, 문단, 이미지 등 콘텐츠의 구조와 의미를 부여하는 정적 언어. 튼튼한 구조(Semantic)를 만드는 데 집중해야 합니다. | | CSS | 웹의 시각적 표현 담당 | HTML 요소들의 색상, 크기, 레이아웃 등 표시 방법을 지정하여 꾸며주는 정적 언어. 예쁘게 만드는 것에 집중합니다. | | JavaScript | 웹의 동적 처리 담당 | 콘텐츠를 바꾸고 움직이는 등 페이지를 동적으로 만들어주는 프로그래밍 언어. 동적 처리에 집중해야 효율적입니다. |

중요: 각 언어는 고유한 역할이 있습니다. 효율적인 개발, 유지보수, 확장성을 위해 각 언어의 역할을 명확히 구분하고 코드를 최적화하는 것이 중요합니다.

3. 웹 기본 지식

가. 웹 표준 (Web Standard)

정의: W3C(World Wide Web Consortium)의 권고안을 바탕으로 '웹에서 사용되는 표준 기술이나 규칙'을 의미합니다.
필요성: 다양한 웹 브라우저(크롬, 엣지, 사파리 등)가 이 표준을 기준으로 만들어지지만, 해석의 차이로 인해 다르게 동작할 수 있습니다. 웹 표준을 준수하면 이런 차이를 최소화할 수 있습니다.
예시: ActiveX, Flash 등은 비표준 기술입니다.

나. 크로스 브라우징 (Cross Browsing)

정의: 모든 브라우저에서 동일한 사용자 경험(동일한 화면과 동작)을 제공하기 위한 기술 및 방법론입니다.
과거: 주로 비표준적인 인터넷 익스플로러(IE)에서의 호환성 문제를 해결하는 것을 의미하기도 했습니다.

다. 웹 접근성 (Web Accessibility)

정의: 고령자, 장애인 등 신체적, 환경적 제약이 있는 사용자를 포함한 모든 사용자가 웹 콘텐츠에 동등하게 접근할 수 있도록 제작하는 방법입니다.
창시자의 말: "웹의 힘은 그것의 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다." - 팀 버너스 리
실천 방법: 영상 자막 제공, 키보드만으로 사이트 이용 가능, 이미지에 대체 텍스트(alt text) 제공 등.
정보 통신 보조기기: 한손 키보드, 특수 마우스(조이스틱, SmartNav), 소리 알리미 등 장애인이 웹에 접근하기 위해 사용하는 기기들을 고려해야 합니다.
품질 인증: 과학기술정보통신부가 지정한 기관을 통해 웹 접근성 품질인증 마크를 받을 수 있습니다. (유료)

4. 웹 개발 환경 설정

가. 웹 개발 에디터

웹 개발은 특정 툴에 종속되지 않으며, 메모장으로도 가능하지만 생산성을 위해 좋은 에디터를 사용하는 것을 추천합니다.

| 에디터 | 특징 | | --- | --- | | VS Code | Microsoft 제작, 가볍고 확장 기능이 많아 인기가 높음. (무료) | | WebStorm | JetBrains 제작, 강력한 통합 개발 환경(IDE)으로 별도 설정 없이 바로 사용 가능. (유료, 학생 무료) |

나. VS Code 설치 및 설정

설치: 공식 홈페이지에서 Stable 버전을 다운로드하여 설치합니다.
추천 확장 기능 (Extensions):
- Korean Language Pack: 메뉴 한글화
- Live Server: 코드 변경 시 브라우저 자동 새로고침
- Auto Rename Tag: 여는 태그 수정 시 닫는 태그 자동 수정
- 기타 추천: Terminal, Turbo Console log, Better Comments, GitLens, Thunder Client 등
알아두면 좋은 단축키:

| Windows | macOS | 설명 | | --- | --- | --- | | Ctrl + B | Cmd + B | 사이드바 열기/닫기 | | Ctrl + P | Cmd + P | 빠른 열기 (파일 탐색) | | Ctrl + Shift + P | Cmd + Shift + P | 모든 명령 표시 | | Alt + Up/Down | Alt + Up/Down | 줄 위/아래로 이동 | | Shift+Alt+Up/Down | Shift+Alt+Up/Down | 위에/아래 줄 복사 | | Ctrl + \ | Cmd + \ | 편집기 분할 |

5. 웹에서 사용하는 이미지

| 구분 | 장점 | 단점 | | --- | --- | --- | | 비트맵 (Bitmap/Raster) | 정교하고 다양한 색상을 자연스럽게 표현 | 확대/축소 시 품질 저하 (계단 현상) | | 벡터 (Vector) | 확대/축소에서 자유롭고 용량 변화가 없음 | 정교한 이미지(사진 등) 표현에 한계 |

JPG: 압축률이 높아 사진에 주로 사용 (손실 압축)
PNG: 투명도를 지원하여 로고 등에 사용 (비손실 압축, W3C 권장)
GIF: 여러 이미지를 합쳐 애니메이션(움짤) 제작 가능 (비손실 압축)
WEBP: JPG, PNG, GIF를 대체할 수 있는 Google 개발 포맷 (손실/비손실, 애니메이션, 투명도 모두 지원)
SVG: 마크업 기반 벡터 포맷으로, CSS와 JS로 제어 가능

6. 알아두면 좋은 지식

가. 특수 문자 용어

| 기호 | 영어 (발음) | 한글 | | --- | --- | --- | | ` | Backtick | 백틱 | | ~ | Tilde | 물결표시 | | ! | Exclamation mark | 느낌표 | | @ | At sign | 골뱅이 | | # | Sharp | 샵 | | $ | Dollar sign | 달러 | | _ | Underscore | 밑줄 | | " | Quotation mark | 큰따옴표 | | ' | Apostrophe | 작은따옴표 | | : | Colon | 콜론 | | ; | Semicolon | 세미콜론 | | / | Slash | 슬래시 | | \ | Backslash | 백슬래시 | | () | Parenthesis | 소괄호 | | {} | Brace | 중괄호 | | [] | Bracket | 대괄호 | | <> | Angle Bracket | 꺽쇠괄호 |

나. 오픈소스 라이선스

오픈소스는 무료라는 의미가 아니며, 상업적 이용 시 라이선스를 반드시 확인해야 합니다. 비교적 자유로운 라이선스로는 Apache, MIT, BSD 등이 있습니다.

7. HTML 기초

가. 기본 문법

태그(Tag): <태그이름>콘텐츠</태그이름> 형태로, 콘텐츠의 의미와 범위를 정의.
속성(Attribute)과 값(Value): <태그이름 속성="값"> 형태로, 태그의 기능을 확장.
부모와 자식 요소: 태그 안에 다른 태그가 포함될 때, 감싸는 태그가 부모, 포함된 태그가 자식이 됨.
빈 태그(Empty Tag): 닫는 태그 없이 <태그이름> 또는 <태그이름 /> 형태로 사용. (예: <img>, <meta>)
주석(Comment): `` 형태로 작성하며, 코드에 영향을 주지 않음.

나. HTML 문서의 기본 구조

HTML

<!DOCTYPE **html**> <html>
  <head>
    </head>
  <body>
    </body>
</html>

다. `<head>` 태그의 주요 요소

<title>: 브라우저 탭에 표시될 페이지 제목 정의
<meta>: 문자 인코딩(charset="UTF-8"), 페이지 설명, 제작자 등 정보 제공
<link>: 외부 CSS 파일 연결 (<link rel="stylesheet" href="경로">)
<style>: HTML 내부에 CSS 스타일 직접 작성
<script>: 외부 JS 파일 연결 또는 직접 작성

라. `<body>` 태그의 주요 요소

<div>: 의미 없이 영역을 묶거나 나눌 때 사용 (Division)
<img>: 이미지 삽입. src(경로)와 alt(대체 텍스트) 속성은 필수.
웹 표준 검사: W3C validator를 통해 HTML 문법 오류를 확인할 수 있습니다.

8. CSS 기초

가. 기본 문법

CSS

/* 선택자 { 속성: 값; } */
div {
  color: red; /* 글자색은 빨강 */
  font-size: 20px; /* 글자 크기는 20px */
}

선택자(Selector): 스타일을 적용할 HTML 요소를 선택.
속성(Property)과 값(Value): 적용할 스타일의 종류와 내용을 지정.

나. CSS 선언 방식

인라인 스타일: HTML 태그에 style 속성으로 직접 작성. (<div style="color: red;">)
내장 스타일: HTML <head> 안의 <style> 태그 안에 작성.
외부 파일: 별도의 .css 파일을 만들어 <link> 태그로 HTML과 연결. (가장 권장)
@import: CSS 파일 안에서 다른 CSS 파일을 불러오는 방식.

다. 기본 선택자

태그 선택자: h1, p, div 등 태그 이름으로 선택.
클래스 선택자: HTML에 class="이름" 속성을 부여하고, CSS에서 .이름으로 선택. (가장 많이 사용)

라. 기본 속성

width, height: 요소의 가로, 세로 너비.
font-size: 글자 크기.
margin: 요소의 바깥 여백.
padding: 요소의 안쪽 여백.
color: 글자 색상.
background-color: 요소의 배경 색상.

9. 실습 예제: GitHub 헤더 만들기

가. HTML (`index.html`)

HTML

<!DOCTYPE **html**>
<html>
<head>
  <meta charset="UTF-8">
  <title>GitHub</title>
  <link rel="stylesheet" href="./css/main.css">
</head>
<body>
  <div class="header">
    <div class="container clearfix">
      <div class="container-left clearfix">
        <div class="logo">
          <img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="GitHub Logo">
        </div>
        <div class="menu clearfix">
          <div class="menu-item">Personal</div>
          <div class="menu-item">Open Source</div>
          <div class="menu-item">Business</div>
          <div class="menu-item">Explore</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

나. CSS (`/css/main.css`)

CSS

body {
  margin: 0;
  padding: 0;
}
.header {
  background-color: white;
  border-bottom: 1px solid lightgray;
}
.container {
  width: 980px;
  margin: auto;
}
.container-left {
  padding-top: 20px;
  padding-bottom: 20px;
}
.logo {
  margin-right: 5px;
  float: left;
}
.logo img {
  display: block;
}
.menu {
  float: left;
}
.menu-item {
  font-size: 16px;
  padding: 8px 10px;
  float: left;
  line-height: 1;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

HTML, CSS 첫걸음: 웹 개발 기초

1. 개요: 왜 HTML, CSS를 배워야 하는가?

2. 웹의 3요소: HTML, CSS, JavaScript

3. 웹 기본 지식

가. 웹 표준 (Web Standard)

나. 크로스 브라우징 (Cross Browsing)

다. 웹 접근성 (Web Accessibility)

4. 웹 개발 환경 설정

가. 웹 개발 에디터

나. VS Code 설치 및 설정

5. 웹에서 사용하는 이미지

6. 알아두면 좋은 지식

가. 특수 문자 용어

나. 오픈소스 라이선스

7. HTML 기초

가. 기본 문법

나. HTML 문서의 기본 구조

다. &lt;head> 태그의 주요 요소

라. &lt;body> 태그의 주요 요소

8. CSS 기초

가. 기본 문법

나. CSS 선언 방식

다. 기본 선택자

라. 기본 속성

9. 실습 예제: GitHub 헤더 만들기

가. HTML (index.html)

나. CSS (/css/main.css)

다. `<head>` 태그의 주요 요소

라. `<body>` 태그의 주요 요소

가. HTML (`index.html`)

나. CSS (`/css/main.css`)