[카테고리:] HTML/CSS

iframe 스크롤 가로/세로 숨기기

HTML iframe 엘리먼트의 세로스크롤 <iframe scrolling=yes></iframe> 이렇게 하고 iframe src에 들어간 화면의 body 엘리먼트의 style을 잡아준다. <body style="overflow-x:auto;overflow-y:hidden"> 이렇게 하면 가로스크롤만 보이게 된다.

언어별 캐쉬 방지

참조 : http://ellieya.tistory.com/68 HTML  <META http-equiv="Expires" content="-1"> <META http-equiv="Pragma" content="no-cache"> <META http-equiv="Cache-Control" content="No-Cache"> ASP    <% Response.Expires = 0 Response.AddHeader "Pragma","no-cache" Response.AddHeader "Cache-Control","no-cache,must-revalidate" %> JSP    <% response.setHeader("Cache-Control","no-store"); response.setHeader("Pragma","no-cache"); response.setDateHeader("Expires",0); if (request.getProtocol().equals("HTTP/1.1")) response.setHeader("Cache-Control", "no-cache"); %> response.setHeader("cache-control","no-store"); // http 1.1 response.setHeader("Pragma","no-cache"); // http 1.0 response.setDateHeader("Expires",0); // proxy server 에 cache방지. PHP <? header("Pragma: no-cache"); header("Cache-Control: no-cache,must-revalidate"); ?> … 계속 읽기 언어별 캐쉬 방지

iframe 자동 높이 조절

IFRAME은 일반 FRAMESET과 달리, 원하는 위치에 원하는 사이즈 만큼 편리하게 배치할 수 있다는 장점이 있습니다. TABLE의 사이즈를 정해주고 TD 안에 이미지를 넣듯이 말이죠. 백문이 불여일견 함 해보세요. 아무 HTML파일을 만드셔서 아래의 사용방법처럼 넣어주시고요. 개인적으로 <TD>요기</TD> 들어가는 것을 좋아합니다. 사용밥법 < iframe width=602 height=494 name=frame1 marginWidth=0 marginHeight=0 frameBorder=no scrolling=no></iframe > IFRAME의 구성 src: 프레임에 들어갈 url 지정width: iframe의 … 계속 읽기 iframe 자동 높이 조절

CSS에서 엘리먼트 화면높이 100%만큼 설정하기

아래와 같은 html과 css가 있다면 높이가 의도되로 100%가 되지 않는다. <html> <header> <style> div#main{ width:100%; height:100%; border:solid 1px lightgray; } </style> </header> <body> <div id="main"></div> </body> </html> 그럴 경우 해결 방법은상위 엘리먼트(html, body) 에 높이값을 100%로 지정해 줘야 한다. <style> html, body { height:100%; } div#main { ... } </style>

JS 트리 메뉴 tree menu 샘플

트리구조 메뉴를 만들었다. HTML <html> <head> <title>JS 트리 메뉴 tree menu 샘플</title> </head> <body> <div id="treeMenu"></div> </body> </html> CSS /*tree.js 에 필요한 CSS*/ #treeMenu { position:relative; padding-left:0; } /*Image preLoad*/ #treeMenu::after{ position:absolute;width:0;height:0;overflow:hidde;z-index:-1; content: url(/img/icon_tree_off.gif) url(/img/icon_tree_on.gif) url(/img/icon_tree_tail.gif); } #treeMenu ul{ position:relative; padding-left:12px; list-style:none; } #treeMenu ul li { /* border:solid 1px red; */ } #treeMenu ul … 계속 읽기 JS 트리 메뉴 tree menu 샘플

CSS 커서의 종류

텍스트에 마우스를 올려 보세요.<p style="cursor:텍스트">텍스트</p> 이런 식입니다. alias all-scroll auto cell context-menu col-resize copy crosshair default e-resize ew-resize grab grabbing help move n-resize ne-resize nesw-resize ns-resize nw-resize nwse-resize no-drop none not-allowed pointer progress row-resize s-resize se-resize sw-resize text url w-resize wait zoom-in zoom-out

overflow, white-space, text-overflow] 자동…

이 소스는... 텍스트의 길이가 길어서 자동으로 다음줄로 넘어가지 않고, 넘어가는 영역(overflow)은 안보이게 처리한 후, ... 을 자동으루 붙여주는 역할을 해준다.(테스트 해 본 바로는 <Table> 관련 테그(TR,TD) 안에 들어가서는 적용되지 않았음) [STYLE_01] <table>   <tr>     <td bgcolor="#FF9999">    overflow:hidden;width:300px;white-space:nowrap;text-overflow:ellipsis;">동해물과 백두산이 마르고 닳도록, 하느님이 보우하사 우리나라만세. 무궁화 삼천리 화려강산. 대한사람 대한으로 길이 보존하세     </td>   </tr> … 계속 읽기 overflow, white-space, text-overflow] 자동…