정리글 보기 | 강의 정리

<!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;
font-family: "Pretendard", "Noto Sans KR", sans-serif;
}

body {
background: #f5f7fa;
color: #222;
}

a {
text-decoration: none;
color: inherit;
}

.header {
background: #fff;
border-bottom: 1px solid #e5e8eb;
position: sticky;
top: 0;
z-index: 100;
}

.header-inner {
max-width: 1200px;
margin: auto;
padding: 18px 20px;
display: flex;
align-items: center;
gap: 24px;
}

.logo {
font-size: 24px;
font-weight: 800;
color: #0a84ff;
white-space: nowrap;
}

.search-box {
flex: 1;
position: relative;
}

.search-box input {
width: 100%;
height: 48px;
border: 1px solid #dce1e6;
border-radius: 30px;
padding: 0 50px 0 22px;
font-size: 15px;
outline: none;
}

.search-box button {
position: absolute;
right: 8px;
top: 6px;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: #0a84ff;
color: #fff;
cursor: pointer;
}

.login-btn {
padding: 10px 18px;
border-radius: 20px;
background: #111;
color: #fff;
font-size: 14px;
white-space: nowrap;
}

.nav {
max-width: 1200px;
margin: auto;
padding: 0 20px 14px;
display: flex;
gap: 24px;
font-weight: 600;
font-size: 15px;
}

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

.hero-box {
height: 360px;
border-radius: 28px;
background:
linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
url("https://images.unsplash.com/photo-1535131749006-b7f58c99034b?auto=format&fit=crop&w=1600&q=80");
background-size: cover;
background-position: center;
color: #fff;
padding: 58px;
display: flex;
flex-direction: column;
justify-content: center;
}

.hero-box h1 {
font-size: 42px;
margin-bottom: 14px;
}

.hero-box p {
font-size: 18px;
margin-bottom: 28px;
opacity: .9;
}

.hero-search {
max-width: 560px;
height: 54px;
border-radius: 30px;
background: #fff;
display: flex;
overflow: hidden;
}

.hero-search input {
flex: 1;
border: none;
padding: 0 22px;
font-size: 15px;
outline: none;
}

.hero-search button {
width: 90px;
border: none;
background: #0a84ff;
color: #fff;
font-weight: 700;
cursor: pointer;
}

.tags {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.tags span {
background: rgba(255,255,255,.18);
padding: 8px 14px;
border-radius: 20px;
font-size: 14px;
}

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

.section-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}

.section-title h2 {
font-size: 26px;
}

.more {
color: #0a84ff;
font-weight: 700;
font-size: 14px;
}

.card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}

.card {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,.06);
transition: .25s;
cursor: pointer;
}

.card:hover {
transform: translateY(-6px);
}

.card img {
width: 100%;
height: 150px;
object-fit: cover;
}

.card-content {
padding: 16px;
}

.card-content h3 {
font-size: 17px;
margin-bottom: 8px;
}

.card-content p {
font-size: 14px;
color: #666;
line-height: 1.5;
}

.meta {
margin-top: 12px;
font-size: 13px;
color: #999;
}

.location-box {
display: grid;
grid-template-columns: 1.4fr .8fr;
gap: 20px;
}

.map {
min-height: 330px;
border-radius: 24px;
background:
linear-gradient(rgba(10,132,255,.18), rgba(10,132,255,.18)),
url("https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1200&q=80");
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}

.pin {
position: absolute;
width: 18px;
height: 18px;
background: #ff3b30;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 4px 12px rgba(0,0,0,.25);
cursor: pointer;
}

.pin:nth-child(1) { top: 38%; left: 35%; }
.pin:nth-child(2) { top: 58%; left: 55%; }
.pin:nth-child(3) { top: 42%; left: 70%; }

.place-list {
background: #fff;
border-radius: 24px;
padding: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

.place-item {
padding: 15px 0;
border-bottom: 1px solid #edf0f2;
}

.place-item:last-child {
border-bottom: none;
}

.place-item strong {
display: block;
margin-bottom: 6px;
}

.place-item span {
color: #777;
font-size: 14px;
}

.community {
background: #fff;
border-radius: 24px;
padding: 24px;
box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

.post {
display: flex;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid #edf0f2;
font-size: 15px;
}

.post:last-child {
border-bottom: none;
}

.post span {
color: #999;
}

.footer {
margin-top: 70px;
padding: 40px 20px;
background: #111;
color: #aaa;
text-align: center;
font-size: 14px;
}

@media (max-width: 900px) {
.header-inner {
flex-wrap: wrap;
}

.login-btn {
display: none;
}

.nav {
overflow-x: auto;
white-space: nowrap;
}

.hero-box {
height: 420px;
padding: 34px;
}

.hero-box h1 {
font-size: 32px;
}

.card-grid {
grid-template-columns: repeat(2, 1fr);
}

.location-box {
grid-template-columns: 1fr;
}
}

@media (max-width: 560px) {
.card-grid {
grid-template-columns: 1fr;
}

.hero-box {
padding: 26px;
}

.hero-search button {
width: 72px;
}
}
</style>
</head>

<body>

<header class="header">
<div class="header-inner">
<a href="#" class="logo">BUSAN SPORTS</a>

<div class="search-box">
<input type="text" id="topSearch" placeholder="부산 골프장, 헬스장, 러닝코스 검색" />
<button onclick="searchKeyword('topSearch')"></button>
</div>

<a href="#" class="login-btn">로그인</a>
</div>

<nav class="nav">
<a href="#">부산핫플</a>
<a href="#">골프</a>
<a href="#">스포츠</a>
<a href="#">추천</a>
<a href="#">커뮤니티</a>
</nav>
</header>

<section class="hero">
<div class="hero-box">
<h1>오늘 부산에서<br />어떤 운동 할까?</h1>
<p>골프장, 스크린골프, 헬스장, 러닝코스를 한 번에 찾아보세요.</p>

<div class="hero-search">
<input type="text" id="heroSearch" placeholder="예: 해운대 스크린골프" />
<button onclick="searchKeyword('heroSearch')">검색</button>
</div>

<div class="tags">
<span>#해운대골프</span>
<span>#스크린골프</span>
<span>#부산러닝</span>
<span>#헬스장추천</span>
</div>
</div>
</section>

<section class="section">
<div class="section-title">
<h2>인기 콘텐츠</h2>
<a href="#" class="more">더보기</a>
</div>

<div class="card-grid">
<div class="card">
<img src="https://images.unsplash.com/photo-1587174486073-ae5e5cff23aa?auto=format&fit=crop&w=800&q=80">
<div class="card-content">
<h3>부산 골프장 TOP 10</h3>
<p>초보자도 가기 좋은 부산 근교 골프장 정리</p>
<div class="meta">조회수 1.2k 120</div>
</div>
</div>

<div class="card">
<img src="https://images.unsplash.com/photo-1600718374662-0483d2b9da44?auto=format&fit=crop&w=800&q=80">
<div class="card-content">
<h3>스크린골프 가격 비교</h3>
<p>해운대, 서면, 센텀 지역별 가격 비교</p>
<div class="meta">조회수 980 88</div>
</div>
</div>

<div class="card">
<img src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?auto=format&fit=crop&w=800&q=80">
<div class="card-content">
<h3>부산 러닝코스 추천</h3>
<p>광안리, 수영강, 해운대 러닝 코스</p>
<div class="meta">조회수 760 64</div>
</div>
</div>

<div class="card">
<img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=800&q=80">
<div class="card-content">
<h3>헬스장 선택 기준</h3>
<p>초보자가 실패하지 않는 헬스장 고르는 법</p>
<div class="meta">조회수 650 51</div>
</div>
</div>
</div>
</section>

<section class="section">
<div class="section-title">
<h2>내 주변 추천</h2>
<a href="#" class="more">지도보기</a>
</div>

<div class="location-box">
<div class="map">
<div class="pin" onclick="showPlace('해운대 스크린골프')"></div>
<div class="pin" onclick="showPlace('센텀 헬스장')"></div>
<div class="pin" onclick="showPlace('광안리 러닝코스')"></div>
</div>

<div class="place-list">
<div class="place-item">
<strong>해운대 스크린골프</strong>
<span>거리 2.1km · 평점 4.7</span>
</div>
<div class="place-item">
<strong>센텀 헬스장</strong>
<span>거리 1.4km · 평점 4.5</span>
</div>
<div class="place-item">
<strong>광안리 러닝코스</strong>
<span>거리 3.2km · 인기 코스</span>
</div>
</div>
</div>
</section>

<section class="section">
<div class="section-title">
<h2>골프 가이드</h2>
<a href="#" class="more">더보기</a>
</div>

<div class="card-grid">
<div class="card">
<img src="https://images.unsplash.com/photo-1593111774240-d529f12cf4bb?auto=format&fit=crop&w=800&q=80">
<div class="card-content">
<h3>골프 입문 가이드</h3>
<p>처음 시작하는 사람을 위한 기본 정리</p>
</div>
</div>

<div class="card">
<img src="https://images.unsplash.com/photo-1530028828-25e8270793c5?auto=format&fit=crop&w=800&q=80">
<div class="card-content">
<h3>장비 추천</h3>
<p>드라이버, 아이언, 퍼터 선택 방법</p>
</div>
</div>

<div class="card">
<img src="https://images.unsplash.com/photo-1562204320-31975a5e09a4?auto=format&fit=crop&w=800&q=80">
<div class="card-content">
<h3>스윙 분석</h3>
<p>비거리와 방향성을 잡는 핵심 포인트</p>
</div>
</div>

<div class="card">
<img src="https://images.unsplash.com/photo-1568640347023-a616a30bc3bd?auto=format&fit=crop&w=800&q=80">
<div class="card-content">
<h3>스크린골프 공략</h3>
<p>스크린에서 점수 잘 나오는 실전 팁</p>
</div>
</div>
</div>
</section>

<section class="section">
<div class="section-title">
<h2>스포츠 가이드</h2>
<a href="#" class="more">더보기</a>
</div>

<div class="card-grid">
<div class="card">
<img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=800&q=80">
<div class="card-content">
<h3>헬스 루틴</h3>
<p>초보자 4주 운동 루틴</p>
</div>
</div>

<div class="card">
<img src="https://images.unsplash.com/photo-1502904550040-7534597429ae?auto=format&fit=crop&w=800&q=80">
<div class="card-content">
<h3>러닝 방법</h3>
<p>무릎 부담 줄이는 러닝 자세</p>
</div>
</div>

<div class="card">
<img src="https://images.unsplash.com/photo-1599058917212-d750089bc07e?auto=format&fit=crop&w=800&q=80">
<div class="card-content">
<h3>홈트레이닝</h3>
<p>집에서 가능한 전신 운동</p>
</div>
</div>

<div class="card">
<img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=800&q=80">
<div class="card-content">
<h3>운동 전 스트레칭</h3>
<p>부상 방지를 위한 기본 스트레칭</p>
</div>
</div>
</div>
</section>

<section class="section">
<div class="section-title">
<h2>커뮤니티</h2>
<a href="#" class="more">글쓰기</a>
</div>

<div class="community">
<div class="post">
<strong>오늘 해운대 스크린골프 다녀온 후기</strong>
<span>댓글 12</span>
</div>
<div class="post">
<strong>부산에서 골프 레슨 어디가 괜찮나요?</strong>
<span>댓글 8</span>
</div>
<div class="post">
<strong>광안리 러닝코스 초보자도 괜찮을까요?</strong>
<span>댓글 5</span>
</div>
<div class="post">
<strong>센텀 근처 헬스장 추천 부탁드립니다</strong>
<span>댓글 17</span>
</div>
</div>
</section>

<footer class="footer">
BUSAN SPORTS PORTAL · 회사정보 · 광고문의 · 이용약관
</footer>

<script>
function searchKeyword(inputId) {
const value = document.getElementById(inputId).value.trim();

if (!value) {
alert("검색어를 입력해주세요.");
return;
}

alert("'" + value + "' 검색 결과 페이지로 이동합니다.");

// 실제 사이트 적용 시 아래처럼 연결
// location.href = "/search.html?keyword=" + encodeURIComponent(value);
}

function showPlace(name) {
alert(name + " 상세 정보를 확인합니다.");

// 실제 사이트 적용 시 상세페이지로 이동
// location.href = "/place-detail.html?name=" + encodeURIComponent(name);
}
</script>

</body>
</html>

#스타일시트 포탈시스템 메인

CSS 스타일링

첨부 파일

댓글 / 답글