<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>커뮤니티 실무 샘플</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;color:#111;background:#f7f8fb;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}
ul,li{list-style:none;}
.wrap{max-width:1200px;width:100%;margin:0 auto;padding:0 20px;}
.header{height:80px;background:#fff;border-bottom:1px solid #eee;position:relative;z-index:20;}
.header .wrap{height:80px;display:flex;justify-content:space-between;align-items:center;}
.logo{font-size:26px;font-weight:900;color:#5b4bff;}
.menu{display:flex;gap:40px;}
.menu a{font-weight:700;}
.ham{display:none;background:none;border:0;font-size:28px;cursor:pointer;}
.hero{padding:100px 0;background:linear-gradient(135deg,#5b4bff,#8f7cff);color:white;}
.hero .wrap{display:flex;justify-content:space-between;align-items:center;gap:50px;}
.hero_text{width:55%;}
.hero_text span{display:inline-block;margin-bottom:20px;font-weight:900;color:#dcd7ff;}
.hero_text h1{font-size:56px;line-height:1.2;margin-bottom:25px;}
.hero_text p{font-size:18px;line-height:1.8;color:#eee;margin-bottom:35px;}
.btn{display:inline-block;padding:16px 34px;background:white;color:#5b4bff;border-radius:8px;font-weight:900;cursor:pointer;}
.hero_box{width:45%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:30px;padding:40px;backdrop-filter:blur(8px);}
.hero_box h3{font-size:28px;margin-bottom:20px;}
.hero_box li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.25);font-size:16px;}
.section{padding:90px 0;}
.title{text-align:center;margin-bottom:50px;}
.title h2{font-size:38px;margin-bottom:15px;}
.title p{color:#666;}
.board_wrap{display:flex;gap:30px;}
.board_card{width:calc(100%/3);background:white;border-radius:24px;padding:35px;box-shadow:0 12px 30px rgba(0,0,0,.06);transition:.3s;}
.board_card:hover{transform:translateY(-10px);}
.category{display:inline-block;padding:7px 14px;border-radius:30px;background:#efedff;color:#5b4bff;font-size:13px;font-weight:900;margin-bottom:20px;}
.board_card h3{font-size:24px;margin-bottom:15px;}
.board_card p{font-size:15px;color:#666;line-height:1.7;margin-bottom:25px;}
.meta{display:flex;justify-content:space-between;font-size:14px;color:#999;}
.notice{background:white;padding:90px 0;}
.notice_wrap{display:flex;gap:40px;}
.notice_box{width:50%;padding:40px;border-radius:24px;background:#f7f8fb;}
.notice_box h3{font-size:28px;margin-bottom:25px;}
.notice_list li{padding:18px 0;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;gap:20px;}
.notice_list span{color:#777;font-size:14px;}
.footer{height:100px;background:#111;color:white;display:flex;align-items:center;justify-content:center;}
.modal_wrap{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:50;}
.modal_wrap.active{display:flex;}
.modal{width:400px;background:white;border-radius:20px;padding:35px;text-align:center;}
.modal h3{font-size:26px;margin-bottom:20px;}
.modal input,.modal textarea{width:100%;margin-bottom:12px;padding:0 15px;border:1px solid #ddd;font-family:inherit;}
.modal input{height:48px;}
.modal textarea{height:120px;padding-top:15px;resize:none;}
.close_btn{width:100%;height:48px;background:#111;color:white;border:0;border-radius:8px;cursor:pointer;margin-top:10px;}
@media(max-width:768px){
.header,.header .wrap{height:70px;}
.ham{display:block;}
.menu{display:none;position:absolute;top:70px;left:0;width:100%;background:white;flex-direction:column;gap:0;border-bottom:1px solid #eee;}
.menu.active{display:flex;}
.menu a{padding:18px 20px;border-top:1px solid #eee;}
.hero{padding:70px 0;}
.hero .wrap{flex-direction:column;}
.hero_text,.hero_box{width:100%;}
.hero_text h1{font-size:36px;}
.board_wrap{flex-direction:column;}
.board_card{width:100%;}
.notice_wrap{flex-direction:column;}
.notice_box{width:100%;padding:30px;}
.notice_list li{flex-direction:column;gap:8px;}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">COMMUNITY</div>
<nav class="menu">
<a href="#">Board</a>
<a href="#">Notice</a>
<a href="#">Event</a>
<a href="#">Join</a>
</nav>
<button class="ham">☰</button>
</div>
</header>
<section class="hero">
<div class="wrap">
<div class="hero_text">
<span>LOCAL COMMUNITY PLATFORM</span>
<h1>함께 배우고 나누는<br>따뜻한 커뮤니티</h1>
<p>관심사가 비슷한 사람들이 모여 정보를 나누고 경험을 공유하며 함께 성장하는 공간입니다.</p>
<a class="btn open_btn">글쓰기</a>
</div>
<div class="hero_box">
<h3>오늘의 인기글</h3>
<ul>
<li>처음 시작하는 사람을 위한 학습 루틴</li>
<li>이번 주 오프라인 모임 안내</li>
<li>실습 결과물 공유 게시판 오픈</li>
</ul>
</div>
</div>
</section>
<section class="section">
<div class="wrap">
<div class="title">
<h2>Community Boards</h2>
<p>관심사에 맞는 게시판에서 이야기를 나눠보세요.</p>
</div>
<div class="board_wrap">
<div class="board_card">
<span class="category">자유게시판</span>
<h3>일상 이야기</h3>
<p>회원들이 자유롭게 소식과 생각을 나누는 공간입니다.</p>
<div class="meta">
<span>게시글 128개</span>
<span>NEW</span>
</div>
</div>
<div class="board_card">
<span class="category">학습공유</span>
<h3>배움 기록</h3>
<p>공부한 내용, 실습 결과물, 어려웠던 부분을 공유합니다.</p>
<div class="meta">
<span>게시글 86개</span>
<span>HOT</span>
</div>
</div>
<div class="board_card">
<span class="category">모임안내</span>
<h3>오프라인 모임</h3>
<p>지역 모임과 소규모 스터디 일정을 확인할 수 있습니다.</p>
<div class="meta">
<span>게시글 42개</span>
<span>OPEN</span>
</div>
</div>
</div>
</div>
</section>
<section class="notice">
<div class="wrap">
<div class="notice_wrap">
<div class="notice_box">
<h3>공지사항</h3>
<ul class="notice_list">
<li>
<strong>커뮤니티 이용 규칙 안내</strong>
<span>2026.06.01</span>
</li>
<li>
<strong>신규 게시판 오픈 안내</strong>
<span>2026.06.05</span>
</li>
<li>
<strong>운영진 모집 안내</strong>
<span>2026.06.10</span>
</li>
</ul>
</div>
<div class="notice_box">
<h3>이벤트</h3>
<ul class="notice_list">
<li>
<strong>첫 글 작성 이벤트</strong>
<span>진행중</span>
</li>
<li>
<strong>스터디 인증 챌린지</strong>
<span>진행중</span>
</li>
<li>
<strong>오프라인 모임 후기 이벤트</strong>
<span>예정</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. COMMUNITY. ALL RIGHTS RESERVED.
</footer>
<div class="modal_wrap">
<div class="modal">
<h3>게시글 작성</h3>
<input type="text" placeholder="작성자">
<input type="text" placeholder="제목">
<textarea placeholder="내용"></textarea>
<button class="close_btn">닫기</button>
</div>
</div>
<script>
const hamEl = document.querySelector('.ham');
const menuEl = document.querySelector('.menu');
hamEl.addEventListener('click', () => {
menuEl.classList.toggle('active');
});
const openBtn = document.querySelector('.open_btn');
const modalWrap = document.querySelector('.modal_wrap');
const closeBtn = document.querySelector('.close_btn');
openBtn.addEventListener('click', () => {
modalWrap.classList.add('active');
});
closeBtn.addEventListener('click', () => {
modalWrap.classList.remove('active');
});
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>커뮤니티 실무 샘플</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;color:#111;background:#f7f8fb;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}
ul,li{list-style:none;}
.wrap{max-width:1200px;width:100%;margin:0 auto;padding:0 20px;}
.header{height:80px;background:#fff;border-bottom:1px solid #eee;position:relative;z-index:20;}
.header .wrap{height:80px;display:flex;justify-content:space-between;align-items:center;}
.logo{font-size:26px;font-weight:900;color:#5b4bff;}
.menu{display:flex;gap:40px;}
.menu a{font-weight:700;}
.ham{display:none;background:none;border:0;font-size:28px;cursor:pointer;}
.hero{padding:100px 0;background:linear-gradient(135deg,#5b4bff,#8f7cff);color:white;}
.hero .wrap{display:flex;justify-content:space-between;align-items:center;gap:50px;}
.hero_text{width:55%;}
.hero_text span{display:inline-block;margin-bottom:20px;font-weight:900;color:#dcd7ff;}
.hero_text h1{font-size:56px;line-height:1.2;margin-bottom:25px;}
.hero_text p{font-size:18px;line-height:1.8;color:#eee;margin-bottom:35px;}
.btn{display:inline-block;padding:16px 34px;background:white;color:#5b4bff;border-radius:8px;font-weight:900;cursor:pointer;}
.hero_box{width:45%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:30px;padding:40px;backdrop-filter:blur(8px);}
.hero_box h3{font-size:28px;margin-bottom:20px;}
.hero_box li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.25);font-size:16px;}
.section{padding:90px 0;}
.title{text-align:center;margin-bottom:50px;}
.title h2{font-size:38px;margin-bottom:15px;}
.title p{color:#666;}
.board_wrap{display:flex;gap:30px;}
.board_card{width:calc(100%/3);background:white;border-radius:24px;padding:35px;box-shadow:0 12px 30px rgba(0,0,0,.06);transition:.3s;}
.board_card:hover{transform:translateY(-10px);}
.category{display:inline-block;padding:7px 14px;border-radius:30px;background:#efedff;color:#5b4bff;font-size:13px;font-weight:900;margin-bottom:20px;}
.board_card h3{font-size:24px;margin-bottom:15px;}
.board_card p{font-size:15px;color:#666;line-height:1.7;margin-bottom:25px;}
.meta{display:flex;justify-content:space-between;font-size:14px;color:#999;}
.notice{background:white;padding:90px 0;}
.notice_wrap{display:flex;gap:40px;}
.notice_box{width:50%;padding:40px;border-radius:24px;background:#f7f8fb;}
.notice_box h3{font-size:28px;margin-bottom:25px;}
.notice_list li{padding:18px 0;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;gap:20px;}
.notice_list span{color:#777;font-size:14px;}
.footer{height:100px;background:#111;color:white;display:flex;align-items:center;justify-content:center;}
.modal_wrap{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:50;}
.modal_wrap.active{display:flex;}
.modal{width:400px;background:white;border-radius:20px;padding:35px;text-align:center;}
.modal h3{font-size:26px;margin-bottom:20px;}
.modal input,.modal textarea{width:100%;margin-bottom:12px;padding:0 15px;border:1px solid #ddd;font-family:inherit;}
.modal input{height:48px;}
.modal textarea{height:120px;padding-top:15px;resize:none;}
.close_btn{width:100%;height:48px;background:#111;color:white;border:0;border-radius:8px;cursor:pointer;margin-top:10px;}
@media(max-width:768px){
.header,.header .wrap{height:70px;}
.ham{display:block;}
.menu{display:none;position:absolute;top:70px;left:0;width:100%;background:white;flex-direction:column;gap:0;border-bottom:1px solid #eee;}
.menu.active{display:flex;}
.menu a{padding:18px 20px;border-top:1px solid #eee;}
.hero{padding:70px 0;}
.hero .wrap{flex-direction:column;}
.hero_text,.hero_box{width:100%;}
.hero_text h1{font-size:36px;}
.board_wrap{flex-direction:column;}
.board_card{width:100%;}
.notice_wrap{flex-direction:column;}
.notice_box{width:100%;padding:30px;}
.notice_list li{flex-direction:column;gap:8px;}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">COMMUNITY</div>
<nav class="menu">
<a href="#">Board</a>
<a href="#">Notice</a>
<a href="#">Event</a>
<a href="#">Join</a>
</nav>
<button class="ham">☰</button>
</div>
</header>
<section class="hero">
<div class="wrap">
<div class="hero_text">
<span>LOCAL COMMUNITY PLATFORM</span>
<h1>함께 배우고 나누는<br>따뜻한 커뮤니티</h1>
<p>관심사가 비슷한 사람들이 모여 정보를 나누고 경험을 공유하며 함께 성장하는 공간입니다.</p>
<a class="btn open_btn">글쓰기</a>
</div>
<div class="hero_box">
<h3>오늘의 인기글</h3>
<ul>
<li>처음 시작하는 사람을 위한 학습 루틴</li>
<li>이번 주 오프라인 모임 안내</li>
<li>실습 결과물 공유 게시판 오픈</li>
</ul>
</div>
</div>
</section>
<section class="section">
<div class="wrap">
<div class="title">
<h2>Community Boards</h2>
<p>관심사에 맞는 게시판에서 이야기를 나눠보세요.</p>
</div>
<div class="board_wrap">
<div class="board_card">
<span class="category">자유게시판</span>
<h3>일상 이야기</h3>
<p>회원들이 자유롭게 소식과 생각을 나누는 공간입니다.</p>
<div class="meta">
<span>게시글 128개</span>
<span>NEW</span>
</div>
</div>
<div class="board_card">
<span class="category">학습공유</span>
<h3>배움 기록</h3>
<p>공부한 내용, 실습 결과물, 어려웠던 부분을 공유합니다.</p>
<div class="meta">
<span>게시글 86개</span>
<span>HOT</span>
</div>
</div>
<div class="board_card">
<span class="category">모임안내</span>
<h3>오프라인 모임</h3>
<p>지역 모임과 소규모 스터디 일정을 확인할 수 있습니다.</p>
<div class="meta">
<span>게시글 42개</span>
<span>OPEN</span>
</div>
</div>
</div>
</div>
</section>
<section class="notice">
<div class="wrap">
<div class="notice_wrap">
<div class="notice_box">
<h3>공지사항</h3>
<ul class="notice_list">
<li>
<strong>커뮤니티 이용 규칙 안내</strong>
<span>2026.06.01</span>
</li>
<li>
<strong>신규 게시판 오픈 안내</strong>
<span>2026.06.05</span>
</li>
<li>
<strong>운영진 모집 안내</strong>
<span>2026.06.10</span>
</li>
</ul>
</div>
<div class="notice_box">
<h3>이벤트</h3>
<ul class="notice_list">
<li>
<strong>첫 글 작성 이벤트</strong>
<span>진행중</span>
</li>
<li>
<strong>스터디 인증 챌린지</strong>
<span>진행중</span>
</li>
<li>
<strong>오프라인 모임 후기 이벤트</strong>
<span>예정</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. COMMUNITY. ALL RIGHTS RESERVED.
</footer>
<div class="modal_wrap">
<div class="modal">
<h3>게시글 작성</h3>
<input type="text" placeholder="작성자">
<input type="text" placeholder="제목">
<textarea placeholder="내용"></textarea>
<button class="close_btn">닫기</button>
</div>
</div>
<script>
const hamEl = document.querySelector('.ham');
const menuEl = document.querySelector('.menu');
hamEl.addEventListener('click', () => {
menuEl.classList.toggle('active');
});
const openBtn = document.querySelector('.open_btn');
const modalWrap = document.querySelector('.modal_wrap');
const closeBtn = document.querySelector('.close_btn');
openBtn.addEventListener('click', () => {
modalWrap.classList.add('active');
});
closeBtn.addEventListener('click', () => {
modalWrap.classList.remove('active');
});
</script>
</body>
</html>
#실무형 6번 = 커뮤니티 사이트 완성형