code | php

PHP 입문 – table 응용

By연욱 김 2025년 09월 04일2025년 09월 19일

Raw code – without css

PHP

// table 안에도 table을 담을 수 있다. 이번에는 어떤 년도의 달력을 만들어보자.

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">  

</head>

<body>

<form method="post">

    숫자 입력: <input type="number" name="num">

    <input type="submit" value="계산하기">

</form>

<?php

// php 기본 설정.  html로 문서 타입을 설정해주고,

// charset = UTF-8 은 유니버셜 캐릭터 셋 8비트의 줄임말로, 한글을 비롯한 다양한 유니코드 문자를 깨짐 없이 사용하려면 인코딩이 필수이다.

// form method는 POST 방식을 이용함. 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식으로, POST 방식은 GET 방식보다 보안성이 높다. 추후 입력값 확인시 보안 기능 수행한다.

function altshow_calander($date){

    // 어떤 달의 캘린더를 보여주는 달력, 다만 이전 포스트에 이용했던 캘린더 출력 함수와의 차이점은, 캘린더를 <td>를 통해  어떤 테이블에 사용 가능한 하나의 데이터로 만들었다.

    $now = $date;

    $nowdate = strtotime($now);

    //echo date("t", $nowdate) ;

    // echo date("w",$nowdate);

    $start = date("w",$nowdate);

    $end = date("t", $nowdate) ;

// echo $date;

    echo "<td>" ;

    echo '<table border = "1">';

    echo '<tr>';

    echo '<td> 일 </td>';

    echo '<td> 월 </td>';

    echo '<td> 화 </td>';

    echo '<td> 수 </td>';

    echo '<td> 목 </td>';

    echo '<td> 금 </td>';

    echo '<td> 토 </td>';

    echo '</tr>';

    echo "<tr>" ;

    for($i=0;$i<$start;$i++) {

        echo "<td> </td>" ;

    }

    $col = $start ;

    for($i=1;$i<=$end;$i++){

        echo "<td> $i </td>" ;

        $col++ ;

        if ($col % 7 === 0){

            echo "</tr> <tr>" ;

        }

    }

    while ($col%7 !==0 ){

        echo "<td></td>" ;

        $col++;

    }

    echo "</tr> </table> </td>" ;

}

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // 입력값 가져오기

    $num = (int) $_POST["num"];

    echo "<table>" ;

    echo "<tr height='300px' valign='top'>" ;

    for($i=1;$i<=6;$i++){

        $dateString = $num . "-" .  str_pad($i, 2, "0", STR_PAD_LEFT) . "-01";

        altshow_calander($dateString) ;

    }

    echo "</tr>" ;

    echo "<tr height='300px' valign='top'>" ;

    for($i=7;$i<=12;$i++){

        $dateString = $num . "-" . str_pad($i, 2, "0", STR_PAD_LEFT) . "-01";

        altshow_calander($dateString) ;

    }

    echo "</tr>" ;

    echo "</table>";

    // 결과 출력

    echo "입력한 값: " . $num . "<br>" ;

}

?>

</body>

</html>

// table 안에도 table을 담을 수 있다. 이번에는 어떤 년도의 달력을 만들어보자.

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">  

</head>

<body>

<form method="post">

    숫자 입력: <input type="number" name="num">

    <input type="submit" value="계산하기">

</form>

<?php

// php 기본 설정.  html로 문서 타입을 설정해주고,

// charset = UTF-8 은 유니버셜 캐릭터 셋 8비트의 줄임말로, 한글을 비롯한 다양한 유니코드 문자를 깨짐 없이 사용하려면 인코딩이 필수이다.

// form method는 POST 방식을 이용함. 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식으로, POST 방식은 GET 방식보다 보안성이 높다. 추후 입력값 확인시 보안 기능 수행한다.

function altshow_calander($date){

    // 어떤 달의 캘린더를 보여주는 달력, 다만 이전 포스트에 이용했던 캘린더 출력 함수와의 차이점은, 캘린더를 <td>를 통해  어떤 테이블에 사용 가능한 하나의 데이터로 만들었다.

    $now = $date;

    $nowdate = strtotime($now);

    //echo date("t", $nowdate) ;

    // echo date("w",$nowdate);

    $start = date("w",$nowdate);

    $end = date("t", $nowdate) ;

// echo $date;

    echo "<td>" ;

    echo '<table border = "1">';

    echo '<tr>';

    echo '<td> 일 </td>';

    echo '<td> 월 </td>';

    echo '<td> 화 </td>';

    echo '<td> 수 </td>';

    echo '<td> 목 </td>';

    echo '<td> 금 </td>';

    echo '<td> 토 </td>';

    echo '</tr>';

    echo "<tr>" ;

    for($i=0;$i<$start;$i++) {

        echo "<td> </td>" ;

    }

    $col = $start ;

    for($i=1;$i<=$end;$i++){

        echo "<td> $i </td>" ;

        $col++ ;

        if ($col % 7 === 0){

            echo "</tr> <tr>" ;

        }

    }

    while ($col%7 !==0 ){

        echo "<td></td>" ;

        $col++;

    }

    echo "</tr> </table> </td>" ;

}

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // 입력값 가져오기

    $num = (int) $_POST["num"];

    echo "<table>" ;

    echo "<tr height='300px' valign='top'>" ;

    for($i=1;$i<=6;$i++){

        $dateString = $num . "-" .  str_pad($i, 2, "0", STR_PAD_LEFT) . "-01";

        altshow_calander($dateString) ;

    }

    echo "</tr>" ;

    echo "<tr height='300px' valign='top'>" ;

    for($i=7;$i<=12;$i++){

        $dateString = $num . "-" . str_pad($i, 2, "0", STR_PAD_LEFT) . "-01";

        altshow_calander($dateString) ;

    }

    echo "</tr>" ;

    echo "</table>";

    // 결과 출력

    echo "입력한 값: " . $num . "<br>" ;

}

?>

</body>

</html>

new code – css

PHP

<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>년도별 캘린더</title>
    <link rel="stylesheet" href="ios.css">
</head>
<body>

<div class="container">
    <div class="form-container">
        <form method="post">
            <div class="input-group">
                <label for="num">년도 입력</label>
                <input type="number" name="num" id="num" placeholder="예: 2024" min="1900" max="2100">
                <button type="submit">캘린더 보기</button>
            </div>
        </form>
    </div>

    <?php
    function altshow_calander($date, $monthName){
        $now = $date;
        $nowdate = strtotime($now);
        $start = date("w",$nowdate);
        $end = date("t", $nowdate);
        
        echo "<div class='calendar-month'>";
        echo "<h3 class='month-title'>{$monthName}</h3>";
        echo '<div class="calendar-grid">';
        
        // 요일 헤더
        $days = ['일', '월', '화', '수', '목', '금', '토'];
        foreach($days as $day) {
            echo "<div class='day-header'>{$day}</div>";
        }
        
        // 빈 칸 채우기
        for($i=0; $i<$start; $i++) {
            echo "<div class='day-cell empty'></div>";
        }

        // 날짜 채우기
        $col = $start;
        for($i=1; $i<=$end; $i++){
            $isWeekend = ($col % 7 == 0 || $col % 7 == 6);
            $cellClass = $isWeekend ? 'day-cell weekend' : 'day-cell';
            echo "<div class='{$cellClass}'>{$i}</div>";
            $col++;
        }
        
        // 남은 빈 칸 채우기
        while ($col % 7 !== 0) {
            echo "<div class='day-cell empty'></div>";
            $col++;
        }
        
        echo "</div></div>";
    }

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $num = (int) $_POST["num"];
        
        if($num >= 1900 && $num <= 2100) {
            echo "<div class='year-title'>{$num}년 캘린더</div>";
            echo "<div class='calendar-container'>";
            
            $months = [
                1 => '1월', 2 => '2월', 3 => '3월', 4 => '4월',
                5 => '5월', 6 => '6월', 7 => '7월', 8 => '8월',
                9 => '9월', 10 => '10월', 11 => '11월', 12 => '12월'
            ];
            
            for($i=1; $i<=12; $i++){
                $dateString = $num . "-" . str_pad($i, 2, "0", STR_PAD_LEFT) . "-01";
                altshow_calander($dateString, $months[$i]);
            }
            
            echo "</div>";
        } else {
            echo "<div class='error-message'>올바른 년도를 입력해주세요 (1900-2100)</div>";
        }
    }
    ?>
</div>

</body>
</html>

<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>년도별 캘린더</title>
    <link rel="stylesheet" href="ios.css">
</head>
<body>

<div class="container">
    <div class="form-container">
        <form method="post">
            <div class="input-group">
                <label for="num">년도 입력</label>
                <input type="number" name="num" id="num" placeholder="예: 2024" min="1900" max="2100">
                <button type="submit">캘린더 보기</button>
            </div>
        </form>
    </div>

    <?php
    function altshow_calander($date, $monthName){
        $now = $date;
        $nowdate = strtotime($now);
        $start = date("w",$nowdate);
        $end = date("t", $nowdate);
        
        echo "<div class='calendar-month'>";
        echo "<h3 class='month-title'>{$monthName}</h3>";
        echo '<div class="calendar-grid">';
        
        // 요일 헤더
        $days = ['일', '월', '화', '수', '목', '금', '토'];
        foreach($days as $day) {
            echo "<div class='day-header'>{$day}</div>";
        }
        
        // 빈 칸 채우기
        for($i=0; $i<$start; $i++) {
            echo "<div class='day-cell empty'></div>";
        }

        // 날짜 채우기
        $col = $start;
        for($i=1; $i<=$end; $i++){
            $isWeekend = ($col % 7 == 0 || $col % 7 == 6);
            $cellClass = $isWeekend ? 'day-cell weekend' : 'day-cell';
            echo "<div class='{$cellClass}'>{$i}</div>";
            $col++;
        }
        
        // 남은 빈 칸 채우기
        while ($col % 7 !== 0) {
            echo "<div class='day-cell empty'></div>";
            $col++;
        }
        
        echo "</div></div>";
    }

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $num = (int) $_POST["num"];
        
        if($num >= 1900 && $num <= 2100) {
            echo "<div class='year-title'>{$num}년 캘린더</div>";
            echo "<div class='calendar-container'>";
            
            $months = [
                1 => '1월', 2 => '2월', 3 => '3월', 4 => '4월',
                5 => '5월', 6 => '6월', 7 => '7월', 8 => '8월',
                9 => '9월', 10 => '10월', 11 => '11월', 12 => '12월'
            ];
            
            for($i=1; $i<=12; $i++){
                $dateString = $num . "-" . str_pad($i, 2, "0", STR_PAD_LEFT) . "-01";
                altshow_calander($dateString, $months[$i]);
            }
            
            echo "</div>";
        } else {
            echo "<div class='error-message'>올바른 년도를 입력해주세요 (1900-2100)</div>";
        }
    }
    ?>
</div>

</body>
</html>

CSS

/* 기본 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 폼 스타일 */
.form-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.input-group label {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.input-group input {
    width: 200px;
    height: 44px;
    padding: 0 15px;
    border: none;
    border-radius: 22px;
    background: #f1f1f1;
    font-size: 16px;
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
}

.input-group input:focus {
    background: #e8e8e8;
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(103, 126, 234, 0.3);
}

.input-group button {
    background: linear-gradient(45deg, #007AFF, #5856D6);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
}

.input-group button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}

.input-group button:active {
    transform: translateY(0);
}

/* 년도 제목 */
.year-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin-bottom: 30px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* 캘린더 컨테이너 */
.calendar-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

/* 개별 월 캘린더 */
.calendar-month {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.calendar-month:hover {
    transform: translateY(-5px);
}

.month-title {
    background: linear-gradient(45deg, #007AFF, #5856D6);
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

/* 캘린더 그리드 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e0e0e0;
    padding: 1px;
}

/* 요일 헤더 */
.day-header {
    background: #f8f9fa;
    padding: 12px 5px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: #666;
    border-bottom: 2px solid #e0e0e0;
}

.day-header:first-child,
.day-header:last-child {
    color: #ff3b30; /* 일요일, 토요일 빨간색 */
}

/* 날짜 셀 */
.day-cell {
    background: white;
    padding: 12px 5px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.day-cell:hover {
    background: #f0f8ff;
    color: #007AFF;
    font-weight: 600;
}

.day-cell.weekend {
    color: #ff3b30;
}

.day-cell.empty {
    background: #fafafa;
    cursor: default;
}

.day-cell.empty:hover {
    background: #fafafa;
    color: transparent;
}

/* 에러 메시지 */
.error-message {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    font-weight: 600;
    border: 2px solid rgba(255, 59, 48, 0.3);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    .form-container {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .input-group {
        gap: 10px;
    }
    
    .input-group input {
        width: 100%;
        max-width: 250px;
    }
    
    .year-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .calendar-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .month-title {
        font-size: 16px;
        padding: 12px;
    }
    
    .day-cell {
        min-height: 35px;
        font-size: 13px;
    }
    
    .day-header {
        padding: 10px 5px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .day-cell {
        min-height: 30px;
        font-size: 12px;
        padding: 8px 3px;
    }
    
    .day-header {
        padding: 8px 3px;
        font-size: 10px;
    }
}

/* 기본 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 폼 스타일 */
.form-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.input-group label {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.input-group input {
    width: 200px;
    height: 44px;
    padding: 0 15px;
    border: none;
    border-radius: 22px;
    background: #f1f1f1;
    font-size: 16px;
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
}

.input-group input:focus {
    background: #e8e8e8;
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(103, 126, 234, 0.3);
}

.input-group button {
    background: linear-gradient(45deg, #007AFF, #5856D6);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
}

.input-group button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}

.input-group button:active {
    transform: translateY(0);
}

/* 년도 제목 */
.year-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin-bottom: 30px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* 캘린더 컨테이너 */
.calendar-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

/* 개별 월 캘린더 */
.calendar-month {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.calendar-month:hover {
    transform: translateY(-5px);
}

.month-title {
    background: linear-gradient(45deg, #007AFF, #5856D6);
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

/* 캘린더 그리드 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e0e0e0;
    padding: 1px;
}

/* 요일 헤더 */
.day-header {
    background: #f8f9fa;
    padding: 12px 5px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: #666;
    border-bottom: 2px solid #e0e0e0;
}

.day-header:first-child,
.day-header:last-child {
    color: #ff3b30; /* 일요일, 토요일 빨간색 */
}

/* 날짜 셀 */
.day-cell {
    background: white;
    padding: 12px 5px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.day-cell:hover {
    background: #f0f8ff;
    color: #007AFF;
    font-weight: 600;
}

.day-cell.weekend {
    color: #ff3b30;
}

.day-cell.empty {
    background: #fafafa;
    cursor: default;
}

.day-cell.empty:hover {
    background: #fafafa;
    color: transparent;
}

/* 에러 메시지 */
.error-message {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    font-weight: 600;
    border: 2px solid rgba(255, 59, 48, 0.3);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    .form-container {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .input-group {
        gap: 10px;
    }
    
    .input-group input {
        width: 100%;
        max-width: 250px;
    }
    
    .year-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .calendar-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .month-title {
        font-size: 16px;
        padding: 12px;
    }
    
    .day-cell {
        min-height: 35px;
        font-size: 13px;
    }
    
    .day-header {
        padding: 10px 5px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .day-cell {
        min-height: 30px;
        font-size: 12px;
        padding: 8px 3px;
    }
    
    .day-header {
        padding: 8px 3px;
        font-size: 10px;
    }
}

code | php | 미분류

pHP 입문 – 반복문과 Post 태그
By연욱 김 2025년 09월 12일2025년 09월 19일

html로 웹 페이지를 제작하면서, 페이지를 이동하지 않거나, 같거나 비슷한 작업을 하지 않을 수는 없을 것이다. 다음과 같은 간단한 반복문과 Post…

Read More pHP 입문 – 반복문과 Post 태그
code | php

PHP 입문 – 기초 문법과 구조
Byadmin 2025년 07월 30일2025년 09월 04일

PHP란? 웹 프로그래밍의 기초를 담당하는 프로그래밍 언어 #### #### 기초 우선 php 코드의 문법과 구문 이전에, php를 웹에 구현하는 방법부터…

Read More PHP 입문 – 기초 문법과 구조
code | php | 미분류

pHP 입문 – 반복문과 Post 태그
By연욱 김 2025년 09월 21일

html로 웹 페이지를 제작하면서, 페이지를 이동하지 않거나, 같거나 비슷한 작업을 하지 않을 수는 없을 것이다. 다음과 같은 간단한 반복문과 Post…

Read More pHP 입문 – 반복문과 Post 태그
code | php

pHP 입문 – table 자료 구조
By연욱 김 2025년 08월 29일2025년 09월 12일

php 입문- table 자료 구조 php는 굉장히 직관적이고 합리적이다. 여러 자료형이 있고, 어디서 많이 본 듯한 구조들과 단순한 구성으로 앵간한…

Read More pHP 입문 – table 자료 구조
code

cURL과 그 활용, 브라우저 밖에서의 통신
By연욱 김 2025년 11월 02일

cURL의 정의 cURL(client for URLs)이란, 웹 브라우저가 아닌 환경에서 더욱 쉽고 간편하게 통신을 할 수 있도록 도와주는 인터넷 프로토콜 클라이언트다….

Read More cURL과 그 활용, 브라우저 밖에서의 통신

답글 남기기 응답 취소