WordPress 스타일 테스트 — 콘텐츠 패턴 B·C-1·C-3 검증
이 포스트는 블로그 콘텐츠 스타일 패턴 3종(B 분석 해설체, C-1 실무 멘토형, C-3 하이브리드형)의 UI 요소가 WordPress에서 정상 렌더링되는지 검증하는 테스트 페이지입니다.
패턴 B: 분석 해설체 요소
아래는 분석 박스입니다. 경제·금융 카테고리에서 맥락 해설 시 사용됩니다.
단순히 역 하나 생기는 얘기가 아니다. 교통 인프라가 생기면 유동인구가 늘고, 유동인구가 늘면 상권이 형성되고, 상권이 형성되면 직주근접 수요가 생긴다. 파주시가 역세권에 상업 3만㎡를 배치한 것은 이 흐름을 의도적으로 설계한 것이다.
아래는 비교 카드입니다. 수치 비교 시 사용됩니다.
GTX 이전 (경의선 환승)
~60분
운정 → 서울역
GTX-A 개통 후
19분
운정중앙 → 서울역
“운정의 자족도시 기능 강화가 목표” — 파주시 도시계획과장
패턴 C-1: 실무 멘토형 요소
아래는 삽질 경험 박스입니다. 개발 튜토리얼에서 실수 사례를 공유할 때 사용됩니다.
처음에 [x for x in range(10) if x % 2 == 0 else x*2]라고 짰다가 SyntaxError 먹었다. else는 if 앞에 붙는 삼항 연산자 자리에 써야 한다: [x if x % 2 == 0 else x*2 for x in range(10)]. if-else 위치가 조건 필터링이냐, 값 결정이냐에 따라 달라진다는 거, 처음엔 꽤 헷갈린다.
패턴 C-3: 하이브리드형 요소
아래는 실전 팁 박스입니다. 코드 관련 실무 조언을 담을 때 사용됩니다.
실무에서 CSV 컬럼 정제할 때 이 패턴을 정말 많이 쓴다. [int(v) if v.strip().isdigit() else 0 for v in row] 같은 형태로, 값이 숫자면 변환하고 아니면 0으로 채우는 식이다.
아래는 정보 카드입니다. 지역경제 카테고리에서 핵심 정보를 요약할 때 사용됩니다.
이번 개발계획 핵심만 뽑으면
- 상업시설 3만㎡ — 역 주변 카페·식당·쇼핑 들어설 공간
- 공공시설 5천㎡ — 도서관·주민센터 류 시설 예정
- 주거 2천 세대 — 역세권 신규 입주 물량
- 서울 이동 시간 19분 (GTX-A 기준)
아래는 주민 반응 박스입니다.
“서울 출퇴근 시간 줄면 진짜 좋죠. 근데 공사 기간 몇 년인지, 소음 대책은 있는지 그게 먼저 나왔으면 했어요.” — 운정 주민 커뮤니티 반응
코드 블록 테스트
python — 기본형
# [표현식 for 변수 in 이터러블 if 조건(선택)]
doubles = [x * 2 for x in range(5)] # 기본
evens = [x for x in range(10) if x % 2 == 0] # 조건 필터
coords = [(x,y) for x in range(3) for y in range(3)] # 중첩아래는 정리 테이블입니다.
| 패턴 | 문법 | 주요 용도 |
|---|---|---|
| 기본형 | [expr for x in iter] | 리스트 변환·생성 |
| 조건 필터 | [expr for x in iter if cond] | 조건부 원소 추출 |
| 값 변환 | [a if c else b for x in iter] | 값에 따라 다른 결과 |
| 중첩 | [expr for x in i1 for y in i2] | 좌표·행렬·평탄화 |
검증 항목 체크리스트:
- 분석 박스 (초록 좌측 바 + 배경) — 패턴 B
- 비교 카드 (수치 강조 flex 레이아웃) — 패턴 B
- 인용문 (좌측 바 + 이탤릭) — 패턴 B
- 삽질 경험 박스 (보라 배경 + 라벨) — 패턴 C-1
- 실전 팁 박스 (초록 좌측 바 + 라벨) — 패턴 C-3
- 정보 카드 (주황 배경 + 화살표 리스트) — 패턴 C
- 주민 반응 박스 (회색 배경 + 라벨) — 패턴 C
- 코드 블록 (다크 테마 + 파일명 헤더) — 공통
- Output 블록 (다크 + 좌측 바) — 공통
- 정리 테이블 (줄무늬) — 패턴 C-3