0Pricing
PHP Academy · 강의

PHP 반복문으로 동적 HTML 만들기

템플릿 안에서 PHP 배열로 HTML 표와 목록을 생성합니다.

PHP 반복문으로 동적 HTML 만들기은(는) CoddyKit의 무료 PHP Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 PHP Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. PHP Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

PHP 기반 HTML 생성

PHP의 가장 강력한 용도 중 하나는 데이터 배열에서 목록, 표, 드롭다운, 탐색 메뉴 등을 동적으로 생성하는 것입니다.

목록 생성

PHP 배열에서 HTML 순서 없는 목록을 렌더링합니다:

<?php
$fruits = ['Apple', 'Banana', 'Cherry', 'Durian'];
?>

<ul>
<?php foreach ($fruits as $fruit): ?>
    <li><?= htmlspecialchars($fruit) ?></li>
<?php endforeach; ?>
</ul>

HTML 표 생성

2차원 배열에서 동적 표를 만듭니다:

<?php
$users = [
    ['Alice', 'alice@test.com', 'Admin'],
    ['Bob',   'bob@test.com',   'User'],
];
?>
<table>
    <thead><tr><th>Name</th><th>Email</th><th>Role</th></tr></thead>
    <tbody>
    <?php foreach ($users as [$name, $email, $role]): ?>
        <tr>
            <td><?= htmlspecialchars($name) ?></td>
            <td><?= htmlspecialchars($email) ?></td>
            <td><?= htmlspecialchars($role) ?></td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>

선택 드롭다운 생성

배열에서 HTML select 요소를 만듭니다:

<?php
$countries = ['TR' => 'Turkey', 'US' => 'United States', 'DE' => 'Germany'];
$selected  = 'TR';
?>

<select name="country">
<?php foreach ($countries as $code => $name): ?>
    <option value="<?= htmlspecialchars($code) ?>"
        <?= $code === $selected ? 'selected' : '' ?>>
        <?= htmlspecialchars($name) ?>
    </option>
<?php endforeach; ?>
</select>

행에 줄무늬 스타일 적용

가독성을 위해 행에 번갈아 가며 스타일을 적용합니다:

<?php
$rows = range(1, 8);
?>

<table>
<?php foreach ($rows as $i => $row): ?>
    <tr class="<?= $i % 2 === 0 ? 'even' : 'odd' ?>">
        <td>Row <?= $row ?></td>
    </tr>
<?php endforeach; ?>
</table>

조건부 CSS 클래스

데이터 조건에 따라 CSS 클래스를 적용합니다:

<?php
$tasks = [
    ['title' => 'Write tests',  'done' => true],
    ['title' => 'Deploy app',   'done' => false],
];
?>

<ul class="task-list">
<?php foreach ($tasks as $task): ?>
    <li class="task <?= $task['done'] ? 'done' : 'pending' ?>">
        <?= htmlspecialchars($task['title']) ?>
    </li>
<?php endforeach; ?>
</ul>

페이지 매김 링크

for 반복문으로 페이지 매김 UI를 생성합니다:

<?php
$totalPages  = 10;
$currentPage = 3;
?>

<nav class="pagination">
<?php for ($p = 1; $p <= $totalPages; $p++): ?>
    <a href="?page=<?= $p ?>"
       class="<?= $p === $currentPage ? 'active' : '' ?>">
        <?= $p ?>
    </a>
<?php endfor; ?>
</nav>

중첩 HTML을 위한 중첩 반복문

중첩 반복문으로 중첩 HTML 구조를 생성합니다:

<?php
$menu = [
    ['Home', '/', []],
    ['Products', '/products', ['Widgets', 'Gadgets']],
    ['About', '/about', []],
];
?>

<ul>
<?php foreach ($menu as [$label, $href, $sub]): ?>
    <li><a href="<?= $href ?>"><?= htmlspecialchars($label) ?></a>
    <?php if ($sub): ?>
        <ul>
        <?php foreach ($sub as $child): ?>
            <li><?= htmlspecialchars($child) ?></li>
        <?php endforeach; ?>
        </ul>
    <?php endif; ?>
    </li>
<?php endforeach; ?>
</ul>

빈 상태 처리

템플릿에서 빈 배열인 경우를 항상 처리합니다:

<?php
$posts = [];
?>

<?php if (!empty($posts)): ?>
    <ul>
    <?php foreach ($posts as $post): ?>
        <li><?= htmlspecialchars($post['title']) ?></li>
    <?php endforeach; ?>
    </ul>
<?php else: ?>
    <p class="empty-state">No posts found. <a href="/new">Create one!</a></p>
<?php endif; ?>

데이터 속성 생성

HTML 데이터 속성을 통해 JavaScript에 데이터를 전달합니다:

<?php
$products = [
    ['id' => 1, 'name' => 'Widget', 'price' => 9.99],
    ['id' => 2, 'name' => 'Gadget', 'price' => 24.99],
];
?>

<div class="product-grid">
<?php foreach ($products as $p): ?>
    <div class="product-card"
         data-id="<?= $p['id'] ?>"
         data-price="<?= $p['price'] ?>">
        <?= htmlspecialchars($p['name']) ?>
    </div>
<?php endforeach; ?>
</div>

JavaScript를 위한 PHP와 JSON

json_encode를 사용하여 PHP 배열을 안전하게 JavaScript에 전달합니다:

<?php
$config = [
    'apiUrl'  => '/api/v1',
    'userId'  => $user['id'] ?? 0,
    'locale'  => 'en-US',
];
?>

<script>
const APP_CONFIG = <?= json_encode($config, JSON_HEX_TAG | JSON_HEX_APOS) ?>;
console.log(APP_CONFIG.apiUrl);
</script>

빠른 확인

XSS를 방지하려면 HTML 안에서 사용자가 제어하는 문자열을 출력할 때 어떤 함수를 사용해야 합니까?

복습: 반복문을 사용한 동적 HTML

핵심 기법:

  • 템플릿에서 대체 foreach/for 콜론 구문을 사용합니다
  • 항상 htmlspecialchars()로 출력을 이스케이프합니다
  • 속성에서 삼항 연산자로 조건부 CSS 클래스를 지정합니다
  • 반복문 주위에 if/else를 사용하여 빈 배열을 처리합니다
  • json_encode()를 통해 PHP 데이터를 JavaScript에 전달합니다

자주 묻는 질문

“PHP 반복문으로 동적 HTML 만들기” 강의는 무료인가요?

네 — “PHP 반복문으로 동적 HTML 만들기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 PHP Academy 강의 전체를 잠금 해제할 수 있습니다. PHP Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“PHP 반복문으로 동적 HTML 만들기”에서 뭘 배우나요?

템플릿 안에서 PHP 배열로 HTML 표와 목록을 생성합니다. 브라우저에서 직접 실행하는 실습 코드로 PHP Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

PHP Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 PHP Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“PHP 반복문으로 동적 HTML 만들기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 PHP Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 PHP Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. PHP 태그 및 삽입 문법
  2. PHP 반복문으로 동적 HTML 만들기
  3. 파일 포함 및 불러오기
  4. 템플릿 패턴: 로직과 뷰 분리
← PHP Academy(으)로 돌아가기