블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



사용자 삽입 이미지
  무 일찍 나이들어 버린... 너무 늦게 깨달아버린...

- 과의 인연 -

 내가 이책을 구입한지는 4년전...그러니깐 04년도 이맘때 쯤이다. 그때 당시 나는 상병계급장을 달고 휴가를 복귀하는 군인이었으니깐...
 강남터미널에서 차시간을 기다리는 중에 버스안에서 몰할까(6시간동안) 생각하다가 만화책을 읽으면서 가야지하고 마음 먹고 강남 터미널 근처 영풍문고로 향해 들어갔다. 그런데 왠지 책 색깔도 이뿌고 제목부터도 심상치 않은 이책을 발견하게 된것이다. 그래서 나도 모르게 구입하게 되고, 버스를 타고 쭈욱 읽어 나갔다. 반쯤 읽었을때 부대 앞에 도착해서, 이 책을 다는 읽지 못했던 기억이 있다. 요즘에 다시 이책을 읽었다. 다시 읽으니깐 새삼 느낌이 다른 느낌이다.




 - 이 책의 저자는 이런 사람이다. -

 33년간 심리 치료사로 일하면서 '상처 입은 영혼'을 치유해온 사람이면서, 자신의 큰아들이 자살로 죽고, 둘째아들은 백혈병으로 죽어 큰 아픔을 격은 아버지이기도 하다. 또 30살이 넘어 자신의 입양아였다는 사실도 알게 된다.

- 너무 늦기 전에 알아야 할 인생의 진실 30가지 -

우리는 살다보면 삶을 뒤돌아 보고 후회하는 일들이 무수히 많을 것이다. 늘 게으름에 빠져있는 자신의 모습, 영영 잃게 된 친구, 언제나 난의 탓만 하던 어린 시절의 못된 버릇, 첫사랑에 연연해 떠나보낸 소중한 사랑, 내 자신을 옥죄던 내가 만든 감옥등... 뒤늦게 깨닫고 후회하게 만드는 것들이 있다. 이런 생각을 하면 "다시 그때로 돌아갈 수만 있다면..."하는 생각을 할 것이다. 하지만 불가능한 일이란걸 안다.
 이 책에는 늦기 전에 알아야 후회하지 않을 지혜로운 것들이 서른가지가 담겨 있다. 그렇다고해서 어떠한 문제에서 해결책을 제시해 주는 책은 아니다. 나에게 어떤 문제가 있는지, 왜 그런 문제가 생긴건지, 어떻게 그 문제를 해결할 수 있는지를 독자의 몫으로 남겨두고 있다. 그러면서 저자의 따뜻한 충고와 용기(자신의 의지)를 불어 넣어 주려함을 느낄수있다.

- 몇가지 진실 -

ㅁ 비상한 용기 없이는 불행의 늪을 건널 수 없다.
 누구나 불행을 피해갈 수는 없지만, 그렇다고 이겨내지 못할 불행도 없다.
세상에 대한 원망과 가지연민을 이겨낼 용기만 있다면 우리는 모든 고통으로 부터 구원받을 수 있다.


ㅁ 가장 견고한 감옥은 우리 스스로 만드는 것이다. 
 어떤 일을 망치는 가장 큰 원인은 두려움이다.
이 두려움이 갖가지 변명거리를 만들어내며 우리를 뒷걸음치게 만든다.
그리고 이 두려움은 누가 우리에게 준 것이 아니라 우리 스스로 만들어낸 것이다.


ㅁ 사랑은 인생에 처방하는 가장 강력한 진통제다.
 고통으로 가득 찬 이 세상을 순간 살아볼 만한 곳으로 만들어주는 신비로운 존재가 바로 사랑이다.
인간이 견뎌야 할 모든 시련에 대한 보상으로 주어지는 것도 바로 사랑이다.


ㅁ 짝사랑은 고통스러우면서 낭만적이지도 않다.
 애정에 대한 과도한 욕구가 때로는 짝사랑으로 나타나기도 한다.
하지만 사랑은 서로 소통될 때 비로소 그 빛을 발한다.
혼자 하는 사랑은 낭만적이지도 행복하지도 않다.


ㅁ 감정적인 행동을 이성적으로 멈추게 할 수 없다.
 우리가 스스로 잘못인 줄 알면서도 어리석은 행동을 반복하는 것은 그 행동이 논리적으로는 설명되지 않는 편견이나 아집에서 출발한 것이기 때문이다.

ㅁ 나에게 일어난 일의 대부분은 나에게 책임이 있다.
 사람은 자신의 고통을 다른 사람이나 외부 환경 탓으로 돌리려고 한다.
하지만 자신의 고통에 빠뜨리는 것도, 그 속에서 구해내는 것도 결국은 자기자신임을 알아야 한다.


ㅁ 정말로 바꾸고 싶다면 지금 당장 용기를 내야 한다.
 무언가 불만이 있는데도 부딪쳐 싸워낼 의욕이나 용기가 없어 내버려두고 있다면, 그 사람은 아직 충분히 불만스러운 것이 아닐지도 모른다.

ㅁ 남을 속이는 것보다 자신을 속이는 것이 더 나쁘다.
 갖가지 핑계로 게으른 자신을 함리화하는 것만큼 어리석은 일은 없다.
자기합리화 반복되면 결국은 어떤 판단도 올바로 할 수 없게 된다.


ㅁ 시련에 대처하는 방식이 삶의 모습을 결정한다.
 우리는 대부분의 상황을 자유의지대로 선택할 수 있다. 시련에 대처하는 방식에 있어서도 마찬가지다. 시련을 대처한느 여러가지 방식 중에서 어떤 것을 선택하느냐에 따라 우리의 인생은 달라질 수밖에 없다.

ㅁ 용서는 다른 사람이 아니라 나 자신에게 주는 선물이다.
 용서는 포기나 망각이 아니라 변화를 위한 적극적인 의지이다.
원망이나 복수심을 버리기 위해서는 그만큼 내면의 성숙이 필요하고, 내면의 성숙은 그적 얻어지는 것이 아니다.


Posted by happydong
, |



전에 제가 올린 글 중에 [AJAX Control] TabContainer Control 써보기~!라는 강좌가 있었는데요. 이번에는 그 TabContainer ControlStyle을 넣어 보도록 하겠습니다.

 

먼저 CSS Class를 지정해 주기에 몇 가지 규칙을 알아야 해요. 아래 그림과 표를 보시면 이해가 빠르실 것 같네요.

 

사용자 삽입 이미지


CSS Class Names

설명

ajax__tab_header

Tab 영역 전체 스타일 지정.

ajax__tab_body

Content 영역 스타일 지정.

ajax__tab_active

현재 선택된 Tab의 스타일 지정.

ajax__tab_tab

Tab의 텍스트 관련 스타일 지정.

ajax__tab_inner

Tab의 왼쪽 영역 스타일 지정.

ajax__tab_outer

Tab의 오른쪽 모서리 영역 스타일 지정.

ajax__tab_hover

마우스 Over시 스타일 지정.

 

자 그럼 이제 아래 style을 지정한 코드를 보도록 하겠습니다.

 

CSS Code

<style type="text/css">

.ajax__myTab .ajax__tab_header

        {

            font-family: verdana, tahoma, helvetica;

            font-size: 11px;

            border-bottom: solid 1px #999999;

        }

        .ajax__myTab .ajax__tab_outer

        {

            padding-right: 4px;

            height: 21px;

            background-color: #C0C0C0;

            margin-right: 2px;

            border-right: solid 1px #666666;

            border-top: solid 1px #aaaaaa;

        }

        .ajax__myTab .ajax__tab_inner

        {

            padding-left: 3px;

            background-color: #C0C0C0;

        }

        .ajax__myTab .ajax__tab_tab

        {

            height: 13px;

            padding: 4px;

            margin: 0;

        }

        .ajax__myTab .ajax__tab_hover .ajax__tab_outer

        {

            background-color: #cccccc;

        }

        .ajax__myTab .ajax__tab_hover .ajax__tab_inner

        {

            background-color: #cccccc;

        }

       

        .ajax__myTab .ajax__tab_hover .ajax__tab_tab

        {

        }

        .ajax__myTab .ajax__tab_active .ajax__tab_outer

        {

            background-color: #fff;

            border-left: solid 1px #999999;

        }

       

        .ajax__myTab .ajax__tab_active .ajax__tab_inner

        {

            background-color: #fff;

        }

        .ajax__myTab .ajax__tab_active .ajax__tab_tab

        {

        }

        .ajax__myTab .ajax__tab_body

        {

            font-family: verdana, tahoma, helvetica;

            font-size: 10pt;

            border: 1px solid #999999;

            border-top: 0;

            padding: 8px;

            background-color: #ffffff;

        }

    </style>


위에 정리한 표와 함께 보시면 코드 이해하시는데 무난할 거라 생각이 드네요!  이제 Class Name을 지정해 주어야 지요. 역시 말보다는 코드로 보시는게 빠르실 듯 하네요.

HTML Code

<AjaxControl:TabContainer ID="TabContainer1" runat="server" Width="500" Height="170"

            ActiveTabIndex="0" CssClass="ajax__myTab">

            <%-- 연애 뉴스 --%>

            <AjaxControl:TabPanel ID="TabPanel01" runat="server" HeaderText="연애인">

                <ContentTemplate>

                    <div id="content01">

                        '뉴하트' 조재현, 순수하고 정의로운 의사 조금 거칠면 안되나요

                        <br />

                        ... 내용 생략 ...

                </ContentTemplate>

            </AjaxControl:TabPanel>
</AjaxControl:TabContainer>


위 코드에서 보시면 TabContainerCssClass 속성에 "ajax__myTab"이라고 지정해 준것을 보실수 있을 거예요. 정말 사용하기 간단하지요. 아래 그림은 제가 간단하게 만들어본 예제 예요. 소스도 같이 올려 놓을 게요.
사용자 삽입 이미지


Posted by happydong
, |



SliderExtender

Slider Control를 이용한 사용자 편의성을 제공해주는 사이트 종종 봤을 거예요. 제가 가끔 보는 사이트인 조선닷컷은 편의성을 위해 글자의 크기를 조절할 수 있도록 해놨더라고요. (아래 그림 참고)

사용자 삽입 이미지
※ 위 사이트는 조선닷컴 사이트 입니다.

위 에서 빨간색으로 표시된 부분을 보시면 알수 있듯이 Slider Control를 이용해서 글자의 크기를 조절 할수 있게 만들져 있네요. 눈이 별로 좋지 않은 사람,혹은 어른신들을 고려해서 만든 기능이 아닐까 하는 생각이 드는군요^^
저는 ASP.NET AJAX Controls 중에서 SliderExtender Control를 이용해서 위와 같은 형식의 기능을 제공하는 예제를 만들어 볼 것이며, 여러가지 예제를 추가적으로 더 만들어 볼게요.

먼저, SliderExtender Control의 속성이 무엇이 있는지 알아야 겠지요.

속성

설명

Minimum

최소값 설정.

Maximum

최대값 설정

Decimals

소수점 자리 설정.

Steps

지정 숫자의 값 만큼 슬라이더 범위 이동.

Value

현재 슬라이더 지정 위치 값.(TextBox,Label의 Value(Text)속성에서 지정.)

EnableHandleAnimation

슬라이더 움직임 Animation 사용설정.

RailCssClass

슬라이더 레일 CSS Class 설정.

HandleCssClass

슬라이더 손잡이 CSS Class 설정.

HandleImageURL

슬라이더 손잡이 이미지로 표시 URL지정.

Length

수평/수직 슬라이더 너비를 지정.

BoundControlID

슬라이더의 값을 표시 할 TextBox 또는 Label 컨트롤 ID 지정.

RaiseChangeOnlyOnMouseUp

슬라이더에 Change이벤트가 있을 때, MouseUp

이벤트 발생인지, Mousedong Slider때 이벤트발생인지 여부 설정.

TooltipText

마우스가 슬라이더 위에 올라왔을 때 슬라이더의 위치 값을 표시.(img태그 속성 중 alt과 비슷함.)

[사용예] TooltipText=”지정값은:{0}” {0}안에 값이 표시됨.


간단하게 속성을 정리해 봤어요.
이제 조선닷컴과 같은 기능을 하는 예제를 만들어 볼게요. 먼저 아래 그림을 보도록 해요.

사용자 삽입 이미지

어떤가요? 조선닷컴의 기능과 비슷한 것 같은가요? 일단 비슷하다고 치고 어떻게 만들어 졌는지 한번 코드를 보도록 하겠습니다. 아래는 .aspx페이지의 코드 내용입니다.

.aspx페이지

 <body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <br />

    <%-- 데이터 표시를위한 TextBox --%>

    <asp:TextBox runat="server" ID="txtSlider_BoundControl" Visible="false"></asp:TextBox><br />

    <%-- Slider가 될 TextBox --%>

    <div id="divTop" style="width: 100%; height: 20px; background: #FF7E00;">

        <div style="float: right;">

            <asp:TextBox runat="server" ID="txtSlider" onchange="DivStyle();" />

        </div>

    </div>

    <div id="divContent01" style="width: 100%; font-size:10pt; height: 100%; background: #959695;

        padding-top: 0px;">

        -> 예비군 훈련 다녀왔습니다~

        <br />

        -> 두려움이 신속하게 몰려옵니다~ >_<

        <br />

        -> 안녕하세요 java 6개월 학원 수료후 신입으로 ...

        <br />

        -> SQL Server 2008 Business Co...

        <br />

        -> Wii 당첨.. 그러나

        <br />

        -> 저는 자바 개발자 입니다. 닷넷에 발을 들여 놓으...

        <br />

        -> AJAX 채팅을 만들어 봤습니다.

    </div>

    <%-- SliderControl --%>

    <cc1:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="txtSlider"

        BoundControlID="txtSlider_BoundControl"

        Orientation="Horizontal"

        EnableHandleAnimation="true"

        RaiseChangeOnlyOnMouseUp="false"

        TooltipText="슬라이드값{0}"

        Minimum="9"

        Maximum="30"

        />

    </form>

</body>


위 코드에서 유심히 볼 코드는 SliderExtender 컨트롤과 2개의 TextBox 컨트롤 이라고 생각이 되는 군요. SliderExtender 속성 중에서 BoundControlID 속성을 제가 txtSlider_BoundControl(TextBox컨트롤ID)으로 지정해두고 정작 TextBox컨트롤 Visible속성을 false로 지정해서 이상하다 생각 하실수도 있을 텐데요, 그 이유는 코드를 집적 작성하시면서 나중에 true로 바꾸셔서 슬라이드 값이 변경되는 것을 확인하시라고 지정한 거예요! 물론, 값을 볼 필요가 없다고 하시면BoundControlID 속성 지정하지 않아도 되요. 그리고 제가 지정한 속성은 위에 정리한 표를 비교해서 보시면 이해하기가 더 편하실거예요.

그럼 이제 두번째 TextBox컨트롤에 onchange이벤트를 호출하는 스크립트함수를 만들어 볼게요. 두번째 TextBox컨틀롤이 UI에서 슬라이드컨트롤로 변경되니깐 이쪽에 onchange이벤트를 줘야 겠지요.참고로 처음 슬라이드핸들의 위치를 지정하시고 싶으시면 TextBox컨트롤의 Text속성에 지정해 주면되요.
아래 스크립트 함수는 맨아래에 작성해 주세요.(즉, </html> 다음에요)

 Script 함수

 <script type="text/javascript">

   

    function DivStyle()

    {

        var txt = $get('<%= txtSlider.ClientID %>');

document.getElementById("divContent01").style.fontSize = txt.value +"pt";

    }

   

</script>

 
스크립트를 아래쪽에 작성하는 이유는 사이트성능 향상을 위해서 좋고, head안에 넣으면 에러가 나기 때문이예요. 스크립트 안에 인라인수식으로 컨트롤 아이디를 지정하기 때문에 컨트롤이 생성되기 전에 스크립트가 먼저 실행되면 에러가 나겠지요.그래서 Body안 아니면,맨아래 부분에 넣어주는 것이 좋은데...저는 맨아래 부분에 작성해 보았어요.^^

이제 코드를 다 작성했네요. .cs페이지에는 따로 작성할 코드가 없어요.(필요에 따라 작성해서 만드세요) 여기까지 잘 따라서 하셨다면 잘 실행되리라 믿을게요~^^

이런식으로 해서 제가 몇가지 예제를 더 만들어 봤는데요. (아래 그림 참고)

사용자 삽입 이미지

위 예제는 아주 간단하게 만들수 있겠지요. 아까 위에서 스크립트코드에서 객체의 Style을 지정해 주었잖아요. fontSize에서 filter로만 변경해 주고 정확한 표현의 방식의 값이 들어가게 지정만 해주면 되요.



사용자 삽입 이미지


위 예제는 재미있겠지요. 빛의 3원색을 이용한 예제라고 할까요^^;; 빨강, 초록, 파랑 3색이 조합해서 색을 표현하는 예제지요. 이것도 스크립트로 작성해주는 부분이여서 그렇게 크게 어려울게 없을 거예요.

아래는 위 예제들을 합쳐 만든 예제입니다.

사용자 삽입 이미지

이렇게 만든사이트가 있으면 재미있지 않을까?^^
위 예제 소스들를 압축해서 올려 놓을 게요!!그리고 참고로 슬라이드 CSS 설정도 가능합니다. 즉, 슬라이드를 디자인 가능하다는 애기지요. 클릭  <- -여기 참고 하세요
Posted by happydong
, |