1주차 한 줄 결론
HTML로 웹페이지 구조(문서/텍스트/목록/링크/폼/시맨틱) 를 잡았고, 마지막 날에는 CSS를 처음 적용하면서 스타일을 붙이는 3가지 방법을 정리했습니다.
이번 주 진행 범위
- 범위: HTML 1~4일차 + CSS 5일차
- 교재: 「코딩 자율학습 HTML+CSS+자바스크립트」(김기수 지음, 길벗)
일일 학습일지 인덱스
이번 주 핵심 개념 TOP 5
TOP 1) HTML 문서 기본 골격
- <!doctype html>부터 head/body 구조
- 기본 메타 설정(문서 인코딩/뷰포트 등)
TOP 2) 자주 쓰는 텍스트/구조 태그 정리
- 제목(h1~h6), 문단(p), 줄바꿈(br)
- 인용(blockquote, q), 강조(strong, em), 첨자(sub, sup)
TOP 3) 목록과 링크/이미지
- 목록: ul/ol/li, 정의형 목록 dl/dt/dd
- 링크: a(href, target 등), 이미지: img(src, alt)
- 경로 표기(./, ../)
TOP 4) 폼(form)과 input 핵심 속성
- form을 중심으로 input, label, button 등 기본 구조 이해
- input에서 자주 같이 등장하는 속성(placeholder, maxlength, checked, readonly, disabled)
TOP 5) 시맨틱 태그 + CSS 첫 적용
- 시맨틱 태그(header/nav/section/article/aside/footer/main)로 “영역 의미”를 주는 이유를 이해
- CSS는 문법(선택자/선언부)과 적용 방식 3가지(내부/외부/인라인)
한 주간의 학습을 통해 배우거나 느낀 점
이번 주는 HTML로 웹페이지 뼈대를 만들고, CSS로 “보이는 방식”을 붙이기 시작했어요. 처음엔 태그를 외우는 느낌이 강했는데, 정리해보니 결국 핵심은 구조를 의미 있게 나누는 습관이더라고요. div로만 뭉치기보다 header / nav / main /footer처럼 역할을 나눠두면, 나중에 다시 볼 때도 흐름이 한 번에 잡히고 유지보수도 훨씬 편해집니다.
CSS도 마찬가지였어요. 내부/외부/인라인으로 적용 방식이 나뉘는 걸 직접 보면서, “어떻게 쓰는지”보다 상황에 맞게 어떤 방식을 선택할지가 더 중요하다는 걸 느꼈습니다. 특히 정리하고 관리하기에는 외부 스타일 시트가 가장 깔끔하다는 점도요.
참고로 저는 실습 화면을 그대로 캡처하기보다는, 코드를 글로 옮겨 적고 태그/속성/값을 색으로 구분해 기록하고 있어요. 처음 보는 분들도 구조가 한눈에 들어오고, 저도 나중에 빠르게 복기할 수 있더라고요. 다음 주도 이런 방식으로 배운 내용을 간결하게 정리해서 꾸준히 쌓아보겠습니다.
“코딩자율학습단 19기 | 1주차 총정리 – HTML 기초 + CSS 첫 적용”에 대한 2개의 생각