0407 웹 개발 기초 복습 (1/N): HTML과 CSS의 핵심
✅ 1. HTML (HyperText Markup Language)
- HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. 프로그래밍 언어처럼 로직을 가지는 것이 아니라, 텍스트, 이미지, 링크 등의 콘텐츠가 어떤 의미를 가지는지(제목, 단락, 목록 등)를 태그(Tag)를 통해 표시(Mark up)합니다.
➕ 1-1. 기본 구조와 주요 태그
-
모든 HTML 문서는 다음과 같은 기본 구조를 가집니다.
<!DOCTYPE html> <!-- 이 문서가 HTML5 문서임을 선언 --> <html> <head> <!-- 메타데이터: 문서의 정보 (제목, 인코딩, 외부 파일 연결 등) --> <meta charset="UTF-8"> <title>Page Title</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 콘텐츠: 브라우저 화면에 실제로 표시될 내용 --> <header> <h1>Main Heading</h1> </header> <main> <p>This is a paragraph.</p> </main> <footer> <p>Copyright © 2026</p> </footer> </body> </html> -
주요 태그:
- 블록 레벨 요소 (Block-level Elements): 항상 새로운 줄에서 시작하고, 사용 가능한 전체 너비를 차지합니다. (e.g.,
<div>,<h1>~<h6>,<p>,<ul>,<li>,<form>) - 인라인 요소 (Inline Elements): 새로운 줄에서 시작하지 않고, 콘텐츠의 너비만큼만 차지합니다. (e.g.,
<span>,<a>,<img>,<input>,<strong>)
- 블록 레벨 요소 (Block-level Elements): 항상 새로운 줄에서 시작하고, 사용 가능한 전체 너비를 차지합니다. (e.g.,
➕ 1-2. 시맨틱 태그 (Semantic Tags)
- 시맨틱(Semantic)이란 "의미론적인"이라는 뜻으로, 시맨틱 태그는
<div>나<span>처럼 의미 없이 구역을 나누는 태그와 달리, 태그 자체가 콘텐츠의 의미를 명확하게 설명해주는 태그입니다. - 왜 사용하는가?:
- 검색 엔진 최적화 (SEO): 검색 엔진이 웹 페이지의 구조를 더 잘 이해하여 검색 결과의 정확도를 높입니다.
- 웹 접근성: 스크린 리더와 같은 보조 기술이 사용자에게 페이지 구조를 더 명확하게 안내할 수 있습니다.
- 가독성 및 유지보수: 개발자가 코드의 구조를 한눈에 파악하기 쉬워집니다.
- 주요 시맨틱 태그:
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer>
✅ 2. CSS (Cascading Style Sheets)
- CSS는 HTML로 작성된 문서의 표현(디자인, 레이아웃)을 정의하는 스타일 시트 언어입니다. 콘텐츠와 디자인을 분리하여 유지보수성을 높입니다.
➕ 2-1. CSS 선택자 (Selectors)
- CSS 규칙을 어떤 HTML 요소에 적용할지를 선택하는 패턴입니다.
| 선택자 종류 | 예시 | 설명 |
|---|---|---|
| 타입 선택자 | p { ... } | 모든 <p> 태그에 적용 |
| 클래스 선택자 | .highlight { ... } | class="highlight" 속성을 가진 모든 요소에 적용 (가장 많이 사용) |
| ID 선택자 | #main-title { ... } | id="main-title" 속성을 가진 유일한 요소에 적용 |
| 전체 선택자 | * { ... } | 모든 요소에 적용 (주로 초기화 시 사용) |
| 자손 선택자 | div p { ... } | <div> 요소의 모든 하위 <p> 요소에 적용 |
| 자식 선택자 | ul > li { ... } | <ul> 요소의 바로 아래 자식인 <li> 요소에만 적용 |
| 가상 클래스 | a:hover { ... } | 마우스를 올렸을 때와 같이 특정 상태에 있는 요소를 선택 |
➕ 2-2. 박스 모델 (Box Model)
-
CSS에서 모든 HTML 요소는 사각형의 "박스(Box)"로 간주됩니다. 이 박스는 4개의 영역으로 구성됩니다.
- Content: 콘텐츠(텍스트, 이미지 등)가 표시되는 실제 영역.
- Padding: 콘텐츠와 테두리(Border) 사이의 안쪽 여백.
- Border: 테두리.
- Margin: 테두리 바깥쪽의 여백. 다른 요소와의 간격을 만듭니다.
-
box-sizing: border-box;: 요소의width와height를 설정할 때, Padding과 Border를 포함하여 크기를 계산하도록 만드는 매우 중요한 속성입니다. 이를 사용하면 레이아웃을 예측하기가 훨씬 쉬워집니다.
➕ 2-3. Flexbox (Flexible Box Layout)
-
Flexbox는 1차원(가로 또는 세로) 레이아웃을 쉽고 유연하게 구성하기 위한 현대적인 CSS 레이아웃 모델입니다.
-
핵심 개념:
- Container와 Items: Flexbox는 부모 요소인 Flex Container와 그 자식 요소들인 Flex Items로 구성됩니다.
display: flex;: 레이아웃을 만들고 싶은 부모 요소(Container)에 이 속성을 적용하는 것으로 시작합니다.- 주요 Container 속성:
flex-direction: 아이템이 정렬될 주 축의 방향을 결정 (row,column).justify-content: 주 축 방향으로 아이템들을 정렬 (flex-start,center,space-between).align-items: 교차 축 방향으로 아이템들을 정렬 (flex-start,center,stretch).
📌 요약
- HTML은 태그를 사용하여 웹 페이지의 구조와 의미를 정의합니다. 시맨틱 태그를 사용하면 SEO와 웹 접근성을 향상시킬 수 있습니다.
- CSS는 선택자를 통해 HTML 요소에 스타일을 적용합니다. 클래스 선택자가 가장 보편적으로 사용됩니다.
- CSS의 박스 모델은 모든 요소를 Content, Padding, Border, Margin으로 구성된 사각형으로 간주하며,
box-sizing: border-box;는 레이아웃 설계를 용이하게 합니다. - Flexbox는
display: flex;를 통해 1차원 레이아웃을 매우 유연하고 간단하게 구성할 수 있는 현대적인 CSS 레이아웃 시스템입니다.
