Skip to content

Commit cd29fac

Browse files
namsh1125namsh1125
committed
Feat: 탭 구현
1 parent a9e84b3 commit cd29fac

File tree

7 files changed

+114
-55
lines changed

7 files changed

+114
-55
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎image/icon/document.svg

+1
Loading

‎image/icon/image.svg

+1
Loading

‎image/icon/internet.svg

+1
Loading

‎image/icon/text.svg

+1
Loading

‎index.html

+33-12
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,33 @@
3939

4040
<!-- Main -->
4141
<main>
42-
<div class="container">
42+
<div class="tabs-container">
43+
<!-- 탭 영역 -->
44+
<div class="tabs">
45+
<div class="tab" id="tab-text">
46+
<img src="./image/icon/text.svg" alt="텍스트" class="tab-icon">
47+
텍스트
48+
</div>
49+
<div class="tab">
50+
<img src="./image/icon/image.svg" alt="이미지" class="tab-icon">
51+
이미지
52+
</div>
53+
<div class="tab">
54+
<img src="./image/icon/document.svg" alt="문서" class="tab-icon">
55+
문서
56+
</div>
57+
<div class="tab">
58+
<img src="./image/icon/internet.svg" alt="웹사이트" class="tab-icon">
59+
웹사이트
60+
</div>
61+
</div>
62+
</div>
63+
64+
<!-- 번역 인터페이스 -->
65+
<div class="translation-container">
4366
<!-- 입력창 영역 -->
44-
<div class="input-area">
45-
<div class="language-selection">
67+
<div class="translation-box input-box">
68+
<div class="language-select">
4669
<select name="inputLang">
4770
<option>언어감지</option>
4871
<option>한국어</option>
@@ -61,19 +84,19 @@
6184
<option>인도네시아어</option>
6285
<option>힌디어</option>
6386
</select>
64-
<img src="https://cdn-icons-png.flaticon.com/512/3580/3580294.png" alt="언어변경" class="lang-switch-icon">
87+
<img src="https://cdn-icons-png.flaticon.com/512/3580/3580294.png" alt="언어변경">
6588
</div>
66-
<textarea placeholder="번역할 내용을 입력하세요."></textarea>
89+
<textarea rows="12" placeholder="번역할 내용을 입력하세요."></textarea>
6790
<div class="button-group">
6891
<button>발음듣기</button>
6992
<button>복사하기</button>
70-
<input type="submit" value="번역하기" class="translate-btn">
93+
<input type="submit" value="번역하기">
7194
</div>
7295
</div>
7396

7497
<!-- 번역창 영역 -->
75-
<div class="output-area">
76-
<div class="language-selection">
98+
<div class="translation-box output-box">
99+
<div class="language-select">
77100
<select name="outputLang">
78101
<option>한국어</option>
79102
<option>영어</option>
@@ -92,18 +115,16 @@
92115
<option>힌디어</option>
93116
</select>
94117
</div>
95-
<textarea></textarea>
118+
<textarea rows="12"></textarea>
96119
<div class="button-group">
97120
<button>발음듣기</button>
98121
<button>복사하기</button>
99122
<button>즐겨찾기</button>
100-
<input type="submit" value="공유하기" class="share-btn">
123+
<input type="submit" value="공유하기">
101124
</div>
102125
</div>
103126
</div>
104127
</main>
105-
106-
107128

108129
<!-- Footer -->
109130
<footer>

‎style.css

+74-43
Original file line numberDiff line numberDiff line change
@@ -96,104 +96,135 @@
9696
}
9797

9898
/* Main */
99-
body {
100-
font-family: Arial, sans-serif;
101-
margin: 0;
102-
padding: 0;
103-
background-color: #f9f9f9;
99+
main {
100+
max-width: 80rem;
101+
margin: 0 auto;
102+
padding: 20px;
104103
}
105104

106-
main {
105+
/* Tabs Container */
106+
.tabs-container {
107+
display: flex;
108+
justify-content: center; /* 탭 중앙 정렬 */
109+
margin-bottom: 20px;
110+
}
111+
112+
/* Tabs Styling */
113+
.tabs {
114+
max-width: 40rem; /* 적당한 길이 */
115+
display: flex;
116+
padding: 3px;
117+
background-color: #F0F1F2;
118+
border: 1px solid #EEEFF0;
119+
border-radius: 30px; /* 직선형 테두리 */
120+
overflow: hidden; /* 내부 요소가 테두리를 벗어나지 않도록 */
121+
}
122+
123+
/* Individual Tab */
124+
.tab {
125+
padding: 10px 20px; /* 탭 크기 조정 */
126+
cursor: pointer;
127+
text-align: center;
128+
flex: 1;
129+
background-color: #F0F1F2;
130+
color: #808080;
131+
transition: background-color 0.3s ease, border 0.3s ease;
107132
display: flex;
108133
justify-content: center;
109-
padding: 20px;
134+
align-items: center;
135+
border-top: 2px solid #F0F1F2; /* 상단 직선 */
136+
border-bottom: 2px solid #F0F1F2; /* 하단 직선 */
137+
border-radius: 30px;
138+
white-space: nowrap; /* 텍스트 줄바꿈 방지 */
139+
overflow: hidden; /* 내용이 넘치면 숨김 */
140+
text-overflow: ellipsis; /* 넘친 텍스트에 ... 표시 */
141+
}
142+
143+
/* Add Icons to Tabs */
144+
.tab .tab-icon {
145+
width: 16px; /* 아이콘 크기 */
146+
height: 16px;
147+
margin-right: 8px; /* 텍스트와 아이콘 간격 */
148+
flex-shrink: 0; /* 아이콘 크기 고정 */
149+
}
150+
151+
152+
/* Active Tab */
153+
#tab-text {
154+
background-color: white;
155+
border: 2px solid #1FDC6D;
156+
color: #1FDC6D;
110157
}
111158

112-
.container {
159+
/* Translation Container */
160+
.translation-container {
113161
display: flex;
114162
justify-content: space-between;
115-
width: 80%;
116163
gap: 4%;
117164
}
118165

119-
/* Input and Output Areas */
120-
.input-area,
121-
.output-area {
166+
/* Translation Box */
167+
.translation-box {
122168
flex: 1;
123169
border: 1px solid #000;
124-
border-radius: 10px;
125170
padding: 20px;
171+
border-radius: 10px;
126172
background-color: #fff;
127173
}
128174

129-
.input-area {
175+
.input-box {
130176
margin-right: 2%;
131177
}
132178

133-
.output-area {
179+
.output-box {
134180
margin-left: 2%;
135181
}
136182

137-
/* Language Selection */
138-
.language-selection {
183+
.language-select {
139184
display: flex;
140185
align-items: center;
141186
margin-bottom: 20px;
142187
}
143188

144-
.language-selection select {
189+
.language-select select {
145190
flex: 1;
146191
padding: 5px;
147-
border: 1px solid #ccc;
148-
border-radius: 5px;
149192
}
150193

151-
.lang-switch-icon {
152-
width: 50px;
194+
.language-select img {
195+
width: 30px;
153196
margin-left: 10px;
154197
}
155198

156-
/* Textarea */
157199
textarea {
158200
width: 100%;
159201
height: 150px;
160-
padding: 10px;
202+
resize: none;
203+
margin-bottom: 20px;
161204
border: 1px solid #ccc;
162205
border-radius: 5px;
163-
resize: none;
206+
padding: 10px;
207+
font-size: 14px;
164208
}
165209

166-
/* Button Group */
167210
.button-group {
168211
display: flex;
169212
justify-content: space-between;
170213
align-items: center;
171-
margin-top: 20px;
172214
}
173215

174-
.button-group button {
175-
width: 80px;
176-
padding: 5px;
216+
.button-group button,
217+
.button-group input[type="submit"] {
218+
padding: 10px;
177219
border: none;
178220
border-radius: 5px;
179221
cursor: pointer;
180-
background-color: #ddd;
181-
}
182-
183-
.translate-btn,
184-
.share-btn {
185-
flex: 1;
186222
background-color: #4CAF50;
187223
color: white;
188-
padding: 10px;
189-
border: none;
190-
border-radius: 5px;
191-
cursor: pointer;
192-
text-align: center;
193224
}
194225

195-
.translate-btn:hover,
196-
.share-btn:hover {
226+
.button-group button:hover,
227+
.button-group input[type="submit"]:hover {
197228
background-color: #45a049;
198229
}
199230

0 commit comments

Comments
 (0)