Do it! HTML + CSS 웹 표준의 정석 - 겨울 방학 맞이 기초 언어 스터디(6)

#지난주에 이어서...

CSS로 화면을 설계하고,
자바스크립트로 동작을 붙였다면,

6주차는 드디어 웹 문서를 ‘직접 조작하는 단계’로 들어섰다.

# 자바스크립트와 객체

자바스크립트가 왜 객체 기반 언어인지 이해하는 장이다.

• 객체의 개념

• 자바스크립트의 내장 객체

• 브라우저와 관련된 객체

* 이제 코드가 단순한 명령어 모음이 아니라
속성과 기능을 묶은 구조(객체)로 보이기 시작했다.
웹 브라우저 자체도 하나의 거대한 객체 시스템이라는 점이 인상적이었다.

# 문서 객체 모델(DOM) 다루기

드디어 DOM 등장.

• 문서 객체 모델 이해하기

• DOM 요소 접근하기

• 내용 수정하기

• 이벤트 처리하기

• 노드 추가·삭제

• class 속성 추가·제거

* 여기서부터 진짜 “웹을 조작한다”는 느낌이 들었다.

HTML은 구조,
CSS는 디자인,
JavaScript는 동작이라고 배웠지만

DOM을 배우고 나니
이 세 가지가 완전히 연결되는 지점이 보였다.

• 버튼을 클릭하면

• 특정 요소를 찾아

• 내용을 바꾸고

• 클래스를 추가해 스타일을 변경하는 흐름

이제야 비로소
“프론트엔드의 기본 구조”가 머릿속에서 연결됐다.

# 6주차를 마치며 – 완주!

처음엔 단순히
“HTML부터 다시 정리해보자”는 마음으로 시작한 스터디였는데,

6주를 마치고 보니 웹이 어떻게 만들어지고, 어떻게 동작하는지 한 사이클을 다 돌았다는 느낌이다.

6주후 내가 얻은 것

• 웹의 구조 이해 (HTML)

• 화면 설계 능력 (CSS)

• 로직과 상호작용 (JavaScript)

• 문서 조작 능력 (DOM)

이제는 단순히 코드를 따라 치는 게 아니라

“왜 이렇게 동작하는지”를 설명할 수 있는 단계까지 온 것 같다.

정말 긴 여정이었지만, 매주 기록을 남기며 공부한 덕분에 흐름이 훨씬 또렷하게 정리됐다.