테스트 글

이 포스트는 텍스트 계층, 색상 대비, 그리고 주요 컴포넌트의 디자인을 확인하기 위한 용도입니다.

1. 타이포그래피 계층 (Headings)

각 제목 태그가 본문과 명확히 구분되는지, 상하 여백(Margin)이 적절한지 확인하세요.

H3 제목: 본문 내 주요 소주제

이 크기의 텍스트는 본문에서 가장 자주 사용되는 구분선 역할을 합니다.

H4 제목: 세부 섹션 디자인

이 영역은 주로 리스트나 단락의 하위 소제목으로 활용됩니다.

2. 본문 및 텍스트 스타일 (Text & Accents)

비개발자 독자를 위한 친절한 설명 글의 가독성을 테스트합니다.

• 강조 텍스트: 핵심 키워드는 이렇게 볼드 처리되어 눈에 띄어야 합니다.
• 인라인 코드: 설정값이나 파일명은 wp-config.php처럼 별도 스타일이 적용되는지 보세요.
• 링크 스타일: [이것은 텍스트 링크입니다] 클릭 전/후 색상 변화를 확인하세요.

3. 리스트 및 인용구 (List & Quote)

가이드성 글에서 가장 중요한 가독성 요소입니다.

순서 없는 리스트 (UL):

• 도메인 연결 설정 (네임칩)
• 클라우드웨이즈 호스팅 최적화
• Lightning Stack 기반 성능 점검

인용구 스타일 (Blockquote):

“복잡한 기술을 비개발자의 언어로 번역하는 것이 NonDEV AI의 가치입니다.” — CowboyStudio 팀

4. 버튼 및 인터랙션 (Buttons)

브랜드 색상(#0052FF)이 적용된 버튼이 마우스 호버 시 어떻게 변하는지 확인하세요.

Test Button

5. 표(Table) 디자인

정보를 구조화할 때 사용하는 표 스타일입니다.

항목	설정값	상태
메인 도메인	https://www.google.com/search?q=nondevai.com	연결됨
SSL 인증서	Let’s Encrypt	활성
캐시 플러그인	Breeze	최적화 완료

6. 이미지 및 캡션 (Media)

이미지가 있을 때와 없을 때(검정색 히어로 배경)를 비교해 보세요.

7. 코드 편집기 및 스니펫 (Code & Preformatted)

/* NonDEV AI code test */
.gb-container-hero {
    background-color: #000000 !important; /* 특성 이미지 없을 때 검정색 */
    color: #ffffff;
    padding: 100px 20px;
    border-bottom: 3px solid #0052FF; /* 메인 블루 포인트 */
}

.nondev-button {
    background-color: #0052FF;
    transition: 0.3s ease-in-out;
}