Eyes Of Siche

프린트시 스타일 달리 적용

Posted at 2008/11/19 14:02
Filed under html & javascript

보통 홈페이지에서 인쇄를 지원할때 인쇄가 안됐으면 하는 요소들이 분명히 있다.프린트 하기 버튼이라든지.. 뭐 그게 뭐든지 간에 프린트 할때 style을 달리 적용할수 있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> eyes of siche </title>
</head>

<body>
<style type="text/css">
    div.head, div.foot { height: 100px; background: red; }
    div.body { height: 200px; }

    @media print {
        div.head, div.foot {display:none;}
    }
</style>
<div class="head">
    머리
</div>
<div class="body">
    본문
</div>
<div class="foot">
    다리
</div>
</body>
</html>

@media print 는 프린트할때의 경우만 따로 스타일을 지정할수 있다.
예제1을 프린트할 경우는 본문 부분만 나온다.

Posted by siche

Tag: css, html, 프린트 스타일
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/105

디자인 셀렉트박스

Posted at 2008/11/18 10:54
Filed under html & javascript

확실하게 크로스브라우징이 되는 것들은 못본 것 같다.
밑에 이 소스는 select box의 style을 따라 같다거나 값을 넘겨준다거나 하는 것은 없다.
값을 넘기려면 type이 hidden인 input 을 만들어서 선택하는 function selecttxt 안에 해당 value를 넣어 주면 될 것이다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> eyes of siche </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { margin:0px; font-size:12px; color:#c2cad8; }
ul { margin:0px; list-style:none; padding:0px; }
a { color:#c2cad8; }
div { width:130px; padding:3px; border:1px solid #000; background-color:#314c7b; }
div.selectlist { position: absolute; top:5px; left:5px; display:none; }
div.selectlist li { padding-bottom:5px; }
div.select { float:left; margin:5px; display: inline; }
</style>
<script type="text/javascript">
<!--
function disblock(obj){
var div = document.getElementById(obj);
div.style.display = 'block';
}
function disnone(obj){
var div = document.getElementById(obj);
div.style.display = 'none';
}
function selecttxt(txt){
var seltxt = document.getElementById('searchseltxt');
seltxt.innerHTML = txt;
disnone('selectlist');
}
//-->
</script>
</head>
<body>
<div id="selectlist" class="selectlist">
<ul>
<li class="start"><a href="javascript:void(0)" onclick="selecttxt('전체검색');">전체검색</a></li>
<li><a href="javascript:void(0)" onclick="selecttxt('검색1');">검색1</a></li>
<li><a href="javascript:void(0)" onclick="selecttxt('검색2');">검색2</a></li>
<li><a href="javascript:void(0)" onclick="selecttxt('검색3');">검색3</a></li>
<li><a href="javascript:void(0)" onclick="selecttxt('검색4');">검색4</a></li>
<li><a href="javascript:void(0)" onclick="selecttxt('검색5');">검색5</a></li>
</ul>
</div>
<div class="select" onclick="disblock('selectlist');">
<span id="searchseltxt">전체검색</span>
</div>
</body>
</html>

모르는 부분은 없을 것이다.
포인트는 선택 했을때 innerHTML로 선택한 값을 보여준다.

Posted by siche

Tag: html, innerHTML, javascript, select, 셀렉트박스
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/104

푸터가 항상 밑에 붙어 있기

Posted at 2008/11/13 16:27
Filed under html & javascript

제목이 말하는 그대로다.
간혹 본문에 바로 밑에 푸터가 붙어 있을 경우 본문 내용이 적어서 푸터와 제일 밑 부분이 텅~~ 비워 질때가 있다.
뭐.. 개개인 취향이 그럴수도 있지만.. 내가 볼때는 영~~ 이상하게 보이더라.
table 로 레이아웃을 잡을때는 뭐 height: 100% 값이 잘 먹고 해서 쉽게 구현을 했지만..
처음 div로 레이아웃을 잡을때 이런 것 조차 왜 이렇게 잡기 힘들던지...
혹시나 도움이 될까 하고 적어 본다~

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> eyes of siche </title>
</head>

<body>
<style type="text/css">
    html, body { height:100%; margin:0; }
    *html .body { height:100%; }
    .head { height: 100px; background: #790000; }
    .body { min-height: 100%; margin-top: -200px; }
        .cnts { float:left; width: 100%; margin-top: 200px; background: #ccc; }
    .foot { clear: both; height: 100px; background: #790000; }
</style>
<div class="head">머리</div>
<div class="body">
    <div class="cnts">본문</div>
</div>
<div class="foot">다리</div>
</body>
</html>

head 의 세로가 100px, body 를 margin-top 에 음수를 넣어서 위로 올린다.
body 밑에 foot 가 붙여야 함으로 foot를 보여주기 위해서 foot 의 세로 값 100px 까지 같이 올려 준다.
고로 margin-top: -200px;
body 안에 cnts 도 같이 올라가므로 이놈은 margin-top: 200px; 만큼 밀어 준다.
head , foot 높이 값이 변하면 body, cnts 의 margin-top 값도 신경써서 수정할수 있도록~

Posted by siche

Tag: css, html, 항상 밑에 있는 푸터
Response: No Trackback , a comment
RSS: http://eos.pe.kr/rss/response/100

Comments List

siche 2008/11/14 00:10 # M/D Reply Permalink

헛... doctype 위 다른 놈이 있어서 그런지... 미리보기 창에는 적용이 안되는군...;;
글거 가서 해보면 될꺼에요~ -_-;

레벨별 태그 추출

Posted at 2008/11/10 11:52
Filed under html & javascript

하코사에서 답변을 해주려고 만들었던 소스 올려 본다.
확인은 IE6.0, IE7.0, FF 에서 확인 하였다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> eyes of siche </title>
</head>

<body>
<style type="text/css">
    .tagsec { width: 300px; border: 1px solid #ccc; padding: 10px; word-spacing: 5px; font-size: 11px; color: #bebebe; font-family: dotum; line-height: 30px; }
    .tagsec a:link, .tagsec a:visited { font-weight: bold; font-size: 12px; white-space: nowrap; color: #a3a3a3; text-decoration:none; }
    .tagsec a:active, .tagsec a:hover {color:#a3a3a3;text-decoration:none}
    .tagsec a.level1 {}
    .tagsec a.level2 { color: #00adc6 !important; }
    .tagsec a.level3 { font-size: 14px !important; color: #006a77 !important; }
    .tagsec a.level4 { padding: 3px; background-color: #3ec1d5; color: #fff !important; font-size: 15px !important; }
</style>
<div class="tagsec">
    <a href="#" class="level2">벽시계</a> |
    <a href="#" class="level4">그림그리기</a> |
    <a href="#" class="level3">사극</a> |
    <a href="#" class="level2">테이블</a> |
    <a href="#" class="level1">스키</a> |
    <a href="#" class="level2">섬여행</a> |
    <a href="#" class="level4">문근영</a> |
    <a href="#" class="level3">건강</a> |
    <a href="#" class="level2">축제</a> |
    <a href="#" class="level2">오븐요리</a> |
    <a href="#" class="level4">야구</a> 
</div>
</body>
</html>

구지 다른 설명은 필요 없을듯..;

Posted by siche

Tag: html, 레벨, 태그
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/96

NOBR tag CSS alternative/analog

Posted at 2008/11/04 18:04
Filed under html & javascript

abstract

Sometimes it is necessary to put series of non-breaking spaces between words, to ensure that browser will not break line. Using multiple   (non-breaking space entity) is quite messy and <NOBR> from older versions of HTML is not defined in XHTML standard. This articles tells about CSS property which can substitute <NOBR> tag

compatible

CSS 2 and higher

Use CSS property "white-space: nowrap" for an element, which should contain non-breaking text.

You could add style class like .nobr and use it later instead of <NOBR> tag:

 
.nobr {white-space: nowrap}

Example:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Empty XHTML 1.0 Strict Document</title>
		<style type="text/css">
		.nobr {white-space: nowrap}	
		</style>
	</head>
	<body>
 
	<p>Test table #1 (word-wrapping):</p>
 
	<table style="width: 100%; margin-bottom: 3em; border: 1px solid black;">
	<tr><td style="width: 1%;">
	Popular keywords: free hosting CSS HTML guide
	tutorial information web-design
	</td>
	<td style="width: 99%; background-color: #CFF;">|</td>
	</tr>
	</table>
 
	<p>Test table #2 (nobr CSS class):</p>
 
	<table style="width: 100%; border: 1px solid black;">
	<tr><td style="width: 1%;">
	<div class="nobr">Popular keywords: free hosting CSS HTML 
	guide tutorial information web-design</div>
	</td>
	<td style="width: 99%; background-color: #CFF;">|</td>
	</tr>
	</table>
 
	</body>
</html>

출처 : http://www.anyexample.com/webdev/css/nobr_tag_css_alternative_analog.xml

Posted by siche

Tag: html, nobr, nowrap, white-space
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/93

문서에 빵구를 내는 태그 <IFRAME>

Posted at 2002/01/01 00:02
Filed under html coding .old ver

아이프레임은 아주 많이 쓰이지요. 프레임과 다르게 웹페이지 전체에 경계를 만들어서 사용 되는 것이 아니라 특정한 부분만 사각형으로 잘라내어서 그 부분에 문서를 연결 할 수 있습니다.

src : 문서 경로
width : 프레임의 가로의 폭 길이
height : 프레임의 세로의 폭 길이
frameboder : 프레임의 경계선 표시
scrolling : 스크롤 제어
marginwight : 프레임의 좌우 여백
marginheight : 프레임의 상하 여백
align : 정렬
name : 프레임 이름

<HTML>
<HEAD>
<TITLE> :+: Eyes Of Siche :+: </TITLE>
</HEAD>
<BODY BGCOLOR="GRAY">
<CENTER>
<IFRAME WIDTH="300" HEIGHT="300" NAME="siche"></IFRAME><P>
<A HREF="http://kr.yahoo.com" TARGET="siche">야후 페이지로 이동</A>
</CENTER>
</BODY>
</HTML>

저는 아이프레임이 처음에 나오는 문서를 설정을 안해 주었는데요. src="문서의 경로" 해주시면 처음 열었을 때 아이프레임에 나올 문서를 설정 할 수 있습니다.

Posted by siche

Tag: html, iframe
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/34

영역을 나누어주는 태그 <FRAMESET>,<FRAME>

Posted at 2002/01/01 00:02
Filed under html coding .old ver

프레임을 나누는 것은 요즘들어 많이 줄어 드렀습니다. 저의 홈페이지 같은 경우도 통 프레임이지요.
하지만 처음 만드시는 분들께서는 자주 사용을 하지요. 프레임을 나누어서 한쪽은 메뉴 한쪽은 내용 이런식으로 만들면 만들기도 편하고 보기도 편합니다. 여기서 <A> 태그의 target 속성을 자세히 알아보죠.

<FRAMESET> 속성 .
cols : 세로 프레임 분할 ( pixel / % / * )
rows : 가로 프레임 분할 ( pixel / % / * )
border : 구분선 표시

<FRAME> 속성 .
src : 문서 연결 경로
name : 프레임 이름
noresize : 구분선의 고정
scrolling : 스크롤의 제어
marginwidth : 좌우 여백 지정
marginheight : 상하 여백 지정

<HTML>
<HEAD>
<TITLE> :+: Eyes Of Siche :+: </TITLE>
</HEAD>
<FRAMESET COLS="150,*">
<FRAME SRC="test01.html">
<FRAMESET ROWS="200,*">
<FRAME NAME="eyes">
<FRAME SCROLLING="YES" NAME="siche">
</FRAMESET>
<BODY>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE> :+: Eyes Of Siche :+: </TITLE>
</HEAD>
<BODY>
<A HREF="http://kr.yahoo.com" TARGET="siche">야후 사이트로 이동</A><P>
<A HREF="test02.html" TARGET="eyes">test 문서로 이동</A><P>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE> :+: Eyes Of Siche :+: </TITLE>
</HEAD>
<BODY>
위쪽 프레임에 나타나지요?<P>
그것은 TARGET을 지정 해주어서 그렇습니다^^<P>
</BODY>
</HTML>

위의 프레임은 세로로 나누어서 그안에서 또 다시 가로로 나눈 것입니다. 이런식으로 몇개 씩이나 나눌 수 있습니다.
나눌 때 "150,*" 이런식으로 적어 주었는데 여기서 '*' 이것은 전부 라는 뜻입니다. 그러니 cols="150,*" 이것은 세로로 나누고 처음 프레임의 폭을 150 으로 설정 하고 그리고 나머지 전부라는 뜻이지요. 그리고 프레임을 보면 알겠지만 오른쪽 밑에 있는 프레임은 스크롤이 나와 있는 것을 보았을 것입니다. 그것은 속성의 SCROLLING="YES" 로 해주었기 때문입니다. 만약에 안쓰게 된다면 그 프레임이 오버 되기전에는 스크롤이 생기지 않습니다. "NO" 라고 설정을 해주면 오버가 되어도 스크롤이 생기지 않겠지요.
이제 진정한 target 을 설정 하였습니다. 링크를 걸 때 프레임의 이름을 써 넣어 주시면 해당 프레임에서 문서이동이 되겠지요.

Posted by siche

Tag: frame, html
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/33

가장 중요한 테이블 (제생각^^;;) <table>,<tr>,<td>

Posted at 2002/01/01 00:02
Filed under html coding .old ver

테이블 태그는 엄청나게 중요합니다. 이 태그를 안쓰고 홈페이지를 만든다면...
때리쳐.-_-; 또한 html중에서 배울때 가장 애먹는 놈입니다. 빳싹 긴장하고 보시죠~

<table> 속성 .
align : 표 정렬 ( left / center / right )
bgcolor : 표 바탕 색 지정
border : 표 경계선의 굵기 ( 픽셀 단위 )
bordercolor : 표 경계선의 색 지정
width : 표 가로의 폭 길이
height : 표 세로의 폭 길이
cellpadding : 셀 내부의 여백 지정
cellspacing : 셀의 구분선 굵기 지정

<tr> <td> 속성.
align : 셀 내부의 가로 정렬 ( left / center / right )
valign : 셀 내부의 세로 정렬 ( top / middle / bottom )
bgcolor : 셀 바탕 색 지정
background : 셀 배경 이미지
width : 셀의 가로 너비
height : 셀의 세로 너비
colspan : 셀이 펼쳐져 있는 열의 수
rowspan : 셀이 걸쳐져 있는 행의 수

<HTML>
<HEAD>
<TITLE> :+: Eyes Of Siche :+: </TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" ALIGN="CENTER" WIDTH="300" BGCOLOR="#FF6512">
<TR><TD>A</TD><TD>B</TD><TD>C</TD></TR>
<TR><TD>D</TD><TD>E</TD><TD>F</TD></TR>
</TABLE><BR>

<TABLE border="1" ALIGN="CENTER" WIDTH="300">
<TR><TD ROWSPAN="2" BGCOLOR="#CC0066">A</TD><TD>B</TD><TD>C</TD></TR>
<TR><TD>E</TD><TD>F</TD></TR>
</TABLE><BR>

<TABLE border="1" ALIGN="CENTER" WIDTH="300">
<TR><TD COLSPAN="2">A</TD><TD>C</TD></TR>
<TR><TD>D</TD><TD>E</TD><td BGCOLOR="#99FF66">F</TD></TR>
</TABLE><BR>

<TABLE border="1" ALIGN="CENTER" WIDTH="300">
<TR><TD>A</TD><TD>B</TD><TD ROWSPAN="2">C</TD></TR>
<TR><TD>D</TD><TD>E</TD></TR>
</TABLE>
</BODY>
</HTML>

표가 어떻게 생성 되는지 설명해 드리겠습니다. 우선 <table> 이라는 태그로 시작을 합니다.
그리고 <tr> 이라는 태그로 하나의 행을 만듭니다. 편하게 가로로 줄을 그린다고 생각 하시면 좋습니다.
그 다음 <td> 라는 태그로 칸을 만드는 거지요. <tr> 태그 안에 <td> 태그가 10개 들어 가면 가로로 칸이 10개가 있는 테이블이 만들어 집니다. 당연히 태그가 시작하면 닫아 주는 태그도 써주셔야지요.
<table> 안에 bgcolor를 설정 하는 것과 <td> 안에 설정 하는 것이 다르다는 것을 느끼세요. <table> 안에 설정하면 table 전체가 <td> 안은 그 해당 되는 셀 안쪽만 색이 입혀 집니다.
colspan 은 가로로 있는 셀과 합쳐 지는 것입니다. 만약 테이블이 한 행으로만 이루어져 있다면 합쳐질 수가 없겠지요? rowspan 도 같습니다. rowspan 은 세로로 있는 셀과 합쳐 지는 것입니다.
이해가 안돼는 분이 여기서 많이 나올꺼라고 예상합니다. colspan 하고 rowspan 이 뭘 어떻게 작용하는지 처음에는 잘 이해가 안돼는데요. 여러번 직접 코딩하시고 보시면 빨리 이해 하실꺼라 믿습니다.

Posted by siche

Tag: html, table
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/32

문서를 이동하는 태그 <A>

Posted at 2002/01/01 00:02
Filed under html coding .old ver

어떤 웹사이트든 문서를 이동하는 것을 이동 하는 걸 보았을 것입니다.
지금 이 강좌도 글을 클릭 하여 들어 왔을 것입니다. 이것은 <A> 태그를 통하여 만들 수 있습니다. 이 태그를 확인을 하려면 적어도 2개의 문서가 필요 하겠지요?
이 <A> 태그가 HTML의 가장 큰 특징이라고 해도 과언이 아닙니다.

href : 문서연결의 경로 지정, 해당 URL 경로 지정
name : 위치이름 ( 책갈피 기능에 쓰인다. )
target : 문서 출력 창 지정 ( _top / _blank / _parent / _self / frame name )
mailto : 전자메일 연결

<HTML>
<HEAD>
<TITLE> :+: Eyes Of Siche :+: </TITLE>
</HEAD>
<BODY>
<A HREF="http://kr.yahoo.com">야후 사이트로 이동</A><P>
<A HREF="test02.html">test 문서로 이동</A><P>
<A HREF="test02.html" TARGER="BLANK">tset 문서를 새창으로 열기</A><P>
<A HREF="mailto:siche@eos.pe.kr">메일 보내기</A>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE> :+: Eyes Of Siche :+: </TITLE>
</HEAD>
<BODY>
이문서는 test02 문서 입니다~~~<P>
&lt;A&gt; 태그 테스트 중입니다.
</BODY>
</HTML>

target 종류에는 _top / _blank / _parent / _self / frame name 이 있다고 위에서 설명 했는데요.
우선 top 이것은 프레임을 사용했을 때 모든 프레임을 무시하고 전체 창으로 문서를 불러 옵니다. blank 는 위의 예제에서 한 것 처럼 새창으로 문서를 불러 오는 것입니다.
parent는 최상위 창으로 문서를 불러 오고 self는 현재 진행 하고 있는 창으로 문서를 불러 옵니다. frame name 은 꼭 이렇게 쓰는 것이 아니라 프레임을 사용했을 때 프레임에 이름을 주어서 그 쪽 프레임으로 문서를 불러 오겠다고 하는 것입니다.
메일을 링크 실킬 때는 그냥 'mailto:자기메일주소' 이렇게 하면 됩니다. 이 링크를 클릭 했을 때는 윈도우에 깔려 있는 아웃룩이 작동을 하지요.

<HTML>
<HEAD>
<TITLE> :+: Eyes Of Siche :+: </TITLE>
</HEAD>
<BODY>
<A NAME="TOP">맨 위쪽 이지요.
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> 
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A HREF="#TOP">최상위로</A>
</BODY>
</HTML>

이것이 바로 책갈피 기능입니다. <A> 태그로 이름을 지정하고 <A> 에서 문서경로를 지정 하는 곳에 # 을 붙이고 아까 지정한 이름을 써 넣어 주시면 됩니다.

Posted by siche

Tag: a, html
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/31

경로의 이해

Posted at 2002/01/01 00:02
Filed under html coding .old ver

경로에는 2가지가 있습니다. 절대 경로와 상대 경로가 있지요.
절대 경로는 절대적인 경로. 그러니깐 예를 들어 야후 사이트, 네이버, 아님 eyes of siche 와 같은 사이트를 링크를 건다고 하면 당연히 절대 경로인 바로 사이트의 주소를 써야겠지요. 하지만 자신의 홈페이지를 만든다고 했을 때의 절대 경로란 예를 들어 c:homeindex.html 이런 식이겠지요. 이런 식으로 자신의 홈페이지를 계정에 올린다면 자신은 그홈페이지를 볼 수 있습니다. 자신의 하드 드라이브 즉, c드라이브 안에 home 이라는 폴더 안에 index.html 라는 파일이 있습니다. 하지만 당신의 홈페이지에 들어 가는 네티즌들의 c드라이브 안에 home 폴더 안에 똑같은 index.html 파일이 들어 있다는 것은 기적입니다. 로또의 확률 보다 엄청나게 다이나믹 하게 적지요....-0-;; 자신의 홈페이지를 계정에 올리는 순간 그 역시 절대 경로가 되지만 그것을 일일이 맞추어 가면서 만들기란 정말 어의가 없는 행동이 아니라고 볼 수 없습니다.
말이 길어 졌는데 이래저래 하여 홈페이지를 만들 때 중요한 상대경로를 자세히 알아 보겠습니다.

만약 위와 같은 경로가 있다고 예를 들겠습니다. index.html 에서 image 폴더 안에 있는 siche.gif 그림 파일을 불러 온다고 합니다. 그럼 <img src="image/siche.gif"> 라고 해야 합니다.
여기서 '/' 이놈은 경로를 나타낼 때 폴더안 이라고 생각 하시면 됩니다. 그럼 my_banner.gif 의 그림 파일을 불러 온다고 하면 <img src="image/banner/my_banner.gif">이지요. 이것은 하위 폴더로 이동할 때였습니다.
그럼 상위 폴더로 이동 하는 것은 어떻게 할까요? banner.html 문서에서 image 폴더안에 있는 siche.gif 그림 파일을 불러 온다고 합시다. 그럼 <img src="../image/siche.gif"> 이렇게 나타낼 수 있습니다. '../' 이놈은 경로를 나타낼 때 바로 한 폴더 위쪽으로 가자 라는 뜻이 지요.
그렇다면 banner.html 에서 tip 폴더 안에 있는 tip.gif 그림 파일을 불러 온다고 한다면 <img src="../tip/tip.gif"> 이렇게 나타낼 수 있습니다.
여기서 가장 중요한 것은 '/' 이놈과 '../' 이놈 입니다. 폴더 안에 안에 안에 계속 해서 들어 가면 '/' 이놈을 계속해서 붙여 주고 폴더 위에 위에 위에 계속해서 올라 가면 '../' 이놈을 붙여 주는 것이지요.

Posted by siche

Tag: html, 경로의 이해
Response: No Trackback , No Comment
RSS: http://eos.pe.kr/rss/response/30

Search Results for 'html'

33 POSTS

프린트시 스타일 달리 적용

디자인 셀렉트박스

푸터가 항상 밑에 붙어 있기

Comments List

레벨별 태그 추출

NOBR tag CSS alternative/analog

문서에 빵구를 내는 태그 <IFRAME>

영역을 나누어주는 태그 <FRAMESET>,<FRAME>

가장 중요한 테이블 (제생각^^;;) <table>,<tr>,<td>

문서를 이동하는 태그 <A>

경로의 이해

Tag Cloud

Categories

Archives

Bookmarks

Recent Posts

Recent Comments

Recent Trackbacks

Calendar

Site Stats

« 2013/05 »
일	월	화	수	목	금	토
			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