안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제 우리만의 SNS에 사진을 올리는 기초 마법을 성공적으로 부려보았죠? 하지만 사진만 덜렁 있으면 그날의 기분이나 장소를 기억하기 어려워요. 오늘은 사진과 함께 예쁜 제목과 글귀를 남기는 ‘게시물 작성(Posting) 마법’을 배워보겠습니다!
1. 텍스트 데이터의 흐름: “생각을 변수에 담아요”
우리가 입력창에 타이핑하는 글자들은 PHP의 $_POST라는 마법 주머니에 담겨 서버로 전달돼요. 사진 파일은 $_FILES에, 글자들은 $_POST에 나누어 담는 것이죠. 이렇게 전달된 데이터들을 하나로 묶으면 비로소 하나의 ‘이야기’가 완성된답니다.
2. 제목과 내용이 있는 게시판 만들기 (코드)
사진과 글을 동시에 입력받아 화면에 예쁘게 출력하는 코드를 짜봅시다. 이번에는 사용자님이 다녀오신 오사카 여행의 한 장면을 기록한다고 생각하며 작성해 볼까요?
<?php
// sns_post.php: 제목과 내용이 있는 SNS 포스팅
if (isset($_POST["submit"])) {
// 1. 내가 쓴 글자들을 변수에 쏙 담아요
$title = htmlspecialchars($_POST['title']);
$content = htmlspecialchars($_POST['content']);
// 2. 사진 업로드 처리 (어제 배운 마법!)
$target_file = "uploads/" . basename($_FILES["myPhoto"]["name"]);
move_uploaded_file($_FILES["myPhoto"]["tmp_name"], $target_file);
echo "<div style='border:1px solid #ddd; padding:20px; border-radius:15px; max-width:400px; margin:auto;'>";
echo "<h3>📍 " . $title . "</h3>";
echo "<img src='" . $target_file . "' style='width:100%; border-radius:10px;'>";
echo "<p>" . nl2br($content) . "</p>";
echo "</div>";
}
?>
<!DOCTYPE html>
<html>
<head>
<style>
.post-box { background: #fffbe6; padding: 25px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
input, textarea { width: 100%; padding: 10px; margin: 10px 0; border-radius: 8px; border: 1px solid #ccc; }
</style>
</head>
<body>
<div class="post-box">
<h2>📝 오늘의 마법 일기 쓰기</h2>
<form action="" method="post" enctype="multipart/form-data">
<input type="text" name="title" placeholder="멋진 제목을 지어주세요" required>
<textarea name="content" rows="4" placeholder="오늘 어떤 일이 있었나요?" required></textarea>
<input type="file" name="myPhoto" required>
<button type="submit" name="submit" style="background:#f1c40f; padding:10px 20px; border:none;">이야기 올리기</button>
</form>
</div>
</body>
</html>3. 왜 제목과 글이 중요할까요?
사진이 ‘순간’이라면, 글은 그 순간의 ‘의미’를 담아주기 때문이에요!
1. 기억의 보조장치: 사용자님의 ‘Money Teatime’ 블로그처럼, 단순한 차트 사진 하나보다 “오늘의 환율 급변 이유”라는 제목과 설명이 있을 때 정보의 가치가 수만 배 올라가죠.
2. 교육적 효과: ‘EduPad’에서 아이가 문제를 풀고 사진을 찍을 때, “어려웠지만 포기하지 않았어요!”라고 한 줄 소감을 적게 하면 아이의 표현력과 메타인지가 쑥쑥 자란답니다.
4. 아이들과 함께하는 ‘추억 엽서 만들기’ 놀이
오늘 찍은 사진 한 장을 골라 종이에 붙이고, 그 아래에 제목과 짧은 일기를 써보게 하세요. “네가 쓴 제목이 코딩에서는 $title 변수가 되고, 네 마음이 담긴 글은 $content 변수가 되는 거야. 컴퓨터는 이 주머니들을 모아서 우리만의 예쁜 엽서를 만들어준단다!”라고 설명해 주세요. 데이터의 구조화를 아주 자연스럽게 배우게 됩니다.
마치며: 나만의 소셜 미디어 완성!
오늘 우리는 사진과 글을 하나로 묶어 멋진 게시물을 만드는 법을 배웠습니다. 이제 우리 SNS는 왁자지껄한 이야기꽃이 피어나겠네요! 다음 시간에는 친구들의 반응을 확인하는 ‘반응 마법: 하트 버튼과 좋아요 기능 구현하기’를 배워보겠습니다. 친구들의 박수를 받을 준비 되셨나요? 내일 아침에 만나요! ✨
