ASP.NET AJAX Control Toolkit : Accordion 2부

지난 시간에 우리는 Accordion 컨트롤의 사용방법에 대해서 간단하게 알아보았다. 이번에는 Accordion 컨트롤을 다루는 방법에 대해서 좀 더 자세하게 알아보며, CSS를 적용하는 방법에 대해서 알아보도록 하겠다.

Accordion 1부를 보지 않았거나, 너무 오래되서 기억이 안나는 분들을 위해 속성에 대해서 다시 살펴보겠다.

속성

SelectedIndex : 페이지 로드 시 처음으로 열릴 Pane을 지정, 지정하지 않으면 기본값으로 0을 갖으며, 가장 상위에 있는 Pane을 오픈
HeaderCssClass : Header영역에 미리 정의되어있는 Css Class를 지정
ContentCssClass : Content영역에 미리 정의되어있는 Css Class를 지정
FadeTransitions : true, false로 페이드 효과 사용 여부 지정
TransitionDuration : 1000분의 1초 단위의 애니메이션이 진행될 시간
FramesPerSecond : 애니메이션에 사용될 초당 프레임 수
AutoSize : None, Limit, Fill의 3가지 모드 지원
- None : 높이에 영향을 주지 않는다.
- Limit : 지정되어있는 높이만큼만 표시
- Fill : 무조건 지정되어있는 높이로 표시

이제 1부에서 실행해 보았던 소스에 위의 속성을 정의해서 그 역할을 하나씩 알아보도록 하자.

HeaderCssClass

위에 소개한 순서대로 하자면 SelectedIndex가 먼저 나와야겠지만, 스타일 구분이 되어있지 않아 어디가 헤더영역이고 어디가 컨텐트 영역인지 구분되지 않는다. 따라서, 먼저 HeaderCssClass와 ContentCssClass를 먼저 알아보고 넘어가겠다.

HeaderCssClass는 미리 정의되어있는 CSS의 클래스를 적용시키는 역할을 한다. 아래 [코드 1]과 같이 CSS를 정의 하였다.

<style type="text/css">
.headerClass {
background-color: blue;
cursor: pointer;
border: thin white ridge;
color: White;
font-weight:bold;
}
</style>

[코드 1] 해더 영역에 적용시킬 CSS

그리고 [코드 2]와 같이 Accordion 컨트롤 속성으로HeaderCssClass="headerClass" 라고 정의한다.

<cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerClass">

[코드 2]HeaderCssClass로 헤더영역 스타일 정의

간단하다, 문론 직접 CSS를 정의 해야 하지만, CSS의 클래스명만 지정해주면 [그림 1]과 같은 보다 깔끔한 스타일을 적용할 수 있게 된다.

[그림 1]HeaderCssClass로 헤더영역에 CSS를 적용한 모습

어떤가? 훨씬 깔끔해지고 보기 좋아졌지 않은가? 헤더영역과 컨튼트 영역도 이젠 확실하게 구분이 된다. 이제 컨텐트 영역에도 CSS를 적용시켜 보자.

ContentCssClass

우리는 위에서 헤더영역에 스타일을 적용시켜 보았다. 눈치빠른 분이라면 이미 어떻게 사용하는지 알아차렸을 것이다. 그래도, 조금 눈치 느린 분들을 위해서 설명을 하도록 하겠다.

ContentCssClass는 컨텐트 영역에 미리 정의되어있는 CSS 클래스를 지정하여 스타일을 적용시키는 역할을 한다. 컨텐트 영역에 CSS를 적용하기 위해서 미리 CSS 클래스를 정의를 하도록 하겠다.

<style type="text/css">

.headerClass {

background-color: blue;

cursor: pointer;

border: thin white ridge;

color: White;

font-weight:bold;

}

.contentClass {

background-color: Silver;

padding: 5px;

border: thin white inset;

font-size: 8pt;

}

</style>

[코드 3] 컨텐트 영역에 적용할 CSS

[코드 3]에서 볼드로 처리되어있는 부분이 컨텐트 영역에 적용할 새롭게 추가된 CSS이다. 이제 이 CSS를 Accordion 컨트롤에 적용시켜 보자.

<cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerClass"

ContentCssClass="contentClass">

[코드 4] Accordion 컨트롤에서 ContentCssClass정의

[코드 3]에서와 같이 CSS를 선언하고 이 선언된 CSS를 [코드 4]에서처럼 ContentCssClass로 지정하면 역시 끝이다. 뭐 더 할것도 없다. 저장하고 브라우저에서 확인해보자.

[그림 2] ContentCssClass로 컨텐트 영역에 CSS 적용

이처럼 간단하게 컨텐트 영역에도 CSS를 적용시킬 수 있다.

SelectedIndex

페이지 로드 시 몇번째 Pane를 열어줄 것인가를 설정한다. 여기서 또 포스가 강한분들은 눈치챘을것이다.이SelectedIndex를 지정하지 않으면 기본적으로 첫번째 Pane을 열어서 보여준다. 앞서 본 예제를 보면알 수 있을 것이다. 기본값은 0 이다.

<cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerClass"

ContentCssClass="contentClass" SelectedIndex="1">

[코드 5] SelectedIndex로 두번째 Pane을 보여주도록 지정

[코드 5]와 같이 정의하면 페이지 로드 시에두번째 Pane을 열어서 보여주게 된다.

[그림 3] SelectedIndex="1"이 적용된 모습

SelectedIndex가 적용된 결과를 [그림 3]으로 확인할 수 있다.

FadeTransitions

이 속성은 Pane 전환 시 페이드 효과를 사용할 것인지를 설정한다. true, false로 설정하며 기보값은 false이다.

<cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerClass"

ContentCssClass="contentClass" FadeTransitions="true">

[코드 6] 페이드효과 적용

뭔 소린지 잘 모르겠는가?

[코드 6]과 같이 작성하면 Pane이 전환횔 때 페이드 인/아웃되는 효과를 볼 수 있다.

[그림 4] 페이드되는 변환 과정

TransitionDuration

이 속성은 애니메이션이 진행 시간을 1000분의 1초 단위로 설정할 수 있는 기능을 한다. 즉 애니메이션이 진행되는 시간을 0.5초로 설정하고 싶으면 [코드 7]처럼 하면 된다.

<cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerClass"

ContentCssClass="contentClass"TransitionDuration="500">

[코드 7] 애니메이션 진행시간 0.5초로 설정

FramesPerSecond

애니메이션이 진행되는 초당 프레임을 나타낸다. 따라서, 프레임수가 많을 수록 애니메이션은 더욱 부드러운 움직임을 보여준다. 우리가 TV나 극장에서 보는 영상은 일반적으로 초당 24프레임의 속도록 정지된 이미지를 연속해서 보여줌으로 해서 동영상으로 보여지게 된다. 일반적으로 가장 부드러운 움직임을 표현해 주는 프레임 수라고 생각하면 될 것이다. 하지만, 이것은 영화와 같은 영상매체를 기준으로 정의된 것이기에 이 FramesPerSecond로 정의할 수 있는 가장 이상적이고 부드러운 움직임을 표현해 줄 프레임 수는 사실 개인차에따라 다르다고 볼 수 있다. 이 부분은 직접 코딩을 해 보고 느껴보는 것이 가장 좋을 것 같다.

<cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerClass"

ContentCssClass="contentClass"FramesPerSecond="24">

[코드 8] 초당 프레임 수를 24로 설정

[코드 8]에서 처럼 24로 정의할 수도 있지만, 100 정도로 정의해 보면 더욱 부드러운 움직임을 보여준다. 하지만 숫자만 높인다고 무조건 좋은 것은 아니다. 1000 정도로 정의를 해보면 이 컨트롤이 초당 처리할 수 있는 한계를 넘어서기 때문인지 굉장히 부드럽지만 그 속도 또한 굉장히 느려짐을 알 게 될 것이다. 따라서, 개발자가 움직임과 속도를 적절히 파악해서 정의 하는 것이 좋을 것이다.

AutoSize

이 속성은 Accordion 컨트롤의 정의된 높이에 따른 형태를 정의한다. AutoSize는 None, Limit, Fill의 3가지 모드를 지원하는데, 각각의 모드에 대한 Accordion 의 형태변화를 알아보도록 하겠다.

- None : AutoSize의 기본값이며, 정의 하지 않을경우 Accordion 컨트롤은 None 모드로 동작한다. 이 모드는 지정된 Accrodion의 높이에 관계없이 각각의 Pane의 높이에 따라 컨텐트 영역의 내용을 모두 보여준다.

<cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerClass"

ContentCssClass="contentClass"AutoSize="None">

[코드 9] AutoSize를 None로 정의

[코드 9]의 결과는 [그림 5]와 같다.

[그림 5] AutoSiz="None"의 결과

[그림 5]에서와 같이 그 높이에 상관없이 컨텐트 영역을 모두 보여준다.

- Limit : 이 모드는 높이에 재한을 둔다. 다시 말해서, 전체 Accordion의 높이를 300으로 정의했다면, 그 높이까지만 보여주고 그 이상을 넘어갈 경우 스크롤바를 생성해서 그 크기를 재한하겠다는 의미이다.

<cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerClass"

ContentCssClass="contentClass"AutoSize="Limit" Height="300">

[코드 10] AutoSize를 Limit로, 높이를 300픽셀로정의

[코드 10]은 AutoSize의 모드를 Limit로 정의하고 Accordion의 높이를 300픽셀로 정의한 것이다. 그 결과를 보도록 하겠다.

[그림 6] AutoSiz="Limit"의 결과

[그림 6]을 보면 그 왼쪽 브라우저와 오른쪽 브라우저의 크기가 서로 다른것을 알 수 있을 것이다. 왼쪽은 높이가 300픽셀보다 낮기 때문에 정상적으로 None 모드와 똑같이 보여지지만, 오늘쪽 브라우저는 300픽셀을 넘어서기 때문에 300픽셀의 높이까지만 보여주고 나머지는 스크롤로 이동해야지만 볼 수 있도록 그 형태가 변한 것을 알 수 있다.

- Fill : 이 모도는 Limit 모드와 같이 Height 속성과 함께 사용되며, 지정된 높이까지 무조건 채워서 보여준다.

<cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerClass"

ContentCssClass="contentClass"AutoSize="Fill" Height="320">

[코드 11] AutoSize를 Fill로, 높이를 320픽셀로정의

[그림 7] AutoSiz="Fill"의 결과

[그림 7]은 [코드 11]에 대한 결과화면이다. 이 모드는 Limit모드와 반대개념이라고 생각하면 잘못된 생각이다. Fill 모드는 보여지는 컨텐트의 양과는 관계없이 무조건 지정되어있는 높으로 보여주기 때뭉니다.

[그림 7]을 보면 지정된 높이보다 크던 작던 무조건 지정된 높이로 보여지는 것을 확인할 수 있다.

정리

1부에 이어서 우리는 Accordion에 CSS를 정의하는 방법과 Accordion 컨트롤의 속성에 대해서 알아보았다.

자바스크립트로 만들기 위해서 많은 연산을 해야 했지만 이 Accordion 컨트롤로 정말 손쉽게 웹 어플리케이션에 다이나믹한 기능을 추가할 수 있게 되었다. 위의 코드들을 직접 코딩해 보고 그 실행결과를 확인해 보기 바란다.