프로토타입 네비게이션 바 통일 및 CSS 경로 표준화
- navigation.css 파일 생성 (17번 파일 app-bar 스타일 기반) - 21개 HTML 파일의 CSS 경로 통일 (css/components/navigation.css → css/navigation.css) - 모든 페이지에 일관된 상단 네비게이션 바 적용 - 사용자 경험 일관성 개선 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
0f68d2b075
commit
96099dc87a
@ -17,7 +17,7 @@
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/components/buttons.css">
|
||||
<link rel="stylesheet" href="css/components/inputs.css">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<link rel="stylesheet" href="css/components/modals.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/components/buttons.css">
|
||||
<link rel="stylesheet" href="css/components/inputs.css">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<link rel="stylesheet" href="css/components/modals.css">
|
||||
|
||||
<style>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/components/buttons.css">
|
||||
<link rel="stylesheet" href="css/components/cards.css">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
|
||||
<style>
|
||||
/* Home Screen Specific Styles */
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/components/buttons.css">
|
||||
<link rel="stylesheet" href="css/components/cards.css">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
|
||||
<style>
|
||||
/* Event Purpose Selection Specific Styles */
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/components/buttons.css">
|
||||
<link rel="stylesheet" href="css/components/cards.css">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<link rel="stylesheet" href="css/components/loaders.css">
|
||||
|
||||
<style>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/components/buttons.css">
|
||||
<link rel="stylesheet" href="css/components/cards.css">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
|
||||
<style>
|
||||
/* AI Prize Recommendation Specific Styles */
|
||||
@ -272,7 +272,7 @@
|
||||
<header class="app-bar">
|
||||
<div class="app-bar__container">
|
||||
<div class="app-bar__left">
|
||||
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
|
||||
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI 참여 방법 설계 - KT AI 이벤트 플랫폼</title>
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<style>
|
||||
/* CSS Reset */
|
||||
* {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI 홍보 문구 생성 - KT 이벤트 마케팅</title>
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<style>
|
||||
/* CSS Variables */
|
||||
:root {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<style>
|
||||
/* Content */
|
||||
.approval-content {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI 영상 제작 - KT 이벤트 마케팅</title>
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<style>
|
||||
/* CSS Variables */
|
||||
:root {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SNS 콘텐츠 생성 - KT 이벤트 마케팅</title>
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<style>
|
||||
/* CSS Variables */
|
||||
:root {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>QR 포스터 생성 - KT 이벤트 마케팅</title>
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<style>
|
||||
/* CSS Variables */
|
||||
:root {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>콘텐츠 편집 - KT 이벤트 마케팅</title>
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<style>
|
||||
/* CSS Variables */
|
||||
:root {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<style>
|
||||
/* Content */
|
||||
.approval-content {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<title>당첨자 명단 관리 - KT AI 이벤트 플랫폼</title>
|
||||
<style>
|
||||
/* CSS Reset */
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<title>실시간 대시보드 - KT AI 이벤트 플랫폼</title>
|
||||
<style>
|
||||
/* CSS Reset */
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<title>채널별 성과 분석 - KT AI 이벤트 플랫폼</title>
|
||||
<style>
|
||||
/* CSS Reset */
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<title>ROI 분석 - KT AI 이벤트 플랫폼</title>
|
||||
<style>
|
||||
/* CSS Reset */
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<title>분석 리포트 - KT AI 이벤트 플랫폼</title>
|
||||
<style>
|
||||
/* CSS Reset */
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<title>이벤트 목록 - KT AI 이벤트 플랫폼</title>
|
||||
<style>
|
||||
/* CSS Reset */
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/components/navigation.css">
|
||||
<link rel="stylesheet" href="css/navigation.css">
|
||||
<title>마이페이지 - KT AI 이벤트 플랫폼</title>
|
||||
<style>
|
||||
/* CSS Reset */
|
||||
|
||||
45
design/uiux/prototype/css/navigation.css
Normal file
45
design/uiux/prototype/css/navigation.css
Normal file
@ -0,0 +1,45 @@
|
||||
/* ========================================
|
||||
Navigation Bar (App Bar)
|
||||
======================================== */
|
||||
|
||||
.app-bar {
|
||||
background: var(--color-white, #FFFFFF);
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1020;
|
||||
}
|
||||
|
||||
.app-bar__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.app-bar__left,
|
||||
.app-bar__right {
|
||||
width: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.app-bar__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary, #212121);
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-bar__back {
|
||||
cursor: pointer;
|
||||
color: var(--color-text-primary, #212121);
|
||||
}
|
||||
|
||||
.app-bar__back:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user