2011년 11월 30일 수요일

세로 슬라이드 메뉴 간격조절 오류

 <!-- .text 부분의 간격조절이 안된다.-->

<style type="text/css">
.link {position:absolute;width:100%;height:0;visibility:hidden;overflow:hidden;background:cyan}

.title{position:relative;width:100%;font:bold 11pt verdana;color:white;cursor:pointer;background:orange}

.title_o {position:relative;cursor:pointer;width:100%;height:40px;font:bold 11pt verdana;overflow:hidden;color:white;background:blue}

.text {position:relative;margin:0;padding:0;font-family:verdana;font-size:10pt;overflow:hidden}
.text a{padding:10px 0}

</style>
<script type="text/javascript">
<!--
var object = new Array();

function Slide(N,oCont){
   this.N  = N;
   this.S  = 1.1;
   this.object = new Array();

   this.CObj = function (parent,N){

   this.parent = parent;
   this.N = N;
   this.obj = parent.frm[N];
   this.tit = this.obj.firstChild;
   this.div = this.obj.getElementsByTagName("div")[1];
   this.div.style.visibility = "hidden";
   this.y0 = N * 18;
   this.Y1 = this.y0;
   this.obj.style.top = this.y0;
   this.obj.style.height = parent.H - (parent.NF-1) * 18 - 1;
   this.obj.style.visibility = "visible";
   this.obj.parent = this;
   this.run = false;

   this.move = function(){
        with(this){
            dy = (y1-y0)/parent.S;
            if(Math.abs(dy)>.1){
      y0+=dy;
      obj.style.top = Math.round(y0);
      setTimeout("object["+parent.N+"].object["+N+"].move();", 16);
             } else {
      run = false;
      if(dy>0)div.style.visibility="hidden";
      else if(N>0)parent.object[N-1].div.style.visibility="hidden";
      }
             }
     }

   this.obj.onmouseover = function(){
           with(this.parent){
               if(!run){
      run = true;
      div.style.visibility="visible";
      for(i=0;i<parent.NF;i++)parent.object[i].tit.className = "title";
         tit.className = "title_o";
         for(i=0;i<=N;i++){
              parent.object[i].y1 = i*18;
              parent.object[i].move();
         }
      for(i=N+1;i<parent.NF;i++){
              parent.object[i].y1 = parent.H-(parent.NF-i)*18;
              parent.object[i].move();
      }
                 }
             }
                    }
   }

   this.frm = document.getElementById(oCont);
   this.H = parseInt(this.frm.style.height);
   this.frm = this.frm.getElementsByTagName("span");
   this.NF = this.frm.length;
   for(i=0;i<this.NF;i++) this.object[i] = new this.CObj(this, i);
   this.object[0].obj.onmouseover();
   this.S = 10;
}

onload = function() {
   object[0] = new Slide(0, "frames");
}

//-->
</script>
</head>

<body>
<div id="frames" style="position:absolute;width:200;height:200;overflow:hidden">
        <span class="link"><div class="title">메뉴 1</div>
              <div class="text">
                 <a href="http://kiche.tk/bbs/board.php?bo_table=intro">글타래</a><br />


               </div>
          </span>
         
          <span class="link"><div class="title">메뉴 2</div>
            <div class="text">
               서브메뉴 - 1<br>
               서브메뉴 - 2<br>
            </div>
         </span>
        
         <span class="link"><div class="title">메뉴 3</div>
           <div class="text">
              서브메뉴 - 1<br>
              서브메뉴 - 2<br>
            </div>
         </span>
        
         <span class="link"><div class="title">메뉴 4</div>
             <div class="text">
                서브메뉴 - 1<br>
                서브메뉴 - 2<br>
           </div>
          </span>
          <span class="link"><div class="title">메뉴 5</div>
              <div class="text">
                 서브메뉴 - 1<br>
                 서브메뉴 - 2<br>
              </div>
        </span>
   </div>

2011년 11월 18일 금요일

템플릿 사이트

psd템플릿
*** http://www.readactor.com/user-news/new-20-free-html5-css3-templates/
http://www.webdesignerforum.co.uk/topic/41152-download-free-psd-template-web-20-style/
http://webdesignfan.com/wonderful-psd-templates/
http://webdesignfan.com/wood-design-free-psd-template/
http://www.webappers.com/2009/11/11/25-slick-psd-website-templates-free-for-download/
http://www.themeflash.com/40-free-professional-psd-design-templates/
http://www.smashingmagazine.com/2010/06/22/free-portfolio-psd-template-bluemasters/
http://www.blazrobar.com/
http://www.webdesignshock.com/free-photoshop-android-interface-gui/
http://trendytuts.com/web-layout-tutorials/how-to-create-a-restaurant-psd-template-in-photoshop.html
http://speckyboy.com/2010/07/23/40-professional-and-detailed-web-layout-psd-templates/
** http://www.wpchief.com/articles/70-free-professional-psd-templates-for-web-design/

psd/css 템플릿
*http://www.freewebtemplates.com/
국내커뮤니티 http://www.sodapop.co.kr/bbs/board.php?bo_table=website&page=3&page=2
http://www.instantshift.com/2009/09/17/70-ultimate-round-up-of-free-psd-website-templates/
http://designrfix.com/freebies/psd-website-templates-free-high-quality-designs
http://www.1stwebdesigner.com/freebies/45-free-design-template-and-psd-files/
http://visionwidget.com/tuts/webtuts/548-photoshop-web-layout-tutorials-psd-source.html



기타요소
http://tutspress.com/freebies/10-web-design-elements-templates-free/#
http://speckyboy.com/2011/04/11/50-free-psd-ui-kits-and-templates-for-web-designers/
http://www.2expertsdesign.com/photoshop/500-free-download-high-quality-photoshop-psd-files-for-designers
http://www.1stwebdesigner.com/freebies/45-sites-free-icons-and-psd-resources-for-web-design/
http://www.freshdesignweb.com/psd-web-templates-free-download.html
http://pixelcurse.com/photoshop-2/110-free-psd-web-design-elements
http://mowdesign.blogspot.com/2011/08/slick-free-ui-web-design-psd-templates.html
*** http://www.teehanlax.com/blog/iphone-gui-psd-30/
http://www.noupe.com/freebie/80-useful-psd-templates-for-designers.html

2011년 11월 7일 월요일

구글 블로거에서 티스토리로 데이타 옮기기

http://yeonsh.tistory.com/89

서버에서 포트를 막아, 외부에서 웹페이지 접속이 안됐었다

실수로 서버에서 포트를 막아 외부에서 웹페이지 접속이 안됐었다.

방화벽을 설정을 했던 것 같아 방화벽을 해제하는 명령을 주었다. 결과는 실패
# service iptables stop
iptables: unrecognized service


인터넷을 찾아보니
tables -A INPUT -i eth0 -p tcp -m tcp --dport 80 -j ACCEPT
iptables -A OUTPUT -o eth0 -p tcp -m tcp --sport 80 -j ACCEPT

와 같이 명령을 주면 된단다.


검색을 통해 다음과 같은 명령어를 찾았다.
iptables -L  //설정값 확인
iptables -F  //설정 초기화
iptables -A INPUT -p tcp --dport 21 -j ACCEPT  //21포트 열기
iptables -A INPUT -i lo -j ACCEPT   //local을 모두 받기
iptables -A INPUT -p tcp --dport 1:65526 -j DROP   // 1번 포트부터 65526 포트까지 닫기
service iptables save  //설정값 저장


결국은 웹페이지 접속이 가능하게 되었다.
정보 출처는 http://kldp.org/node/124905
더 쉬운 내용은 http://zicman.egloos.com/2510190#4742195

2011년 11월 2일 수요일

넷북 유저의 웹제작 및 서버 활용

http://www.ubuntu.or.kr/viewtopic.php?f=25&t=7705

인터넷 익스플로러 6~8에서 CSS3 사용하기 - PIE

http://www.cyworld.com/yearn45/3644751

mime-type

첫번째! 서버에 .htc 의 MIME 등록

대체 이게 뭔소린가??? 싶은 분들을 위한 링크
MIME 등록하는 법은 의외로 간단합니다. 웹호스팅이나 서버호스팅을 하는 경우에는 업체에 '.htc 파일 MIME 등록해 주세요~' 라고만 하면 됩니다.
직접 서버를 운영하거나 서버를 조정해야 하는 경우에는 참고 문서를 검색해 보시는게 좋을 것 같습니다. (너무 무책임하죠? -_-;)
Apache를 쓰느냐 IIS를 쓰느냐에 따라서 설정하는 법이 다르기 때문입니다.
HTC의 타입은 text/x-component 입니다.

Cent O/S를 설치하고 나서 기존의 웹페이지에서 HTC 기능이 정상적이지 않는 경우가 있다.
movable.htc 나 selectbox.htc 같은 공개형 소스등이 정상동작하지 않는 증상이 나타나게 된다.
apache configure 파일에 아래의 항목을 추가하면 이 문제가 바로 해결된다.
기존의 apache는 별 문제가 없다가 버젼이 올라가면서 생긴 문제인거 같다.
AddType text/x-component .htc

PIE 파일의 경로는 CSS 파일 기준이 아니라 보이는 웹페이지를 기준으로 정해줘야 합니다. 그래서 경로를 지정할 때 그냥 절대 경로를 넣어주면 신경 쓸 일이 없겠죠. 그리고 서버에서 "text/x-component" content-type으로 전송해야 IE가 제대로 인식한답니다.

첫번째 링크의 테스트 방법 대로 해보니 htc loaded라는 메시지가 나왔다. 서버의 mime types에서 text/x-component htc가 등록되어 있는 것으로 보아 서버에는 문제가 없는 것 같다. 그렇다면 파일 문제일까?
test.html 열었을  알림창이 뜨면서 htc loaded 라는 메시지가 보이면 정상 작동이 되는 것입니다.

2011년 11월 1일 화요일

http://www.planet49.k 네비게이션 참고

http://www.planet49.k/ 네비게이션 참고

수정사항

젠더시스템
메인메뉴 vertical-align, 메인메뉴 rollover, 메인이미지 슬로건 위치
tail.php 사업자등록번호 수정
제작과정 메뉴 background-color: #eee;
login.skin.php 리스트 조정
register_form.skin.php 조정

kscia
login.skin.php 리스트 조정

eceramics
logo 폰트 bold, 라인 얇게 조정
메인페이지 알파벳 s삭제
탭메뉴 bullet, new아이콘 교체
<hr /> #eee로 변경
* _sub.php 첫번째 rollover 안되는 사항 조정, rollover시 font컬러 white로 조정
* 'rollover시 가장 위로 이동' 변동 없게 조정
login.skin.php/ register.skin.php페이지 상단 빈공간 제거
login.skin.php 주변 여백 반들기
pie.htc적용
mongoos
* register.skin.php에서 textarea스타일 margin조정, '확인'버튼 불필요 선택영역 제거
write.skin.php애서 focus해제

css3 라운드 박스 htc

http://sizklu.tistory.com/tag/CSS

http://siana.tistory.com/entry/CSS-%EB%B3%B5%EC%88%98%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%82%AC%EC%9A%A9-%EB%9D%BC%EC%9A%B4%EB%93%9C-%EB%B0%95%EC%8A%A4css3

http://www.jemiya.com/index.php?document_srl=52829&mid=XD_Web3