코딩/웹디자인

AI를 이용한 티스토리 웹디자인 공부 - [DAY 3] HTML → Tistory 연결

data-pantry 2026. 4. 23. 13:04

Day 3 — HTML → Tistory 연결

"이론 코드가 아닌, 실제 운영 코드를 해부하는 날입니다"

🧠 10초 핵심 요약

  • 치환자: 서버가 실제 데이터로 '미리 채워서 완성하는 자리'입니다.
  • 처리 시점: 브라우저가 파일을 받기 '전'에 서버에서 이미 완성됩니다.
  • 오늘의 목표: 수천 줄의 코드 속에서 '레이아웃 블록'을 찾아 주석을 다는 것입니다.

1. 치환자는 "미리 완성된 값"이 들어갈 자리입니다

가장 많이 하는 오해: 치환자는 브라우저에서 변하는 '빈칸'이 아닙니다. 서버가 내용을 꽉 채워 보낸 완성품입니다.

서버에서 처리됨 (전송 전)

<h1>data-pantry 님의 블로그</h1>

👉 서버가 이 자리에 내 블로그 제목을 미리 채워넣습니다.

브라우저가 받는 최종 결과

<h1>내 멋진 블로그</h1>

👉 브라우저는 치환자를 전혀 알지 못합니다. 이미 완성된 텍스트만 받을 뿐이죠.

⚠️ 실전 팁: 자바스크립트(JS)로 data-pantry 님의 블로그을 직접 건드리려 해도 소용없습니다. 브라우저가 소스를 읽을 때는 이미 그 자리가 실제 값으로 교체된 후이기 때문입니다.

2. skin.html을 읽는 '레이아웃 블록' 전략

수천 줄의 코드를 한 줄씩 읽지 마세요. 큰 덩어리부터 먼저 파악하는 게 핵심입니다.

1
Body 내부 찾기
모든 화면 요소는 <body> 태그 안에 있습니다.
2
큰 레이아웃 블록 식별
단순 태그명보다 div#wrap, div#container 같은 큰 외곽 박스를 먼저 확인하세요.
<div id="container">
  <header>...</header>
</div>
3
반복 블록(s_article_rep)
이 안의 내용은 JavaScript의 for문처럼 포스트 개수만큼 반복해서 출력됩니다.
4
주석으로 경계 표시
나만의 메모를 달아두면 나중에 수정할 위치를 바로 찾을 수 있습니다.

3. 오늘의 실습: 스킨 구조 해부하기

단순히 찾는 것을 넘어, 각 영역이 어디서 시작해서 어디서 끝나는지 범위를 파악해보세요.

확인 실습 미션 (Level 1~3)
☐ [Lv.1] <header> 구역의 시작과 끝 태그를 찾아 주석을 달았는가?
☐ [Lv.2] 반복 출력 블록(s_article_rep)의 전체 범위를 식별했는가?
☐ [Lv.3] 치환자의 역할(제목 / 본문 / 사이드바 등)을 정확히 구분했는가?
☐ [Lv.3] 사이드바가 #container 내부에 있는지, 바깥에 있는지 확인했는가?

🏁 1~3일차 학습 흐름 완성

Day 3: skin.html (치환자 포함 소스)
▼ 서버에서 치환자 미리 채우기 (SSR) ▼
데이터가 채워진 완성 HTML 전달
▼ 브라우저 해석 및 화면 구성 (DOM) ▼
CSS / JS 적용 및 최종 화면 출력