nme.kr

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

===== CSS 메뉴 꾸미기 =====

==== 참고 자료 링크 ====

[[ https://wepplication.github.io/tools/beautifyCode/ |웹 소스코드 정렬 사이트]]

==== HTML 소스 창고 ====

  -포워딩 페이지로 자동 이동

<code html>
<?
header("Location:http:주소링크");
?>
</code>

==== 버튼식 메뉴 감추기 ====

<code java>
<script language="javascript">
 // view_list_layer : 확장버튼 누를경우 레이어 보여주기
 function view_list_layer(obj) {
  var _viewMode = '';
  eval(obj).style.display == 'none' ?  _viewMode = '' : _viewMode = 'none';
  eval(obj).style.display = _viewMode ;
 }
 function _btnClose_OnClick(obj){
  eval(obj).style.display = "none";
 }     
</script>


<table width="100%" border="0" cellspacing="0" cellpadding="0" align=center>
 <tr onclick=view_list_layer('select_company'); >
   <td align=center><a href="#1" onFocus="this.blur();"><img src="/images/left_brand_t_01.gif" width="170" height="45" border="0"></a></td>
 </tr>

 <tr>
   <td align=center>
  <div id='select_company' style='width:134;display:none;position:relative;left:-70;top:1;background-color:white;border-color:#A1A1A1;border-width:0px;border-style:solid;'>
   <div id=list style='width:134;position:absolute;filter:alpha(opacity=95);background-color:white;overflow-y:auto ;scrollbar-darkshadow-color: white; scrollbar-face-color: #F5F5F5;scrollbar-highlight-color: white;scrollbar-shadow-color: silver;scrollbar-track-color: white;scrollbar-arrow-color: #555555;border-color:#A1A1A1;border-width:1px;border-style:solid;'>
    
    <table width=134 border=0 cellspacing=5 cellpadding=0  bgcolor="#f9f9f9">

 <!-- DYNAMIC AREA 'brand_next' --> 
 <tr>
  <td onmouseover="this.style.backgroundColor='dddddd'" onmouseout="this.style.backgroundColor=''">
 <a href="/shop/goods_brand.php?brand_idx={{brand_idx}}">{{brand_name}}</a>
  </td>
 </tr>
 <!-- DYNAMIC AREA 'brand_next' -->

    </table>
   </div>
  </div>
   </td>
    </tr>
  </table>
</code>

==== 반응형 웹페이지 폰트사이즈 ====

  * HTML - head - style

<code>
<meta name="viewport" content="width=device-width, initial-scale=1>
  <style>
    /* 801px ~ */
    * { color: black; }
 
    /* ~ 800px */
    @media screen and (max-width: 800px) {
      * { font-size: 72.5%;}
    }

    /* ~ 480px */
    @media screen and (max-width: 480px) {
      * { font-size: 2.8vw; }
    } 
    <style>

</code>

==== 기기별 가로폭 사이즈 ====

<code java>
/* 스마트폰 가로+세로 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
}
 /* 스마트폰 가로 */
@media only screen and (min-width : 321px) {
}
 /* 스마트폰 세로 */
@media only screen and (max-width : 320px) {
} 
/* iPhone4와 같은 높은 해상도 세로 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
/* iPhone4와 같은 높은 해상도 가로 */
@media only screen and (min-width : 640px) {
}
/* iPad 가로+세로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}
/* iPad 가로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
/* iPad 세로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
/* 데스크탑 브라우저 가로 */

@media only screen and (min-width : 1224px) {

}
/* 큰 모니터 */
@media only screen and (min-width : 1824px) {
}
</code>

<hi #fff200>나의 단말기 디바이스사이즈 확인하기</hi>
http://sunpig.com/martin/code/2012/androidzoom/devicewidth.html

nme.kr

문서 도구

사이트 도구

사용자 도구

왼쪽 메뉴 편집

Plugin 관리
테마 디자인

nme.kr

문서 도구

사이트 도구

사용자 도구

왼쪽 메뉴 편집 Plugin 관리 테마 디자인

왼쪽 메뉴 편집

Plugin 관리
테마 디자인