AI 홈페이지 빌더 ㅣ MyPR

홈페이지 수정

공개된 홈페이지 정보를 읽기 전용으로 보고 있습니다.
챗GPT 바로가기
1. 홈페이지 제목:
2. 홈페이지 주소(URL):
https://mypr.kr/home/make/member_view.php?domain_id=
3. 본문(html 코드):
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>우리안경원 | 선명한 시야, 편안한 일상</title>

<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Pretendard',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#ffffff;
    color:#222;
    line-height:1.6;
}

a{
    text-decoration:none;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* Header */
header{
    position:fixed;
    top:0;
    width:100%;
    z-index:999;
    backdrop-filter:blur(15px);
    background:rgba(255,255,255,0.85);
    border-bottom:1px solid rgba(0,0,0,0.05);
}

.nav{
    height:75px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    font-size:1.5rem;
    font-weight:800;
    color:#0f172a;
}

.nav-links{
    display:flex;
    gap:30px;
}

.nav-links a{
    color:#444;
    font-weight:500;
}

.call-btn{
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:#fff;
    padding:12px 24px;
    border-radius:50px;
    font-weight:600;
}

/* Hero */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    background:
    linear-gradient(rgba(15,23,42,0.55),rgba(15,23,42,0.55)),
    url('https://images.unsplash.com/photo-1511499767150-a48a237f0083?auto=format&fit=crop&w=1600&q=80');
    background-size:cover;
    background-position:center;
    color:#fff;
}

.hero-content{
    max-width:700px;
}

.hero h1{
    font-size:4rem;
    line-height:1.2;
    margin-bottom:20px;
    font-weight:800;
}

.hero p{
    font-size:1.2rem;
    margin-bottom:35px;
    opacity:.95;
}

.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.btn-primary{
    background:#fff;
    color:#111;
    padding:16px 32px;
    border-radius:50px;
    font-weight:700;
}

.btn-secondary{
    border:2px solid #fff;
    color:#fff;
    padding:16px 32px;
    border-radius:50px;
    font-weight:700;
}

/* Section */
section{
    padding:100px 0;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    font-size:2.5rem;
    margin-bottom:15px;
}

.section-title p{
    color:#666;
}

/* Features */
.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.feature-card{
    padding:35px;
    border-radius:24px;
    background:#fff;
    box-shadow:0 10px 40px rgba(0,0,0,0.08);
    transition:.3s;
}

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

.feature-icon{
    font-size:40px;
    margin-bottom:20px;
}

/* About */
.about{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.about img{
    width:100%;
    border-radius:25px;
}

.about-text h2{
    font-size:2.3rem;
    margin-bottom:20px;
}

/* Reviews */
.review-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

.review{
    background:#f8fafc;
    padding:30px;
    border-radius:20px;
}

.review h4{
    margin-top:15px;
}

/* CTA */
.cta{
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:#fff;
    text-align:center;
    border-radius:30px;
    padding:70px 40px;
}

.cta h2{
    font-size:2.5rem;
    margin-bottom:15px;
}

.cta p{
    margin-bottom:30px;
}

/* Contact */
.contact-box{
    max-width:700px;
    margin:auto;
    background:#fff;
    padding:40px;
    border-radius:25px;
    box-shadow:0 10px 40px rgba(0,0,0,0.08);
}

.form-group{
    margin-bottom:20px;
}

input, textarea{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:16px;
}

textarea{
    height:140px;
    resize:none;
}

.submit-btn{
    width:100%;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:#fff;
    border:none;
    padding:16px;
    border-radius:12px;
    font-size:16px;
    cursor:pointer;
}

/* Footer */
footer{
    background:#0f172a;
    color:#fff;
    text-align:center;
    padding:40px 20px;
}

/* Animation */
.fade{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}

.fade.show{
    opacity:1;
    transform:translateY(0);
}

@media(max-width:768px){

.hero h1{
    font-size:2.5rem;
}

.about{
    grid-template-columns:1fr;
}

.nav-links{
    display:none;
}

.section-title h2{
    font-size:2rem;
}
}
</style>
<style id="class-responsive-base">
*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; min-width: 0; -webkit-text-size-adjust: 100%; }
body { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100%; min-width: 0; margin: 0; overflow-x: hidden; overflow-wrap: break-word; }
body > * { visibility: visible !important; opacity: 1 !important; }
img, video, iframe, embed, object { max-width: 100%; height: auto; }
table { max-width: 100%; border-collapse: collapse; }
main, section, article, header, footer, nav, div { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }
.reveal, .reveal.visible, .reveal.active { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; }
.fade-in, .fade-in.visible, [data-aos], .aos-init, .aos-animate { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; }
</style>
<noscript><style>.reveal{opacity:1!important;transform:none!important;filter:none!important;}</style></noscript>
</head>
<body>

<header>
    <div class="container nav">
        <div class="logo">우리안경원</div>

        <div class="nav-links">
            <a href="#about">소개</a>
            <a href="#service">서비스</a>
            <a href="#review">후기</a>
            <a href="#contact">상담문의</a>
        </div>

        <a href="tel:01012345678" class="call-btn">전화상담</a>
    </div>
</header>

<section class="hero">
    <div class="container hero-content">
        <h1>당신의 눈을 위한<br>가장 편안한 선택</h1>

        <p>
            정밀 시력 검사부터 맞춤 안경 제작까지.
            모든 연령층이 믿고 찾는 우리안경원에서
            더 선명하고 편안한 시야를 경험해보세요.
        </p>

        <div class="hero-buttons">
            <a href="#contact" class="btn-primary">무료 상담 신청</a>
            <a href="#about" class="btn-secondary">자세히 보기</a>
        </div>
    </div>
</section>

<section id="service">
    <div class="container">

        <div class="section-title fade">
            <h2>왜 우리안경원일까요?</h2>
            <p>고객 만족을 최우선으로 생각합니다.</p>
        </div>

        <div class="features">

            <div class="feature-card fade">
                <div class="feature-icon">👓</div>
                <h3>맞춤 안경 제작</h3>
                <p>얼굴형과 생활 패턴에 맞춘 최적의 안경 솔루션.</p>
            </div>

            <div class="feature-card fade">
                <div class="feature-icon">🔍</div>
                <h3>정밀 시력 검사</h3>
                <p>전문 장비를 활용한 체계적인 시력 분석.</p>
            </div>

            <div class="feature-card fade">
                <div class="feature-icon">✨</div>
                <h3>프리미엄 렌즈</h3>
                <p>눈의 피로를 줄이는 다양한 기능성 렌즈.</p>
            </div>

            <div class="feature-card fade">
                <div class="feature-icon">💙</div>
                <h3>평생 관리 서비스</h3>
                <p>세척, 피팅, 점검까지 지속적인 사후 관리.</p>
            </div>

        </div>
    </div>
</section>

<section id="about">
    <div class="container about">

        <img src="https://images.unsplash.com/photo-1574258495973-f010dfbb5371?auto=format&fit=crop&w=1200&q=80" alt="안경원">

        <div class="about-text fade">
            <h2>고객의 눈 건강을 생각합니다</h2>

            <p>
                우리안경원은 최신 검사 장비와 풍부한 경험을 바탕으로
                고객 한 분 한 분에게 가장 적합한 안경과 렌즈를 제안합니다.
            </p>

            <br>

            <p>
                어린이부터 시니어 고객까지,
                모든 세대가 편안하게 방문할 수 있는 공간과
                전문적인 상담 서비스를 제공합니다.
            </p>
        </div>

    </div>
</section>

<section id="review">
    <div class="container">

        <div class="section-title fade">
            <h2>고객 후기</h2>
            <p>실제 방문 고객들의 만족 후기</p>
        </div>

        <div class="review-grid">

            <div class="review fade">
                ⭐⭐⭐⭐⭐
                <p>
                    시력검사가 정말 꼼꼼했고
                    안경 착용감이 훨씬 좋아졌어요.
                </p>
                <h4>김OO 고객</h4>
            </div>

            <div class="review fade">
                ⭐⭐⭐⭐⭐
                <p>
                    부모님 안경 맞추러 왔는데
                    친절하고 전문적이라 만족했습니다.
                </p>
                <h4>박OO 고객</h4>
            </div>

            <div class="review fade">
                ⭐⭐⭐⭐⭐
                <p>
                    아이 안경 상담을 받았는데
                    설명이 자세하고 신뢰가 갔습니다.
                </p>
                <h4>이OO 고객</h4>
            </div>

        </div>
    </div>
</section>

<section>
    <div class="container">

        <div class="cta fade">
            <h2>지금 상담 예약하고<br>나에게 맞는 안경을 찾아보세요</h2>

            <p>
                전문 상담사가 고객님의 시력과 생활 패턴에 맞는
                최적의 솔루션을 안내해드립니다.
            </p>

            <a href="#contact" class="btn-primary">
                상담 신청하기
            </a>
        </div>

    </div>
</section>

<section id="contact">
    <div class="container">

        <div class="section-title fade">
            <h2>상담 문의</h2>
            <p>아래 내용을 남겨주시면 빠르게 연락드립니다.</p>
        </div>

        <div class="contact-box fade">

            <form onsubmit="submitForm(event)">

                <div class="form-group">
                    <input type="text" placeholder="성함" required>
                </div>

                <div class="form-group">
                    <input type="tel" placeholder="연락처" required>
                </div>

                <div class="form-group">
                    <textarea placeholder="상담 내용을 입력해주세요"></textarea>
                </div>

                <button class="submit-btn">
                    상담 신청하기
                </button>

            </form>

        </div>

    </div>
</section>

<footer>
    <h3>우리안경원</h3>
    <p>대표번호 : 010-1234-5678</p>
    <p>주소 : 경기도 ○○시 ○○로 123</p>
    <p>© 2025 우리안경원. All Rights Reserved.</p>
</footer>

<script>

function submitForm(e){
    e.preventDefault();
    alert("상담 신청이 접수되었습니다. 빠르게 연락드리겠습니다.");
}

const fades = document.querySelectorAll('.fade');

const observer = new IntersectionObserver(entries=>{
    entries.forEach(entry=>{
        if(entry.isIntersecting){
            entry.target.classList.add('show');
        }
    });
},{
    threshold:0.2
});

fades.forEach(el=>{
    observer.observe(el);
});

</script>

<script id="class-render-fallback">
(function(){
function showHiddenReveal(){
var nodes=document.querySelectorAll(".reveal,[data-aos],.fade-in,.aos-init,.aos-animate");
for(var i=0;i<nodes.length;i++){nodes[i].classList.add("active");nodes[i].classList.add("visible");nodes[i].classList.add("aos-animate");}
}
showHiddenReveal();
document.addEventListener("DOMContentLoaded",showHiddenReveal);
window.addEventListener("load",showHiddenReveal);
})();
</script>
</body>
</html>
```
사용방법 보기

홈페이지 수정
