2주차 한 줄 결론
CSS에서 “선택자 → 배치(레이아웃) → 효과(애니메이션/변형) → 반응형(뷰포트/미디어 쿼리)” 흐름으로 웹 화면을 설계하는 감각을 잡았고, 마지막에는 자바스크립트의 기본 연결 방식과 오류 확인 루틴까지 시작했습니다.
이번 주 진행 범위
- 범위: CSS 6~9일차 + JS 10일차
- 교재: 「코딩 자율학습 HTML + CSS + 자바스크립트」(김기수 지음, 길벗)
일일 학습일지 인덱스
이번 주 핵심 개념 TOP 5
TOP 1)CSS 선택자 심화
- 관계 선택자(하위/자식/형제)로 적용 범위 좁히기 정리
- 속성 선택자, 가상 클래스/가상 요소 조합으로 대상 정확히 지정하기 정리
TOP 2)CSS 스타일 속성 기본기
- border·background 등 자주 쓰는 속성/값 조합 체계화 정리
- 오타(속성명/값/세미콜론/중괄호)로 미적용되는 경우 대비한 문법 체크 습관 정리
TOP 3)레이아웃 배치
- position(relative/absolute/fixed 등)과 top/right/bottom/left 기반 위치 제어 정리
- float 적용 흐름과 clear로 레이아웃 정리하는 방식 정리
TOP 4)효과 구현
- transition으로 시간/지연/타이밍 함수 기반 전환 효과 구성 정리
- animation(keyframes) 반복/방향/fill-mode 제어와 transform(이동/회전/확대, origin) 정리
TOP 5)반응형 + JS 시작
- viewport(meta viewport)로 모바일 렌더링 기준 설정 정리
- @media(min/max-width)로 화면 구간별 스타일 분기와 Grid 배치/정렬(place-*, areas 등) 정리
- 내부/외부 스크립트 연결과 콘솔 오류(파일/줄번호) 기반 확인 루틴 정리
한 주간의 학습을 통해 배우거나 느낀 점
이번 주는 CSS를 “예쁘게 꾸미는 도구”로만 보던 단계에서 벗어나, 화면을 설계하는 언어로 다루기 시작한 주였습니다. 선택자에서 정확히 대상을 찍는 능력이 기본이고, 그 위에 position/float로 배치를 만들고, transition/animation/transform으로 움직임을 부여하고, 마지막에 미디어 쿼리로 기기별 대응까지 이어지는 흐름이 한 번에 연결됐습니다. 특히 반응형 파트는 문법 자체보다 “조건을 어떻게 읽고, 어떤 구간에서 무엇을 바꿀지”를 정리하는 방식이 중요하다는 걸느꼈습니다. 그리고 10일차에 자바스크립트를 시작하면서, 코드를 못 짜더라도 최소한 “어디서 실행하고, 오류를 어떻게 확인해서 고칠지” 루틴을 먼저 세워두는 게 학습 시간을 크게 줄인다는 점을 체감했습니다.
“코딩자율학습단 19기 | 2주차 총정리 – CSS 선택자 심화 + 레이아웃/효과 + 반응형 + JS 시작”에 대한 2개의 생각