nme.kr

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

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
html:소스_창고 [2020/08/12 17:22]
clayeryan@gmail.com ↷ 문서 이름이 html:test에서 html:소스모음(으)로 바뀌었습니다 		html:소스_창고 [2023/10/27 02:00] (현재)
clayeryan@gmail.com [반응형 웹페이지 폰트사이즈]
줄 1: 줄 1:
-====== PlayGround ======+===== 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 
 + 
  
  
마지막으로 수정됨: 2020/08/12 17:22
CC Attribution-Share Alike 4.0 International 별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International