웹 페이지 제작: 스타일비전을 활용한 HTML 디자인

오늘날의 급변하는 비즈니스 환경은 정보가 끊임없이 변화하며, 필요한 형식 또한 자주 바뀐다는 것을 의미합니다. 일부 웹 페이지는 내용이 자주 바뀌지 않는 부분을 포함할 수 있습니다 (예: 회사 소개 페이지, 찾아오시는 길 페이지). 하지만 오늘날 대부분의 기업 웹사이트는 새로운 데이터로 지속적으로 업데이트됩니다. 이러한 이유로 많은 조직들이 웹 콘텐츠를 XML 형식으로 저장하는 것을 선택합니다. XML을 사용하면 조직에서 정보를 매우 효율적으로 관리할 수 있습니다. 왜냐하면 XML 파일에 저장된 정보는 다양한 용도로 활용될 수 있으며, 여러 가지 출력 형식으로 제공될 수 있기 때문입니다. XML 파일과 관련된 XML 스키마는 해당 콘텐츠의 구조를 정의합니다. StyleVision은 강력한 스타일 시트 및 보고서 디자인 도구로, XML을 효과적으로 활용할 수 있도록 도와줍니다. StyleVision을 사용하면 다음과 같은 작업을 수행할 수 있습니다 웹 페이지를 제작하다 템플릿 기반의 디자인 창에서 정교한 서식 기능을 제공하며, 드래그 앤 드롭 방식으로 간편하게 사용할 수 있습니다. (제품명: StyleVision) 자동으로 XSLT 스타일 시트를 생성합니다 이렇게 하면 디자인을 새로운 웹사이트나 기존 웹사이트에 통합할 수 있으며, 심지어 파일 메뉴에서 바로 ASPX 웹 애플리케이션을 생성할 수도 있습니다.

이번 글에서는 StyleVision의 HTML 서식 기능 중 일부를 보여주는 웹 페이지를 디자인해 보겠습니다. StyleVision의 내장된 서식 기능은 간단한 드래그 앤 드롭만으로도 정교한 디자인을 만들 수 있도록 지원하지만, 이번 예제에서는 다음 방법을 사용하겠습니다 CSS3 (Cascading Style Sheets 3), 이미지 및 기타 표준 디자인 요소를 활용하여 콘텐츠가 변경되더라도 웹 페이지의 레이아웃을 다시 조정할 필요가 없는 웹 페이지를 제작합니다.

저희가 처음 디자인한 StyleVision은 매우 기본적인 형태였습니다.

아래의 스키마 트리 창에서 볼 수 있듯이, 원본 XML 스키마는 XML 문서를 책 형태로 발행할 수 있도록 설계되었으며, 개요, 장 제목, 장 소제목, 그리고 내용 등을 포함하고 있습니다. 우리는 이러한 각 섹션에 해당하는 요소를 디자인 창으로 단순히 끌어다 놓았습니다.

아래에서 볼 수 있듯이, XML 콘텐츠는 제대로 표시됩니다. 놀랍게도, 이를 위해 별도의 XSLT나 HTML 코드를 직접 작성할 필요가 없었습니다. 하지만 웹 페이지로 게시하기 전에 스타일을 조정해야 합니다.

스타일비전 인터페이스의 스타일 및 속성 창에서 거의 모든 디자인 요소를 서식 지정할 수 있지만, 이번에는 서식 적용을 위해 CSS 파일을 사용하겠습니다. 이렇게 하면 서식을 변경하고 싶을 때, 디자인 자체를 수정하는 대신 XSLT 코드에서 새로운 CSS 파일을 지정하는 것만으로 변경할 수 있습니다.

저희는 Altova사의 XMLSpy를 사용할 것입니다 XML 편집기 CSS2 및 CSS3 편집 및 작성 기능을 통합하여, 저희는 CSS를 제작했습니다.

아래 스크린샷은 XMLSpy에서 생성한 CSS 파일의 일부를 보여주며, h1, h2, 그리고 h3 헤더에 대한 속성들을 포함하고 있습니다. 여기에서 CSS 파일 내에 이러한 요소들을 정의할 것입니다. 그런 다음, StyleVision에서 XML 파일의 요소들에 이 스타일을 적용할 것입니다.

참고로, 저희는 h1 태그에 CSS3 속성인 box-shadow를, 그리고 h3 태그에 box-sizing 속성을 적용했습니다. XMLSpy와 StyleVision 모두 HTML5와 CSS3를 지원합니다.

CSS 파일을 만든 후에는 StyleVision으로 돌아가서 만든 디자인에 해당 파일을 적용합니다. StyleVision 디자인에 CSS 파일을 적용하려면, 디자인 개요 화면에서 "새 CSS 파일 추가" 링크를 클릭하고 파일을 선택하면 됩니다.

StyleVision 디자인은 여러 개의 CSS 파일을 지원할 수 있다는 점을 참고하시기 바랍니다. 최근 저희 블로그에서 관련 내용을 다루었습니다 스타일비전 디자인에 CSS 파일을 동적으로 할당합니다. 이제 CSS 파일에서 생성한 스타일 선택자를 디자인 요소에 적용할 수 있습니다. 먼저, 챕터 제목에 해당하는 부분을 선택하겠습니다. 챕터 제목 요소의 내용 영역을 강조 표시한 후, 메뉴 막대에서 드롭다운 목록에서 "h1"을 선택합니다.

저희 CSS 파일에서 h1 태그에 대한 글꼴, 글꼴 크기, 색상, 그리고 정렬 방식을 정의했습니다. 또한 CSS3의 box-shadow 속성을 사용했습니다.

다음은 저희 디자인의 HTML 코드이며, 여기서 "h1" 선택자는 장 제목 요소에 적용되었습니다.

마찬가지로, "h2"와 "h3" 선택자를 각각 개요 부분과 장 소제목 요소에 적용하겠습니다. 현재 디자인은 다음과 같습니다.

아래에 HTML 코드가 표시됩니다. 참고하시기 바랍니다. 우리는 CSS3의 box-sizing 속성을 사용하여 소제목("매력적인 결과물 생성" 및 "시각적 스타일 시트 디자인")을 배치하고, 텍스트를 이 소제목들을 감싸도록 했습니다.

마지막으로, 원본 XML 파일에서 가져온 "coverimage"라는 속성을 사용하여 페이지 하단에 이미지를 추가하겠습니다 (아래 그림 참조).

디자인에 이미지를 추가하려면, 스키마 트리에서 "coverimage" 요소를 디자인 창으로 끌어다 놓고 "이미지 생성"을 선택합니다. 그러면 "이미지 삽입" 대화 상자가 나타납니다. "동적" 탭으로 이동한 다음, "XPath 편집" 버튼을 클릭하고 스키마 트리에서 "cover image" 요소를 선택합니다.

아래에 "이미지 삽입" 대화 상자가 나타납니다.

저희는 CSS 파일에 CSS3의 border-radius 속성을 추가하여 이미지에 적용할 수 있도록 했습니다. 이 속성은 요소의 모서리를 둥글게 만들어줍니다.

다음은 CSS 파일에서 이미지 서식을 정의하는 부분입니다. 이 화면은 XMLSpy에서 확인한 것입니다.

여기에서 사용된 서식 기술 외에도, 자바스크립트 함수, 조건부 템플릿, 자동 계산 등 고급 기능을 추가할 수 있지만, 이 예제에서는 설명을 단순하게 유지하기 위해 기본적인 기능만 사용하겠습니다.

저희 디자인은 이제 완성 단계에 접어들었으며, 아래에 HTML 화면의 모습을 보여드립니다.

[이미지]

이제 디자인에 만족했으니, 파일 메뉴를 사용하여 자동으로 생성된 XSLT 스타일시트를 저장할 수 있습니다.

저희는 "저장된 파일 생성" 옵션 바로 아래에 있는 "웹 디자인" 옵션을 선택하여 이 디자인에 대한 ASPX 웹 애플리케이션을 생성할 수도 있습니다. "속성" 대화 상자(파일 메뉴를 통해 접근 가능)에서 HTML 4 또는 HTML 5 출력 형식을 선택하고, 심지어 Internet Explorer와의 호환성 설정도 가능합니다.

더욱 중요한 점은, 원본 데이터가 변경되면 해당 변경 사항이 자동으로 HTML 결과물에 반영된다는 것입니다.

만약 저희가 XML 파일에 새로운 내용을 추가한다면, 해당 내용은 원래 형식과 동일하게 구성되며, 모든 디자인 요소들이 서로 적절한 관계를 유지합니다. 따라서 HTML 코드를 다시 작성할 필요가 없습니다.

여기서는 XML 파일에 새로운 장 제목과 관련된 내용을 추가하고, 그 결과를 HTML 형식으로 미리 보여드리고 있습니다.

보시다시피, StyleVision은 최고의 장점을 모두 제공합니다. 동적인 서식 기능을 갖춘 단일 HTML 템플릿을 만들어 다양한 환경에 적용할 수 있습니다. StyleVision이 제공하는 완벽한 서식 제어 기능을 통해, 여러분의 비전을 반영하는 웹 페이지와 ASPX 애플리케이션을 디자인할 수 있습니다.