노토산스 폰트 사용 https://tistory3.daumcdn.net/tistory/0/Ray/images/font.css https://tistory3.daumcdn.net/tistory/0/Ray/images/font.css https://t1.daumcdn.net/tistory_admin/33fd5210053a2cf11e98207aa0aeb6d92bc0161f/blogs/style/content/font.css?_version_=33fd5210053a2cf11e98207aa0aeb6d92bc0161f https://t1.daumcdn.net/tistory_admin/33fd5210053a2cf11e9... 더보기

이전 글에서 select > option 태그로 이루어진 걸 div로 바꾸는 작업입니다. 셀렉트 커스텀 작업은 스타일을 입히기 위해서 HTML+JS+CSS 다 짜야하는게 귀찮은 일이긴 합니다. 기본적인 코드는 다음 링크에서 확인할 수 있습니다. https://codepen.io/eond/pen/GBPQOb PREVIEW http://happytown57.cafe24.com/info02 HTML <select name="" id="" onchange="if(this.value) locat... 더보기

HTML<div class="breadcrumbbox"> <div class="container"> <ul loop="$main_menu->list=>$key,$val" cond="$val['selected']"> <li><a href="/"><i class="xi-home"></i></a></li> <li><span><b><a loop="$main_menu->list=>$key1,$val1" cond="$val1['selected']" href="{$val1['href']}" class="on">{$val1['link']}</a></b></span></li> <li cond="$val['list']"> <select n... 더보기

HTML<div class="breadcrumbbox"> <div class="container"> <ul loop="$main_menu->list=>$key,$val" cond="$val['selected']"> <li><a href="/"><i class="xi-home"></i></a></li> <li><span><b><a loop="$main_menu->list=>$key1,$val1" cond="$val1['selected']" href="{$val1['href']}" class="on">{$val1['link']}</a></b></span></li> <li cond="$val['list']"> <select n... 더보기

슬라이드 기능 http://www.berriart.com/sidr/# https://github.com/artberri/sidr/blob/master/src/jquery.sidr.js#L15 참조사이트 https://www.xpressengine.com/index.php?mid=forum&search_target=nick_name&search_keyword=%EC%9D%B4%EC%98%A8%EB%94%94&document_srl=23069610 http://okky.kr/ 네이버 모바일 네이버 스포츠 네이버 뉴스 http://www.uxfactory.co.kr/qna ht... 더보기

http://home.eond.com/paylog http://home.eond.com/index.php?module=admin&act=dispCympusadminIndex https://www.xpressengine.com/xehub http://www.lemona.co.kr/main.asp https://www.cameron.co.kr:47741/prowidgets/12500 http://eond.com/client_faq http://www.danawa.com/ http://pc.shopping2.naver.com/home/p/index.nhn https://pay.naver.com/join?url=https%3A%... 더보기

이온디 에디션 레이아웃의 경우 사이드바가 있는 반응형 레이아웃입니다. 사이드바의 경우 일정 너비 이하로 줄어들 경우 사라지거나 넓이를 줄일 수 있지만 컨텐츠의 경우 가운데 정렬일 경우 사이드바와 중쳡되는 경우가 발생하여 @media only screen and (max-width: 1200px) { #eond_edition .container .lnb{width:120px } #eond_edition .container .sidebar{display:none... 더보기

#왼쪽 상단 버튼의 역할 1. 기대되는 역할 : 왼쪽 사이드 메뉴의 펼침 메뉴 - 문제점 1) 반응형으로 레이아웃 너비가 일정 너비 이하로 줄어들었을 경우 사라진 상태일 때, 펼침 메뉴를 클릭한 경우, 다시 브라우저 넓이를 줄이면 해당 사이드바가 줄어들지 않고 펼침 상태 그대로 유지됨 > 문제가 아닐 수도 있음. 반응형을 사용하는 이유는 단순히 사용자의 기기에 따라 적합... 더보기

#왜 반응형 이온디 에디션 레이아웃은 구조상 반응형인 웹사이트 레이아웃입니다. 처음 만들 때는 PC버전과 모바일 버전으로 각각 따로 만들어야 겠다고 생각했습니다만 작업하다보니 양쪽 로컬메뉴와 사이드바의 넓이가 각각 250픽셀이라 #컨텐츠 중심의 레이아웃 #확장성 - 이온디 홈페이지의 '큰 그림' 이온디 에디션 레이아웃은 확장성과 사용성을 염두에 두고 작업합니다. ... 더보기

헤더 영역의 왼쪽과 오른쪽에 위젯 영역을 추가로 넣었습니다.

아래는 CSS 코드입니다.

HTML 코드는 다음과 같습니다.

시간 나면 롤링 배너로도 만들어 볼 수 있을 것 같은데 할 게 너무도 많네요. @_@

'이온디 온'은 메인 페이지용 레이아웃이며, '이온디 에디션' 레이아웃은 서브 페이지용 레이아웃입니다. 복잡한 사이트를 어떻게 하면 조금 더 직관적으로 꾸밀 수 있을까 고민하면서 만들어보았습니다. http://codepen.io/eond/pen/OVeMNP ※ 참조 디자인 http://entertain.naver.com/tv http://chhwa75.tistory.com/1067 http://book.naver.com/bookdb/book_detail.nhn?bid=67... 더보기