메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

한빛랩스 - 지식에 가능성을 머지하다 / 강의 콘텐츠 무료로 수강하시고 피드백을 남겨주세요. ▶︎

IT/모바일

XML이 HTML을 대체할 것인가?

한빛미디어

|

2001-05-17

|

by HANBIT

9,852

By 존 심슨(John E. Simpson), 역 한빛 리포터 1기 이상훈
지난번 XML 워크샵에 가서 XML을 처음 정식으로 접했는데, IT업계에 종사하면서 한 번이라도 Dynamic Web을 개발해본 사람이면 HTML 코딩하는 게 얼마나 짜증나는 일인지 알 것이다. 비록 웹 디자이너와 같이 일을 하더라도 말이다. 그런데 XML은 이런 단점을 극복할 수 있는 해결책으로 보였다. 그래서 XML에 관심을 가지게 되었고, 그 쪽으로 자료를 찾아보던 중 XML(좀 더 정확히는 XHTML)에 관한 기사를 보게 되어 소개하고자 한다.
다음은 막 XML을 시작한 웹 개발자의 신경을 건드리는 두 가지 서로 관련된 질문과 이에 대한 답이다. Q1: XML이 HTML을 대체할 것인가? A1: 철학적인 측면과 실용적인 측면의 두 가지로 답할 수 있겠다. 철학적인 측면에서 XML은 일시적인 경우가 아니라면, HTML의 대안으로서 실제적인 의미가 없다. XML 1.0 권고안(Recommendation)을 개발하고 있을 때, XML은 "웹을 위한 SGML" 또는 SGML 개념의 잔재라고 불리곤 했다. 사실 XML은 웹에 훌륭하게 적용된다. 그러나 수 많은 XML 기반의 마크업 언어를 구현하는 브라우저가 있지만(이미 많은 브라우저가 XML을 지원한다), 상응하는 문서 전부를 번역할 수 있는 이상적인 브라우저는 없다. 예를 들어, 종래의 브라우저는 는 말할 것도 없고 같은 태그는 해석할 수 없는 것이다. 그래서 좀 더 실용적인 측면의 답이 필요하다. 즉 이미 XML이 어느 정도 HTML을 대체하고 있다는 것이다. 독자는 World Wide Web Consortium(W3C)이 현재 4.01버전의 HTML 표준을 관리하고 있으며, W3C는 더 이상 HTML의 개정판을 발표하지 않을 것이라는 것을 알 것이다. 그 대신 확장 HTML 혹은 XHTML이라고 불리는 버전 1.0에 대한 권고안을 승인했다. 앞으로 웹의 표준어는 HTML이 아니라 XHTML이 될 것이다. 그러면 XHTML은 무엇인가? 간단히 말하면 XML화(化)한 HTML이다. 그래서 시작 태그는 끝 태그와 일치해야하고 모든 요소(element)는 서로에게 구조적으로 쌍을 이루어야 한다. 다음과 같이 구조를 중복하는 잘못된 구시대는 가버린 것이다.
This is bold and this is italic
but the italicized element doesn"t nest properly within
the bold.
A2에서 언급하겠지만, XHTML과 HTML 사이에는 중요한 차이점이 있다. XHTML 1.0은 세 가지 "기호"를 제공한다( "기호"라는 말은 W3C의 용어라기에는 다소 기발하다).
  • XHTML 전환: 기존의 HTML 문서를 XHTML로 변경하고자할 때 사용하면 좋다. 엄밀히 말하자면, XML 문서에서는 내용 혹은 구조와 화면에 표시하는 방식을 엄격하게 구분해야 한다. 그래서 XML 문서에서는 와 같은 HTML 태그를 볼 수 없다. 진정한 XML 기반의 HTML에서 표시용 문자(배경색 속성과 같은)는 문서 자체와는 동 떨어진 스타일 시트로 나타내야 하는 것이다. XHTML 전환은 이런 요구에 유연하게 처리해서, 구식 브라우저(스타일시트 지원 여부와 상관없이)에서도 여전히 원하는 대로 동작할 것이다.
  • XHTML 엄격성: 이 부분은 유연성과는 거리가 멀다. 모든 표시 관련 마크업은 금지되며, 특정한 요소를 특정 방법으로 나타내고 싶으면 스타일 시트를 이용해야 한다.
  • XHTML 프레임세트: 웹 페이지를 프레임세트로 구성하려면 XHTML 1.0을 프레임세트로 쓰면 된다(각각의 프레임세트는 위의 두 가지 기호로 구현될 것이다).
Q2: HTML기반의 웹 문서를 XML로 바꿀 수 있는가? A2: 여기에서도 두 가지 대답이 가능하다. 첫째 대답은 단순히 XHTML만 이용할 경우이고, 둘째 대답은 HTML을 진정 의미 있는 MathML, Chemical Markup Language, 혹은 독자가 개발한 특정 애플리케이션에만 적용되는 마크업 언어로 바꾸려 할 경우의 대답이다. 먼저 HTML을 XHTML로 바꾸는 것을 살펴보자. W3C의 XHTML 권고안은 두 언어의 차이를 잘 나타낸다. A1에서 언급한 분명한 차이점 외에도 HTML 개발자를 놀라게 할 차이점이 더 있다. 한 예로, XML 요소는 대소문자를 구분한다. 가상의 HTML을 XML화(化)한 형태에서 태그는 와는 다른 요소를 나타난다. 따라서 개발자는 XHTML 권고대로 요소명(element name)을 모두 소문자로 쓰면 되는 것이다. 또한 HTML에서 , ,
,
와 같이 나타나는 빈요소 태그()는 태그를 닫기(>) 전에 슬래시(/)를 사용하는 XML 빈-요소 태그형태를 써야 된다.



로 바뀐다. (주: XML을 이해하지 못하는 브라우저에서는 이러한 빈요소 형태가 지장을 초래한다. 하지만
대신에
을,
대신에
을 쓰는 것처럼 슬래시 앞에 공백을 주면 문제가 해결된다는 점을 위안으로 삼자. 필자의 생각으로는 브라우저 제공업체에서 마크업의 발전을 지연시켰다는 사실이 오히려 좋은 점으로 바뀐 것 같다. 게다가 이러한 특성으로 독자적인 역호환성을 갖는 XHTML을 작성할 수도 있는 것이다.) 현재 기존의 HTML을 가장 간단하게 변경하는 방법은 W3C 사이트의 Dave Raggett의 free HTML Tidy 유틸리티를 사용하는 것이다. Tidy는 광범위한 플랫폼에서 프로세싱을 지시하는 방대한 명령행 변수 배열을 입력받아서 처리하는데, 다수의 브라우저 제공업체와 개발자가 Tidy를 결합해서 제품을 만들고 있다 (윈도우 기반 플랫폼에서는 Chami.com의 free HTML-Kit 등이 인기 있다). 그러나 성가신 문제가 있다. HTML을 XHTML이 아니라, 진정한 XML 애플리케이션으로 바꾸려면 어떻게 해야 하는가? 이것이 성가신 이유는 HTML 요소명은 아무런 내재적인 뜻이 없는 반면(이 점에서는 XHTML도 마찬가지다), 모든 XML 애플리케이션은 직관적인 뜻이 있다. 다음과 같은 (X)HTML 부분을 살펴보자:
Charles Darwin Origin of Species
Joseph Heller Catch-22
XML 애플리케이션으로 변경하면 다음과 같다.

  
    Charles Darwin
    Origin of Species
  
  
    Joseph Heller
    Catch-22
  

이는 매우 직관적이다. 그러나 일반적인 찾고-바꾸기 작업으로 변경하려고 하면, 모든 태그는 로, 으로, 내의 첫째
로 둘째 </font>로 바꾸어야 한다. 만만하지 않은 작업이다(table의 줄이 3개나 그 이상의 <font color="#006699"><td></font> 요소를 가질 수도 있고, 단순한 스키마로서는 대응이 불가능한 경우도 있다). 주의 깊게 마크업한 HTML이라면, 특히 모든 요소 형태 내 각각의 인스턴스(instance)에 클래스 속성을 사용했다면(CSS를 쓰는 것과 같은), 이는 잘 작동할 것이다. 다음을 보자. <table><tr><td><font color="#006699"><pre> <table class="books"> <tr class="book"> <td class="author">Charles Darwin</td> <td class="title">Origin of Species</td> </tr> <tr class="book"> <td class="author">Joseph Heller</td> <td class="title">Catch-22</td> </tr> </table> </pre></td></tr></table> 이 경우에는 찾고 바꾸기(search-and-replace) 작업을 쉽게 할 수 있다. 어쨌든 시작 태그만 교정한다(물론 예상대로 처음에 이러한 클래스 속성을 모두 첨가하는 것은 충분히 짜증나는 일이다). 그래도 여전히 까다로운 수작업 변경과 문서의 구조를 파악하고 의미 있는 마크업으로 대칭시키는 매우 짜증나는 작업을 감수해야 한다. 개발자의 입장에서 보면, 수 년 내 이런 작업을 하지 않게 되기를 바랄 뿐이다. 그러나 이런 식으로 HTML을 XML로 바꾸게 될 가능성이 있다는 점이 문제다. <hr noshade size="1">이상훈님은 한빛 리포터 1기로 활동 중이며, IDE Korea라는 컨설팅 + 개발 업체에서 인터넷 개발 쪽을 맡고 있습니다. </div> <!-- 좋아요 버튼 --> <div class="btn_area"> <div class="btn_like_ok" ><a href="javascript:setLike('CMS6426822342','');">좋아요</a></div> </div> <!-- 태그 정보 영역 --> <div class="tag_area"><span>TAG : </span></div> <!-- //태그 정보 영역 --> <!-- //콘텐츠 영역 --> </div> <!-- // 콘텐츠 board 영역 --> <!-- 이전 다음 --> <div class="view_page_move"> <p class="vpml"><span>이전 글 : </span> <a href="./category_view.html?cms_code=CMS8152156409&cate_cd=">"자바 서블릿 프로그래밍(개정판)" 번역을 시작하며,,,</a> </p> <p class="vpmr"><span>다음 글 : </span> <a href="./category_view.html?cms_code=CMS5083324311&cate_cd=">백관선의 자유 그래픽 김프</a> </p> </div> <!-- //이전 다음 --> <!-- 관련콘텐츠 --> <!-- //관련콘텐츠 --> <!-- 홈페이지 댓글 모듈 영역 --> <div class="detail_reply_area"> <!-- 댓글 리스트 --> <div id="cms_reply_div"></div> <!--// 댓글 리스트 --> <!-- 댓글 입력 --> <form name="re_frm" id="re_frm" method="post"> <input type="hidden" id="fk_m_idx" name="fk_m_idx" value=""> <input type="hidden" id="fk_m_name" name="fk_m_name" value=""> <input type="hidden" id="fk_cms_code" name="fk_cms_code" value="CMS6426822342"> <div class="reply_form"> <fieldset> <legend>댓글 입력</legend> <label><textarea name="comment" id="comment" class="i_textarea"></textarea></label> <label><button type="button" name="" value="작성" class="btn_repl" onclick="cms_reply_data('ins','');">댓글 작성</button></label> </fieldset> </div> </form> <!--// 댓글 입력 --> </div> <script> function cms_reply_frm(str,re_idx,re_com_idx,status){ var result_postdata= { str:str, re_idx : re_idx , re_com_idx:re_com_idx } $.ajax({ type:"post", url: "/channel/cms_reply_frm.php", data:result_postdata, contentType: "application/x-www-form-urlencoded; charset=UTF-8", success: function(data){ //alert(data); if(str == "mod"){ $("#mod_com_div_"+re_idx).html(); $("#mod_com_div_"+re_idx).html(data); } if(str == "re_mod"){ $("#mod_recom_div_"+re_com_idx).html(); $("#mod_recom_div_"+re_com_idx).html(data); } } }); } //댓글달기 // @str:상태값 @idx: 댓글idx function cms_reply_data(str,idx){ var fk_m_idx = $("#fk_m_idx").val(); var fk_m_name = $("#fk_m_name").val(); var fk_cms_code = $("#fk_cms_code").val(); // var comment = $("#comment").val(); // var re_comment = $("#re_comment_"+rd_num).val(); // var mod_comment = $("#mod_comment").val(); // var mod_re_comment = $("#mod_re_comment_"+idx).val(); var comment = $("#comment"); var re_comment = $("#re_comment_"+idx); var mod_comment = $("#mod_comment"); var mod_re_comment = $("#mod_re_comment_"+idx); if(str=="ins"){ comment = comment; }else if(str=="re_ins"){comment = re_comment; }else if(str=="mod"){comment = mod_comment; }else if(str=="re_mod"){comment = mod_re_comment; } if(!fk_m_idx){alert("로그인후 댓글을 작성하실수있습니다.");return; } if(str == "ins"||str == "mod"||str == "re_mod"||str == "re_ins"){ if(!comment.val()){ alert("내용을 입력해주세요.");comment.focus(); return; } }else if(str == "del" || str == "re_del"){ if(!confirm(" 삭제 후 데이터는 복구되지 않습니다. \n 해당 항목을 삭제 하시겠습니까? ")){ return; } } var comment_val = comment.val(); var result_postdata= { str:str, fk_m_idx : fk_m_idx, fk_m_name : fk_m_name, fk_cms_code : fk_cms_code, comment:comment_val ,idx:idx } $.ajax({ type:"post", url: "/channel/cms_reply_proc.php", data:result_postdata, contentType: "application/x-www-form-urlencoded; charset=UTF-8", success: function(data){ alert($.trim(data)); cms_reply_list('CMS6426822342'); /* if(str == "mod_f"){ $("#re_"+div_n+"_"+div2_n).html(""); $("#re_"+div_n+"_"+div2_n).html(data); }else{ alert(data.trim()); comment_list( fk_hbr_idx,div_n); //댓글 리스트 } */ } }); } //리뷰 댓글 리스트 :: 리뷰 idx , div_num function cms_reply_list(cms_code){ $.ajax({ type:"post", url: "/channel/cms_reply_list.php", data: { cms_code : cms_code}, contentType: "application/x-www-form-urlencoded; charset=UTF-8", success: function(data){ $("#comment").val(''); $("#cms_reply_div").html(data); } }); } //답글 처리 버튼 function recom_frm(str,num){ if(str=="show"){ $("#recom_div_"+num).show(); $("#re_btn_"+num).html(""); $("#re_btn_"+num).html("<a href=\"javascript:recom_frm('hide','"+num+"');\">답글취소</a>"); }else if(str=="hide"){ $("#recom_div_"+num).hide(); $("#re_btn_"+num).html(""); $("#re_btn_"+num).html("<a href=\"javascript:recom_frm('show','"+num+"');\">답글</a>"); } } cms_reply_list('CMS6426822342'); </script> <!-- //홈페이지 댓글 모듈 영역 --> <div class="btn_area_board"> <div class="left"><a href="/channel/category/category_list.html">목록</a></div> </div> </div> <!-- //상세 left 영역 --> <!-- 상세 right 영역 --> <div class="network_view_wrap_r"> <!-- 배너영역 --> <div class="bn_area" style="padding:0; border:1px solid #dddddd;"> <a href="https://www.hanbitn.com/" target="_blank"> <img src="/data/banner/20240904165233_ban_pc_img_thumb.jpg" alt="" ></a> </a> </div> <!-- //배너영역 --> <!-- 편집자 Choice --> <!-- //편집자 Choice --> <!-- 최신콘텐츠 --> <div class="newest_con"> <p class="tit">최신 콘텐츠</p> <ul> <li><a href="/channel/category/category_view.html?cms_code=CMS2359486892" target="_blank" title="새창열기">[바닷속 딥러닝 어드벤처] 5부. 피...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS3783401104" target="_blank" title="새창열기">[바닷속 딥러닝 어드벤처] 4부. 제...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS8289480351" target="_blank" title="새창열기">[바닷속 딥러닝 어드벤처] 3부. DeZ...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS2551016804" target="_blank" title="새창열기">[바닷속 딥러닝 어드벤처] 2부. 상...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS6397502491" target="_blank" title="새창열기">[바닷속 딥러닝 어드벤처] 1부. 시...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS2758678476" target="_blank" title="새창열기">[챗GPT로 챗봇 만들기] 프롬프트 엔...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS7962220408" target="_blank" title="새창열기">플러터의 필수개념 이해하기 - 아키...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS1420013052" target="_blank" title="새창열기">TypeScript의 데이터 타입에 대해 ...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS5848159514" target="_blank" title="새창열기">쉽게 배우는 AWS : 클라우드 정의부...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS2401427325" target="_blank" title="새창열기">[테라폼으로 시작하는 IaC] 기존 리...</a></li> </ul> </div> <!-- //최신콘텐츠 --> <!-- 인기콘텐츠 --> <div class="newest_con"> <p class="tit">인기 콘텐츠</p> <ul> <li><a href="/channel/category/category_view.html?cms_code=CMS4064858187" target="_blank" title="새창열기">[리뷰 함께 읽기] 100만원 마케팅,...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS4695374004" target="_blank" title="새창열기">[CS기술 면접] 자주 출제되는 컴퓨...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS5997817104" target="_blank" title="새창열기">파이썬 웹 프레임워크 비교 - D...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS8302568366" target="_blank" title="새창열기">여름은 성장의 계절, 개발자 성장...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS9625146475" target="_blank" title="새창열기">구글 스프레드시트의 날짜 형식 변...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS7003473664" target="_blank" title="새창열기">개발자를 위한 코딩 파트너, 효과...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS1166571063" target="_blank" title="새창열기">Redis(레디스) 서버 설치 및...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS9813408902" target="_blank" title="새창열기">2030년 AI 시장 전망 & 주목할 상용...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS7885156269" target="_blank" title="새창열기">개발자를 위한 커뮤니케이션 도구 ...</a></li> <li><a href="/channel/category/category_view.html?cms_code=CMS8893081462" target="_blank" title="새창열기">원리부터 이해하는 도커 - 컨테이...</a></li> </ul> </div> <!-- //인기콘텐츠 --> </div> <!-- //상세 right 영역 --> </div> <!-- //네트워크 상세 wrap --> </div> <!-- //Contents --> <!-- Footer --> <footer> <!-- 공지사항 --> <div class="foot_notice" style="height:6px;"></div> <!-- //공지사항 --> <div class="foot_contents"> <!-- 하단 메뉴 --> <div class="foot_menu"> <!-- added by coffin --> <ul> <li><a href="https://www.hanbit.co.kr/publisher/index.html" target="_blank">회사소개</a>(<a href="https://www.hanbit.co.kr/publisher/index.html" target="_blank">KOR</a> | <a href="https://www.hanbit.co.kr/publisher/index.html?lang=e" target="_blank">ENG</a>) • <a href="https://www.hanbit.co.kr/publisher/contact.html?lang=k" target="_blank">약도</a></li> <li><a href="https://www.hanbit.co.kr/publisher/write.html" target="_blank">기획 및 원고 모집</a></li> <li><a href="https://www.hanbit.co.kr/publisher/career.html" target="_blank">채용</a> • 입사지원 <a href="mailto:jobs@hanbit.co.kr">jobs@hanbit.co.kr</a></li> <li><a href="https://www.hanbit.co.kr/publisher/foreignrights.html" target="_blank">FOREIGN RIGHTS</a></li> <li><a href="https://www.hanbit.co.kr/member/use_agreement.html">이용약관</a> • <a href="https://www.hanbit.co.kr/member/privacy_policy.html"><strong>개인정보처리방침</strong></a></li> <li><a href="https://www.hanbit.co.kr/sitemap/sitemap.html">사이트맵</a></li> </ul> </div> <!-- //하단 메뉴 --> <!-- SNS --> <div class="foot_sns"> <!-- 데브레터 구독하기 --> <div class="devletter_contet"> <div class="devletter_sub"> <span class="dev_header_img">데브레터 구독하기</span><a class="dev_sit_a" href="/devletter/" target="_blank"><span class="dev_site_img">데브레터 보러가기</span></a> </div> <form class="subscribe_form" action="/devletter/dev_process.php" method="post"> <input type="hidden" id="g-recaptcha" name="g-recaptcha"> <fieldset class="subscribe_fiel"> <legend>구독서비스</legend> <input type="text" placeholder="Your Email Address" name="user_email"></input> <button type="submit" class="sub_btn"><span>구독</span></button> </fieldset> </form> <div class="main_foot_sns"> <ul> <li class="main_foot_facebook"><a href="https://www.facebook.com/hanbitmedia" target="_blank"><span>페이스북</span></a></li> <li class="main_foot_youtube"><a href="https://www.youtube.com/한빛TV" target="_blank"><span>유튜브</span></a> </li> <li class="main_foot_bolg"><a href="http://blog.hanbit.co.kr/" target="_blank"><span>블로그</span></a></li> <li class="main_foot_naverpost"><a href="https://m.post.naver.com/hanbitstory" target="_blank"><span>네이버포스트</span></a></li> </ul> </div> </div> <!-- 데브레터 구독하기 //--> </div> <!-- //SNS --> <!-- 한빛 정보 --> <div class="foot_about"> <div class="foot_about_area"> <p><strong>한빛출판네트워크</strong></p> <p>(03785) 서울 서대문구 연희로2길 62</p> <!-- <p>EMAIL : support@hanbit.co.kr</p> --> <p>대표이사 : 김태헌, 전태호</p> <p>사업자등록번호 : 220-81-05665 <a href="http://www.ftc.go.kr/bizCommPop.do?wrkr_no=2208105665" target="_blank">[확인]</a></p> <p>통신판매업신고 : 2017-서울서대문-0671호</p> <p>호스팅제공자 : 호스트센터(주)</p> <p>고객센터 : support@hanbit.co.kr <a href="/support/help_info.html">[바로가기]</a></p> <!--//패밀리사이트--> <div class="family_menu"> <div data-family-menu> <span>관련사이트</span> <i class="family_icon" data-family-icon role="img"></i> </div> <ul data-family-menu-ul class="family_menu_ul" style="display:none;"> <li><a href="https://www.hanbit.co.kr/media/" target="_blank">한빛미디어<svg data-v-c1d21be8="" data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink"> <g data-v-c1d21be8="" fill="none" fill-rule="evenodd"> <path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638" transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path> </g> </svg></a></li> <li><a href="https://www.hanbit.co.kr/academy/" target="_blank">한빛아카데미<svg data-v-c1d21be8="" data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink"> <g data-v-c1d21be8="" fill="none" fill-rule="evenodd"> <path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638" transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path> </g> </svg></a></li> <li><a href="https://www.hanbit.co.kr/biz/" target="_blank">한빛비즈<svg data-v-c1d21be8="" data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink"> <g data-v-c1d21be8="" fill="none" fill-rule="evenodd"> <path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638" transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path> </g> </svg></a></li> <li><a href="https://www.hanbit.co.kr/life/" target="_blank">한빛라이프<svg data-v-c1d21be8="" data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink"> <g data-v-c1d21be8="" fill="none" fill-rule="evenodd"> <path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638" transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path> </g> </svg></a></li> <li><a href="https://www.hanbit.co.kr/edu/" target="_blank">한빛에듀<svg data-v-c1d21be8="" data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink"> <g data-v-c1d21be8="" fill="none" fill-rule="evenodd"> <path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638" transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path> </g> </svg></a></li> <li><a href="https://www.hanbitn.com/" target="_blank">한빛앤<svg data-v-c1d21be8="" data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink"> <g data-v-c1d21be8="" fill="none" fill-rule="evenodd"> <path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638" transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path> </g> </svg></a></li> <li><a href="/realtime" target="_blank">리얼타임<svg data-v-c1d21be8="" data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink"> <g data-v-c1d21be8="" fill="none" fill-rule="evenodd"> <path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638" transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path> </g> </svg></a></li> <li><a href="https://www.hanbit.co.kr/textbook/" target="_blank">한빛정보교과서<svg data-v-c1d21be8="" data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink"> <g data-v-c1d21be8="" fill="none" fill-rule="evenodd"> <path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638" transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path> </g> </svg></a></li> <li><a href="https://www.hanbit.co.kr/rent/" target="_blank">한빛대관서비스<svg data-v-c1d21be8="" data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink"> <g data-v-c1d21be8="" fill="none" fill-rule="evenodd"> <path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638" transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path> </g> </svg></a></li> <li><a href="https://devground.hanbit.co.kr//newletter/" target="_blank">데브레터<svg data-v-c1d21be8="" data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink"> <g data-v-c1d21be8="" fill="none" fill-rule="evenodd"> <path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638" transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path> </g> </svg></a></li> <li><a href="https://hongong.hanbit.co.kr/" target="_blank">혼공러들의 스터디공간<svg data-v-c1d21be8="" data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink"> <g data-v-c1d21be8="" fill="none" fill-rule="evenodd"> <path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638" transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path> </g> </svg></a></li> </ul> </div> <script> $(document).ready(function () { $("[data-family-menu]").click(function () { $("[data-family-menu-ul]").toggle().toggleClass('family_menu_ul'); $("[data-family-icon]").toggleClass("rotate"); }); $('html').unbind("click").bind("click", function (e) { if (!$(e.target).closest(".family_menu").hasClass('family_menu')) { $("[data-family-menu-ul]").hide().removeClass( 'family_menu_ul' ); $("[data-family-icon]").removeClass("rotate"); } }); }); </script> <!--//패밀리사이트--> </div> </div> <!-- //한빛 정보 --> </div> <div class="copyright">©1993-2024 Hanbit Publishing Network, Inc. All rights reserved.</div> </footer> <!-- //푸터 --> <div class="foot_download_btn"><a href="https://www.hanbit.co.kr/support/supplement_list.html">자료실</a></div> <!-- 공통 JS 호출 --> <script type="text/javascript" src="/js/common.js"></script> <!-- //공통 JS 호출 --> <!-- 퀵배너 --> <section class="fly_menu_wrapper"> <h3 class="fly_menu_h2">최근 본 상품<span class="fly_menu_count">0</span></h3> <div style="max-height:520px; overflow-y: scroll;"> <div></div> </div> </section> <script> jQuery(function ($) { // 오늘 본 도서 top 속성값 var fly_menu_wrapper_top = $(".fly_menu_wrapper").css("top").replace('px', ''); // 상하 스크롤에 따른 최근 본 책 위치이동 $(window).scroll(function () { var scrollValue = $(document).scrollTop(); $(".fly_menu_wrapper").css( "top", (scrollValue > fly_menu_wrapper_top) ? $("#wrap_gnb").height() + "px" : fly_menu_wrapper_top + "px" ) }); }); </script> <!-- //퀵배너 --> </body> </html>