• 총게시물 Total 43 RSS

11 따라다니는 스크롤메뉴 부족한 소스때문에 고생했다

인터넷에 돌아다니는 jquery 스크롤 메뉴 소스중에 <script language=“JavaScript”> function quick_menu_slide(){ b_width = $(document.body).width(); //페이지 전체크기 d_width = $(”#head_menu_layout”).width(); //본문 전체 크기임 t_height = $(document.body).scrollTop(); //상단 높이 width = (b_width - d_width) <= 0 ? 920 : b_width/2 + 280; //왼쪽으로 부터 얼마를 떨어뜨려야할지. height = t_height + 118; //상단부터 띄워야 하는 높이 $(”#quick_menu_div”).css({top:height, left:width, display:‘blo…

10 선호에 따른 웹디자인 2

정갈한 : 청색계에서 명도(밝기)와 채도(순도)가 높은 색을 중심으로 배색한다.여성적 : 빨강, 자주, 오렌지 등의 난색계열 중심으로 배색, 채도는 낮고 명도는 높게.발랄한 : 난색과 한색계열의 대비. 빨강:초록, 오렌지:파랑, 노랑:보라 등. 채도가 높을수록 경쾌한 느낌.진지한 : 채도가 낮거나 무채색을 중심으로 배색. 남색, 파란색에 보라, 청록, 또는 회색 계열을 조합.편안한 : 초록계열 중심의 배색. 녹황, 노랑과 강조색인 파랑색과의 조합. 명도 차이…

9 선호에 따른 웹디자인

빨강 : 난색계열, 태양, 불꽃, 열정, 위험초록 : 한색계열, 풀, 어린 잎사귀, 산뜻한, 평화파랑 : 한색계열, 정갈함, 차가움, 하늘, 바다청록 : 한색계열, 초록빛을 띈 파랑, 산뜻한, 차가운자홍 : 난색계열, 선명한 자주빛, 귀여운, 복숭아노랑 : 난색계열, 레몬, 명랑, 해바라기, 주의 

8 반응형 웹을 위한 게시판 디자인 -1

반응형 홈페이지 Responsive Web Design 제작의  걸림돌이 되고 있는 것이슬프게도 게시판 디자인이다.현재 이 사이트의 전체적인 포멧은 반응형 웹에 맞도록 설계했다. 갤러리형 게시판의 경우 (일반형 게시판)도 컴퓨터 웹페이지, 모바일 웹페이지에 따라 적절하게반응하도록 설계 했다. 그런데 현재 가장 걸림돌이 되고 있는 것은 게시판의 디자인이다.우리가 쓰는 일반 게시판은 전통적으로 번호/ 제목 / 글쓴이 / 날짜 / 카운…

7 br 태그 제거 정규식

 <?$string2 = “<br />The <br> quick <br>brown fox <br />jumped <br> over the lazy dog. <br> <BR> <br /> “;echo “문장 끝에 오는 br 태그만 제거 : ” .”<br>”;$aa= preg_replace(”/[[[:space:]]*<br[[:space:]]*[/]*>[[:space:]]*]*$/i”, “”, $string2);$aa2= preg_replace(”/[<br[[:space:]]*[/]*>[[:space:]]*]*<br[[:space:]]*[/]*>$/i”, “”, $string2);echo “원문 : “.str_replace(”<”,”<”,$string2).”<br>”;echo “결과aa : “.str_replace(”<”,”<”,$aa).…

6 list style

/* list 1 style */#list1 { font: italic 1em Georgia, Times, serif; color: #999999;}#list1 p { font: normal .8em Arial, Helvetica, sans-serif; color: #000000;}/* list 2 styles */#list2 { font: italic 1em Georgia, Times, serif; color: #999; list-style: lower-roman;}#list2 p { font: normal .85em Georgia, Times, serif; color: #000;}/* list 3 styles */#list3 { font: normal 1.1em Arial, Helvetica, sans-serif; color: #666;}#list3 p { font: normal .7em Arial, Helvetica, sans-serif; color: #000; border-left: solid 1px #999; margin: 0; padding: 0 0 1em 1em;}

5 내부 그림자 넣기

.inset { width:200px; height:35px; border:1px solid #ddd; -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4); -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4); box-shadow: inset 0 3px 8px rgba(0,0,0,.24);}

4 아코디언 메뉴 만들기

1. Jquery 링크 <script type=“text/javascript” rc=“http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script> 2. 스타일 시트body{ background:#252422; font-family:‘나눔고딕’, ‘맑은고딕’;}dl{ width:800px; margin:50px auto;}dt{ line-height:35px; font-size:large; text-indent:3em; font-weight:bold; color:white; height:35px; //background:url(“백그라운드 이미지를 주면 더 좋겠지...”)}dd{ margin:0; height:300px; background:#D4D0C8;}dd p{ margin:0; text-indent:1em; padding:20px;}3. 자바스크립트  <script type=“t…

go top google+ page facebook tistory rss