검색결과 리스트
HTML에 해당되는 글 51건
- 2011.10.10 텍스트상자를 투명하게
- 2011.10.07 링크에 마우스를 대면 아래위로 선이 그려집니다.
- 2011.10.04 좌,우,중앙정렬되는 메뉴
- 2011.10.02 밑줄그어지는 메뉴
- 2011.09.28 배경이미지 고정하기
- 2011.09.25 이미지의 테두리를 점선으로
- 2011.09.21 글자아래 점선밑줄긋기
- 2011.09.10 이미지 경계선 항상 없애기
- 2011.09.08 깔끔한 주문서
- 2011.09.06 오브젝트 엘리먼트(Object element) HTML 문서에 멀티미디어 삽입(펌)
글
텍스트상자를 투명하게
안녕하세요?
오늘도 간단한 소스입니다. input type="text"의 텍스트 박스를 투명하게 하는 소스입니다.
<table style="width:100;height:100;background-color:red">
<!-- 테이블을 만듭니다. 폭이 100픽셀, 높이도 100픽셀입니다. 배경은 빨간색입니다. -->
<tr><td>
<input type="text" style="width:250px;height:40px;" style="border:1px solid maroon;background:transparent;" value="투명하게">
<!-- 셀에 text상자를 만듭니다. style은 넓이 250픽셀,높이 40픽셀 경계는 1픽셀 solid 즉 실선으로 하고(dotted하면 점선으로 나타납니다. maroon 즉 색깔은 적갈색으로 하고 background를 transparent 투명하게 한다는 내용입니다. value 디폴트 값은 투명하게 라고 표시한다는 것입니다. -->
</td>
</tr>
</table>
설명은 주석을 참고하시기 바라면서 실행결과를 보며 마치겠습니다. 그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| 초보자도 쉽게하는 분석하는 HTML 문서 (0) | 2011.11.30 |
|---|---|
| 입체감있는 텍스트상자들 (0) | 2011.10.14 |
| 링크에 마우스를 대면 아래위로 선이 그려집니다. (0) | 2011.10.07 |
| 좌,우,중앙정렬되는 메뉴 (0) | 2011.10.04 |
| 밑줄그어지는 메뉴 (0) | 2011.10.02 |
글
링크에 마우스를 대면 아래위로 선이 그려집니다.
안녕하세요?
오늘은 링크에 마우스를 대면 아래위로 선이 그려지는 소스입니다. 간단하니깐 한번 보지요.
<HTML>
<HEAD>
<TITLE> Script </TITLE>
<!------ 아래의 코드를 HEAD 부분에 복사해 넣으세요 --------------------
---------->
<style>
a{text-decoration:none}
/*-----마우스를 대면 밑줄과 윗줄을 빨간색으로 보여줍니다 ---------*/
a:hover{text-decoration: underline + overline; color:red;}
</style>
</HEAD>
<BODY>
<center>
<a href="http://blog.naver.com/apolo90"><B>내마음의쉼터</B></a>
</BODY>
</HTML>
style부분을 보시면 text-decoration 즉 글자꾸미기죠. 그게 underline+overline 즉 아래와 위를 color:red 빨간색으로 나타나게 해라 하는 내용이 되겠습니다. 실행결과입니다.
처음 실행했을때
마우스를 갖다 대었을때
그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| 입체감있는 텍스트상자들 (0) | 2011.10.14 |
|---|---|
| 텍스트상자를 투명하게 (0) | 2011.10.10 |
| 좌,우,중앙정렬되는 메뉴 (0) | 2011.10.04 |
| 밑줄그어지는 메뉴 (0) | 2011.10.02 |
| 배경이미지 고정하기 (0) | 2011.09.28 |
글
좌,우,중앙정렬되는 메뉴
안녕하세요?
오늘도 재미있는 메뉴소스입니다. text-align 속성을 left로 주면 왼쪽으로 메뉴가 정렬되고 right를 주면 오른쪽으로 정렬되고 center로 주면 가운데로 정렬됩니다.
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: right; /*set to left, center, or right to align the menu as
desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}
.basictab li a:visited{
color: #2d2b2b;
}
.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}
</style>
<ul class="basictab">
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li class="selected"><a
href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif
Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button
Maker</a></li>
</ul>
실행화면입니다.
'HTML' 카테고리의 다른 글
| 텍스트상자를 투명하게 (0) | 2011.10.10 |
|---|---|
| 링크에 마우스를 대면 아래위로 선이 그려집니다. (0) | 2011.10.07 |
| 밑줄그어지는 메뉴 (0) | 2011.10.02 |
| 배경이미지 고정하기 (0) | 2011.09.28 |
| 이미지의 테두리를 점선으로 (0) | 2011.09.25 |
글
밑줄그어지는 메뉴
안녕하세요?
오늘은 분석이 아니고 괜찮은 소스가 있어서 이렇게 올립니다. 메뉴에 마우스 갖다대면 밑에 밑줄이 그어지는 소스입니다.
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#underlinemenu{
margin: 0;
padding: 0;
}
#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 1px 0;
}
* html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
}
#underlinemenu ul li{
display: inline;
}
#underlinemenu ul li a{
float: left;
color: gray;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
background: white url(media/menudivide.gif) top right repeat-y;
}
#underlinemenu ul li a:hover{
color: black;
background-color: #F3F3F3;
border-bottom: 4px solid black;
padding-bottom: 0;
}
</style>
<div id="underlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS Library">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li>
</ul>
</div>
출처 : www.blueb.co.kr
'HTML' 카테고리의 다른 글
| 링크에 마우스를 대면 아래위로 선이 그려집니다. (0) | 2011.10.07 |
|---|---|
| 좌,우,중앙정렬되는 메뉴 (0) | 2011.10.04 |
| 배경이미지 고정하기 (0) | 2011.09.28 |
| 이미지의 테두리를 점선으로 (0) | 2011.09.25 |
| 글자아래 점선밑줄긋기 (0) | 2011.09.21 |
글
배경이미지 고정하기
안녕하세요?
오늘은 배경에 이미지를 고정시키는 소스입니다. 보통 background로 이미지를 배경처리하면 중복되어서 출력이 됩니다. 근데 이 소스는 배경을 고정시키는 것입니다. 가운데 아래 왼쪽 아래 오른쪽 아래 이런식으로 배경이미지를 고정시키는 겁니다. 그럼 소스를 보시고 한번 영어해석한다 생각하시고 해석하시기 바랍니다.
배경 이미지 고정시키는 기본 소스
<body background="배경이미지주소"bgproperties="fixed">
배경을 가운데에 고정시키는 소스
<style>
body {background-color: #FFFFFF; background-attachment: fixed;
background-image: url(배경이미지주소);
background-repeat: no-repeat; background-position: center bottom}
</style>
배경을 오른쪽에 고정시키는 소스
<style>
body {background-color: #FFFFFF; background-attachment: fixed;
background-image: url(배경이미지주소);
background-repeat: no-repeat; background-position: right bottom}
</style>
배경을 왼쪽에 고정시키는 소스
<style>
body {background-color: #FFFFFF; background-attachment: fixed;
background-image: url(배경이미지주소);
background-repeat: no-repeat; background-position: left bottom}
</style>
예를들면
<style>
body {background-color: #FFFFFF; background-attachment: fixed;
background-image: url("char1.jpg");
background-repeat: no-repeat; background-position: center bottom}
</style>
이런식으로 url("char1.jpg") 이런식으로 주면 그 배경이 background-position이 right bottom이면 오른쪽 아래 left bottom이면 왼쪽 아래, center bottom이면 가운데 아래 이렇게 출력이 됩니다. 중복은 background-repeat:no-repeat 이걸 해석해보면 배경반복-반복없음 이지요. 그래서 배경이 반복해서 나타나는 것을 없애고 한번만 나타납니다.
오늘은 여기까지 그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| 좌,우,중앙정렬되는 메뉴 (0) | 2011.10.04 |
|---|---|
| 밑줄그어지는 메뉴 (0) | 2011.10.02 |
| 이미지의 테두리를 점선으로 (0) | 2011.09.25 |
| 글자아래 점선밑줄긋기 (0) | 2011.09.21 |
| 이미지 경계선 항상 없애기 (0) | 2011.09.10 |
글
이미지의 테두리를 점선으로
안녕하세요?
오늘은 이미지 테두리에 점선을 표시하는 스크립트입니다.
<IMG style="BORDER-RIGHT: gray 1px dotted; BORDER-TOP: gray 1px dotted; BORDER-LEFT: gray 1px dotted; BORDER-BOTTOM: gray 1px dotted" src="char1.jpg" border=0>
그대로 해석하시면 되겠습니다. IMG이미지이고 BORDER-RIGHT 오른쪽 경계선은 gray(회색으로) 1px(1픽셀이고) dotted(점선이다) 이런식으로 왼쪽, 위, 아래 그리고 src는 소스 경로적어주시면 됩니다. border=0 경계선은 없구요. 이해하시겠지요? 그럼 다음시간에 또 만나요.
'HTML' 카테고리의 다른 글
| 밑줄그어지는 메뉴 (0) | 2011.10.02 |
|---|---|
| 배경이미지 고정하기 (0) | 2011.09.28 |
| 글자아래 점선밑줄긋기 (0) | 2011.09.21 |
| 이미지 경계선 항상 없애기 (0) | 2011.09.10 |
| 깔끔한 주문서 (0) | 2011.09.08 |
글
글자아래 점선밑줄긋기
오늘은 글자아래에 점선을 그어서 표시하는 css스타일 소스입니다. 아주 간단하니 한번 보시죠.
<span style="border-bottom:dotted 1px #FF9999;">글자아래에 점선이 표시됩니다.</span>
'HTML' 카테고리의 다른 글
| 배경이미지 고정하기 (0) | 2011.09.28 |
|---|---|
| 이미지의 테두리를 점선으로 (0) | 2011.09.25 |
| 이미지 경계선 항상 없애기 (0) | 2011.09.10 |
| 깔끔한 주문서 (0) | 2011.09.08 |
| 오브젝트 엘리먼트(Object element) HTML 문서에 멀티미디어 삽입(펌) (0) | 2011.09.06 |
글
이미지 경계선 항상 없애기
안녕하세요?
오늘은 이미지파일의 경계선을 0으로 항상 지정하는 소스입니다.
<head>와 </head>사이에
<style type="text/css">
img {border:none}
</style>
이렇게 해주면 된답니다. 말그대로 img {border:none} 이미지 경계 없음 이라는 뜻이죠. 이건 html이 아니고 css인데요. 이것도 알아두면 좋을거 같아서 올려봅니다. 그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| 이미지의 테두리를 점선으로 (0) | 2011.09.25 |
|---|---|
| 글자아래 점선밑줄긋기 (0) | 2011.09.21 |
| 깔끔한 주문서 (0) | 2011.09.08 |
| 오브젝트 엘리먼트(Object element) HTML 문서에 멀티미디어 삽입(펌) (0) | 2011.09.06 |
| 배경음악넣기(bgsound,embed) (0) | 2011.09.04 |
글
깔끔한 주문서
안녕하세요?
오늘은 홈페이지 만들때 주문서 양식을 간단하게 만든 소스를 가져왔습니다. 한번 보시고 홈피에 적용시키면 될거 같습니다. action부분을 바꾸면 아무데서나 다 사용가능합니다. 어떻게 바꾸느냐구요? 그건 asp나 php등을 배우시면 나옵니다. 소스입니다.
<table bgcolor=gold cellspacing=1 cellpadding=3 width=500 align=center>
<form method=post action="mailto:help@jasko.co.kr?subject=주문서" enctype="text/plain" name="f">
<tr height=40>
<td colspan=2><big><b>상품 주문서</b></big></td>
</tr>
<tr bgcolor=white>
<td bgcolor=#f5f5f5 align=right>이름</td>
<td><input type="text" name="이름"></td>
</tr>
<tr bgcolor=white>
<td bgcolor=#f5f5f5 align=right>이메일 주소</td>
<td><input type="text" name="이메일"></td>
</tr>
<tr bgcolor=white>
<td bgcolor=#f5f5f5 align=right>받을곳 우편번호</td>
<td><input type="text" name="우편번호"></td>
</tr>
<tr bgcolor=white>
<td bgcolor=#f5f5f5 align=right>받을곳 주소</td>
<td><input type="text" name="주소" size=40></td>
</tr>
<tr bgcolor=white>
<td bgcolor=#f5f5f5 align=right>전화번호 1</td>
<td><input type="text" name="연락처1"></td>
</tr>
<tr bgcolor=white>
<td bgcolor=#f5f5f5 align=right>전화번호 2</td>
<td><input type="text" name="연락처2"></td>
</tr>
<tr bgcolor=white>
<td bgcolor=#f5f5f5 align=right>상품종류</td>
<td>
<input type="checkbox" name="주문상품" value=모니터>모니터
<input type="checkbox" name="주문상품"value=프린터>프린트
<input type="checkbox" name="주문상품"value=키보드>키보드
<input type="checkbox" name="주문상품"value=마우스>마우스
<input type="checkbox" name="주문상품"value=노트북>노트북
</td>
</tr>
<tr bgcolor=white>
<td bgcolor=#f5f5f5 align=right>색상</td>
<td>
<input type="radio" name="색상" value=빨강>빨강
<input type="radio" name="색상"value=파랑>파랑
<input type="radio" name="색상"value=검정>검정
<input type="radio" name="색상"value=흰색>흰색
<input type="radio" name="색상"value=노랑>노랑
</td>
</tr>
<tr bgcolor=white>
<td bgcolor=#f5f5f5 align=right>수량</td>
<td>
<select name="수량">
<option value=1개>1 개
<option value=2개>2 개
<option value=3개>3 개
<option value=4개>4 개
<option value=5개>5 개
</select>
</td>
</tr>
<tr bgcolor=white>
<td bgcolor=#f5f5f5 align=right>하실말씀</td>
<td><textarea name="하실말씀" rows="10" cols="40"></textarea></td>
</tr>
<tr bgcolor=white>
<td colspan=2>
<input type="submit" value=" 보내기 ">
<input type="reset" value=" 새로작성 ">
</td>
</tr>
<form>
</table>
거의 다 HTML코드입니다. 중요한 부분은 <form method=post action="mailto:help@jasko.co.kr?subject=주문서" enctype="text/plain" name="f"> 이부분인데 action에 메일주소를 적어놨습니다. 폼이 submit되면 즉 submit버튼을 누르면 메일메신저, outlook express등이 뜨서 지정된 메일주소로 메일을 보내는 창이 뜨게됩니다. 만약에 다른 php나 asp파일로 action을 주게되면 그 문서가 열리게 됩니다.
실행결과입니다.
'HTML' 카테고리의 다른 글
| 글자아래 점선밑줄긋기 (0) | 2011.09.21 |
|---|---|
| 이미지 경계선 항상 없애기 (0) | 2011.09.10 |
| 오브젝트 엘리먼트(Object element) HTML 문서에 멀티미디어 삽입(펌) (0) | 2011.09.06 |
| 배경음악넣기(bgsound,embed) (0) | 2011.09.04 |
| 이미지맵 (0) | 2011.09.01 |
글
오브젝트 엘리먼트(Object element) HTML 문서에 멀티미디어 삽입(펌)
| 오브젝트 엘리먼트(Object element) HTML 문서에 멀티미디어 삽입 | |||
|
object element 는 문서내에 플래시나 동영상과 같은 개체(Object)를 삽입하는데 사용됩니다. HTML 문서에 개체를 삽입하는 태그는 여러가지가 있습니다. 동영상과 음악과 같은 멀티미디어를 삽입하는 embed, 자바 애플릿을 삽입하는 applet 엘리먼트 등이 있습니다. 최근의 추세는 object 엘리먼트로 통합되는 방향입니다. embed 와 object 의 차이점 embed 엘리먼트는 개채삽입으로 자신의 컴퓨터에 해당 미디어파일을 실행할수 있는 프로그램이 없다면 실행이 되지 않습니다. 그러나 object 엘리먼트는 웹에서 개채를 로드해서 재생되므로 프로그램이 없어도 실행이 가능합니다. HTML 페이지에 멀티미디어를 추가하는데 embed 엘리먼트도 사용할 수 있지만 embed 엘리먼트를 사용하면 보다 다양한 미디어를 사용 가능합니다. 플래시 삽입
슬라이더 삽입
퀵타임 무비 삽입
| |||
|
리얼 비디오 삽입
|
'HTML' 카테고리의 다른 글
| 이미지 경계선 항상 없애기 (0) | 2011.09.10 |
|---|---|
| 깔끔한 주문서 (0) | 2011.09.08 |
| 배경음악넣기(bgsound,embed) (0) | 2011.09.04 |
| 이미지맵 (0) | 2011.09.01 |
| 메타태그 (0) | 2011.08.30 |
