nme.kr

추적: › 소스_창고
현재 위치: index » html » 소스_창고

+목차

CSS 메뉴 꾸미기

참고 자료 링크

웹 소스코드 정렬 사이트

HTML 소스 창고

  1. 포워딩 페이지로 자동 이동

1
2
3
<?
header("Location:http:주소링크");
?>

버튼식 메뉴 감추기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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>

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

  • HTML - head - style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

기기별 가로폭 사이즈

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* 스마트폰 가로+세로 */
@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) {
}

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

마지막으로 수정됨: 2023/10/27 02:00
CC Attribution-Share Alike 4.0 International 별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International