📘 HTML 정리
1️⃣ HTML의 역할과 개념
- HTML은 웹 페이지의 구조를 정의하는 마크업 언어
- 웹 브라우저가 HTML을 해석하여 화면에 렌더링한다
- 태그(Tag)와 속성(Attribute)을 통해 의미와 구조를 함께 표현
👉 단순히 “보이게” 만드는 것이 아니라
👉 의미 있는 구조를 설계하는 것이 핵심
2️⃣ HTML 문서의 기본 구조
<!DOCTYPE html>: HTML5 문서 선언html: 문서의 루트head: 메타 정보 (제목, 문자셋 등)body: 사용자에게 보여지는 콘텐츠 영역
👉 HTML은 반드시 정해진 구조를 기반으로 작성해야 한다
3️⃣ 태그와 속성의 이해
- 기본 구조
<태그>내용</태그>
- 빈 태그
br,meta→ 종료 태그 없음
- 속성
속성명="값"형태로 추가 정보 제공
- 중첩 규칙
- 먼저 연 태그는 나중에 닫는다 (스택 구조)
👉 잘못된 중첩은 렌더링 오류의 원인이 된다
4️⃣ HTML 구조와 의미 있는 태그 사용
- 인용문(
"")은q태그를 사용하면 태그 기반 스타일링이 가능하다 - 단순한 표현이 아니라 의미(Semantic)를*고려한 태그 사용이 중요하다
👉 HTML은 “태그 모음”이 아니라
👉 의미를 설계하는 언어
5️⃣ 자주 사용하는 핵심 태그
🔹 제목 태그
h1 ~ h6: 문서의 계층 구조 표현- 단순 크기가 아니라 의미 기반으로 사용
🔹 단락 태그
p: 하나의 문단 표현br: 제한적으로 줄바꿈에 사용
👉 구조적 글쓰기 = HTML의 기본
6️⃣ 기본 태그 활용
- 리스트
ul: 순서 없는 리스트ol: 순서 있는 리스트dl: 설명형 리스트
- 테이블
- 표 형태 데이터 표현 가능
- 이미지 & 링크
img: 이미지 삽입 및 크기 조정a: 링크 연결 (target속성으로 새 창 제어)
7️⃣ 텍스트 표현 (시맨틱 중요 ⭐)
- 굵기
b❌ (단순 스타일)strong⭕ (의미 강조)
- 기울임
-i❌
-em⭕ (의미 강조)
👉 시각이 아니라 의미 중심 태그 사용이 중요
8️⃣ 추가 서식 태그
mark: 강조 (하이라이트)del: 삭제된 내용ins: 추가된 내용sup: 위첨자sub: 아래첨자
👉 문서의 변화와 맥락까지 표현 가능
9️⃣ 인용과 주석
q: 짧은 인용blockquote: 긴 인용
👉 인용도 구조적으로 표현해야 한다
<!-- -->: 주석
- 코드 설명 / 협업 / 디버깅에 필수
👉 좋은 코드는 설명 없이도 읽히지만, 주석은 더 강력한 도구
🔟 엔티티(Entity)와 문자 처리
- HTML에서
<,>,&등은 예약 문자 - 그대로 출력하려면 엔티티 사용
예시:
<→ <>→ >&→ &"→ "
👉 브라우저가 오해하지 않도록 명확하게 표현해야 한다
1️⃣1️⃣ 문자셋과 메타 설정
<meta charset="UTF-8">사용 (필수)- 다양한 언어를 깨짐 없이 표현 가능
👉 기본이지만 가장 중요한 설정 중 하나
📘 CSS 정리
1️⃣ CSS 스타일링 기초
style태그를 활용하여 디자인 적용- 주요 속성
color: 색상background-color: 배경색background-image: 배경 이미지
👉 CSS는 구조 위에 시각적 표현을 입히는 역할
2️⃣ CSS 작성 방법 (중요 ⭐)
- 태그마다 직접 스타일 적용 ❌→ 가독성 ↓ / 유지보수 어려움
- 클래스(
class) / 아이디(id) 분리 ⭕→ 재사용성 ↑ / 유지보수 ↑
👉 스타일은 반드시 분리해서 관리
3️⃣ HTML Layout & 구조 이해
🔹 Block vs Inline
Block: 한 줄 전체 차지Inline: 콘텐츠 크기만 차지
🔹 display 속성
none: 요소 제거block/inline: 타입 변환inline-block: 크기 지정 가능한 inline
🔹 iframe
- 외부 페이지 삽입 (영상, 지도 등)
src,width,height사용
4️⃣ HTML Form
🔹 기본 구조
form: 입력 컨테이너action: 전송 URLmethod- GET : URL 포함
- POST : body 전송
🔹 주요 input
- 텍스트 : text, password, email
- 선택 : radio, checkbox
- 기타 : file, date, range
🔹 유효성 & 속성
- 상태 : readonly, disabled
- 보조 : placeholder, autofocus
- 검증 : required, pattern
👉 사용자 입력 → 서버 전달 흐름 이해
5️⃣ CSS 선택자
🔹 기본 선택자
- ,
h1,.class,#id
🔹 관계 선택자
A B,A > B,A + B,A ~ B
🔹 우선순위
!important> 인라인 > ID > 클래스 > 태그
👉 CSS는 우선순위 싸움
6️⃣ CSS 가상 클래스
🔹 사용자 동작
:hover,:active,:focus
🔹 상태
:checked,:disabled,:valid
🔹 구조
:nth-child(n),:first-child
👉 CSS로 상태와 인터랙션 제어 가능
7️⃣ 레이아웃 (Position & Float)
🔹 Position
static: 기본relative: 자기 기준 이동absolute: 부모 기준 이동fixed: 화면 고정sticky: 스크롤 기반 고정
🔹 Float
float: 좌우 배치clear: 레이아웃 충돌 방지
🔹 Z-index
- 요소 겹침 순서 제어
8️⃣ Grid & 반응형
🔹 Grid
display: gridfr단위로 비율 설정grid-area로 영역 설계
🔹 반응형
@media사용- Mobile-first 전략 중요
9️⃣ 웹폰트 & 애니메이션
🔹 웹폰트
@font-face, Google Fontswoff2권장font-display: swap
🔹 애니메이션
@keyframes사용- 인터랙션 UX 개선
🔟 멀티미디어 & 저장소
🔹 HTML5 Multimedia
video,audio태그로 미디어 재생 가능- 주요 속성
controls: 재생 컨트롤 표시autoplay: 자동 재생 (일반적으로muted필요)loop: 반복 재생
👉 별도의 플러그인 없이
👉 브라우저에서 직접 미디어 처리 가능
###🔹 Web Storage
- 브라우저에 데이터를 Key-Value 형태로 저장
localStorage→ 영구 저장 (브라우저 종료 후에도 유지)sessionStorage→ 세션 동안만 유지 (탭 종료 시 삭제)
👉 클라이언트 측에서
👉 간단한 상태 관리 및 데이터 저장 가능
🔹 JSON 다루기
- Web Storage는 문자열(String)만 저장 가능→ 객체(Object) / 배열(Array)은 그대로 저장 불가
- JSON 변환을 통해 데이터 저장 및 복원
🔸 주요 메서드
JSON.stringify()→ 객체 / 배열 ➝ 문자열 변환 (저장 시)JSON.parse()→ 문자열 ➝ 객체 / 배열 변환 (불러올 때)
👉 Web Storage 사용 시
👉 데이터 변환 과정(JSON)이 필수
🧠 핵심 인사이트
Knowledge Base를 구성하는 것이 핵심
- 단순 문법 암기 ❌
- 개념 + 구조 + 흐름을 연결 ⭕
HTML → CSS → Layout → Interaction → Deployment
👉 이 흐름이 머리에 있어야 진짜 개발자
🚀 한 줄 정리
HTML은 구조, CSS는 표현이며
결국 중요한 것은 연결된 지식 구조(Knowledge Base)이다
# 📘 개발 방법론 & 환경 이해
1️⃣ 개발자의 관점
- 다양한 환경 고려→ 특수문자, 플랫폼 호환성
- 코드에는 개발자의 성향이 드러남→ 가독성 / 구조 / 네이밍 중요
- 파일 구조 설계→ 빠르게 찾고 유지보수 가능한 구조
👉 좋은 코드는 기능보다
👉 읽기 쉬움과 확장성이 먼저
2️⃣ LLM 활용 방법
- 한 번에 큰 단위 요청 ❌
- 컴포넌트 단위 요청 ⭕
👉 작은 단위로 나눌수록
👉 더 정확한 결과 도출 가능
3️⃣ 배포 및 개발 환경 경험
🔹 배포 경험
WinSCP와 dothome을 활용하여 HTML 파일을 서버에 배포
👉 로컬 → 서버 → 실제 서비스 흐름 경험
🔹 서버 접속 & 프로토콜
Putty는 서버 접속용 클라이언트 (SSH 기반)
- SSH : 서버 접속 (암호화 O)
- FTP : 파일 전송 (암호화 X)
- SFTP : SSH 기반 파일 전송 (보안 ↑)
- SCP : SSH 기반 파일 복사 (간단/빠름)
- Telnet : 구식 방식 (사용 거의 X)
👉 Mac 환경에서는 SSH 명령어로 대체 가능
🔹 리눅스 파일 권한
r: 읽기 /w: 쓰기 /x: 실행- 권한 구조
- 사용자 (User)
- 그룹 (Group)
- 기타 (Others)
👉 서버 운영의 기본 개념
4️⃣ 웹 성능 & 확장 개념
🔹 CDN
- 사용자와 가까운 서버에서 콘텐츠 제공→ 응답 속도 향상
🔹 Load Balancing
- 요청을 여러 서버로 분산→ 부하 분산 + 서비스 안정성 확보
👉 단순 웹 페이지를 넘어
👉 서비스 관점에서의 확장성 이해
💡 핵심 인사이트
개발은 코드 작성이 아니라
구조 → 요청 → 배포 → 운영 → 확장까지 이어지는 흐름이다
🚀 한 줄 정리
좋은 개발자는 코드를 넘어서
서비스 전체 구조를 이해하는 사람이다
🍻 한주를 마치며
고등학생 시절 HTML & CSS를 접해본 경험이 있어, 이번 학습 과정은 비교적 수월하게 느껴졌고,
기초 개념이 익숙했던 만큼 단순한 문법 복습을 넘어서, 구조와 의미를 고려한 설계에 더 집중할 수 있었습니다.또한 MLOps 직군을 희망하는 입장에서, 백엔드나 파이프라인뿐만 아니라
프론트엔드 관점에서도 사고할 수 있는 역량이 필요하다고 느꼈고
컴포넌트 기반 설계가 점점 더 중요해지고 있다 생각합니다.
본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.
