XML 구조 + BookApp CRUD UI 완전 정리

 

 

Web Development · XML & jQuery Mobile App

XML 구조 이해 + BookApp CRUD UI
같은 데이터, 다른 태그 / 4페이지 도서 관리

HTML 표 vs XML 자료구조 + 도서 입력·수정·삭제·조회 화면 설계

시작 두 가지 주제 한 번에

이 폴더에는 두 가지가 섞여 있다. (1) HTML과 XML이 같은 학생 데이터를 어떻게 다르게 표현하는지, 그리고 (2) jQuery Mobile로 도서 관리 앱(BookApp)의 4페이지 CRUD UI를 어떻게 짜는지. 둘 다 구조와 화면 설계가 핵심이다.

---

용어 핵심 키워드

XMLeXtensible Markup Language — 자료구조용

HTMLHyper Text Markup Language — 화면용

custom tagXML에서 직접 만드는 태그

xml-stylesheetXML에 CSS 연결하는 처리 명령

CRUDCreate/Read/Update/Delete

ui-grid-a/b/c2/3/4 칸 그리드 레이아웃

ui-block-a/b/c그리드의 각 칸

data-mini컴포넌트를 작은 사이즈로

data-rel="back"이전 페이지로 이동 (히스토리)

selectmenu('refresh')select 값 변경 후 UI 갱신

---

1 HTML로 학생 데이터 표현하기

HTML의 <table>은 화면에 격자를 그리기 위한 태그다. 데이터를 표현하긴 하지만, "이 칸이 전공인지, 이름인지"는 사람이 헤더를 봐야 안다.

<link rel="stylesheet" href="student1.css"/> <table> <tr> <th>전공</th> <th>이름</th> <th>나이</th> <th>성별</th> </tr> <tr> <td>컴퓨터학과</td> <td>홍길동</td> <td>25세</td> <td>남</td> </tr> </table>

student1.css → th { background-color: silver; }

전공	이름	나이	성별
컴퓨터학과	홍길동	25세	남
철학과	홍리라	21세	여

---

2 XML로 같은 데이터 표현하기

XML은 데이터 자체에 의미를 부여한다. 태그 이름이 곧 필드명이다 — <major>는 전공, <name>은 이름. 사람도 기계도 한눈에 안다.

<?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/css" href="student2.css"?> <studentinfo> <student_heading> <major>전공</major> <name>이름</name> <age>나이</age> <gender>성별</gender> </student_heading> <student> <major>컴퓨터학과</major> <name>홍길동</name> <age>25세</age> <gender>남</gender> </student> </studentinfo>

student2.css — XML도 CSS로 스타일링 가능

student_heading * { color: white; background-color: green; } student { display: block; } /* 한 줄에 한 학생씩 */

📌 XML 태그는 기본 inline이다. 한 줄에 다 붙어버린다. display: block을 줘야 한 줄씩 분리된다 — HTML의 tr이 자동으로 해주는 일을 직접 해야 한다.

XML + CSS — 태그 자체가 의미를 갖는다

전공

이름

나이

성별

컴퓨터학과

홍길동

25세

남

철학과

홍리라

21세

여

---

3 HTML vs XML — 무엇이 다른가

HTML

• 화면 표시 목적
• 태그가 정해져 있음 (table, p, h1...)
• 닫는 태그 생략 가능 (HTML5)
• 대소문자 구분 X
• 속성값 따옴표 선택

XML

• 데이터 저장/전달 목적
• 태그를 직접 정의 (custom tag)
• 닫는 태그 필수
• 대소문자 구분
• 속성값 따옴표 필수

※ XML이 활약하는 곳

• 설정 파일 (Android의 layout.xml, Maven의 pom.xml)
• SOAP API의 데이터 포맷
• RSS, Atom 피드
• 오피스 문서 내부 (docx = XML 압축)
• 요즘은 JSON에 많이 자리를 내줬지만, 여전히 폭넓게 사용

---

4 BookApp — 4페이지 CRUD 앱 구조

도서 관리 앱은 한 HTML 파일 안에 5개의 page로 구성된다. 시작 화면 + 4가지 작업 화면. 각 작업 화면은 같은 navbar로 서로 이동 가능.

<div data-role="page" id="page0"> <!-- 시작 화면 --> <div data-role="page" id="page1"> <!-- 도서 추가 --> <div data-role="page" id="page2"> <!-- 도서 갱신 --> <div data-role="page" id="page3"> <!-- 도서 삭제 --> <div data-role="page" id="page4"> <!-- 전체 조회 -->

시작 화면 (page0) — 메뉴 진입

도서 정보 관리🏠

📚

도서 정보 추가 ›

도서 정보 갱신 ›

도서 정보 삭제 ›

전체 도서 조회 ›

---

반응형

5 도서 추가 (page1) — 입력 폼

<form name="form1"> <div class="ui-body ui-body-a gap"> <label for="bookType1">장르:</label> <select id="bookType1" data-native-menu="false" data-mini="true"> <option value="미정">미정</option> <option value="경제">경제</option> ... </select> <label for="bookName1">도서명:</label> <input type="text" id="bookName1" data-mini="true"/> </div> <fieldset class="ui-grid-a"> <!-- 2칸 그리드 --> <div class="ui-block-a"> <input type="reset" id="cancel1" value="취소"/> </div> <div class="ui-block-b"> <input type="button" id="submit1" value="추가"/> </div> </fieldset> </form>

page1 — 도서 추가

← Back도서 정보🏠

입력

수정

삭제

검색

도서 내용 입력

장르: 미정 경제 시사 문학 도서명:

취소

추가

---

6 도서 갱신 (page2) — 검색 + 수정

갱신 화면은 3개 버튼 그리드를 쓴다. 검색으로 기존 도서를 찾고, 수정 → 저장. ui-grid-b는 3칸 그리드, ui-block-a/b/c로 각 칸 채움.

<fieldset class="ui-grid-b"> <!-- 3칸 그리드 --> <div class="ui-block-a"><input type="reset" value="취소"/></div> <div class="ui-block-b"><input type="button" id="submit2" value="수정"/></div> <div class="ui-block-c"><input type="button" id="search2" value="검색"/></div> </fieldset>

그리드 클래스	칸 수	블록 클래스
ui-grid-a	2칸	block-a, block-b
ui-grid-b	3칸	block-a, block-b, block-c
ui-grid-c	4칸	block-a, block-b, block-c, block-d
ui-grid-d	5칸	block-a ~ block-e

---

7 전체 조회 (page4) — 페이지네이션

여러 도서를 보기 위한 이전/다음/처음/마지막 4개 버튼. controlgroup data-type="horizontal"으로 한 덩어리 가로 버튼.

<fieldset data-role="controlgroup" data-type="horizontal"> <input type="button" id="first" value="|<"/> <!-- 처음 --> <input type="button" id="prev" value="<"/> <!-- 이전 --> <input type="button" id="next" value=">"/> <!-- 다음 --> <input type="button" id="last" value=">|"/> <!-- 마지막 --> </fieldset>

// JavaScript 측에서 position 변수로 분기 $('#first').click(function() { position='first'; listBook(); }); $('#prev') .click(function() { position='prev'; listBook(); }); $('#next') .click(function() { position='next'; listBook(); }); $('#last') .click(function() { position='last'; listBook(); });

page4 — 페이지네이션 + 검색

← Back도서 정보🏠

입력

수정

삭제

검색

도서 내용 검색

|< < > >|

검색도서명: 장르: 도서명:

취소

검색

---

8 selectmenu('refresh') — UI 동기화

JavaScript로 $('#bookType1').val('미정')처럼 select 값을 바꾸면, jQuery Mobile이 그려놓은 커스텀 UI는 자동으로 안 바뀐다. .selectmenu('refresh')를 호출해서 강제로 다시 그리게 해야 한다.

$('#cancel1').click(function() { $('#bookType1').val('미정').attr('selected', 'selected'); $('#bookType1').selectmenu('refresh'); // UI 갱신 — 필수 });

⚠ 이게 jQuery Mobile의 흔한 함정 — 데이터를 바꿨는데 화면이 그대로면 99%는 refresh를 안 호출한 것. 다른 컴포넌트도 비슷한 메서드가 있다 (checkboxradio('refresh'), slider('refresh') 등).

---

9 핵심 한 줄 요약

XML · BOOKAPP — KEY POINTS

HTML화면용 — 정해진 태그

XML데이터용 — 태그 직접 정의

XML 스타일링<?xml-stylesheet href="..."?> + display: block

멀티 페이지한 HTML에 page 여러 개 + 공통 navbar

2/3/4칸 그리드ui-grid-a/b/c + ui-block-a/b/c/d

컨트롤 그룹data-role="controlgroup" + data-type="horizontal"

뒤로가기data-rel="back" + data-direction="reverse"

UI 갱신selectmenu/checkboxradio/slider('refresh')

Tags

#XML #HTML차이 #customTag #xmlStylesheet #BookApp #jQueryMobile #CRUD #uiGrid #uiBlock #navbar #selectmenuRefresh #티스토리

▼ 티스토리 태그 입력란 복사용

XML, HTML차이, customTag, xmlStylesheet, BookApp, jQueryMobile, CRUD, uiGrid, uiBlock, navbar, selectmenuRefresh, 티스토리