정리글 보기 | 강의 정리

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI SaaS 실무 샘플</title>

<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial,sans-serif;
background:#0d1117;
color:white;
}

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

.wrap{
max-width:1200px;
width:100%;
margin:0 auto;
padding:0 20px;
}

/* header */
.header{
height:80px;
border-bottom:1px solid rgba(255,255,255,.08);
position:relative;
}

.header .wrap{
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-size:28px;
font-weight:900;
color:#6ea8ff;
}

.menu{
display:flex;
gap:40px;
}

.menu a{
font-weight:700;
}

.ham{
display:none;
background:none;
border:0;
color:white;
font-size:30px;
cursor:pointer;
}

/* hero */
.hero{
padding:120px 0;
}

.hero .wrap{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
}

.hero_text{
width:55%;
}

.hero_text span{
color:#6ea8ff;
font-weight:900;
}

.hero_text h1{
font-size:58px;
line-height:1.2;
margin:20px 0;
}

.hero_text p{
font-size:18px;
line-height:1.8;
color:#b8c1cc;
margin-bottom:35px;
}

.btn{
display:inline-block;
padding:16px 34px;
background:#6ea8ff;
border-radius:8px;
color:#111;
font-weight:900;
cursor:pointer;
}

.hero_box{
width:45%;
height:380px;
border-radius:30px;
background:linear-gradient(135deg,#6ea8ff,#7c5cff);
display:flex;
justify-content:center;
align-items:center;
font-size:42px;
font-weight:900;
}

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

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

.title h2{
font-size:40px;
margin-bottom:15px;
}

.title p{
color:#aab4c0;
}

/* feature */
.feature_wrap{
display:flex;
gap:30px;
}

.feature_card{
width:calc(100% / 3);
background:#161b22;
border-radius:24px;
padding:40px 30px;
transition:.3s;
}

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

.feature_card h3{
font-size:26px;
margin-bottom:15px;
color:#6ea8ff;
}

.feature_card p{
color:#b8c1cc;
line-height:1.8;
}

/* pricing */
.pricing{
background:#161b22;
}

.toggle_wrap{
display:flex;
justify-content:center;
margin-bottom:40px;
}

.toggle_btn{
width:220px;
height:60px;
border-radius:50px;
background:#2b3139;
position:relative;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-around;
}

.circle{
width:100px;
height:48px;
border-radius:50px;
background:#6ea8ff;
position:absolute;
left:6px;
transition:.4s;
}

.circle.active{
left:114px;
}

.price_wrap{
display:flex;
gap:30px;
}

.price_card{
width:calc(100% / 3);
background:#0d1117;
border-radius:24px;
padding:40px;
text-align:center;
}

.price{
font-size:44px;
color:#6ea8ff;
margin:25px 0;
}

/* faq */
.faq_item{
background:#161b22;
border-radius:18px;
margin-bottom:20px;
overflow:hidden;
}

.question{
padding:25px;
font-size:20px;
font-weight:700;
cursor:pointer;
}

.answer{
display:none;
padding:0 25px 25px;
color:#b8c1cc;
line-height:1.7;
}

.answer.active{
display:block;
}

/* footer */
.footer{
height:100px;
display:flex;
justify-content:center;
align-items:center;
color:#999;
}

/* modal */
.modal_wrap{
width:100%;
height:100vh;
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,.6);
display:none;
justify-content:center;
align-items:center;
}

.modal_wrap.active{
display:flex;
}

.modal{
width:380px;
background:#161b22;
padding:35px;
border-radius:24px;
}

.modal input{
width:100%;
height:50px;
margin-bottom:12px;
padding:0 15px;
}

.close_btn{
width:100%;
height:50px;
border:0;
background:#6ea8ff;
cursor:pointer;
font-weight:900;
}

/* mobile */
@media(max-width:768px){

.ham{
display:block;
}

.menu{
display:none;
position:absolute;
top:80px;
left:0;
width:100%;
background:#111;
flex-direction:column;
padding:20px;
}

.menu.active{
display:flex;
}

.hero .wrap{
flex-direction:column;
}

.hero_text,
.hero_box{
width:100%;
}

.hero_text h1{
font-size:38px;
}

.feature_wrap,
.price_wrap{
flex-direction:column;
}

.feature_card,
.price_card{
width:100%;
}
}
</style>
</head>

<body>

<header class="header">
<div class="wrap">

<div class="logo">AI HUB</div>

<nav class="menu">
<a href="#">Feature</a>
<a href="#">Pricing</a>
<a href="#">FAQ</a>
<a href="#">Contact</a>
</nav>

<button class="ham">☰</button>

</div>
</header>

<section class="hero">
<div class="wrap">

<div class="hero_text">
<span>AI AUTOMATION PLATFORM</span>

<h1>
반복 업무를 줄이고<br>
AI로 시간을 절약하세요
</h1>

<p>
콘텐츠 제작, 문서 작성, 업무 자동화를
하나의 플랫폼에서 해결할 수 있습니다.
</p>

<a class="btn open_btn">무료 시작하기</a>
</div>

<div class="hero_box">
AI PLATFORM
</div>

</div>
</section>

<section class="section">
<div class="wrap">

<div class="title">
<h2>Feature</h2>
<p>AI가 업무를 도와주는 핵심 기능</p>
</div>

<div class="feature_wrap">

<div class="feature_card">
<h3>AI Writing</h3>
<p>블로그, 이메일, 콘텐츠를 빠르게 생성합니다.</p>
</div>

<div class="feature_card">
<h3>Automation</h3>
<p>반복 업무를 자동화하여 시간을 절약합니다.</p>
</div>

<div class="feature_card">
<h3>Analytics</h3>
<p>데이터를 분석하여 인사이트를 제공합니다.</p>
</div>

</div>

</div>
</section>

<section class="section pricing">
<div class="wrap">

<div class="title">
<h2>Pricing</h2>
</div>

<div class="toggle_wrap">
<div class="toggle_btn">
<div class="circle"></div>
<span>월간</span>
<span>연간</span>
</div>
</div>

<div class="price_wrap">
<div class="price_card">
<h3>Basic</h3>
<div class="price basic">₩19</div>
</div>

<div class="price_card">
<h3>Pro</h3>
<div class="price pro">₩49</div>
</div>

<div class="price_card">
<h3>Business</h3>
<div class="price business">₩99</div>
</div>
</div>

</div>
</section>

<section class="section">
<div class="wrap">

<div class="title">
<h2>FAQ</h2>
</div>

<div class="faq_item">
<div class="question">AI 무료 사용 가능한가요?</div>
<div class="answer">기본 기능은 무료 사용 가능합니다.</div>
</div>

<div class="faq_item">
<div class="question">언제든 해지 가능한가요?</div>
<div class="answer">네. 언제든 자유롭게 해지 가능합니다.</div>
</div>

</div>
</section>

<footer class="footer">
COPYRIGHT 2026. AI HUB
</footer>

<div class="modal_wrap">
<div class="modal">
<input type="text" placeholder="이름">
<input type="text" placeholder="이메일">
<button class="close_btn">닫기</button>
</div>
</div>

<script>
const ham = document.querySelector('.ham');
const menu = document.querySelector('.menu');

ham.addEventListener('click',()=>{
menu.classList.toggle('active');
});

const circle = document.querySelector('.circle');
const toggleBtn = document.querySelector('.toggle_btn');

toggleBtn.addEventListener('click',()=>{

circle.classList.toggle('active');

const basic = document.querySelector('.basic');
const pro = document.querySelector('.pro');
const business = document.querySelector('.business');

if(circle.classList.contains('active')){
basic.innerText='₩190';
pro.innerText='₩490';
business.innerText='₩990';
}else{
basic.innerText='₩19';
pro.innerText='₩49';
business.innerText='₩99';
}
});

const questions=document.querySelectorAll('.question');

for(let i=0;i<questions.length;i++){

questions[i].addEventListener('click',()=>{

const answer=
questions[i].nextElementSibling;

answer.classList.toggle('active');
});
}

const openBtn=document.querySelector('.open_btn');
const modal=document.querySelector('.modal_wrap');
const closeBtn=document.querySelector('.close_btn');

openBtn.addEventListener('click',()=>{
modal.classList.add('active');
});

closeBtn.addEventListener('click',()=>{
modal.classList.remove('active');
});
</script>

</body>
</html>

#실무형 7번 = AI SaaS / AI 툴 서비스 사이트 완성형

HTML 구조 설계

첨부 파일

댓글 / 답글