Ionic App 수정( UI 수정 )
2023. 3. 15. 15:30ㆍ개발/Ionic framework
기존에 제작한 어플을 조금 수정했다.
Wifi, 확인 버튼의 위치를 임시 테스트용으로 잡아서
화면이 작거나 큰 스마트폰은
버튼이 잘리거나 밀리는 현상이 발생했다.
html을 많이 만져본 적 없어서
처음 만들었을 때 모르고 제작했었다.
<table>
<tr>
<th>
<button class="wifiButton" (click)="presentAlert()"><ion-icon name="wifi-outline"></ion-icon>Wifi</button>
</th>
<th>
<button class="wifiButton" (click)="presentAlert()"><ion-icon name="wifi-outline"></ion-icon>Wifi</button>
</th>
</tr>처음엔 이렇게 표 형식을 사용해서 2개의 버튼을 생성했었다.
왜 table 태그를 사용했나요? 하면 할 말 이 없을 정도로
이유없이 일단 table로 만들었다.
.wifiButton {
display: inline-block;
font-size: 15px;
font-weight: bold;
cursor: pointer;
text-align: auto;
text-decoration: none;
outline: none;
color: rgb(0, 0, 0);
background-color: #ffa500;
border: none;
border-radius: 5px;
box-shadow: 0 0px #999;
width: 75px;
height: 22PX;
margin-right : 5px;
}
.wifiButton:active {
background-color: #ffa600d4;
box-shadow: 0 0px #666;
transform: translateY(1px);
}css는 다음과 같다.
wifiButton:active 는 눌렸을 때 애니메이션이다.
버튼의 밀림/잘림을 수정하기 위해
구글링으로 자료조사를 했다.
chatGPT 굳
text-align : center; 를 추가했다.
<div class="testButton">
<button class="wifiButton" (click)="presentAlert()"><ion-icon name="wifi-outline"></ion-icon>Wifi</button>
<button class="wifiButton" (click)="presentAlert2()"><ion-icon name="wifi-outline"></ion-icon>확인</button>
</div>table 태그에서 div 태그로 변경한 뒤
class를 지정했다. testButton class를 지정한 뒤
.testButton {
text-align: center;
}위와 같이 text-align 요소를 추가했다.
중앙에 잘 자리잡았다.
버튼도 정상적으로 잘 동작한다.
<!DOCTYPE html>
<html>
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
도움말
</ion-title>
</ion-toolbar>
</ion-header>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
</head>
<a><br>라이트토크(주)에서 제작한 기기들을 앱을 통해 쉽게 제어합니다.</a>
<br><br><br>
<a class="connectGuide"> 기기 등록 방법</a>
<a><br><br><br>1. <strong>'블루투스'</strong>탭에서 Wifi 버튼을 눌러 사용할 Wifi 정보를 입력해주세요.</a>
<a><br><br>2. <strong>'확인'</strong> 버튼을 통해 입력된 값을 확인할 수 있습니다.</a>
<a><br><br>3. <strong>'Scan'</strong> 버튼을 누르면 주변 BLE 장치들을 검색합니다.</a>
<a><br><br>4. LightTalk 이름을 가진 장치가 식별되면 <strong>'Connect'</strong> 버튼을 눌러주세요.</a>
<a><br><br>5. 잠시 후 장치가 자동으로 연결됩니다.</a>
</html>
도움말 탭도 수정한 뒤 마무리
! 처음 알게된 사실
ionic serve --lab프로젝트 디렉토리 cmd 창을 열고
해당 명령어를 실행하면
[ng] - Generating browser application bundles (phase: setup)...
[ng] √ Browser application bundle generation complete.
[ng] Initial Chunk Files | Names | Raw Size
[ng] vendor.js | vendor | 3.86 MB |
[ng] polyfills.js | polyfills | 353.71 kB |
[ng] styles.css, styles.js | styles | 248.48 kB |
[ng] main.js | main | 14.84 kB |
[ng] runtime.js | runtime | 14.11 kB |
[ng]
[ng] | Initial Total | 4.47 MB
[ng]
[ng] Lazy Chunk Files | Names | Raw Size
[ng] node_modules_ionic_core_dist_esm_swiper_bundle-28080340_js.js | swiper-bundle-28080340-js | 199.26 kB |
[ng] polyfills-core-js.js | polyfills-core-js | 152.87 kB |
[ng] node_modules_ionic_core_dist_esm_ion-datetime_3_entry_js.js | - | 134.48 kB |
[ng] node_modules_ionic_core_dist_esm_ion-item_8_entry_js.js | - | 100.08 kB |
[ng] node_modules_ionic_core_dist_esm_ion-modal_entry_js.js | - | 82.98 kB |
[ng] node_modules_ionic_core_dist_esm_ion-app_8_entry_js.js | - | 82.54 kB |
[ng] node_modules_ionic_core_dist_esm_ion-popover_entry_js.js | - | 61.66 kB |
[ng] node_modules_ionic_core_dist_esm_ion-slide_2_entry_js.js | - | 60.09 kB |
[ng] node_modules_ionic_core_dist_esm_ion-refresher_2_entry_js.js | - | 54.52 kB |
[ng] default-node_modules_ionic_core_dist_esm_parse-decd0f85_js-node_modules_ionic_core_dist_esm_t-a92c48.js | - | 51.85 kB |
[ng] node_modules_ionic_core_dist_esm_ion-alert_entry_js.js | - | 51.77 kB |
[ng] common.js | common | 50.08 kB |
[ng] node_modules_ionic_core_dist_esm_ion-segment_2_entry_js.js | - | 43.16 kB |
[ng] node_modules_ionic_core_dist_esm_ion-menu_3_entry_js.js | - | 41.52 kB |
[ng] node_modules_ionic_core_dist_esm_ion-button_2_entry_js.js | - | 39.57 kB |
[ng] node_modules_ionic_core_dist_esm_ion-item-option_3_entry_js.js | - | 38.93 kB |
[ng] node_modules_ionic_core_dist_esm_ion-range_entry_js.js | - | 37.73 kB |
[ng] node_modules_ionic_core_dist_esm_ion-searchbar_entry_js.js | - | 36.74 kB |
[ng] node_modules_ionic_core_dist_esm_ion-nav_2_entry_js.js | - | 36.11 kB |
[ng] node_modules_ionic_core_dist_esm_ion-route_4_entry_js.js | - | 35.25 kB |
[ng] node_modules_ionic_core_dist_esm_ion-select_3_entry_js.js | - | 34.27 kB |
[ng] node_modules_ionic_core_dist_esm_ion-action-sheet_entry_js.js | - | 33.12 kB |
[ng] node_modules_ionic_core_dist_esm_ion-fab_3_entry_js.js | - | 30.17 kB |
[ng] node_modules_ionic_core_dist_esm_ion-accordion_2_entry_js.js | - | 27.55 kB |
[ng] polyfills-dom.js | polyfills-dom | 26.82 kB |
[ng] node_modules_ionic_core_dist_esm_ion-tab-bar_2_entry_js.js | - | 26.51 kB |
[ng] node_modules_ionic_core_dist_esm_ion-toast_entry_js.js | - | 26.09 kB |
[ng] node_modules_ionic_core_dist_esm_ion-input_entry_js.js | - | 25.27 kB |
[ng] node_modules_ionic_core_dist_esm_ion-breadcrumb_2_entry_js.js | - | 25.19 kB |
[ng] node_modules_ionic_core_dist_esm_ion-progress-bar_entry_js.js | - | 24.55 kB |
[ng] node_modules_ionic_core_dist_esm_ion-toggle_entry_js.js | - | 22.82 kB |
[ng] node_modules_ionic_core_dist_esm_ion-textarea_entry_js.js | - | 22.61 kB |
[ng] node_modules_ionic_core_dist_esm_ion-picker-internal_entry_js.js | - | 22.37 kB |
[ng] node_modules_ionic_core_dist_esm_ion-picker-column-internal_entry_js.js | - | 20.69 kB |
[ng] node_modules_ionic_core_dist_esm_ion-back-button_entry_js.js | - | 19.65 kB |
[ng] node_modules_ionic_core_dist_esm_ion-virtual-scroll_entry_js.js | - | 19.42 kB |
[ng] node_modules_ionic_core_dist_esm_ion-radio_2_entry_js.js | - | 19.33 kB |
[ng] node_modules_ionic_core_dist_esm_ion-datetime-button_entry_js.js | - | 19.20 kB |
[ng] node_modules_ionic_core_dist_esm_ion-card_5_entry_js.js | - | 18.05 kB |
[ng] node_modules_ionic_core_dist_esm_ion-loading_entry_js.js | - | 17.76 kB |
[ng] node_modules_ionic_core_dist_esm_input-shims-b3771013_js.js | input-shims-b3771013-js | 17.57 kB |
[ng] src_app_tab2_tab2_module_ts.js | tab2-tab2-module | 16.91 kB |
[ng] node_modules_ionic_core_dist_esm_ion-infinite-scroll_2_entry_js.js | - | 15.96 kB |
[ng] node_modules_ionic_core_dist_esm_ion-col_3_entry_js.js | - | 15.72 kB |
[ng] node_modules_ionic_core_dist_esm_ion-reorder_2_entry_js.js | - | 15.25 kB |
[ng] node_modules_ionic_core_dist_esm_ion-checkbox_entry_js.js | - | 14.11 kB |
[ng] node_modules_ionic_core_dist_esm_ion-spinner_entry_js.js | - | 10.68 kB |
[ng] node_modules_ionic_core_dist_esm_ion-split-pane_entry_js.js | - | 10.11 kB |
[ng] node_modules_ionic_core_dist_esm_ion-tab_2_entry_js.js | - | 9.72 kB |
[ng] node_modules_ionic_core_dist_esm_ion-chip_entry_js.js | - | 8.48 kB |
[ng] node_modules_ionic_core_dist_esm_ion-avatar_3_entry_js.js | - | 8.23 kB |
[ng] src_app_tab3_tab3_module_ts.js | tab3-tab3-module | 8.04 kB |
[ng] src_app_tabs_tabs_module_ts.js | tabs-tabs-module | 7.09 kB |
[ng] src_app_tab1_tab1_module_ts.js | tab1-tab1-module | 6.84 kB |
[ng] node_modules_ionic_core_dist_esm_ion-ripple-effect_entry_js.js | - | 6.64 kB |
[ng] node_modules_ionic_core_dist_esm_index-dbdac533_js.js | index-dbdac533-js | 6.25 kB |
[ng] node_modules_ionic_core_dist_esm_ion-img_entry_js.js | - | 4.54 kB |
[ng] node_modules_ionic_core_dist_esm_ion-text_entry_js.js | - | 4.15 kB |
[ng] node_modules_ionic_core_dist_esm_ion-backdrop_entry_js.js | - | 3.49 kB |
[ng] node_modules_ionic_core_dist_esm_status-tap-2f3f665e_js.js | status-tap-2f3f665e-js | 2.89 kB |
[ng]
[ng] Build at: 2023-03-15T06:32:15.173Z - Hash: 7755dc91c93cc7ee - Time: 9280ms
[ng] √ Compiled successfully.
> ionic-lab.cmd http://localhost:8100 --host localhost --port 8200 --project-type angular --app-name AWSversion --app-version 0.0.1
[INFO] Development server running!
Lab: http://localhost:8200
Local: http://localhost:8100
Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8200!위와 같이 localhost 가 부여되고
웹 사이트에서 소스 적용 확인이 가능하다
이전에는 VS code에서 소스 수정 후
Android Studio 에서 일일이 Build를 해줬는데
그럴 필요 없이
VS code 에서 수정 후 저장만 하면
자동으로 연동되어 수정된다.
편리한 기능이 있었는데
그동안 힘들게 했었네
'개발 > Ionic framework' 카테고리의 다른 글
| Ionic App 수정 ( 음성인식 기능 추가 ) (0) | 2023.03.22 |
|---|---|
| Ionic App 수정 ( 뒤로가기 시 앱 종료 기능 추가 ) (0) | 2023.03.20 |
| [App] App의 현재 버전 확인 - 2 (0) | 2022.12.20 |
| [App] App의 현재 버전 확인 - 1 (0) | 2022.12.19 |
| [App] Ionic 앱 제작 (2) | 2022.12.02 |