HTML 기초
- 역할: 웹 페이지의 뼈대를 구성하는 마크업 언어
- 특징:
- 계층형(트리 구조) 문서 구조
- 요소를 태그(<태그>내용</태그>)로 감싸서 의미 부여
- 파싱 → DOM 생성 → 렌더링 순으로 화면 출력
기본 구조 (Boilerplate)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>페이지 제목</title>
</head>
<body>
<!-- 콘텐츠 영역 -->
</body>
</html>
주요 메타정보
- <meta charset="utf-8">: 문자 인코딩 지정
- <title>: 탭에 표시되는 페이지 제목
- SEO: <head> 내 키워드, 설명, Open Graph 태그 등
주요 HTML 요소
범주 태그 예시 설명
| 텍스트 |
<h1>~<h6>, <p>, <strong>, <em> |
제목, 단락, 강조, 이탤릭체 |
| 레이아웃 |
<div>, <span> |
블록(<div>), 인라인(<span>) 컨테이너 |
| 링크/미디어 |
<a href="...">, <img src="..."> |
하이퍼링크, 이미지 삽입 |
| 목록 |
<ul>, <ol>, <li> |
순서(없는) 목록과 항목 |
| 시맨틱 섹션 |
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer> |
의미 기반 레이아웃 태그 |
| 테이블 |
<table>, <tr>, <td> |
표 형태 데이터 (대체로 Flex/Grid 사용 권장) |
| 폼 |
<form>, <input>, <button>, <select>, <textarea> |
사용자 입력 수집 및 전송 |
시맨틱 태그
- <header>: 문서 또는 섹션의 머리말
- <nav>: 내비게이션 메뉴
- <main>: 주요 콘텐츠
- <section>: 구분된 영역(단락)
- <article>: 독립적 콘텐츠(뉴스, 블로그 글 등)
- <aside>: 보조 콘텐츠(사이드바, 광고 등)
- <footer>: 문서 또는 섹션의 바닥글
CSS 기초
- 역할: HTML 요소에 스타일(색상, 폰트, 레이아웃) 적용
- 연결 방식:
- 외부 CSS 파일 (<link rel="stylesheet" href="style.css">)
- 내부 <style> 태그
- 인라인 style="..." (권장하지 않음)
- 우선순위: 인라인 > ID 선택자 > 클래스 > 태그 > 전체()
- Cascading: 여러 규칙이 겹칠 때 우선순위와 선언 순서에 따라 적용
CSS 선택자(Selectors)
- 기본 선택자: , 태그, .class, #id
- 계층 선택자:
- 자식 선택자: .parent > .child {}
- 후손 선택자: .ancestor .descendant {}
- 가상 클래스 & 요소:
- :hover, :first-child, :last-child, :nth-child(n)
- ::before, ::after
박스 모델(Box Model)
- 구성: content → padding → border → margin
- box-sizing: border-box; 설정 시 width, height에 padding, border 포함
레이아웃 배치
Flexbox
- 1차원(행 또는 열) 정렬에 최적화
- 주요 속성: display: flex;, justify-content, align-items, flex-direction
Grid
- 2차원(행 + 열) 레이아웃
- 주요 속성: display: grid;, grid-template-columns, grid-template-rows, gap
포지셔닝(Position)
- static, relative, absolute, fixed, sticky
- 디테일 위치 조정: top, right, bottom, left
반응형 웹 디자인
@media screen and (max-width: 600px) {
/* 모바일 레이아웃 */
}
- 유동형 단위: %, vh, vw, rem, em
프레임워크
- Tailwind CSS
- 유틸리티 클래스 기반, 필요한 클래스만 빌드
- 커스터마이징 용이, 경량
- Bootstrap
- 컴포넌트 풍부, 빠른 구축 가능
- 상대적으로 무거움