지난 시간까지 우리는 AI 3종(GPT vs Cursor vs AntiGravity)을 사용해서 반응형 웹 페이지를 만들어봤고. 세가지 AI가 각자 생성해준 코드와 설명을 비교 분석하고 공부했습니다. 또한 우리는 현대 웹 페이지에서 가장 중요한 “반응형” 에 대한 부분을 배웠습니다.
생각보다 그렇게 어렵지는 않았을 겁니다. 비 개발자로 들어가는 부업러 분들은 현재까지 진행된 내용만 알아도 AI를 다루는 부분과 더해 결과물을 수정하는 부분에서도 엄청난 효율을 느끼실 겁니다.
또한 입문 및 초급 개발자는 어떻게 AI를 활용해야 하는지에 더해 세가지 AI를 비교 분석한 것을 보고 어떤 상황에 어떤 AI를 쓰는게 나을지 알 수 있으셨을 겁니다.
그래서 이번 시간에는 “실무형 구조” 에 들어가는 “헤더”, “푸터”, “레이아웃” 에 대해 배워 보도록 하겠습니다. 특히 부업으로 AI를 활용해 랜딩페이지를 만드시거나 템플릿을 수정하는 분들의 경우 “헤더”, “푸터” 등의 개념이 굉장히 생소하실 수 있으시겠지만. 이번 개념만 잘 잡아 놓으시면 추후 페이지를 만들고 수정하실 때 굉장히 쉽고 빠르게 수정하실 수 있을 겁니다.
그럼 시작하겠습니다.
🔗 AI 실습을 위한 외부 링크
- GPT: https://chat.openai.com
- Cursor: https://www.cursor.com
- AntiGravity: https://antigravity
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
드디어 ‘실무형 구조’를 만든다
앞서 서론에서 설명한 대로 로그인 페이지 → 기본 구조 잡기 → 반응형 구조 만들기를 거쳐서
이제는 실제 서비스에서 가장 중요한 3가지 기본 뼈대를 구현할 차례입니다.
- 헤더(Header) – 로고 + 메뉴
- 푸터(Footer) – 저작권·링크
- 메인 레이아웃(Layout) – 그리드 구조
이 세 가지는 모든 웹사이트의 공통 요소이며, 한 번 제대로 만들어놓으면 이후 상세페이지, 게시판, 마이페이지 등 모든 페이지에서 활용됩니다.
이번 Part 5에서는
✨ GPT vs Cursor vs AntiGravity 3종 AI가 동일한 프롬프트에 어떻게 다른 결과를 내는지 비교
✨ 비전공자·입문자·부업러도 이해할 수 있게 HTML/CSS 구조 설명
✨ 실무 개발자 입장에서의 장단점 분석
까지 모두 다룹니다.
이번에 AI 3종에게 준 동일한 프롬프트
“로고, 메뉴가 들어가는 실무형 헤더와 간단한 푸터, 그리고 반응형 메인 레이아웃을 HTML/CSS로 만들어줘.
모바일 전환 시 메뉴는 햄버거 버튼으로 변경해줘.
코드는 초급자도 읽기 쉽게 주석 포함해서 작성해줘.”
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
1. GPT가 생성한 코드 – 기본에 충실, 가장 무난한 구조
GPT는 언제나 그렇듯 표준을 잘 지키는 구조를 제공합니다.
📌 GPT 결과물의 핵심 특징
- HTML5 시맨틱 태그(header/nav/footer) 적극 사용
- CSS도 깔끔하게 정리됨
- 모바일 전환 로직도 비교적 간단
- 입문자·부업러가 따라하기 가장 쉬운 형태
✔ GPT 생성 HTML 코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>실무형 헤더 + 반응형 레이아웃 예제</title>
<!-- 외부 CSS 연결 -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- 페이지 전체 래퍼 -->
<div class="site-wrapper">
<!-- 헤더: 로고 + 네비게이션 -->
<header class="site-header">
<div class="container header-inner">
<!-- 로고 영역 -->
<a href="#" class="logo" aria-label="홈으로 이동">
<!-- 실제 프로젝트에선 img 태그나 SVG 사용 -->
<strong>MyCompany</strong>
</a>
<!-- 데스크탑 메뉴 (기본 보임) -->
<nav class="main-nav" aria-label="메인 네비게이션">
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a class="btn-cta" href="#">Contact</a></li>
</ul>
</nav>
<!-- 모바일용 햄버거 버튼 -->
<button class="hamburger" aria-controls="mobile-menu" aria-expanded="false" aria-label="메뉴 열기">
<!-- 시각적 햄버거 아이콘 (CSS로 스타일링) -->
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<!-- 모바일 메뉴 (초기에는 숨김) -->
<div id="mobile-menu" class="mobile-menu" aria-hidden="true">
<ul class="mobile-nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a class="btn-cta" href="#">Contact</a></li>
</ul>
</div>
</header>
<!-- 메인: 반응형 레이아웃 예시 -->
<main class="site-main">
<div class="container main-grid">
<!-- 메인 콘텐츠 -->
<section class="content">
<h1>페이지 제목</h1>
<p>여기는 주요 콘텐츠 영역입니다. 문단, 이미지, 카드 등을 넣어 컨텐츠를 구성하세요.</p>
<!-- 간단한 카드 레이아웃 예시 -->
<div class="cards">
<article class="card">
<h3>서비스 A</h3>
<p>서비스 설명이 들어갑니다.</p>
<a href="#" class="card-link">자세히</a>
</article>
<article class="card">
<h3>서비스 B</h3>
<p>서비스 설명이 들어갑니다.</p>
<a href="#" class="card-link">자세히</a>
</article>
<article class="card">
<h3>서비스 C</h3>
<p>서비스 설명이 들어갑니다.</p>
<a href="#" class="card-link">자세히</a>
</article>
</div>
</section>
<!-- 사이드바 (데스크탑에 보임, 모바일에선 레이아웃 아래로 감) -->
<aside class="sidebar">
<div class="widget">
<h4>사이드 정보</h4>
<p>공지, 링크, 연락처 등</p>
</div>
</aside>
</div>
</main>
<!-- 푸터: 간단한 정보 -->
<footer class="site-footer">
<div class="container footer-inner">
<p>© <span id="year"></span> MyCompany. All rights reserved.</p>
<nav class="footer-nav" aria-label="푸터 네비게이션">
<a href="#">개인정보처리방침</a>
<a href="#">이용약관</a>
</nav>
</div>
</footer>
</div>
<!-- JS 연결 (햄버거 동작) -->
<script src="script.js"></script>
</body>
</html>
✔ GPT 생성 HTML 코드 설명
- 전체 구조 개요
- HTML은 페이지의 뼈대를 만드는 파일.
- 주요 영역은 Header / Main / Footer 3파트.
- 메뉴, 콘텐츠, 사이드바 등의 레이아웃을 구성하는 역할.
- 헤더 영역
- 로고(사이트 이름 또는 이미지)가 들어감.
- PC에서는 가로 메뉴가 보임.
- 모바일에서는 메뉴 대신 햄버거 버튼이 보임.
- 메뉴를
<nav>와<ul>,<li>구조로 정리해 시맨틱 구조를 유지.
- 모바일 메뉴
- 화면이 좁을 때만 보여짐.
- 햄버거 버튼을 클릭했을 때 열림.
- 구조는 데스크탑 메뉴와 동일하게
<ul>목록 형태.
- 메인 콘텐츠
- 실제 페이지의 내용이 들어가는 영역.
- 카드 3개로 구성된 박스 레이아웃 예시 포함.
- PC에서는 본문 + 사이드바 2열 구조.
- 모바일에서는 자연스럽게 세로 구조로 변경됨.
- 사이드 바
- 공지, 정보, 배너 등 부가적인 내용을 넣는 공간.
- PC에서는 오른쪽에 배치.
- 모바일에서는 본문 아래로 자연스럽게 이동.
- 푸터 영역
- 회사명, 저작권, 개인정보처리방침 등 하단 정보 배치.
- 모든 페이지 공통으로 쓰이는 요소.
- script.js 연결
- 햄버거 메뉴가 열리고 닫히는 동작을 위해 JS 파일을 마지막에 연결.
- HTML은 구조만 담당하고, 동작은 JS가 담당하는 것이 기본 구조.
✔ GPT 생성 CSS 코드
/* --- 기본 리셋 & 변수 --- */
:root{
--gap: 16px;
--container-width: 1100px;
--brand: #0b76ef;
--muted: #666;
--bg: #f8fafc;
--card-bg: #fff;
--radius: 8px;
}
/* 기본 리셋 (간단) */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans KR', 'Helvetica Neue', Arial; color:#111; background:var(--bg); }
a { color:inherit; text-decoration:none; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 16px; }
/* --- 헤더 --- */
.site-header { background:#fff; box-shadow: 0 1px 4px rgba(16,24,40,0.05); position:sticky; top:0; z-index:1000; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--gap); padding:12px 0; }
/* 로고 */
.logo { display:flex; align-items:center; gap:8px; font-size:1.125rem; color:var(--brand); }
.logo strong { font-weight:700; }
/* 네비게이션 (데스크탑) */
.main-nav .nav-list { display:flex; list-style:none; gap:18px; margin:0; padding:0; align-items:center; }
.main-nav a { padding:8px 6px; color:var(--muted); border-radius:6px; }
.main-nav a:hover, .main-nav a:focus { color:#000; background:rgba(11,118,239,0.06); outline:none; }
/* CTA 버튼 스타일 */
.btn-cta { background:var(--brand); color:#fff; padding:8px 12px; border-radius:6px; }
.btn-cta:hover, .btn-cta:focus { opacity:0.95; }
/* 햄버거 버튼 (초기 숨김: 데스크탑에서 숨김) */
.hamburger { display:none; background:transparent; border:0; cursor:pointer; padding:8px; }
.hamburger:focus { outline:2px solid rgba(11,118,239,0.25); border-radius:6px; }
/* 햄버거 아이콘 */
.hamburger-box { display:inline-block; width:28px; height:18px; position:relative; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
display:block; position:absolute; height:2px; width:100%; background:#111; left:0; transition: transform .25s ease, opacity .2s linear;
}
.hamburger-inner { top:50%; transform: translateY(-50%); }
.hamburger-inner::before { content:""; top:-8px; }
.hamburger-inner::after { content:""; bottom:-8px; }
/* 모바일 메뉴 (숨김) */
.mobile-menu { display:none; background:#fff; border-top:1px solid rgba(16,24,40,0.04); }
.mobile-nav-list { list-style:none; margin:0; padding:12px; display:flex; flex-direction:column; gap:8px; }
.mobile-nav-list a { display:block; padding:10px 12px; border-radius:6px; color:var(--muted); }
.mobile-nav-list a:hover { background:rgba(11,118,239,0.04); color:#000; }
/* --- 메인 레이아웃 --- */
.site-main { padding:36px 0; }
.main-grid { display:grid; grid-template-columns: 1fr 320px; gap:24px; align-items:start; }
/* 카드 스타일 */
.cards { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:16px; }
.card { background:var(--card-bg); border-radius:var(--radius); padding:16px; box-shadow:0 1px 4px rgba(16,24,40,0.04); }
.card h3 { margin:0 0 8px 0; font-size:1.05rem; }
.card p { margin:0 0 12px 0; color:var(--muted); }
.card-link { font-weight:600; font-size:0.95rem; color:var(--brand); }
/* 사이드바 위젯 */
.sidebar .widget { background:var(--card-bg); padding:16px; border-radius:8px; box-shadow:0 1px 4px rgba(16,24,40,0.04); }
/* --- 푸터 --- */
.site-footer { background:#fff; border-top:1px solid rgba(16,24,40,0.04); padding:18px 0; margin-top:40px; }
.footer-inner { display:flex; gap:12px; align-items:center; justify-content:space-between; color:var(--muted); font-size:0.95rem; }
/* --- 반응형 --- */
@media (max-width: 900px) {
/* 컨테이너 그리드에서 한 열로 변경 */
.main-grid { grid-template-columns: 1fr; }
.cards { grid-template-columns: repeat(2,1fr); }
.main-nav { display:none; } /* 데스크탑 메뉴 숨김 */
.hamburger { display:block; } /* 햄버거 보임 */
.mobile-menu { display:none; } /* 초기에는 숨김(토글로 보일 것) */
.footer-inner { flex-direction:column; align-items:flex-start; gap:8px; }
}
/* 모바일에서 더 작을 때 카드 한 열 */
@media (max-width: 480px) {
.cards { grid-template-columns: 1fr; }
.logo { font-size:1rem; }
.hamburger-box { width:24px; height:14px; }
}
✔ GPT 생성 CSS 코드 설명
- 변수 설정(:root)
- 색상, 간격, 상자 크기 등을 변수로 관리.
- 나중에 전체 디자인을 바꾸기 쉬움(실무에서 매우 선호).
- 기본 스타일(리셋)
- 브라우저마다 다른 기본 스타일을 통일하기 위한 설정.
box-sizing: border-box;→ 레이아웃 계산이 쉽고 단정해짐.
- 헤더 스타일
- 배경을 흰색으로, 아래에 아주 약한 그림자 추가해 실무형 느낌.
position: sticky; top: 0;→ 스크롤해도 상단에 고정되는 헤더.
- 데스크 탑 메뉴 디자인
- 메뉴는 가로로 배치.
- hover 시 약한 하이라이트 적용.
- Contact 버튼은 강조 색(브랜드 컬러) 사용.
- 햄버거 버튼
- 기본은 숨겨져 있음(PC 화면에서는 필요 없음).
- 모바일에서만 보여지도록 설정.
- 모바일 메뉴 스타일
- 햄버거 클릭 시 나타나는 메뉴.
- 세로 배치.
- 각 메뉴에 여백을 주어 모바일에서 눌렀을 때 편안함.
- 메인 그리드 레이아웃
- PC에서는 본문 1 + 사이드바 1 형태의 2열 그리드.
- gap을 활용해 레이아웃 간 간격 확보.
- 카드(services A / B / C)
- 흰색 박스 + 라운드 처리 + 약한 그림자 → 실무에서 많이 쓰이는 카드 UI.
- 제목과 설명의 간격을 유지해 가독성 향상.
- 반응형(Media Query)
- width 900px 이하 → 메뉴 숨김 / 햄버거 보임.
- width 480px 이하 → 카드 1열.
- 모바일 환경에서 최적의 배치를 위해 간격과 구조를 단순화.
✔ GPT 생성 Js 코드
// 햄버거 메뉴 토글 제어 (접근성 포함)
// DOM 로드 후 실행
document.addEventListener('DOMContentLoaded', function () {
const hamburger = document.querySelector('.hamburger');
const mobileMenu = document.getElementById('mobile-menu');
if (!hamburger || !mobileMenu) return;
// 햄버거 클릭시 aria-expanded와 메뉴 보이기/숨기기 토글
hamburger.addEventListener('click', function () {
const expanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', String(!expanded));
// 보여주기/숨기기
if (expanded) {
mobileMenu.style.display = 'none';
mobileMenu.setAttribute('aria-hidden', 'true');
this.querySelector('.hamburger-inner').style.transform = 'rotate(0deg)';
this.querySelector('.hamburger-inner::before');
} else {
mobileMenu.style.display = 'block';
mobileMenu.setAttribute('aria-hidden', 'false');
this.querySelector('.hamburger-inner').style.transform = 'rotate(90deg)';
}
});
// 창 사이즈 변경 시 모바일 메뉴의 인라인 스타일 정리 (상태 동기화)
window.addEventListener('resize', function () {
// 화면이 충분히 넓으면 모바일 메뉴 숨기고 aria 상태 초기화
if (window.innerWidth > 900) {
mobileMenu.style.display = '';
mobileMenu.setAttribute('aria-hidden', 'true');
hamburger.setAttribute('aria-expanded', 'false');
} else {
// 모바일일 때는 기본 숨김
if (hamburger.getAttribute('aria-expanded') === 'true') {
mobileMenu.style.display = 'block';
mobileMenu.setAttribute('aria-hidden', 'false');
} else {
mobileMenu.style.display = 'none';
mobileMenu.setAttribute('aria-hidden', 'true');
}
}
});
// 푸터의 연도 자동 설정 (index.html에 id="year" 필요)
const y = new Date().getFullYear();
const yearEl = document.getElementById('year');
if (yearEl) yearEl.textContent = y;
});
✔ GPT 생성 Js 코드 설명
- DOMContentLoaded 이벤트
- HTML이 모두 로드된 후 JS를 실행하기 위함.
- HTML보다 JS가 먼저 실행되어 오류가 발생하는 것을 방지.
- 필요한 요소 가져오기
.hamburger→ 햄버거 버튼.#mobile-menu→ 모바일 메뉴 박스.
- 버튼 클릭 시 메뉴 열기 / 닫기
display: block→ 모바일 메뉴 보이기.display: none→ 모바일 메뉴 숨기기.- aria-expanded / aria-hidden 값도 함께 변경하여 접근성 준수.
- 상태 관리
- 버튼에 “메뉴가 열려 있는지/닫혀 있는지”를 저장.
- 이 값을 기준으로 다음 열기/닫기 동작을 결정.
- 접근성(ARIA)
- 스크린리더 사용자에게 메뉴의 열림/닫힘 상태를 알려주는 표준 기능.
- 실무에서 중요한 요소 중 하나.
✔ GPT 생성 페이지 결과
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
✔ GPT 실무 평가
| 항목 | 점수 | 설명 |
|---|---|---|
| 초급자 난이도 | ⭐⭐⭐⭐⭐ | 가장 따라 하기 쉬움 |
| 실무 적합도 | ⭐⭐⭐⭐ | 기본 구조를 만들 때 매우 좋음 |
| 반응형 구조 | ⭐⭐⭐⭐ | 모바일 기준 명확 |
| 확장성 | ⭐⭐⭐ | UI가 단순하여 고도화는 추가 작업 필요 |
2. Cursor가 생성한 코드 – 실무 개발자 스타일
Cursor AI는 코드 품질을 가장 중요하게 생각합니다. 개발자가 자주 사용하는 구조, 확장 가능한 CSS 설계를 보여줍니다.
📌 Cursor 결과물 특징
- SCSS 느낌의 구조화된 CSS
- 클래스 네이밍이 BEM 스타일에 가까움
- 햄버거 메뉴 토글 스크립트도 자동 생성
- 실무에서는 정말 편함
✔ Cursor 생성 HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실무형 반응형 웹사이트</title>
<!-- CSS 파일 연결 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 헤더 영역 시작 -->
<header class="header">
<div class="container">
<!-- 로고 영역 -->
<div class="logo">
<a href="#" class="logo-link">
<img src="https://via.placeholder.com/150x50?text=LOGO" alt="로고" class="logo-img">
<!-- 이미지 없을 경우를 대비한 텍스트 로고 -->
<span class="logo-text">Company Logo</span>
</a>
</div>
<!-- 네비게이션 메뉴 -->
<nav class="nav" id="nav">
<ul class="nav-list">
<li class="nav-item"><a href="#home" class="nav-link">홈</a></li>
<li class="nav-item"><a href="#about" class="nav-link">회사소개</a></li>
<li class="nav-item"><a href="#services" class="nav-link">서비스</a></li>
<li class="nav-item"><a href="#portfolio" class="nav-link">포트폴리오</a></li>
<li class="nav-item"><a href="#contact" class="nav-link">문의하기</a></li>
</ul>
</nav>
<!-- 햄버거 버튼 (모바일용) -->
<button class="hamburger" id="hamburger" aria-label="메뉴 열기">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
</header>
<!-- 헤더 영역 끝 -->
<!-- 메인 콘텐츠 영역 시작 -->
<main class="main">
<div class="container">
<!-- 히어로 섹션 (선택사항) -->
<section class="hero">
<h1 class="hero-title">반응형 웹사이트</h1>
<p class="hero-description">모든 디바이스에서 최적화된 경험을 제공합니다.</p>
</section>
<!-- 콘텐츠 섹션 -->
<section class="content-section">
<h2 class="section-title">환영합니다</h2>
<p class="section-text">
이 웹사이트는 반응형 디자인으로 제작되었습니다.
데스크톱, 태블릿, 모바일 등 다양한 화면 크기에서
최적의 레이아웃을 제공합니다.
</p>
<p class="section-text">
모바일 환경에서는 상단의 햄버거 버튼을 클릭하여
메뉴를 열고 닫을 수 있습니다.
</p>
</section>
<!-- 카드 그리드 섹션 (반응형 그리드 예시) -->
<section class="cards-section">
<div class="cards-grid">
<div class="card">
<h3 class="card-title">카드 1</h3>
<p class="card-text">반응형 카드 레이아웃 예시입니다.</p>
</div>
<div class="card">
<h3 class="card-title">카드 2</h3>
<p class="card-text">화면 크기에 따라 자동으로 정렬됩니다.</p>
</div>
<div class="card">
<h3 class="card-title">카드 3</h3>
<p class="card-text">Flexbox와 Grid를 활용했습니다.</p>
</div>
</div>
</section>
</div>
</main>
<!-- 메인 콘텐츠 영역 끝 -->
<!-- 푸터 영역 시작 -->
<footer class="footer">
<div class="container">
<!-- 푸터 콘텐츠 -->
<div class="footer-content">
<div class="footer-section">
<h4 class="footer-title">회사 정보</h4>
<p class="footer-text">주소: 서울특별시 강남구 테헤란로 123</p>
<p class="footer-text">전화: 02-1234-5678</p>
<p class="footer-text">이메일: contact@example.com</p>
</div>
<div class="footer-section">
<h4 class="footer-title">빠른 링크</h4>
<ul class="footer-links">
<li><a href="#home" class="footer-link">홈</a></li>
<li><a href="#about" class="footer-link">회사소개</a></li>
<li><a href="#services" class="footer-link">서비스</a></li>
<li><a href="#contact" class="footer-link">문의하기</a></li>
</ul>
</div>
<div class="footer-section">
<h4 class="footer-title">소셜 미디어</h4>
<div class="social-links">
<a href="#" class="social-link" aria-label="페이스북">Facebook</a>
<a href="#" class="social-link" aria-label="인스타그램">Instagram</a>
<a href="#" class="social-link" aria-label="트위터">Twitter</a>
</div>
</div>
</div>
<!-- 푸터 하단 (저작권 정보) -->
<div class="footer-bottom">
<p class="copyright">&copy; 2024 Company Name. All rights reserved.</p>
</div>
</div>
</footer>
<!-- 푸터 영역 끝 -->
<!-- JavaScript 파일 연결 (햄버거 메뉴 토글 기능) -->
<script src="script.js"></script>
</body>
</html>
✔ Cursor 생성 HTML 코드 설명
- 문서 기본 설정
- <!DOCTYPE html>: HTML5 문서 타입 선언
- <html lang=”ko”>: 한국어 페이지
- <meta charset=”UTF-8″>: 한글 인코딩
- <meta name=”viewport”>: 반응형 뷰포트(모바일 대응)
- <title>: 브라우저 탭 제목
- 헤더 영역(<header>)
- 로고
- 이미지 로고 + 텍스트 로고(이미지 로드 실패 대비)
- 클릭 시 홈 이동
- 네비게이션
- 5개 메뉴(홈, 회사소개, 서비스, 포트폴리오, 문의하기)
- <nav> 태그 사용
- id=”nav”로 JavaScript에서 제어
- 햄버거 버튼
- 모바일 메뉴 토글용
- 3개 선으로 구성
- aria-label로 접근성 제공
- 메인 콘텐츠 영역(<main>)
- 히어로 섹션
- 메인 타이틀과 설명
- 콘텐츠 섹션
- 웹사이트 설명
- 카드 그리드 섹션
- 반응형 카드 3개(화면 크기에 따라 자동 배치)
- 푸터 영역(<footer>)
- 회사 정보
- 주소, 전화, 이메일
- 빠른 링크
- 헤더 메뉴와 동일
- 소셜 미디어
- Facebook, Instagram, Twitter
- 저작권 정보
- 푸터 하단
✔ Cursor 생성 CSS 코드
/* ============================================
전역 스타일 및 초기화
============================================ */
/* 모든 요소의 기본 마진, 패딩 제거 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 기본 폰트 및 색상 설정 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
}
/* 링크 기본 스타일 제거 */
a {
text-decoration: none;
color: inherit;
}
/* 리스트 기본 스타일 제거 */
ul, li {
list-style: none;
}
/* 버튼 기본 스타일 제거 */
button {
border: none;
background: none;
cursor: pointer;
font-family: inherit;
}
/* ============================================
컨테이너 (공통 레이아웃)
============================================ */
/* 모든 섹션에서 사용할 중앙 정렬 컨테이너 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
}
/* ============================================
헤더 스타일
============================================ */
.header {
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
/* 헤더가 상단에 고정되도록 설정 */
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 20px;
/* Flexbox로 로고와 메뉴를 양쪽 끝에 배치 */
}
/* 로고 스타일 */
.logo {
display: flex;
align-items: center;
}
.logo-link {
display: flex;
align-items: center;
gap: 10px;
}
.logo-img {
height: 40px;
width: auto;
display: block;
}
.logo-text {
font-size: 1.5rem;
font-weight: bold;
color: #2c3e50;
}
/* 네비게이션 메뉴 스타일 */
.nav {
/* 데스크톱에서는 항상 보임 */
}
.nav-list {
display: flex;
gap: 2rem;
/* 메뉴 항목들 사이의 간격 */
}
.nav-item {
position: relative;
}
.nav-link {
color: #333;
font-weight: 500;
padding: 0.5rem 0;
transition: color 0.3s ease;
display: block;
/* 호버 효과를 위한 트랜지션 */
}
/* 메뉴 링크 호버 효과 */
.nav-link:hover {
color: #3498db;
}
/* ============================================
햄버거 버튼 스타일 (모바일용)
============================================ */
/* 햄버거 버튼은 기본적으로 숨김 (데스크톱) */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
padding: 5px;
z-index: 1001;
/* 모바일에서만 표시되도록 설정 */
}
.hamburger-line {
width: 25px;
height: 3px;
background-color: #333;
border-radius: 3px;
transition: all 0.3s ease;
/* 햄버거 버튼의 각 선 (3개) */
}
/* 햄버거 버튼 활성화 상태 (메뉴가 열렸을 때) */
.hamburger.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}
.hamburger.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
/* ============================================
메인 콘텐츠 스타일
============================================ */
.main {
min-height: calc(100vh - 200px);
padding: 2rem 0;
/* 푸터 높이를 고려한 최소 높이 */
}
/* 히어로 섹션 스타일 */
.hero {
text-align: center;
padding: 4rem 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 10px;
margin-bottom: 3rem;
}
.hero-title {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero-description {
font-size: 1.2rem;
opacity: 0.9;
}
/* 콘텐츠 섹션 스타일 */
.content-section {
background-color: white;
padding: 2rem;
border-radius: 10px;
margin-bottom: 2rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.section-title {
font-size: 2rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.section-text {
margin-bottom: 1rem;
line-height: 1.8;
color: #666;
}
/* 카드 그리드 섹션 */
.cards-section {
margin-top: 2rem;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
/* 반응형 그리드: 최소 300px, 자동으로 컬럼 수 조정 */
}
.card {
background-color: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.card-title {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.card-text {
color: #666;
line-height: 1.6;
}
/* ============================================
푸터 스타일
============================================ */
.footer {
background-color: #2c3e50;
color: #ecf0f1;
padding: 3rem 0 1rem;
margin-top: 4rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
/* 반응형 그리드로 푸터 섹션 배치 */
}
.footer-section {
/* 각 푸터 섹션 스타일 */
}
.footer-title {
font-size: 1.2rem;
margin-bottom: 1rem;
color: #fff;
}
.footer-text {
margin-bottom: 0.5rem;
color: #bdc3c7;
line-height: 1.8;
}
.footer-links {
/* 푸터 링크 리스트 */
}
.footer-links li {
margin-bottom: 0.5rem;
}
.footer-link {
color: #bdc3c7;
transition: color 0.3s ease;
display: inline-block;
}
.footer-link:hover {
color: #3498db;
}
.social-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.social-link {
color: #bdc3c7;
transition: color 0.3s ease;
}
.social-link:hover {
color: #3498db;
}
/* 푸터 하단 (저작권 정보) */
.footer-bottom {
border-top: 1px solid #34495e;
padding-top: 1rem;
text-align: center;
}
.copyright {
color: #95a5a6;
font-size: 0.9rem;
}
/* ============================================
반응형 디자인 (모바일)
============================================ */
/* 태블릿 및 모바일 화면 (768px 이하) */
@media screen and (max-width: 768px) {
/* 헤더 컨테이너 조정 */
.header .container {
padding: 1rem 15px;
}
/* 로고 텍스트 크기 조정 */
.logo-text {
font-size: 1.2rem;
}
/* 네비게이션 메뉴를 모바일용으로 변경 */
.nav {
position: fixed;
top: 0;
right: -100%;
width: 70%;
max-width: 300px;
height: 100vh;
background-color: #fff;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
transition: right 0.3s ease;
z-index: 1000;
/* 모바일 메뉴는 화면 오른쪽에서 슬라이드 */
}
/* 메뉴가 열렸을 때 */
.nav.active {
right: 0;
}
/* 모바일 메뉴 리스트를 세로로 배치 */
.nav-list {
flex-direction: column;
padding: 80px 20px 20px;
gap: 0;
}
.nav-item {
border-bottom: 1px solid #eee;
}
.nav-link {
padding: 1rem 0;
display: block;
font-size: 1.1rem;
}
/* 햄버거 버튼 표시 */
.hamburger {
display: flex;
}
/* 히어로 섹션 폰트 크기 조정 */
.hero-title {
font-size: 2rem;
}
.hero-description {
font-size: 1rem;
}
/* 카드 그리드를 한 줄로 변경 */
.cards-grid {
grid-template-columns: 1fr;
}
/* 푸터 그리드 조정 */
.footer-content {
grid-template-columns: 1fr;
}
}
/* 작은 모바일 화면 (480px 이하) */
@media screen and (max-width: 480px) {
.container {
padding: 0 15px;
}
.hero {
padding: 2rem 1rem;
}
.hero-title {
font-size: 1.5rem;
}
.content-section {
padding: 1.5rem;
}
.section-title {
font-size: 1.5rem;
}
.card {
padding: 1.5rem;
}
}
/* ============================================
접근성 향상 (다크 모드 대비 등)
============================================ */
/* 포커스 시 시각적 표시 */
a:focus,
button:focus {
outline: 2px solid #3498db;
outline-offset: 2px;
}
/* 스크린 리더용 텍스트 숨김 (필요시) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
✔ Cursor 생성 CSS 코드 설명
- 전역 스타일 초기화
- * { margin: 0; padding: 0; box-sizing: border-box; }
- 기본 여백 제거
- box-sizing으로 패딩 포함 크기 계산
- body 스타일
- 폰트, 줄간격, 색상, 배경색
- 기본 태그 스타일 제거
- a: 밑줄 제거
- ul, li: 리스트 스타일 제거
- button: 기본 버튼 스타일 제거
- 컨테이너(공통 레이아웃)
- .container
- 최대 너비 1200px
- 중앙 정렬(margin: 0 auto)
- 좌우 패딩 20px
- 헤더 스타일
- .header
- 흰 배경
- 그림자
- position: sticky로 상단 고정
- z-index: 1000으로 다른 요소 위 표시
- .header .container
- Flexbox로 로고와 메뉴 양쪽 배치
- .logo: 로고 이미지/텍스트 정렬
- .nav-list: Flexbox로 가로 메뉴, 간격 2rem
- .nav-link:hover: 호버 시 파란색
- 햄버거 버튼 스타일
- .hamburger
- 기본 숨김(display: none)
- 모바일에서만 표시
- .hamburger-line
- 3개 선 스타일(25px × 3px)
- .hamburger.active
- 활성화 시 X 모양으로 변환
- 1번째 선: 45도 회전
- 2번째 선: 투명
- 3번째 선: -45도 회전
- 메인 콘텐츠 스타일
- .hero
- 그라데이션 배경
- 중앙 정렬, 패딩 4rem
- .content-section
- 흰 배경, 둥근 모서리, 그림자
- .cards-grid
- CSS Grid
- repeat(auto-fit, minmax(300px, 1fr))로 반응형
- 최소 300px, 자동 컬럼 조정
- .card:hover
- 호버 시 위로 이동, 그림자 강화
- 푸터 스타일
- .footer
- 어두운 배경(#2c3e50)
- 패딩 3rem
- .footer-content
- Grid로 섹션 배치
- repeat(auto-fit, minmax(250px, 1fr))
- .footer-link:hover: 호버 시 파란색
- .footer-bottom: 저작권 정보 하단 구분선
- 반응형 디자인(미디어 쿼리)
- @media (max-width: 768px) – 태블릿/모바일
- .nav: position: fixed, 오른쪽에서 슬라이드
- .nav.active: right: 0으로 표시
- .nav-list: 세로 배치(flex-direction: column)
- .hamburger: display: flex로 표시
- .cards-grid: 1열로 변경
- .footer-content: 1열로 변경
- @media (max-width: 480px) – 작은 모바일
- 폰트 크기 축소
- 패딩 축소
- 접근성 향상
- a:focus, button:focus
- 포커스 시 파란색 외곽선
- .sr-only
- 스크린 리더용 숨김 텍스트
✔ Cursor 생성 Js 코드
/* ============================================
햄버거 메뉴 토글 기능
============================================ */
// DOM 요소 가져오기
const hamburger = document.getElementById('hamburger');
const nav = document.getElementById('nav');
// 햄버거 버튼 클릭 이벤트 리스너 추가
hamburger.addEventListener('click', function() {
// nav에 'active' 클래스를 토글 (있으면 제거, 없으면 추가)
nav.classList.toggle('active');
// 햄버거 버튼에도 'active' 클래스를 토글하여 X 모양으로 변경
hamburger.classList.toggle('active');
// 메뉴가 열려있을 때는 body 스크롤 방지
if (nav.classList.contains('active')) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
});
// 메뉴 링크 클릭 시 메뉴 닫기 (모바일에서 메뉴 선택 후 자동으로 닫히도록)
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', function() {
// 모바일 화면에서만 작동하도록 체크 (선택사항)
if (window.innerWidth <= 768) {
nav.classList.remove('active');
hamburger.classList.remove('active');
document.body.style.overflow = '';
}
});
});
// 화면 크기 변경 시 메뉴 상태 초기화 (태블릿에서 데스크톱으로 전환 시)
window.addEventListener('resize', function() {
// 화면이 768px보다 커지면 메뉴 닫기
if (window.innerWidth > 768) {
nav.classList.remove('active');
hamburger.classList.remove('active');
document.body.style.overflow = '';
}
});
// 메뉴 영역 외부 클릭 시 메뉴 닫기 (선택사항)
document.addEventListener('click', function(event) {
// 모바일 화면이고 메뉴가 열려있을 때만 체크
if (window.innerWidth <= 768 && nav.classList.contains('active')) {
// 클릭한 요소가 메뉴나 햄버거 버튼이 아닐 때
if (!nav.contains(event.target) && !hamburger.contains(event.target)) {
nav.classList.remove('active');
hamburger.classList.remove('active');
document.body.style.overflow = '';
}
}
});
✔ Cursor 생성 Js 코드 설명
- DOM 요소 가져오기
- getElementById(‘hamburger’): 햄버거 버튼
- getElementById(‘nav’): 네비게이션 메뉴
- 햄버거 버튼 클릭 이벤트
- hamburger.addEventListener(‘click’)
- nav.classList.toggle(‘active’): 메뉴 열기/닫기
- hamburger.classList.toggle(‘active’): 버튼을 X 모양으로
- 메뉴 열림 시 body 스크롤 방지(overflow: hidden)
- 메뉴 링크 클릭 이벤트
- navLinks.forEach()
- 모든 메뉴 링크에 클릭 이벤트
- 모바일(≤768px)에서만 작동
- 클릭 시 메뉴 자동 닫기
- body 스크롤 복구
- 화면 크기 변경 이벤트
- window.addEventListener(‘resize’)
- 데스크톱(>768px) 전환 시 메뉴 닫기
- 메뉴 상태 초기화
- 외부 클릭 감지 이벤트
- document.addEventListener(‘click’)
- 모바일에서 메뉴 열림 상태일 때
- 메뉴/햄버거 외부 클릭 시 메뉴 닫기
- contains()로 클릭 영역 확인
✔ Cursor 생성 반응형 페이지
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
✔ Cursor 실무 평가
| 항목 | 점수 | 설명 |
|---|---|---|
| 초급자 난이도 | ⭐⭐⭐ | 클래스명과 구조가 약간 어려움 |
| 실무 적합도 | ⭐⭐⭐⭐⭐ | 가장 실무적, 확장 쉬움 |
| 반응형 구조 | ⭐⭐⭐⭐⭐ | 햄버거 토글 완성도 높음 |
| 확장성 | ⭐⭐⭐⭐⭐ | BEM 스타일로 유지보수 최강 |
3. AntiGravity가 생성한 코드 – 시각 효과 중심
AntiGravity는 확실히 “시각적으로 만족스러운 결과”를 우선합니다.
📌 AntiGravity 특징
- 그림자, 둥근 모서리 등 스타일 자동 추가
- 초보가 보기에 “예쁘다”
- 하지만 실무자의 관점에서는 스타일이 너무 많아 유지보수 걱정됨
✔ AntiGravity 이 생성한 HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- 모바일 기기에서도 비율이 깨지지 않도록 뷰포트 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 비즈니스 웹사이트</title>
<!-- 스타일 시트 연결 -->
<link rel="stylesheet" href="style.css">
<!-- 자바스크립트 연결 (defer 속성을 사용하여 HTML 로딩 후 실행) -->
<script src="script.js" defer></script>
</head>
<body>
<!-- 헤더 영역: 로고와 네비게이션 메뉴 포함 -->
<header class="main-header">
<div class="container header-container">
<!-- 로고 영역 -->
<div class="logo">
<a href="#">MyBusiness</a>
</div>
<!-- 데스크탑용 네비게이션 메뉴 -->
<nav class="main-nav">
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">포트폴리오</a></li>
<li><a href="#">문의하기</a></li>
</ul>
</nav>
<!-- 모바일용 햄버거 버튼 (기본적으로는 숨겨져 있음) -->
<button class="hamburger-btn" aria-label="메뉴 열기">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<!-- 모바일 메뉴 오버레이 (햄버거 버튼 클릭 시 나타남) -->
<div class="mobile-menu">
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">포트폴리오</a></li>
<li><a href="#">문의하기</a></li>
</ul>
</div>
<!-- 메인 콘텐츠 영역 -->
<main class="main-content">
<div class="container">
<section class="hero-section">
<h1>비즈니스를 위한 최적의 솔루션</h1>
<p>반응형 웹 디자인으로 어디서든 완벽하게 보입니다.</p>
<button class="cta-btn">자세히 보기</button>
</section>
<section class="content-section">
<h2>서비스 소개</h2>
<div class="card-grid">
<div class="card">
<h3>웹 디자인</h3>
<p>최신 트렌드를 반영한 깔끔한 디자인을 제공합니다.</p>
</div>
<div class="card">
<h3>반응형 개발</h3>
<p>PC, 태블릿, 모바일 모든 환경을 지원합니다.</p>
</div>
<div class="card">
<h3>유지보수</h3>
<p>안정적인 서비스 운영을 도와드립니다.</p>
</div>
</div>
</section>
</div>
</main>
<!-- 푸터 영역 -->
<footer class="main-footer">
<div class="container">
<p>&copy; 2024 MyBusiness Corp. All rights reserved.</p>
</div>
</footer>
</body>
</html>
✔ AntiGravity 이 생성한 HTML 코드 설명
웹페이지의 내용을 담당하며, 의미론적 태그(Semantic Tag)를 사용하여 구조를 잡았습니다.
<meta name="viewport">: 모바일 기기에서 화면 비율이 자동으로 축소되지 않고 1:1 비율로 보이게 하는 필수 설정입니다.<script ... defer>: HTML이 모두 해석(파싱)된 후에 자바스크립트를 실행하도록defer속성을 사용했습니다.- 시맨틱 태그 사용:
<header>: 상단 로고와 메뉴 영역.<main>: 본문 콘텐츠 영역.<footer>: 하단 저작권 정보 영역.
- 두 가지 메뉴 구조:
<nav class="main-nav">: PC 화면에서 보이는 가로형 메뉴.<div class="mobile-menu">: 모바일 화면에서만 나타날 숨겨진 메뉴 영역.
- 햄버거 버튼: 모바일에서만 보일 버튼 요소로, 접근성을 위해
aria-label을 추가했습니다.
✔ AntiGravity 이 생성한 CSS 코드
/* =========================================
기본 설정 (Variables & Reset)
========================================= */
:root {
--primary-color: #2563eb; /* 주요 포인트 색상 (파란색 계열) */
--text-color: #333333; /* 기본 텍스트 색상 */
--bg-color: #ffffff; /* 배경 색상 */
--header-height: 70px; /* 헤더 높이 변수 */
--gray-light: #f3f4f6; /* 연한 회색 배경 */
}
/* 모든 요소의 여백과 패딩을 초기화하고, 박스 크기를 테두리 포함으로 설정 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
color: var(--text-color);
line-height: 1.6;
}
/* 링크 기본 스타일 제거 */
a {
text-decoration: none;
color: inherit;
}
/* 리스트 스타일 제거 */
ul {
list-style: none;
}
/* 공통 컨테이너: 중앙 정렬 및 좌우 패딩 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* =========================================
헤더 (Header) 스타일
========================================= */
.main-header {
height: var(--header-height);
background-color: var(--bg-color);
border-bottom: 1px solid #e5e7eb; /* 하단 경계선 */
display: flex;
align-items: center; /* 수직 중앙 정렬 */
position: fixed; /* 상단 고정 */
top: 0;
width: 100%;
z-index: 1000; /* 다른 요소보다 위에 표시 */
}
.header-container {
display: flex;
justify-content: space-between; /* 로고와 메뉴를 양끝으로 배치 */
align-items: center;
width: 100%;
height: 100%;
}
.logo a {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
}
/* 데스크탑 네비게이션 메뉴 */
.main-nav ul {
display: flex;
gap: 30px; /* 메뉴 간 간격 */
}
.main-nav a {
font-weight: 500;
transition: color 0.3s;
}
.main-nav a:hover {
color: var(--primary-color);
}
/* 햄버거 버튼 (기본적으로 PC에서는 숨김) */
.hamburger-btn {
display: none;
background: none;
border: none;
cursor: pointer;
width: 30px;
height: 20px;
position: relative;
}
/* 햄버거 버튼 내부의 3줄 선 스타일 */
.hamburger-btn span {
display: block;
width: 100%;
height: 2px;
background-color: var(--text-color);
position: absolute;
transition: all 0.3s ease-in-out;
}
.hamburger-btn span:nth-child(1) { top: 0; }
.hamburger-btn span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger-btn span:nth-child(3) { bottom: 0; }
/* 햄버거 버튼 활성화 시 (X 모양 만들기) */
.hamburger-btn.active span:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.hamburger-btn.active span:nth-child(2) {
opacity: 0; /* 가운데 선 투명하게 */
}
.hamburger-btn.active span:nth-child(3) {
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
/* 모바일 메뉴 오버레이 (PC에서는 숨김) */
.mobile-menu {
display: block;
position: fixed;
top: var(--header-height);
left: 0;
width: 100%;
background-color: var(--bg-color);
padding: 20px 0;
border-bottom: 1px solid #e5e7eb;
transform: translateY(-150%); /* 위로 숨겨둠 */
transition: transform 0.3s ease-in-out;
z-index: 999;
}
/* 모바일 메뉴 활성화 시 화면에 표시 */
.mobile-menu.active {
transform: translateY(0);
}
.mobile-menu ul {
display: flex;
flex-direction: column;
text-align: center;
}
.mobile-menu li {
padding: 15px 0;
border-bottom: 1px solid #f3f4f6;
}
.mobile-menu li:last-child {
border-bottom: none;
}
/* =========================================
메인 콘텐츠 (Main) 스타일
========================================= */
.main-content {
padding-top: calc(var(--header-height) + 40px); /* 헤더 높이만큼 띄우기 */
padding-bottom: 60px;
min-height: 80vh; /* 푸터를 바닥으로 밀기 위해 최소 높이 설정 */
}
.hero-section {
text-align: center;
padding: 60px 0;
background-color: var(--gray-light);
border-radius: 10px;
margin-bottom: 40px;
}
.hero-section h1 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.hero-section p {
font-size: 1.1rem;
color: #666;
margin-bottom: 25px;
}
.cta-btn {
padding: 12px 30px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s;
}
.cta-btn:hover {
background-color: #1d4ed8;
}
/* 카드 그리드 스타일 */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3열로 배치 */
gap: 20px;
}
.card {
padding: 20px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background-color: white;
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-5px); /* 살짝 위로 뜨는 효과 */
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.card h3 {
margin-bottom: 10px;
color: var(--primary-color);
}
/* =========================================
푸터 (Footer) 스타일
========================================= */
.main-footer {
background-color: #1f2937;
color: #9ca3af;
padding: 30px 0;
text-align: center;
font-size: 0.9rem;
}
/* =========================================
반응형 (Media Queries)
========================================= */
/* 태블릿 이하 사이즈 (768px 이하)일 때 적용되는 스타일 */
@media (max-width: 768px) {
/* 데스크탑 메뉴 숨김 */
.main-nav {
display: none;
}
/* 햄버거 버튼 보이기 */
.hamburger-btn {
display: block;
}
/* 카드 그리드를 1열로 변경 (모바일 최적화) */
.card-grid {
grid-template-columns: 1fr;
}
.hero-section h1 {
font-size: 1.8rem; /* 폰트 크기 줄임 */
}
}
/* PC 사이즈 (769px 이상)일 때의 예외 처리 */
@media (min-width: 769px) {
/* 화면이 넓어지면 모바일 메뉴는 강제로 숨김 (버그 방지) */
.mobile-menu {
display: none !important;
}
}
✔ AntiGravity 이 생성한 CSS 코드 설명
화면 꾸미기와 기기별(PC/모바일) 레이아웃 변경을 담당합니다.
- CSS 변수 (
:root): 색상(--primary-color)이나 높이값 등을 변수로 정의하여, 나중에 색상 변경 시 한 곳만 수정하면 되도록 관리를 편하게 했습니다. - 초기화 (Reset):
* { box-sizing: border-box; }등 기본 여백을 없애 레이아웃이 예상치 못하게 틀어지는 것을 방지했습니다. - 플렉스박스 (
display: flex): 헤더의 로고와 메뉴를 양 끝 정렬(justify-content: space-between)할 때 사용했습니다. - 모바일 메뉴 애니메이션:
transform: translateY(-150%): 메뉴를 화면 위쪽으로 숨겨둡니다.transition: ... 0.3s: 메뉴가 내려오거나 햄버거 버튼이 변할 때 부드럽게 움직이도록 처리했습니다.
- 미디어 쿼리 (
@media):- 768px 이하: PC 메뉴(
main-nav)를 숨기고, 햄버거 버튼(hamburger-btn)을 보여줍니다. - 769px 이상: 모바일 메뉴가 열려 있어도 강제로 숨겨 디자인 깨짐을 방지합니다.
- 768px 이하: PC 메뉴(
✔ AntiGravity 이 생성한 Js 코드
// 페이지가 완전히 로드된 후 실행되도록 합니다.
document.addEventListener('DOMContentLoaded', () => {
// 햄버거 버튼 요소를 가져옵니다.
const hamburgerBtn = document.querySelector('.hamburger-btn');
// 모바일 메뉴 요소를 가져옵니다.
const mobileMenu = document.querySelector('.mobile-menu');
// 햄버거 버튼을 클릭했을 때 실행될 함수를 정의합니다.
hamburgerBtn.addEventListener('click', () => {
// 1. 햄버거 버튼에 'active' 클래스를 토글합니다. (X 모양으로 애니메이션 처리용)
hamburgerBtn.classList.toggle('active');
// 2. 모바일 메뉴에 'active' 클래스를 토글합니다. (메뉴 보이기/숨기기용)
mobileMenu.classList.toggle('active');
});
});
✔ AntiGravity 이 생성한 Js 코드 설명
햄버거 버튼 클릭 시 메뉴를 열고 닫는 기능을 담당합니다.
DOMContentLoaded: HTML 요소가 다 그려지기 전에 스크립트가 실행되어 에러가 나는 것을 막기 위해 대기합니다.querySelector: HTML에 있는 햄버거 버튼과 모바일 메뉴 요소를 찾아 변수에 담습니다.classList.toggle('active'):- 핵심 기능입니다. 클릭할 때마다 요소에
active라는 클래스를 붙였다 떼었다 합니다. - 버튼:
active가 붙으면 CSS에서 미리 정의한 대로 X 모양으로 변합니다. - 메뉴:
active가 붙으면transform: translateY(0)이 적용되어 숨겨진 메뉴가 쓱 내려옵니다.
- 핵심 기능입니다. 클릭할 때마다 요소에
✔ AntiGravity 이 생성한 반응형 페이지
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
본 이미지의 저작권은 블로그 주인 제로에게 있습니다.
✔ AntiGravity 평가
| 항목 | 점수 | 설명 |
|---|---|---|
| 초급자 난이도 | ⭐⭐⭐⭐⭐ | 가장 읽기 쉬움 |
| 실무 적합도 | ⭐⭐ | 스타일이 심플함 |
| 반응형 구조 | ⭐⭐⭐ | 기본 수준 |
| 확장성 | ⭐⭐ | 커스텀 작업 감안하면 낮음 |
종합 비교 – 어떤 AI가 가장 좋은가?
| 항목 | GPT | Cursor | AntiGravity |
|---|---|---|---|
| 입문자/부업러에게 적합 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 실무 확장성 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ |
| 코드 품질 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ |
| 시각적인 완성도 | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 반응형 구조 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
👉 초급자 기준: GPT & AntiGravity 추천
👉 실무 기준: Cursor 압도적 1위
비전공자·초급 개발자를 위한 쉬운 설명
✨ “레이아웃”이란?
페이지의 큰 틀입니다. 건물로 치면 → 골조, 벽, 층 구조라고 보시면 됩니다.
✨ “헤더(Header)”란?
웹사이트 위쪽의 공통 메뉴바입니다.
✨ “반응형이란?”
PC → 태블릿 → 모바일
화면 크기 변할 때 자동으로 UI가 변하는 것입니다.
✨ “햄버거 버튼”
모바일에서 메뉴가 사라지고 대신 나오는 ☰ 아이콘을 말합니다.
실무자 관점 총평 (중요)
✔ GPT
→ 입문자, 부업러 가성비 최고. 기본기 좋은 코드.
✔ Cursor
→ 실무 개발자가 바로 사용 가능한 레벨.
→ 특히 CSS 구조화 & JS 토글 자동 생성이 매우 강점.
✔ AntiGravity
→ 디자인 초안 뽑기 좋음.
→ 하지만 스타일이 과해서 실무 유지보수에는 부적합.
마무리하며
Part 5에서는 실제 서비스를 구성하는 기본 구조인 헤더·푸터·메인 레이아웃을 세가지 AI를 통해 비교해 보았습니다.
처음이라 생소할 수 있는 용어들도 정리했습니다. 비개발자 혹은 입문자라도 쉽게 이해할 수 있으실 거라 생각합니다.
비교한 내용을 보시다 보면 정말 AI 성능 혹은 성향에 따라서 결과물이 달라지는 모습을 보셨을 겁니다.
제가 평가한 부분이 무조건 맞다고 볼 수는 없겠지만 여러분들께서도 비교해보시고 본인 취향에 맞는 AI를 사용해 보시는 것도 추천드립니다.
다음 편 예고
다음 Part 6에서는
👉 로그인 이후 화면(대시보드) 만들기 + 3개 AI 비교
👉 카드 UI·그리드 UI 적용
👉 실무에서 재사용 가능한 컴포넌트 만들기
를 다룰 예정입니다. 많은 기대 부탁드립니다.
이전 편이 궁금하다면?
- AI 코딩 시리즈 다시보기
[HTML/CSS 입문] AI로 로그인 페이지 만들어보기 (GPT vs Cursor vs AntiGravity) | Part 1
[HTML/CSS 입문] AI로 반응형 로그인 페이지 개선하기 (GPT vs Cursor vs AntiGravity) | Part 2
[HTML/CSS 입문] AI로 반응형 로그인 페이지 확장하기 (GPT vs Cursor vs AntiGravity) | Part 3
[HTML/CSS 입문] AI로 로그인 페이지 레이아웃(탭 메뉴) 만들어보기(GPT vs Cursor vs AntiGravity) | Part 4
[HTML/CSS 입문] AI로 반응형 UI 만들어보기 (GPT vs Cursor vs AntiGravity) – Part 5 - AI활용 가이드편 다시보기
[AI] 비전공자·초급 개발자를 위한 AI 활용 가이드
[AI] 입문자 및 비전공자를 위한 필수 AI(인공지능) 용어 소개 25선 - 그 외 관련 포스팅 다시보기
[입문] HTML/CSS란? (프론트엔드 1편) – AI 시대, 기본을 아는 사람의 경쟁력
[개발환경 입문] VS Code란? 입문자가 알아야 할 핵심 기능과 장점