#F9F9F9 5개의 스레드 ✕ 해제
이온디
이온디 5년 전
이 글을 쓰고 나서 느낀 교훈 : 오래된 위젯은 버리자! 서버 오류 Error #0 "Call to a member function attributes() on bool" in modules/widget/widget.controller.php on line 278 https://eond.com/home_old 위 페이지에 접근하려니 위와 같은 오류가 발생합니다. 아마도 위젯 문제이지 않을까 하네요. modules/widget/widget.controller.php 278라인 foreach … 이 글을 쓰고 나서 느낀 교훈 : 오래된 위젯은 버리자! 서버 오류 Error #0 "Call to a member function attributes() on bool" in modules/widget/widget.controller.php on line 278 https://eond.com/home_old 위 페이지에 접근하려니 위와 같은 오류가 발생합니다. 아마도 위젯 문제이지 않을까 하네요. modules/widget/widget.controller.php 278라인 foreach ($xml->img ? $xml->img->attributes() : $xml->attributes() as $key => $val) { $vars->{$key} = strval($val); }foreach 문 안에 php 삼항연산자로 된 코드입니다. 삼항연산자는 조건문 ? 이면 실행 : 아니면 실행 이렇게 이해할 수 있습니다. $xml->img 일 경우 $xml->img->attributes() 함수를 실행하고 아닌 경우에는 $xml->attributes()를 실행한다는 뜻인데, 어찌됐던 두 조건 모두 attributes() 함수를 실행하고 있네요. 자, 그럼 attributes()함수란 녀석은 어디에 있는 걸까요? -_-; 먼저 해당 파일을 열어보면 맨 위에 class widgetController 이라고 widgetController 라는 클래스를 담고 있습니다. http://xpressengine.github.io/xe-manual-api/html/classes.html XE 깃헙에 매뉴얼에서 class 페이지입니다. widgetController라고 검색 후 찾아갑니다. 그 다음 transWidget을 찾아봅니다. http://xpressengine.github.io/xe-manual-api/html/classwidgetController.html#ab83211452280836e73df5f7b6acdea82 해당 파일을 열어보면 지금의 라이믹스와는 다르다는 걸 알 수 있네요. http://xpressengine.github.io/xe-manual-api/html/widget_8controller_8php_source.html XE에서는 attributes() 라는 코드가 없었는데, 라이믹스에서는 발견되네요. 흠.. 라이믹스 전체 코드에서 attributes() 라고 검색해봅니다. 찾아봐도 없...습니다.. 그럼 이건 php 자체 함수..가 아닐까 하는 생각이 들더군요. https://www.php.net/manual/en/simplexmlelement.attributes.php http://docs.php.net/manual/kr/simplexmlelement.attributes.php https://php.watch/versions/8.0/attributes https://www.w3schools.com/php/func_simplexml_attributes.asp http://tcpschool.com/php/php_basic_datatype https://www.daniweb.com/programming/web-development/threads/326430/simple-xml-fatal-error-call-to-a-member-function-attributes-on-a-non-object https://www.daniweb.com/programming/web-development/threads/326430/simple-xml-fatal-error-call-to-a-member-function-attributes-on-a-non-object" style="height: 240px;">https://www.daniweb.com/programming/web-development/threads/326430/simple-xml-fatal-error-call-to-a-member-function-attributes-on-a-non-object 구글에 'Call to a member function attributes() on bool' 라고 검색해보았습니다. XE나 라이믹스 관련해서는 답이 안나오지만 일반적으로 많이 뜨는거 같네요.. 답이 안 나오니 그럼 다시 home_old로 돌아가서, 이 페이지에 뭐가 있는지 알아봅시다. phpmyadmin에서 home_old로 검색해봅니다. xe_modules 등에서 보이네요. 그럼 정확하게 이게 뭔지 알아야 하니깐, 관리자 > 사이트맵 > 해당 메뉴 편집 > 상세설정 페이지를 열어봅니다. https://eond.com/index.php?module=admin&act=dispPageAdminInfo&module_srl=907&isLayoutDrop=1주소에서 module_srl=907이라는 것을 확인할 수 있습니다. 그럼 xe_modules 테이블에서 module_srl이 907인 페이지를 열어봅니다. content 컬럼을 보면 아래와 같습니다. <STYLE> a:link { text-decoration: none; color: #424242;} a:visited { text-decoration: none; color: #424242;} a:active { text-decoration: none; color: #424242;} a:hover { text-decoration: underline; color: #0066CC;} </STYLE> <DIV id=contentLeft style="DISPLAY: none">왼쪽입니다.</DIV> <DIV id=contentMain><!--[Start] Google Adsense :: 추천 피카사 --> <DIV style="BORDER-RIGHT: #e6e6e6 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #e6e6e6 1px solid; PADDING-LEFT: 5px; BACKGROUND: #f7f7f7; PADDING-BOTTOM: 5px; BORDER-LEFT: #e6e6e6 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #e6e6e6 1px solid"> <SCRIPT type=text/javascript><!-- google_ad_client = "pub-7200623708996327"; google_ad_output = "textlink"; google_ad_format = "ref_text"; google_cpa_choice = "CAAQ6OSkyAIaCJxVa1sfS2X7KJT5uYsBMAA"; //--> </SCRIPT> <SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript></SCRIPT> </DIV><!--[End] Google Adsense :: 추천 피카사 --><IMG height=119 src="files/attach/images/907/907/main_cover_title_img3.png" width=122 align=left border=0 editor_component="image_link"><IMG height=113 src="files/attach/images/907/907/main_cover_title_txt.png" width=337 align=left border=0 editor_component="image_link"><BR><BR><BR><BR>&nbsp;&nbsp;&nbsp; &nbsp;<IMG height=30 alt="자기관리 블로그" src="files/attach/images/907/907/shortcut_blog.png" width=59 align=right border=0 editor_component="image_link" open_window="Y" link_url="http://blog.eond.com"> <!-- 구글 애드센스(EondMainContentCenterTop/) 시작 --> <DIV class=clearB style="TEXT-ALIGN: center"><!--[Start] Google Adsense :: 추천 파이어폭스 --> <DIV style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"> <SCRIPT type=text/javascript><!-- google_ad_client = "pub-7200623708996327"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as_rimg"; google_cpa_choice = "CAEQz-D7zwEaCLzjbW_klYeNKNe893M"; //--> </SCRIPT> <SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript></SCRIPT> </DIV><!--[End] Google Adsense :: 추천 파이어폭스 --></DIV><!-- 갤러리 및 자유게시판 시작 --> <DIV id=lst_gallery><!-- 갤러리 시작 --> <DIV id=lst_gallery_title> <DIV class=goGallery><IMG height=9 src="files/attach/images/907/907/ico_more_02%5B1%5D.gif" width=32 align=right border=0 editor_component="image_link" link_url="http://eond.com/eond/gallery_main"></DIV></DIV> <DIV id=lst_gallery_content><IMG class=zbxe_widget_output title="" style="CLEAR: both" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" width="100%" module_srl="1" body="" widget="newest_images" widget_sequence="119897" skin="black_underline" colorset="default" widget_cache="0" mid_list="gallery,myphoto,people" title_length="8" thumbnail_width="110" cols_list_count="3" rows_list_count="2" display_author="N" display_regdate="N" display_readed_count="N" display_voted_count="N" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="" widget_width="100" widget_width_type="%" widget_position="" thumbnail_height="null" thumbnail_type="crop"> <!--[Start]Google Adsense :: 가로 링크5 --> <DIV style="HEIGHT: 20px" align=center> <SCRIPT type=text/javascript><!-- google_ad_client = "pub-7200623708996327"; google_ad_width = 468; google_ad_height = 15; google_ad_format = "468x15_0ads_al_s"; //2007-09-18: Eond, EondMainContentCenterTop google_ad_channel = "9211275113"; google_color_border = "858585"; google_color_bg = "858585"; google_color_link = "4C4C4C"; google_color_text = "AAAAAA"; google_color_url = "999999"; //--> </SCRIPT> <SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript> </SCRIPT> </DIV><!--[End]Google Adsense :: 가로 링크5 --></DIV><!-- 갤러리 끝--><!-- 전체최근포스트 및 회원출력부분 시작--> <DIV id=member_output><!-- 자유게시판 시작 --> <DIV id=lst_article><IMG class=zbxe_widget_output title="최근 포스트" style="FLOAT: left; WIDTH: 100%" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="1" body="" widget="newest_document" widget_sequence="119899" skin="eond_blu_webzine" colorset="normal" widget_cache="0" mid_list="ani,banner,bbs,book,cf,coding,mov,music,poem,tip,zbxe" widget_margin_top="" widget_margin_left="" widget_margin_right="5" widget_margin_bottom="" widget_fix_width="Y" widget_width="100" widget_width_type="%" widget_position="left" subject_cut_size="" list_count="12" order_type="desc" order_target="list_order" duration_new="null"> </DIV><!-- 자유게시판 끝 --><!-- 현재로그인회원 시작 --> <DIV id=login_member><IMG class=zbxe_widget_output title="" style="FLOAT: right; WIDTH: 100%" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="1" body="" widget="login_member" widget_sequence="119902" skin="default" colorset="normal" widget_cache="5" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="100" widget_width_type="%" widget_position="right" list_count="5" expire_time="10"> </DIV><!-- 현재로그인회원 끝 --><!-- 최근가입한회원 시작 --> <DIV id=join_member><IMG class=zbxe_widget_output title="최근 가입한 회원" style="FLOAT: right; WIDTH: 100%" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="1" body="" widget="member_group" widget_sequence="119913" skin="default" colorset="normal" widget_cache="0" widget_margin_top="" widget_margin_left="0" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="100" widget_width_type="%" widget_position="right" list_count="5" target_group="준회원"> </DIV><!-- 최근가입한회원 끝 --></DIV><!-- 회원출력 끝 --></DIV><!-- 갤러리 및 자유게시판 끝 --><!-- 태그 클라우드 시작 --><!--[Start] Google Adsense :: 468*60 Bn--> <DIV align=center> <SCRIPT type=text/javascript><!-- google_ad_client = "pub-7200623708996327"; //EondMainBnCenterTop,468x60 (071114) google_ad_slot = "9464842419"; google_ad_width = 468; google_ad_height = 60; //--> </SCRIPT> <SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript></SCRIPT> </DIV><!--[End] Google Adsense :: 468*60 Bn--> <DIV class=rct_title><IMG style="BORDER-BOTTOM: rgb(0,0,0) 5px solid" height=25 src="http://eond.com/eond/files/attach/images/907/907/tagcolud.png" width=70 editor_component="image_link"></DIV> <DIV id=tagcloud_content><IMG class=zbxe_widget_output title="" style="CLEAR: both" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" width="100%" module_srl="1" body="" widget="tag_list" widget_sequence="119906" skin="cozy_simple" colorset="cyworld" widget_cache="0" mid_list="2u,adsense,ani,attach,banner,bbs,blog,book,build,cf,cgi,chat,coding,favimg,feedback,flow,font,friends,gallery,gallery_main,google,google_content,handwriting,hangeul,hanja,harmonica,home,html,link,login_ktf_autumn,me,member,mom,monologue,mov,music,music_xml,mwz,mybox,myphoto,naie,nalog,nick,nie,notice,pds,people,photogallery,phpinfo,poem,qna,realphoto,rp_gallery,rp_gallery_old,rp_link,rp_member,scrap,scw,scw2,service,sig,siteinfo,source,style,test,theme,tip,todaycomment,todo,webstudy,zb4,zbxe,zcount,zeroboard,zerocounter,zero_one" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="" widget_width="100" widget_width_type="%" widget_position="" list_count="26"></DIV><!-- 태그 클라우드 끝--><!-- 전체최근댓글 시작--> <DIV class=rct_title><IMG height=24 src="./files/attach/images/907/907/trc.png" width=156 border=0 editor_component="image_link"></DIV> <DIV id=trc_content><IMG class=zbxe_widget_output title="" style="FLOAT: left" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="1" body="" widget="newest_comment" widget_sequence="119909" skin="c2comment" colorset="normal" widget_cache="0" mid_list="ani,attach,banner,bbs,blog,book,build,cgi,chat,coding,favimg,flow,font,gallery,gallery_main,handwriting,hangeul,hanja,harmonica,home,link,me,member,mom,monologue,mov,music,mybox,myphoto,nalog,nick,notice,people,photogallery,phpinfo,poem,realphoto,rp_gallery,rp_gallery_old,rp_link,rp_member,scrap,scw,service,sig,siteinfo,source,style,test,theme,tip,todaycomment,todo,webstudy,zbxe,zeroboard,zerocounter,zero_one" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="100%" widget_width_type="%" widget_position="" list_count="15"></DIV><!-- 전체 최근댓글 끝--><BR><!-- 게시판 전체 시작 --> <DIV id=menu_lst> <UL class=menu_lst_category>Home <LI>공지사항 <LI>작업현황 <LI>자유게시판 <LI>전광판 <LI>MyTalk <LI>링크 <LI>사이트테마 <LI>phpinfo <LI>트래픽관리 <LI>계정사용현황 <LI>n@log <LI>제로카운터 <LI>회원목록 <LI>n@imageExplorer2 <LI>ImageScanner <LI>웹디렉토리 <LI>구글애드센스</LI></UL> <UL class=menu_lst_category>Gallery <LI>사진전시방 <LI>사람들사진 <LI>개인사진방 <LI>마이스타일 <LI>개인취향 <LI>포토갤러리 <LI>엄마그림 <LI>와촌터널 소방훈련</LI></UL> <UL class=menu_lst_category>WebStudy <LI>코딩활용 <LI>디자인소스 <LI>팁일반 <LI>글꼴소개 <LI>제로보드관련 <LI>cgi프로그램 <LI>제로원프로젝트</LI></UL> <UL class=menu_lst_category>Service <LI>음악 <LI>시 <LI>동영상 <LI>우리말산책 <LI>배너수집 <LI>하모니카 <LI>손글씨 <LI>한자익히기 <LI>오늘의한마디</LI></UL> <UL class=menu_lst_category>MyBox <LI>ToDoList <LI>모놀로그 <LI>About ME <LI>To.You <LI>Scrap <LI>대화기록 <LI>대화명 <LI>Signature</LI></UL></DIV><!-- 게시판 전체목록 끝--></DIV><!-- 전체메뉴 하단 시작 --> <DIV id=menu_lst_foot><!-- 구글 애드센스 시작 --><!-- 구글 애드센스 끝 --></DIV><!-- 전체메뉴 하단 끝--><!-- 컨텐트 메인 끝--><!--컨텐트 우측 시작--> <DIV id=contentRight><!-- 리얼포토 배너 --> <DIV id=leftContentBanner><A href="http://cafe.daum.net/realphoto" target=_blank><IMG height=71 src="files/attach/images/8751/49057/realphoto.jpg" width=200></A></DIV><!-- 구글 애드센스(이온디메인컨텐트라이트탑) 시작 --> <SCRIPT type=text/javascript><!-- google_ad_client = "pub-7200623708996327"; google_ad_width = 200; google_ad_height = 200; google_ad_format = "200x200_as"; google_ad_type = "text_image"; //2007-10-17: Eond, EondMainContentRightTop google_ad_channel = "2111854510+6739728667"; google_color_border = "f8f8f8"; google_color_bg = "f8f8f8"; google_color_link = "0000FF"; google_color_text = "000000"; google_color_url = "008000"; google_ui_features = "rc:6"; //--> </SCRIPT> <SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript> </SCRIPT> <!-- 구글 애드센스(이온디메인컨텐트라이트탑) 끝 --><!-- 네이버 검색순위 --> <DIV ids="naver_rank"><IMG class=zbxe_widget_output title=네이버검색순위 style="FLOAT: left; WIDTH: 200px" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="1" body="" widget="rank_nexearch" widget_sequence="118725" skin="sz_xe" colorset="Box_001" widget_cache="0" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="200" widget_width_type="px" widget_position="" query="nexearch"></DIV><!-- 스타일 최근이미지 --><IMG class=zbxe_widget_output title=Style style="FLOAT: left; WIDTH: 200px" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="907" body="" widget="newest_images" widget_sequence="108278" skin="black_underline" colorset="default" widget_cache="0" mid_list="style" title_length="10" thumbnail_width="80" cols_list_count="2" rows_list_count="1" display_author="N" display_regdate="N" display_readed_count="N" display_voted_count="N" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="200" widget_width_type="px" widget_position=""><!-- 배너시작 --> <DIV id=banner> <UL> <LI><IMG src="http://eond.com/attachment/bns/my/eond_bn_90by30_2.gif" border=NaN editor_component="image_link" link_url="#"> <LI><IMG src="http://eond.com/attachment/bns/clip/miniwini.gif" border=NaN editor_component="image_link" open_window="Y" link_url="http://miniwini.com"> <LI><IMG src="http://eond.com/attachment/bns/clip/ngine_banner_03.gif" border=NaN editor_component="image_link" open_window="Y" link_url="http://2day.pe.kr"> <LI><IMG src="http://eond.com/attachment/bns/clip/monolife.gif" border=NaN editor_component="image_link" open_window="Y" link_url="http://mono302.com"> <LI><IMG src="http://eond.com/attachment/bns/clip/zizin.gif" border=NaN editor_component="image_link" open_window="Y" link_url="http://zizin.byus.net"> <LI><IMG src="http://eond.com/attachment/bns/clip/in2design.gif" border=NaN editor_component="image_link" open_window="Y" link_url="http://83rpm.com"></LI></UL></DIV><!-- 배너 끝 --><!--이미지카운터시작--><IMG class=zbxe_widget_output style="FLOAT: left; WIDTH: 200px" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="907" body="" widget="image_counter" widget_sequence="110300" widget_cache="5" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="200" widget_width_type="px" widget_position="" point_color="#ed3027" unique_text_color="#666666" unique_line_color="#BBBBBB" grid_color="#9d9d9d" check_bg_color="#F9F9F9" bg_color="#FFFFFF" day_range="14" graph_height="125px" graph_width="200px"><!--이미지카운터끝--> <!--구글 링크 시작--> <DIV id=ad_google_adsense_link> <SCRIPT type=text/javascript><!-- google_ad_client = "pub-7200623708996327"; google_ad_width = 200; google_ad_height = 90; google_ad_format = "200x90_0ads_al"; //2007-09-10: eond google_ad_channel = "9211275113"; google_color_border = "2e2e2e"; google_color_bg = "f8f8f8"; google_color_link = "666666"; google_color_text = "808080"; google_color_url = "424242"; //--> </SCRIPT> <SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript> </SCRIPT> </DIV><!-- 구글 링크 끝 --><!-- 외부링크 시작 --> <DIV id=eond_manage_tool_link> <UL>이온디 관리도구 링크 <LI><A href="http://eond.com/naie" target=_blank>n@imageExplorer2</A> <LI><A href="http://eond.com/dir" target=_blank>WebDirectory</A> <LI><A href="http://immf.eond.com/index2.php" target=_blank>ImageScanner</A> <LI><A href="https://www.google.com/adsense/login/ko/?destination=%2Fadsense%2Fhome" target=_blank>GoogleAdsense</A> <!-- <li><a href="http://eond.com/cgi/phpmyadmin" target="_blank">phpMyAdmin</a></li> --></LI></UL></DIV><!--@end--><!-- 외부링크 끝 --><!-- 네이버 날씨 시작 --> <DIV style="CLEAR: both"></DIV><!-- 네이버 날씨 끝 --></DIV><!--컨텐트우측끝--> XE의 위젯은 <img class=zbxe_widget_output 코드로 시작하니, 해당 코드를 살펴보면, 9개 정도 확인 가능하네요. 1) newest_images 위젯 <IMG class=zbxe_widget_output title="" style="CLEAR: both" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" width="100%" module_srl="1" body="" widget="newest_images" widget_sequence="119897" skin="black_underline" colorset="default" widget_cache="0" mid_list="gallery,myphoto,people" title_length="8" thumbnail_width="110" cols_list_count="3" rows_list_count="2" display_author="N" display_regdate="N" display_readed_count="N" display_voted_count="N" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="" widget_width="100" widget_width_type="%" widget_position="" thumbnail_height="null" thumbnail_type="crop">2) newest_document 위젯 <IMG class=zbxe_widget_output title="최근 포스트" style="FLOAT: left; WIDTH: 100%" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="1" body="" widget="newest_document" widget_sequence="119899" skin="eond_blu_webzine" colorset="normal" widget_cache="0" mid_list="ani,banner,bbs,book,cf,coding,mov,music,poem,tip,zbxe" widget_margin_top="" widget_margin_left="" widget_margin_right="5" widget_margin_bottom="" widget_fix_width="Y" widget_width="100" widget_width_type="%" widget_position="left" subject_cut_size="" list_count="12" order_type="desc" order_target="list_order" duration_new="null">3) login_member 위젯 <IMG class=zbxe_widget_output title="" style="FLOAT: right; WIDTH: 100%" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="1" body="" widget="login_member" widget_sequence="119902" skin="default" colorset="normal" widget_cache="5" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="100" widget_width_type="%" widget_position="right" list_count="5" expire_time="10">4) member_group 위젯 <IMG class=zbxe_widget_output title="최근 가입한 회원" style="FLOAT: right; WIDTH: 100%" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="1" body="" widget="member_group" widget_sequence="119913" skin="default" colorset="normal" widget_cache="0" widget_margin_top="" widget_margin_left="0" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="100" widget_width_type="%" widget_position="right" list_count="5" target_group="준회원">5) tag_list 위젯 <IMG class=zbxe_widget_output title="" style="CLEAR: both" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" width="100%" module_srl="1" body="" widget="tag_list" widget_sequence="119906" skin="cozy_simple" colorset="cyworld" widget_cache="0" mid_list="2u,adsense,ani,attach,banner,bbs,blog,book,build,cf,cgi,chat,coding,favimg,feedback,flow,font,friends,gallery,gallery_main,google,google_content,handwriting,hangeul,hanja,harmonica,home,html,link,login_ktf_autumn,me,member,mom,monologue,mov,music,music_xml,mwz,mybox,myphoto,naie,nalog,nick,nie,notice,pds,people,photogallery,phpinfo,poem,qna,realphoto,rp_gallery,rp_gallery_old,rp_link,rp_member,scrap,scw,scw2,service,sig,siteinfo,source,style,test,theme,tip,todaycomment,todo,webstudy,zb4,zbxe,zcount,zeroboard,zerocounter,zero_one" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="" widget_width="100" widget_width_type="%" widget_position="" list_count="26">6) newest_comment 위젯 <IMG class=zbxe_widget_output title="" style="FLOAT: left" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="1" body="" widget="newest_comment" widget_sequence="119909" skin="c2comment" colorset="normal" widget_cache="0" mid_list="ani,attach,banner,bbs,blog,book,build,cgi,chat,coding,favimg,flow,font,gallery,gallery_main,handwriting,hangeul,hanja,harmonica,home,link,me,member,mom,monologue,mov,music,mybox,myphoto,nalog,nick,notice,people,photogallery,phpinfo,poem,realphoto,rp_gallery,rp_gallery_old,rp_link,rp_member,scrap,scw,service,sig,siteinfo,source,style,test,theme,tip,todaycomment,todo,webstudy,zbxe,zeroboard,zerocounter,zero_one" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="100%" widget_width_type="%" widget_position="" list_count="15">7) rank_nexearch 위젯 <IMG class=zbxe_widget_output title=네이버검색순위 style="FLOAT: left; WIDTH: 200px" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="1" body="" widget="rank_nexearch" widget_sequence="118725" skin="sz_xe" colorset="Box_001" widget_cache="0" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="200" widget_width_type="px" widget_position="" query="nexearch"></DIV><!-- 스타일 최근이미지 --><IMG class=zbxe_widget_output title=Style style="FLOAT: left; WIDTH: 200px" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="907" body="" widget="newest_images" widget_sequence="108278" skin="black_underline" colorset="default" widget_cache="0" mid_list="style" title_length="10" thumbnail_width="80" cols_list_count="2" rows_list_count="1" display_author="N" display_regdate="N" display_readed_count="N" display_voted_count="N" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="200" widget_width_type="px" widget_position="">8) newest_images 위젯 <IMG class=zbxe_widget_output title=Style style="FLOAT: left; WIDTH: 200px" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="907" body="" widget="newest_images" widget_sequence="108278" skin="black_underline" colorset="default" widget_cache="0" mid_list="style" title_length="10" thumbnail_width="80" cols_list_count="2" rows_list_count="1" display_author="N" display_regdate="N" display_readed_count="N" display_voted_count="N" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="200" widget_width_type="px" widget_position="">9) image_counter 위젯 <IMG class=zbxe_widget_output style="FLOAT: left; WIDTH: 200px" height=100 src="http://eond.com/eond/common/tpl/images/widget_bg.jpg" module_srl="907" body="" widget="image_counter" widget_sequence="110300" widget_cache="5" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="200" widget_width_type="px" widget_position="" point_color="#ed3027" unique_text_color="#666666" unique_line_color="#BBBBBB" grid_color="#9d9d9d" check_bg_color="#F9F9F9" bg_color="#FFFFFF" day_range="14" graph_height="125px" graph_width="200px">처음으로 돌아가서, Call to a member function attributes() on bool 이라는 오류니깐 아마도 회원 관련한 위젯이 아닐까 싶네요. -_-; 자 이제, 현타가 왔습니다. 내가 왜 이걸 하고 있나. 해당 페이지는 쓰고 있지도 않은데... 패스...하겠습니다. ㅠㅠ 밤새 이러고 있었다니.. phpmyadmin > xe_module > module_srl = 907 에서 content를 위 위젯 중 하나를 넣어봅니다. 그리고 xe 관리자에서 캐시 재생성을 눌러주고 home_old 페이지를 열어봅니다. newest_images 위젯을 넣어봤는데 해당 오류가 그대로 뜨네요. 그럼 widgets/newest_images 위젯 코드를 확인해봐야합니다. 그런데 해당 위젯 자체가 존재하지 않았습니다. 그럼 두번째 newest_document 위젯을 열어봅니다. 스킨은 eond_blu_webzine인데 이번엔 스킨 폴더가 존재하지 않았습니다. -_-;; default로 수정하고 캐시 재생성 후 페이지를 열어봐도 해당 페이지 오류는 그대로였습니다. 세번째 위젯을 넣고 확인해봅니다. 동일합니다. (확인해보니 해당 위젯 폴더 자체가 없었군요.;;) 자, 이쯤되면 그냥 기본 위젯을 하나 아무렇게나 생성해봅니다. <img class="zbxe_widget_output" widget="content" skin="default" colorset="white" widget_cache="0m" content_type="document" list_type="normal" tab_type="none" markup_type="table" page_count="1" option_view="title,regdate,nickname" show_browser_title="Y" show_comment_count="Y" show_trackback_count="Y" show_category="Y" show_icon="Y" show_secret="N" order_target="regdate" order_type="desc" thumbnail_type="crop" />xe관리자 > 위젯 > 컨텐츠 위젯 생성 자 여기서도 안되면 접겠습니다. -_-;; 잘 뜨네요.. 예전 위젯 자체에 무슨 문제가 있나보네요. 여기서 느낀 점. 예전 코드는 버려야한다... 네번째 위젯 코드도 넣고 테스트해봤습니다. 동일합니다.;; 그냥 <img class=zbxe_widget_out을 [img class_zbxe_widget_out 으로 고쳐놓고 여기까지 삽질 끝! 삼항연산자 설명글 https://recoveryman.tistory.com/228
이온디
이온디 10년 전
기존의 상용 차트 라이브러리와 오픈소스 차트 라이브러리는 다양한 종류의 차트를 구현할 수 있지만 데이터를 시각적으로 표현하는 데만 중점을 둡니다. 그렇기 때문에 스크린 리더 등의 보조 기기로 차트에 접근하면 스크린 리더가 차트 자체를 이미지로 판단해 전달하려는 실질적인 데이터는 읽을 수 없습니다. 네이버에서 차트 라이브러리를 개발하게 된 계기는 네이버 사이트의 접근성 현황을 효율적으로 표현할 방법이 필요했기 때문입니다. 지침별 수준을 수치화하는 폴리곤 모양의 레이더 차트가 필요하다고 판단하… 기존의 상용 차트 라이브러리와 오픈소스 차트 라이브러리는 다양한 종류의 차트를 구현할 수 있지만 데이터를 시각적으로 표현하는 데만 중점을 둡니다. 그렇기 때문에 스크린 리더 등의 보조 기기로 차트에 접근하면 스크린 리더가 차트 자체를 이미지로 판단해 전달하려는 실질적인 데이터는 읽을 수 없습니다. 네이버에서 차트 라이브러리를 개발하게 된 계기는 네이버 사이트의 접근성 현황을 효율적으로 표현할 방법이 필요했기 때문입니다. 지침별 수준을 수치화하는 폴리곤 모양의 레이더 차트가 필요하다고 판단하여 오픈소스 기반의 차트를 사용하려 했습니다. 그러나 원하는 정보를 표현할 수 있는 차트를 제공하는 라이브러리를 찾지 못해 내부에서 직접 차트 라이브러리를 개발하기로 결정했습니다. 개발 초기에는 폴리곤 형태를 표현할 수 있는 레이더 차트의 개발만 염두에 두었습니다. 이후 다른 형태의 정보를 효율적으로 표현할 수 있는 Polar Pie 차트, 비교 차트 등 기존의 라이브러리에서 찾아볼 수 없는 여러 형태의 차트를 추가해 종합 차트 라이브러리인 Nwagon(http://html.nhncorp.com/nwagon) 을 개발했습니다. 그리고 여러 곳에 널리 사용되기를 바라는 마음으로 Nwagon을 NULI 사이트(http://html.nhncorp.com) 에 오픈소스로 공개했습니다. 'Nwagon'이라는 이름은 접근성을 뜻하는 'web accessibility'와 라이브러리 개발의 계기가 된 'polygon'의 'gon'을 조합해 만든 이름입니다. 이름이 뜻하는 대로 추가 작업이 없어도 차트를 볼 수 없는 사용자들에게 동일한 정보를 제공할 수 있도록 접근성을 향상시킨 차트 라이브러리입니다. 이 글에서는 Nwagon의 특징과 간단한 사용 방법을 소개하겠습니다. Nwagon의 특징 접근성 데이터 포함 Nwagon이 기존의 차트 라이브러리와 다른 점 중에 가장 눈에 띄는 점은 자동으로 삽입되는 접근성 데이터일 것이다. 기존의 차트 라이브러리를 사용하면 사용자에게 전달되어야 하는 정보가 차트라는 시각적인 요소로 웹에 표현된다. 이 차트에 스크린 리더와 같은 보조 기기로 접근하면 차트가 단순한 이미지로만 판단되어 정보 전달이 이루어지지 않게 된다. 기존 라이브러리로 차트를 구현하면 접근성을 보장하기 위해 추가적인 작업이 필요하다. Nwagon을 사용하면 차트를 구현하는 동시에, 제공된 정보가 보조 기기를 통해서도 전달될 수 있도록 텍스트 형태의 정보를 자동으로 삽입한다. 삽입된 정보는 화면에서는 보이지 않게 처리하여 디자인 구성을 방해하지 않는다. 다음 그림은 Nwagon이 제공하는 텍스트 형태의 정보를 Chrome의 개발자 도구로 펼쳐 본 모습이다. 그림 1 접근성을 위해 자동으로 삽입되는 텍스트 형태의 정보 새로운 형태의 차트 구현 Nwagon으로 구현할 수 있는 차트의 종류는 약 11가지 정도다. 이 중에서 라인 차트나 칼럼 차트는 비교적 구현이 쉽고 구현 방법이 보편화되어 있어 다른 여러 라이브러리도 많이 제공한다. Nwagon을 개발할 때는 이러한 일반적인 차트에서 벗어나 복잡한 데이터를 좀 더 효율적으로 표현하는 방법을 찾기 위해 노력했다. 그렇게 해서 개발된 대표적인 차트로 Polar Area 차트와 Polar Pie 차트, 비교 차트 등을 꼽을 수 있다. Polar Area 차트 Polar Area 차트는 우리가 알고 있는 파이 차트와 흡사하다. 파이 차트에서는 나눠진 부채꼴의 반지름은 모두 같고 나타내려는 값으로 부채꼴의 각도를 결정한다. 반면에 Polar Area 차트에서는 표현하려는 항목의 수에 따라 일률적으로 부채꼴의 각도가 정해지고, 나타내려는 값은 부채꼴의 반지름으로 표현된다. 또한 하나의 원을 원하는 개수만큼 나누어 표현할 수도 있다. 채색된 영역의 투명도도 설정할 수 있다. Polar Area 차트는 주기적으로 일어나는 일을 기록하는 데 유용하게 쓰일 수 있다. 다음은 온도가 낮을수록 투명도가 높아지는 차트를 구현하는 코드의 예다. 예제 1 Polar Area 차트를 구현하기 위해 쓰인 코드 'dataset': { title: 'Average monthly temp', values:[[42, 55, 66], [75, 88, 97],[77,65,45], [30, 15, 25]], colorset: ['#3EB400', '#DC143C', '#2BC8C9', '#666666'], fields: ['Sping', 'Summer', 'Fall', ;Winter'], opacity:[0.3, 0.5, 0.7, 0.9] }, 위의 코드로 구현한 Polar Area 차트는 다음과 같다. 그림 2 Polar Area 차트 Polar Pie 차트 Polar Pie 차트는 Polar Area 차트를 변형한 차트다. Polar Area 차트에서는 부채꼴의 각도가 항목의 개수에 의해 결정된다. 하지만 Polar Pie 차트에서는 부채꼴의 각도가 데이터 값을 결정하는데 사용된 하위 항목의 개수에 따라 결정된다. 예를 들어, 분당구에 있는 종합 병원의 환자별 평균 진료비와 집계에 포함된 환자의 수를 동시에 표현할 때 Polar Pie 차트가 유용하게 쓰일 수 있다. 표 1 Polar Pie 차트의 데이터 예제 병원 환자의 수 평균 진료비(단위: 천 원) A 510 32 B 180 78 C 310 42 Nwagon으로 구현한 다음 차트에서 위 표에 있는 평균 진료비는 부채꼴의 반지름에 반영되어 있다. 집계에 참여한 환자의 수는 부채꼴의 각도를 결정하는데 사용되었다. 그림 3 Polar Pie 차트 Polar Pie 차트는 네이버 서비스의 접근성 현황을 집계해 보여 주는 사내 시스템인 N-WARS(NAVER Web Accessibility Reporting System)에서 본부별 접근성 현황과 평균을 집계하는 데 쓰인 본부별 표본 페이지의 개수를 동시에 보여 줄 때 실제로 사용된다. 비교 차트 비교 차트는 개발 업무에 종종 쓰이는 이슈 트래킹 시스템인 JIRA에서 착안하여 개발한 차트다. 일반적으로 사용하는 영역 차트(area chart)와 유사하지만 분명하게 다른 점이 있다. 영역 차트에서는 데이터 세트를 여러 개 사용해도 무방하지만, 비교 차트에서는 데이터 세트를 두 개만 사용해야 한다. 비교 차트는 두 개의 데이터를 비교해 그 차이를 극명하게 보여 주는 것이 목적이기 때문이다. 비교 차트는 다음 그림처럼 경쟁사와 판매 수익의 차이를 표현하는 데 효율적으로 사용될 수 있다. 그림 4 테이터의 차이를 색으로 표현하여 우열 관계를 표시하는 비교 차트 레이더 차트 강화 부분 비활성화 레이더 차트에 보편적으로 쓰는 데이터에는 한 개 이상의 영역에 '해당 없음(N/A)' 값이 입력될 수 있다. 기존 차트 라이브러리는 '0'인 값과 '해당 없음' 값을 표현할 때 차이가 없다. 이를 구별해서 보이려면 이미지를 추가로 겹치는 등 별도의 작업이 필요하다. 이러면 마크업 작업에도 어려움이 있고, 이미지에 가려진 차트 부분이 제 기능(예를 들어, 마우스 이벤트나 클릭 이벤트에 반응하기)을 할 수 없어 또 다른 문제가 일어날 수도 있다. 이 문제를 해결하기 위해 '해당 없음'이나 'N/A'로 표기된 영역을 라이브러리가 자동으로 처리하게 했다. '0'인 값과 구별함은 물론 차트에 적용된 이벤트 등의 사용에도 문제가 없게 됐다. 그림 5 Epilepsy Prevent 영역이 비활성화 된 레이더 차트 겹쳐 보이기 기능 레이더 차트를 사용할 때 여러 개의 데이터 세트를 한 배경 위에 겹쳐 그려 목표에 어느 정도 도달했는지 측정하는 경우가 있다. 기존 차트 라이브러리에서는 그리는 폴리곤의 수만큼 배경이 그려지기 때문에 뜻하지 않게 중복되는 배경이 생겨 배경이 흐리게 보일 수 있고, 불필요한 요소를 렌더링하기 때문에 배경의 수가 많을수록 성능도 저하된다. Nwagon은 JSON 데이터에 값을 추가하는 간단한 방법으로 이 문제를 해결한다. 다음 예처럼 두 세트 이상의 데이터가 있으면 하나의 배경에 겹쳐서 그리기를 자동으로 실행한다. 아래는 데이터 세트를 추가한 코드의 예다. 예제 2 겹침 기능을 위해 추가된 데이터 세트의 예 'dataset': { title: 'Web accessibility status', values:[[74, 93, 67, 23, 78, 45, 69, 98], [65, 84, 67, 85,89, 67, 95, 67], [89, 87, 95, 65, 34, 67, 85, 45]], bgColor: '#F9F9F9', fgVolor: '#DC143C' }, 다음은 위의 데이터를 이용해 Nwagon으로 구현한 레이더 차트다. 그림 6 데이터가 겹쳐진 레이더 차트 SVG 기반으로 빠르고 선명한 그래프 생성 Nwagon은 빠른 렌더링과 고화질을 강점으로 꼽는 SVG(scalable vector graphics)를 기반으로 개발되었다. SVG는 또한 객체 하나하나를 DOM 요소로 간주하여 CSS 속성과 이벤트를 DOM 요소와 동일하게 적용할 수 있다. 다음 그림은 jQuery 사용자들 사이에서 많이 쓰이는, Canvas 기반의 jqPlot 라이브러리로 구현한 파이 차트와 SVG 기반의 Nwagon으로 구현한 파이 차트를 비교한 그림이다. 원과 구분선이 Canvas를 기반으로 한 그래프보다 선명한 것을 확인할 수 있다. 그림 7 Canvas 기반의 차트(왼쪽)와 SVG 기반의 차트(오른쪽) 사용 방법 소스코드 다운로드 Nwagon 사용 방법은 다른 라이브러리의 사용 방법과 비슷하다. Nwagon 페이지(http://html.nhncorp.com/nwagon) 에서 소스코드를 다운로드한 다음 차트를 구현할 페이지에 CSS 파일과 JS 파일을 포함시킨다. <link rel="stylesheet" href="Nwagon.css" type="text/css"> <script src="Nwagon.js"></script> JSON 문법 차트를 구현하기 전에 준비해야 할 것은 JSON 형태의 데이터다. 차트의 종류에 따라 차이가 있으나 기본 형식은 다음과 같다. 차트 종류별로 더 자세한 사용 방법은 Nwagon 페이지를 참고한다. 표 2 레이터 차트를 위한 JSON 데이터 형식 키 이름 값의 형식 설명 legend JSON 객체 차트 항목의 이름과 링크 정보 names 문자열 차트 항목의 이름 hrefs 배열 항목에 링크할 URL로 이루어진 배열(선택) dataset JSON 객체 차트의 기본 정보와 차트에 표시할 값 title 문자열 차트의 제목 values 배열 차트 항목의 값으로 이루어진 배열 bgColor 문자열 차트의 배경색(예: #f9f9f9) fgColor 문자열 차트 항목의 값을 연결해 생성된 폴리곤의 색깔(예: #30a1ce) chartDiv 문자열 차트를 그릴 DIV 요소의 ID chartType 문자열 차트 종류 chartSize JSON 객체 차트의 크기 정보 width 숫자 차트의 너비(단위: 픽셀) height 숫자 차트의 높이(단위: 픽셀) 다음은 JSON으로 데이터를 생성해 레이더 차트를 구현하는 예제 코드다. 예제 3 레이더 차트를 위한 JSON 데이터 예제 <div id="Nwagon"></div> <script> var options = { 'legend':{ names: [ 'Perceivable', 'Information Loss', 'Understandable', 'Enough Time', 'Epilepsy Prevent', 'Operable', 'Navigation', 'Error Prevent' ], hrefs: [ 'http://nuli.nhncorp.com/accessibility#k1', 'http://nuli.nhncorp.com/accessibility#k2', 'http://nuli.nhncorp.com/accessibility#k3', 'http://nuli.nhncorp.com/accessibility#k4', 'http://nuli.nhncorp.com/accessibility#k5', 'http://nuli.nhncorp.com/accessibility#k6', 'http://nuli.nhncorp.com/accessibility#k7', 'http://nuli.nhncorp.com/accessibility#k8' ] }, 'dataset': { title: 'Web accessibility status', values: [[34,53,67,23,78,45,69,98]], bgColor: '#f9f9f9', fgColor: '#30a1ce', }, 'chartDiv': 'Nwagon', 'chartType': 'radar', 'chartSize': { width: 500, height: 300 } }; Nwagon.chart(options); </script> 위의 코드로 구현한 레이더 차트는 다음과 같다. 그림 8 레이더 차트 마치며 웹 페이지에서 제공하는 정보의 형태가 일반 텍스트를 넘어서 그래프, 이미지, 동영상, 애니메이션 등 점점 더 다양해지고 있다. 한편으로는 정보의 종류가 다양해지고 풍부해짐을 의미하지만, 접근성 측면에서 생각하면 그만큼 다양한 혜택에서 소외당하는 사용자가 생겨날 수 있음을 의미하기도 한다. 접근성 데이터를 고려한 차트를 개발하게 된 계기도 정보를 어떤 형태로 제공하든지 모든 사용자에게 동일한 정보를 제공해야 한다는 웹의 근본이념을 고려했으면 하는 바람에서였다. 필요하면 그때 가서 처리하면 되겠지 하는 생각을 버리고 시작부터 접근성을 염두에 둔다면 시간과 노력을 줄일 수 있을 뿐 아니라 사용자의 만족도 또한 높아질 것이다. Nwagon 개발 초기에는 네이버의 사내 시스템에서 사용할 작은 라이브러리를 만드는 것이 목표였는데 이런저런 아이디어를 담다 보니 독창적이고 신선한 그래프들이 탄생했다. 오픈소스로 공개되는 만큼 많은 사용자의 의견을 받아 완성도를 높이는 작업을 지속적으로 시행할 예정이다. 새로운 차트 종류에 대한 아이디어도 같이 공유했으면 하는 바람이다.
이온디
이온디 11년 전
#F2F2F2 apple.com 의 백그라운드 컬러 #FAFAFA 일부 영역 #F4F5F6 네이버 밴드의 백그라운드 컬러 #F9F9F9 이온디 온 레이아웃의 백그라운드 컬러 이온디 온의 경우 최대한 흰색을 유지하면서 화이트톤 백그라운드를 유지하고 있다. 애플의 경우는 실버, 그레이 느낌의 백그라운드 톤이다. 애플은 외국 회사 느낌이 나는 차가운 흰색인데 네이버 밴드는 국내사라 그런지 따뜻한 느낌의… #F2F2F2 apple.com 의 백그라운드 컬러 #FAFAFA 일부 영역 #F4F5F6 네이버 밴드의 백그라운드 컬러 #F9F9F9 이온디 온 레이아웃의 백그라운드 컬러 이온디 온의 경우 최대한 흰색을 유지하면서 화이트톤 백그라운드를 유지하고 있다. 애플의 경우는 실버, 그레이 느낌의 백그라운드 톤이다. 애플은 외국 회사 느낌이 나는 차가운 흰색인데 네이버 밴드는 국내사라 그런지 따뜻한 느낌의 흰색을 백그라운드로 사용하였다. #FAFAFA #F2F2F2 #F9F9F9 F4F5F6 이렇게 놓고 비교해보면 일단 네이버의 배경이 따뜻하다고 생각이 들었는데, 두 색을 비교하면 오히려 어두운 색(애플의 배경색)이 더 따뜻한 느낌을 주었다. 하지만 그 색만을 바라보면 애플의 경우는 그레이 느낌이 강하기 때문에 차가운 색이란 생각이 든다. 반면 네이버는 밝은 톤이라 따뜻하게 느껴진 것 같다. (*색이란 빛이나 모니터, 눈이나 환경에 따라 각자 느끼는 바는 다르다.) 이온디 온 레이아웃은 흰색을 주 컬러로 사용하면서 포인트 컬러를 사용했다. 주로 흰색 톤의 색을 군데군데 배치했기에 흰색의 사용이 중요한 몫을 차지하고 있다. 이번에 흰색 배경색을 조사하면서 기존에 F9F9F9 컬러를 FAFAFA로 변경해보았는데, FFF 색과 비교해서 좀 더 확 눈에 띄게 되었지만 눈에 보이는 색 자체는 더 편안해진 것 같다. 탑네비게이션과 컨텐츠의 구분을 할 때, 위젯을 강조할 때 등 흰색의 다양한 버전은 웹디자인에서 굉장히 중요하다. #F4F4F4 : 네이버 카페의 탑네비게이션의 색 #FBFBFB : 네이버 메인의 탑네비게이션의 색 #FAFAFA : 네이버 검색의 탑네비게이션의 색 ※참조 1. 가독성, 눈의 피로함에 대한 웹 사이트 배경색의 영향 http://academic.naver.com/view.nhn?doc_id=13699766&dir_id=0&page=0&query=%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EB%B0%B0%EA%B2%BD%EC%83%89%20F7f7f7&ndsCategoryId=10204&library=141 2. 실전 웹표준 가이드 http://www.slideshare.net/hyun/web-standard-guide-2005-appendix 3. Designing Interfaces 인터페이스 디자인 94가지 패턴 http://book.naver.com/bookdb/text_view.nhn?bid=2954032&dencrt=K6ydKIG64A7KiKn%252BgOesYB%253%393IzNMfICtDOwSPEEsUqw%253D&term=%BE%D6%C7%C3+%C0%A5+%BB%E7%C0%CC%C6%AE+%B9%E8%B0%E6&query=%EC%95%A0%ED%94%8C+%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8+%EB%B0%B0%EA%B2%BD 4. 웹사이트에 '빽'이 있어야 산다? http://cafe.naver.com/stshanghai/257
이온디 15년 전
플래닛 위젯의 경우 좀 이상한 부분이 있습니다.다음이 코드인데요, 맨 마지막 줄에 확인해주세요. <style> .pln_eond {border:1px solid #E8E8E8;border-bottom:0;width:228px;background:#F9F9F9;padding:10px;overflow:hidden;font-size:11px;color:#5c5c5c;} .pln_eond .nickname {position:relative;font:bold 11px dotum;color:#5F… 플래닛 위젯의 경우 좀 이상한 부분이 있습니다.다음이 코드인데요, 맨 마지막 줄에 확인해주세요. <style> .pln_eond {border:1px solid #E8E8E8;border-bottom:0;width:228px;background:#F9F9F9;padding:10px;overflow:hidden;font-size:11px;color:#5c5c5c;} .pln_eond .nickname {position:relative;font:bold 11px dotum;color:#5F74B3;border:1px solid #B9B9BD;padding:2px 4px 0 4px;background:white;vertical-align:top;} .pln_eond .date {position:relative;font:10px verdana;color:#5F74B3;letter-spacing:-1px;margin:0 5px 0 5px;} .pln_eond .time {position:relative;font:10px verdana;color:#6F7893;letter-spacing:-1px;} </style> <!--@foreach($planet_list as $no => $item)--> <div class="pln_eond"> <a href="./planet"><img src="{$item->getPlanetPhotoSrc($widget_info->thumbnail_width,$widget_info->thumbnail_height)}" width="{$widget_info->thumbnail_width}" height="{$widget_info->thumbnail_height}" alt="{htmlspecialchars($item->nick_name)}" style="border:2px solid #E5E5E5;float:left;margin-right:5px;" /></a> <div style="float:left;"><a href="{getSiteUrl($widget_info->domain,','mid',$item->getPlanetMid(),'date',$item->getRegdate())}"><span class="nickname">{$item->getNickName()}</span></a></div> <div><span class="date">{zdate($item->get('regdate'),"y.m.d",false)}</span><span class="time">({zdate($item->get('regdate'),"H:i",false)})</span></div> <p style="height:3px;"></p> <font style="font-size:11px;color:#5c5c5c;">{$item->getContent()} </div></font> <!--@end--> =============================================================== <font style="font-size:11px;color:#5c5c5c;">{$item->getContent()} </div></font> =============================================================== 이 부분에 제가 왜 이렇게 </font>를 뒤에 썼냐면 </div> 앞에 쓰면 font 스타일이 안 먹는다는 것입니다. -_-; 이건 왜 이런가요?
이온디 18년 전
<HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=euk-kr"> <script type="text/javascript" language="JavaScript"> function layer_toggle(obj) { if (obj.style.display == 'none') obj.style.display = 'block'; else if (obj.style.display == 'block') … <HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=euk-kr"> <script type="text/javascript" language="JavaScript"> function layer_toggle(obj) { if (obj.style.display == 'none') obj.style.display = 'block'; else if (obj.style.display == 'block') obj.style.display = 'none'; } </script> <style> .more {border:1px dotted #EFEFEF;margin:5px;background:#F9F9F9;} .more p {margin:5px;} </style> </HEAD> <BODY> <div id=more01a style="DISPLAY: block"> <A onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b'));return false;" href="#" > <p>더 보기..</p></A> </div> <div id=more01b style="DISPLAY: none"> <A onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b'));return false;" href="#" > <p>닫기..</p></A> <DIV class="more"><P>div 사이에 이렇게 내용을 적어주시면 됩니다.</P> <P>어머나 세상에</P> <P>아니 이럴수가?</P></DIV> </div> <br><br> <div id=more02a style="DISPLAY: block"><A onclick="layer_toggle(document.getElementById('more02a')); layer_toggle(document.getElementById('more02b'));return false;" href="#" ><p>이렇게 div id와 document.getElementById 값을 조절하면</p></A></div> <div id=more02b style="DISPLAY: none"><A onclick="layer_toggle(document.getElementById('more02a')); layer_toggle(document.getElementById('more02b'));return false;" href="#" ><p>여러개를 열고 닫을 수 있습니다.</p></A><p>어렵지 않습니다.</p></div> <br><br> </BODY></HTML>