XML 외부 CSS — block 레벨, 사용자 정의 태그 완전 정리

 

 

Web Development · XML + CSS

XML 외부 CSS —
block 레벨, 사용자 정의 태그

XML도 CSS로 그려진다 — display 속성의 의미

시작 오늘 분석할 코드

student.xml을 화면에 보일 때 적용되는 외부 CSS다. 사용자 정의 태그(student_heading, student)를 선택자로 쓴다는 점이 HTML CSS와 다르다.

/* student2.css */ student_heading * { color: white; background-color: green; } student { display: block; }

실제 출력 미리보기 (XML이 CSS로 그려진 모습)

전공이름나이성별

컴퓨터학과홍길동25세남

철학과홍리라21세여

---

용어 핵심 키워드

student_heading *자손 결합자 — student_heading 안의 모든 자식

display: block한 행에 하나만 — 위아래로 쌓임

display: inline한 행에 여러 개 — 옆으로 나열

사용자 정의 선택자XML 태그명을 그대로 선택자로

XML 기본 표시CSS 없으면 트리 형태 + 들여쓰기

block vs inline레이아웃의 가장 기본 구분

---

1 XML도 CSS 선택자가 작동

HTML의 th 선택자와 같은 방식으로 XML의 student나 major도 선택할 수 있다. 태그명만으로 매칭된다.

/* HTML CSS */ th { background-color: silver; } /* XML CSS — 같은 패턴 */ student { display: block; } major { color: red; }

💡 차이점 — XML은 사용자가 만든 태그라 브라우저가 기본 스타일을 모른다. CSS로 어떻게 표시할지 명시해야 한다.

---

2 "student_heading *" — 자손 결합자

두 선택자 사이에 공백이 있으면 "자손" 의미다.

student_heading * { ... } /* "student_heading 안의 모든 자식 요소" */

• *는 "모든 요소" — 와일드카드
• 그래서 student_heading 안의 major, name, age, gender 4개에 모두 적용
• 결과: 이 4개 모두 흰 글씨 + 녹색 배경

---

3 XML의 기본 표시 — 왜 display 필요?

XML 파일을 브라우저에서 그냥 열면 트리 형태로 들여쓰기되어 표시된다 (개발자 도구처럼). CSS를 적용하면 다르게 보이게 만들 수 있다.

하지만 사용자 정의 태그는 기본 display가 'inline'이다. 그래서 student 두 개가 옆으로 나란히 붙어 보인다. 그걸 위아래로 쌓이게 만들려면 명시적으로 display: block이 필요하다.

---

반응형

4 block vs inline

display: inline

한 행에 여러 개. 텍스트처럼 옆으로 흐른다.

A B C

display: block

한 행에 하나. 위아래로 쌓임.

A

B

C

• HTML 기본값: div, p, h1~h6, table 등은 block / span, a, em 등은 inline
• XML 사용자 정의 태그: 모두 inline (기본)
• 본 코드는 student를 block으로 바꿔 학생마다 한 줄씩 나오게 함

---

5 본 코드의 의도

• student_heading 영역 — 표 제목줄처럼 보이게 (녹색 + 흰 글씨)
• 각 student — 한 줄씩 분리 (block)
• 각 student 안의 major, name 등 — 그대로 inline (옆으로 나열)

⚙ 왜 이렇게? — XML에는 table, tr, td 같은 표 구조 태그가 없다. CSS의 display 속성으로 표 같은 시각적 효과를 만들어낸다.

---

6 그 외 유용한 display 값

값	특징
block	한 행 하나, 너비 100%
inline	여러 개 옆으로, 너비 컨텐츠만큼
inline-block	옆으로 나열되지만 width/height 적용 가능
flex	현대 레이아웃 — 자동 정렬·간격
grid	2차원 격자 레이아웃
none	완전히 사라짐 (공간도 X)

---

7 자주 하는 실수

실수	증상	해결
XML CSS인데 HTML 태그 선택자	매칭 실패	XML의 실제 태그명 사용
display: block 빠뜨림	모두 한 줄에 붙어 표시	분리하고 싶은 요소에 명시
* 앞에 공백 빠뜨림 (heading*)	오류 — 다른 의미	공백으로 자손임을 표시
// 주석 사용	다음 줄까지 무시 (CSS는 // 주석 X)	/* */ 사용

⚠ 본 코드의 // 주석 — student2.css에 // 테이블에서는 ... 같은 줄이 있다. 이건 CSS 표준 주석이 아니다. 학습용으로 적은 메모일 뿐 실제로는 다음 줄까지 영향을 줄 수 있다.

---

8 XML+CSS는 잘 안 쓰는 패턴

오늘날 XML을 화면에 직접 표시하는 일은 거의 없다. 보통은:

• XSLT로 XML을 HTML로 변환 후 표시 (구식)
• JS로 파싱해서 HTML DOM에 동적 삽입 (현대)
• 혹은 JSON으로 받아 React/Vue 컴포넌트로 렌더링 (가장 현대)

본 코드의 xml-stylesheet 패턴은 학습용이라 보면 된다.

---

핵심 한 줄 요약

XML도 CSS 적용사용자 정의 태그를 선택자로

A B (공백)자손 결합자 — A 안의 B

*와일드카드 — 모든 요소

display: block한 행 하나 — 위아래로 쌓임

display: inline한 행 여러 개 — 옆으로

XML 기본사용자 태그는 inline

CSS 주석/* */ 만 (// X)