스타일비전 디자인에서 CSS 파일을 동적으로 선택하여 디자인의 활용도를 높이세요

StyleVision의 가장 큰 장점 중 하나는 뛰어난 유연성입니다. StyleVision을 사용하면 HTML, PDF, 그리고 전자 양식 등 다양한 형식으로 출력할 수 있는 시각적으로 정교한 스타일 시트와 보고서를 설계할 수 있습니다 이제 StyleVision은 CSS 파일을 동적으로 선택하는 새로운 기능을 통해 StyleVision 2012에서 도입되었으며, 이를 통해 하나의 디자인에서 다양한 서식 요구 사항을 더욱 쉽게 충족할 수 있습니다.

StyleVision 디자인 자체에서도 대부분의 서식 작업을 수행할 수 있지만, CSS 파일을 동적으로 선택하는 기능을 통해 여러 상황에서 사용할 수 있는 단일 템플릿을 만들 수 있습니다. 예를 들어, 가상의 "나노널(Nanonull)" 기업을 위한 청구서를 만들었는데, 이 청구서의 디자인은 청구서 발행일과 납기일 사이의 경과일에 따라 변경됩니다. 각 요소의 서식을 경과일 수에 따라 변경하기 위해 XPath를 사용할 수도 있지만, 이 경우에는 다양한 상황에 적용되는 개별 CSS 파일을 만드는 것이 더 효율적입니다.

아래는 StyleVision을 사용하여 디자인한 견적서입니다. 주목할 점은 굵게 표시된 제목 외에는 거의 서식이 적용되어 있지 않다는 것입니다. 견적 발행일과 납기일 사이의 경과일에 따라 CSS 파일을 통해 서식을 적용할 예정입니다.

이제 우리는 Altova의 XMLSpy를 사용하여 CSS 파일을 만들 수 있습니다 XML 편집기 CSS2 및 CSS3 편집을 위한 통합 지원 기능을 제공합니다.

먼저, 납기일이 청구서 발행일 이후인 청구서(즉, 연체되지 않은 청구서)를 위한 CSS 파일을 만들겠습니다. 여기서는 간단하게 노란색 배경을 가진 body 선택자와, 나노눌(Nanonull) 로고, 그리고 헤더 클래스를 정의했습니다.

이제 연체된 송장에 대한 좀 더 상세한 CSS 스타일을 만들어 보겠습니다. body 선택자에는 연체 이미지를 추가하고, paragraph 선택자에는 20포인트의 굵은 빨간색 글꼴을 적용하며, 헤더와 작은 헤더 클래스에는 다양한 크기의 굵은 빨간색 글꼴을 적용하겠습니다.

이제 CSS 파일을 StyleVision 디자인에 적용하고, 그 후 다양한 디자인 요소에 각각 클래스를 지정할 수 있습니다.

StyleVision에서는 디자인 개요에서 "새로운 CSS 파일 추가" 버튼을 클릭한 다음, XMLSpy에서 생성한 CSS 파일로 이동합니다. StyleVision은 동일한 디자인 내에서 여러 개의 CSS 파일을 지원합니다.

현재 저희 디자인은 다음과 같은 모습입니다. 주목할 점은 StyleVision 디자인 뷰에서 CSSRegular와 CSSOverdue 스타일 모두 적용되었다는 것입니다.

하지만, 저희는 송장 발행일과 납기일 사이의 거리에 따라 CSS 파일을 지정하고 싶습니다. 따라서, 디자인 개요에서 CSS 파일 옆의 화살표를 마우스 오른쪽 버튼으로 클릭하고, 아래에 있는 "XPath를 사용하여 CSS 파일 하나 선택" 옵션을 선택할 것입니다.

이렇게 하면 "XPath를 사용하여 CSS 파일 선택" 대화 상자(아래)가 나타납니다. 이 대화 상자에서 XPath를 사용하여 동적인 입력에 따라 적절한 CSS 파일을 선택할 수 있습니다. 여기서는 StyleVision에 송장 발행일보다 송장 납기일이 앞서는 경우 "CSSOverdue.css" 파일을 사용하고, 그 외의 경우에는 "CSSRegular.css" 파일을 사용하도록 설정했습니다.

위에서 "XPath를 사용하여 CSS 파일 선택" 대화 상자에 입력한 전체 XPath 표현식은 다음과 같습니다.

이제 CSS 파일에 정의된 클래스를 StyleVision 디자인의 개별 디자인 요소에 적용할 수 있습니다.

여기서는 "Invoice"라는 단어가 포함된 문단을 스타일 창에서 "헤더" 클래스에 할당했습니다. 저희 CSS 파일의 설정에 따라, 미납 청구서의 경우 해당 텍스트는 20포인트의 굵은 빨간색 글씨로, 그리고 아직 기한이 지나지 않은 청구서의 경우 20포인트의 굵은 검은색 글씨로 표시됩니다.

마찬가지로, 송장 만기일을 "작은 제목" 클래스로 지정하겠습니다

이제 견적서의 미리보기 화면을 확인할 준비가 되었습니다.

아래는 미납된 송장에 대한 HTML 미리보기입니다. "송장"이라는 단어와 납기일은 빨간색 굵은 글씨로 표시되어 있으며, "미납"이라는 이미지는 중앙에 표시되어 있습니다.

자, 이제 미래 날짜로 설정된 동일한 송장을 살펴보겠습니다. 노란색 배경, 나노널(Nanonull) 로고, 그리고 "송장"이라는 단어와 납기일이 검은색으로 표시된 것을 주목해 주세요.

CSS 파일을 동적인 입력에 따라 선택할 수 있는 기능은 다양한 가능성을 열어주며, StyleVision 디자인을 더욱 유연하게 만들어줍니다. 이 기능을 통해 디자인과 연결된 CSS 파일을 사용하여 실시간으로 서식 변경을 할 수 있으며, 특히 많은 요소로 구성된 디자인에서 유용합니다.

StyleVision 스타일시트 및 보고서 디자인 도구 또는 Altova의 다른 도구를 사용하여 훌륭한 프로젝트를 만들었다면, 다른 사람들에게 보여주고 싶으신가요? 이 블로그 게시물에 댓글을 달아 다른 Altova 사용자들과 여러분의 경험을 공유해주세요.

만약 이 내용이 훌륭한 사례 연구 자료가 될 수 있다고 생각하신다면, Altova 사례 연구 페이지를 방문해 주세요. 저희가 여러분의 이야기를 활용할 경우, 200달러 상당의 아마존 기프트 카드를 제공해 드립니다. 여러분의 의견을 듣고 싶습니다!