'html' 태그의 글 목록

http://blog.naver.com/snfddl?Redirect=Log&logNo=100103886913

'프로그래밍 > Html' 카테고리의 다른 글

태그의 attribute 값 가져오기, 설정하기. (0)	2013.02.25
html 특수 문자. (2)	2011.05.30
input file 에 value 이용하기. (0)	2010.12.02
textarea style (0)	2010.02.25
Frame 에서 가로 스크롤 없애기. (0)	2010.02.23

[ime-mode의 옵션]

auto : 한/영 변환이 자유로움.

active : 한글 기본, 한/영 변환이 자유로움

inactive : 영문 기본, 한/영 변환이 자유로움

disabled : 영문 기본, 한/영 변환이 안됨, 영문/숫자만 입력 가능

'프로그래밍 > Html' 카테고리의 다른 글

Frame 에서 가로 스크롤 없애기. (0)	2010.02.23
select 태그의 option 값들.. (0)	2009.07.14
tr 의 style - display 불여우(파이어폭스) 문제점 해결.. (0)	2009.02.11
불여우(FireFox)에서 투명효과 사용하기 (1)	2009.02.11
Div Style (0)	2009.02.11

일반적으로 위의 코드처럼 style.display='block' 하고 style.display='none'를 많이들 사용한다.

그러나 <tr> 부분을 지정해두고 block , none을 반복해보면 파이어폭스에서는 이상한 일이 발생하는것을 살펴볼 수가 있다.

여기에서 문제는 block 부분이다. style.display='block'을 style.display='' 이렇게 변경하면 IE와 파이어폭스에서

모두 정상적으로 동작하는것을 볼수있다.

'프로그래밍 > Html' 카테고리의 다른 글

select 태그의 option 값들.. (0)	2009.07.14
HTML INPUT 텍스트박스 한글 영문 숫자 입력설정 (0)	2009.02.11
불여우(FireFox)에서 투명효과 사용하기 (1)	2009.02.11
Div Style (0)	2009.02.11
<DIV> 태그 border 셋팅 (0)	2009.02.11

Cross Browsing 위해 개발중에 찾은 자료이다.
IE에서는 Filter라는 스타일을 통해 투명도를 조절하지만
FF에서는 먹히지 않기에 검색해서 보니 Opacity 속성이 있었다.
이것을 양브라우져간에 공통되게 쓰기 위해서는 약간의 트릭이 필요 하다.

filter:alpha(Opacity:50,style:0);Opacity:.5

원문 : http://nariya.net/blog/entry/불여우에서-투명효과-사용하기

꾸미기를 좋아하시는 분들은 보통 MS Internet Explorer 6(이하 IE)에서 작업을 하시더라구요. 어떠한 이유에서인지 모르겠지만, 아마도 IE가 여러가지 태그 하위 속성에 있는 Style이 Filter라는 비표준(?)적이면서도 '예쁜' 기능을 지원하기 때문이라고 조심스럽게 추측해 봅니다(...)

이번에 제가 들고 온 내용은 IE에서 사용하는 Filter 중에서 Alpha라는 녀석을 Mozila FireFox(이하 불여우)에서도 사용해 보자는 것이랍니다-♬ 사실 Style이라는 태그 하위 속성은 불여우에서도 동일하게 적용되지만, 단지 Filter:xxx의 방식은 사용하지 않기 때문에 IE의 방식대로 하면 의도대로 나타나지 않게 되죠. 그래서 이제부터 그 비밀을 소개하도록 하겠습니다~

위의 ~~헛소리~~는 모두 무시해 주시고 여기서부터 시작~

먼저.. 아래의 그림 두 개를 봐 주세요.
(출연하신분은 Google Talk의 팽귄씨랍니다)

IE를 위한 투명 효과

불여우를 위한 투명 효과

IE에서는 왼쪽의 팽귄씨가 투명하게 보이고, 불여우에서는 오른쪽의 팽귄씨가 투명하게 보이지요? 그럼 이제 여기서 고민(...)에 빠지게 되지요. 웹 사이트를 만드는 사람의 입장에서는 모든 사람들에게 동일한 페이지를 보여주길 원할텐데, 이렇게 브라우저마다 다르게 뜨면 난감하잖아요!(...아닌가ㄱ-)

그렇다면 이런 문제점을 해결하기 위해서 잔머리를 굴려봅시다(!)

위의 두 그림에서 보여지는 소스 가운데 공통적인 부분은 Style이라는 하위 속성을 사용해야 한다는 것이지요? 이 부분을 이용해서 비표준(?) 적인 대안을 만들어 봅시다.

모두(?)를 위한 투명 효과

그.. 그러니까 결국 두가지를 합치는 겁니다!
마치 (a+b)(a+c) = a(b+c) 같은 수학 공식처럼 말이지요ㄱ-
여기서 주의하셔야 할 점은 위에서 푸른 글씨와 붉은 글씨 사이에 볼드 처리 되어 있는 세미콜론(;)을 붙여주셔야 한다는 거에요. 물론 웹 표준이라고는 할 수 없지만, 이런 방법을 블로그 스킨을 만들 때 사용하면 좋겠지요? 이제는 투명한 블로그를 불여우에서도 마음껏 즐기실 수 있습니다♪

'프로그래밍 > Html' 카테고리의 다른 글

HTML INPUT 텍스트박스 한글 영문 숫자 입력설정 (0)	2009.02.11
tr 의 style - display 불여우(파이어폭스) 문제점 해결.. (0)	2009.02.11
Div Style (0)	2009.02.11
<DIV> 태그 border 셋팅 (0)	2009.02.11
table, tr, td 속성 (0)	2009.02.11

overflow: ######;

visible : 레이어 크기를 키워서 출력.

hidden : 레이어 크기만큼 출력.

auto : 내용에 따라 자동 스크롤.

scroll : 스크롤바 생성.

ex) overflow-x:값; overflow-y:값; overflow:값;

position: ######;

static : 기본값.

relative : 하위에 div가 있을 경우엔 하위의 div를 absolute 배열.

absolute : div에 top, right, bottom, left 값을 지정해서 원하는 위치에 고정.

fixed : 스크롤에 상관없이 지정한 위치에 고정.

inherit : 상위에서 지정한 값을 상속.

visibility: ######;

visible : 보임.

hidden : 감춤.

z-index: #; :: #값에 따라 우선순위 정의. (값이 높을 수록 위로)

left: ##px;

top: ##px;

width: ###px;

height: ###px;

text-align: center;

center , left, right ...

background-color: #######;

border-style: ######;

solid , dotted .....

border-color: ######;

border-width: ##px;

border: ###px;

ex) <div id="layer" style="position:absoulte;top:20px;left:20px;widht:200;height:100px;z-index:1;visibility:hidden;overflow:ato;background:#ffcc00">

</div>

'프로그래밍 > Html' 카테고리의 다른 글

tr 의 style - display 불여우(파이어폭스) 문제점 해결.. (0)	2009.02.11
불여우(FireFox)에서 투명효과 사용하기 (1)	2009.02.11
<DIV> 태그 border 셋팅 (0)	2009.02.11
table, tr, td 속성 (0)	2009.02.11
table display Example (0)	2009.02.11

[소스]

<div id="Layer0"
style=" z-index: 1; width: 87px; height: 57px; top: 50px; left: 100px; border: dotted">dotted</div>
<div id="Layer0"
style=" z-index: 1; width: 87px; height: 57px; top: 50px; left: 200px; border: dashed">dashed</div>
<div id="Layer0"
style=" z-index: 1; width: 87px; height: 57px; top: 50px; left: 300px; border: solid">solid</div>
<div id="Layer0"
style=" z-index: 1; width: 87px; height: 57px; top: 50px; left: 400px; border: double">double</div>
<div id="Layer0"
style=" z-index: 1; width: 87px; height: 57px; top: 50px; left: 500px; border: groove">groove</div>

<div id="Layer0"
style=" z-index: 1; width: 87px; height: 57px; top: 150px; left: 200px; border: 1 solid">1 solid</div>
<div id="Layer0"
style=" z-index: 1; width: 87px; height: 57px; top: 150px; left: 300px; border: 2 solid">2 solid</div>
<div id="Layer0"
style=" z-index: 1; width: 87px; height: 57px; top: 150px; left: 400px; border: 3 solid">3 solid</div>

<div id="Layer0"
style=" z-index: 1; width: 87px; height: 57px; top: 250px; left: 200px; border: 1 solid red">1 solid red</div>
<div id="Layer0"
style=" z-index: 1; width: 87px; height: 57px; top: 250px; left: 300px; border: 2 solid yellow">2 solid yellow</div>
<div id="Layer0"
style=" z-index: 1; width: 87px; height: 57px; top: 250px; left: 400px; border: 3 solid blue">3 solid blue</div>

'프로그래밍 > Html' 카테고리의 다른 글

불여우(FireFox)에서 투명효과 사용하기 (1)	2009.02.11
Div Style (0)	2009.02.11
table, tr, td 속성 (0)	2009.02.11
table display Example (0)	2009.02.11
DTD (0)	2009.02.11

웹문서 제작에 가장 숙련도를 요구하는 태그로 TABLE 태그가 있다. 웹문서에서 TABLE 태그는 내용물 전체의 배치를 위한 뼈대를 제공하고, 내용물을 직접 나타내기도 하며, 이미지와 더불어 디자인의 중요한 한 요소를 차지하고 있다. 웹문서 제작에 있어 많은 시간을 들이는 부분이기도 하고 문서 내 태그 중에 대부분을 차지하기도 한다. 실제 서비스되는 웹문서에서 모든 내용물은 테이블 속에 담겨져 있다고 가정하면 된다. 표는 줄(row)과 칸(column) 그리고 셀(cell)로 이루어지고, 셀은 줄과 칸이 만나 이루어진 곳으로 표의 내용이 들어가는 곳을 의미한다.

table 태그는 표의 시작과 끝을 정의하고

tr 태그는 표의 행을 정의하며(table row)

td 태그는 행을 이루는 열을 정의한다(table data).

따라서 위의 태그들은 홀로 사용될 수 없고 <td>~</td>가 모여 <tr>~</tr> 을 구성하고 <tr> ~ </tr>가 모여 </table>~</table> 을 이루게 된다.

가장 간단한 표라도 다음과 같이 한줄 한칸 짜리 표로 이루어지며 표에 들어갈 내용은 <td> ~</td> 사이에만 들어갈 수 있다.

<table>						표
	<tr>				한줄
		<td>		한칸
			표 속에 들어갈 내용은 여기!!!
		</td>
	</tr>
</table>

TABLE Element

align

left \| center \| right 테이블 전체의 수평 정렬 Default : left
예)	<table align="center">

background

uri 테이블 전체의 배경 그림
예)	<table background="../images/bg_hor_line.gif">

bgcolor

테이블의 배경색
예)	<table bgcolor="silver"> , <table bgcolor="#EEEECC">

border

절대 단위, 테이블의 border(테두리) 두께
예)	<table border="3">

height

테이블의 높이
예)	<table height="100%">

width

절대단위 \| 상대단위 테이블 전체의 가로 크기
예)	<table width="600"> , <table width="90%">

nowrap

테이블 전체 셀의 text의 줄바꿈 방지
예)	<table nowrap> , <tr nowrap="nowrap">

cellpadding

절대단위 테이블 Cell border와 Cell 속의 내용물과의 거리, 기본값 1
예)	<table cellpadding="5">

cellspacing

절대단위 테이블 Cell 간의 거리와 Cell과 테이블 border와의 거리, 기본값 2
예)	<table cellspacing="5">

bordercolor

테이블 Cell의 테두리 색
예)	<table bordercolor="lightgreen">

bordercolordark

테이블 우측과 하단의 border 색
예)	<table bordercolordark="red" bordercolorlight="blue">

bordercolorlight

테이블 좌측과 상단의 border 색
예)	<table bordercolordark="red" bordercolorlight="blue">

TR(Table Row) Element

align

테이블 행의 Cell 또는 Cell 들 속의 내용물의 수평 정렬
예)	<tr align="center">

valign

테이블 행의 Cell 또는 Cell 들 속의 내용물의 수직 정렬
예)	<tr valign="baseline">

bgcolor

테이블 행의 Cell 또는 Cell 들 속의 내용물의 배경색
예)	<tr bgcolor="silver"> , <tr bgcolor="#EEEECC">

height

행의 높이
예)	<tr height="25">

width

행의 너비
예)	<tr height="25" width="150">

nowrap

행속의 셀의 text의 줄바꿈 방지
예)	<tr nowrap> , <tr nowrap="nowrap">

bordercolor

행속 Cell 좌우상하의 border 색
예)	<tr bordercolor="red">

bordercolordark

행속 Cell 우측과 하단의 border 색
예)	<tr bordercolordark="red" bordercolorlight="blue">

bordercolorlight

행속 Cell 좌측과 상단의 border 색
예)	<tr bordercolordark="red" bordercolorlight="blue">

TD(Table Data) Element

align

Cell 속의 내용물의 수평 정렬
예)	<td align="center">

valign

Cell 속의 내용물의 수직 정렬
예)	<td valign="baseline">

background

uri 테이블 Cell의 배경 그림
예)	<table background="../images/bg_hor_line.gif">

bgcolor

Cell 속의 내용물의 배경색
예)	<td bgcolor="silver"> , <td bgcolor="#EEEECC">

height

Cell의 높이
예)	<td height="25">

width

Cell의 너비
예)	<td height="25" width="150">

nowrap

Cell 속의 text의 줄바꿈 방지
예)	<td nowrap> , <td nowrap="nowrap">

colspan

수평으로 병합할 column(열)의 개수(span)
예)	<td colspan="3">

rowspan

수직으로 병합할 row(행)의 개수(span)
예)	<td rowspan="2">

테이블 여백 조절하기

cellpadding : 테두리 선과 내용 사이의 여백 조절

cellspacing : 셀과 셀 사이의 여백 조절

cellpadding=0 / cellspacing=0

cellpadding=20 / cellspacing=10

cellpadding=0 / cellspacing=30

'프로그래밍 > Html' 카테고리의 다른 글

Div Style (0)	2009.02.11
<DIV> 태그 border 셋팅 (0)	2009.02.11
table display Example (0)	2009.02.11
DTD (0)	2009.02.11
Div 와 Span (0)	2009.02.11

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>Hiding Information in Rows and Cells Sample</title>
<meta http-equiv="Content-Type" content="text/html; CHARSET=iso-8859-1">
<meta name="AUTHOR" content="InetSDK">
<meta name="MS.LOCALE" content="EN-US">
<meta name="ROBOTS" content="noindex">
<link rel="stylesheet" href="samplesSDKIE4.css" type="text/css">
<style type="text/css">
td {
border: 1px solid;
}
</style>
<script type="text/javascript">
function getPets() {
tblChoice1.style.display="none";
tblChoice2.style.display="";
tblChoice3.style.display="none";
}
function getOthers() {
tblChoice1.style.display="";
tblChoice2.style.display="none";
tblChoice3.style.display="";
}
function getFast() {
tblChoice1_1.style.visibility="visible";
tblChoice2_1.style.visibility="visible";
tblChoice3_1.style.visibility="hidden";
}
function getSlow() {
tblChoice1_1.style.visibility="hidden";
tblChoice2_1.style.visibility="hidden";
tblChoice3_1.style.visibility="visible";
}
function showallRows() {
tblChoice1.style.display="";
tblChoice2.style.display="";
tblChoice3.style.display="";
}
function showallCells() {
tblChoice1_1.style.visibility="visible";
tblChoice2_1.style.visibility="visible";
tblChoice3_1.style.visibility="visible";
}

</script>
</head>

<body>

<div class="body">
<h1>Hiding Information in Rows and Cells Sample</h1>
<p>This example shows use of the <b>display</b> property applied to table rows
and the <b>visibility</b> property applied to table cells. Each button calls
a function that sets the display properties depending on the user's selection.</p>
<p>Displaying cells within a row is dependent on the row being displayed. Accordingly,
displaying a cell with an animal's speed will show only if the corresponding
row is also displayed. </p>
<p>Note that an embedded style sheet sets the <b>td</b> element's style to {border:
1px solid}. </p>
<center>
<table>
  <tr id="tblChoice1">
   <td>Horses</td>
   <td id="tblChoice1_1">Thoroughbreds</td>
   <td>Fast</td>
  </tr>
  <tr id="tblChoice2">
   <td>Dogs</td>
   <td id="tblChoice2_1">Greyhounds</td>
   <td>Fast</td>
  </tr>
  <tr id="tblChoice3">
   <td>Marsupials</td>
   <td id="tblChoice3_1">Oppossums</td>
   <td>Slow</td>
  </tr>
</table>
<p>
<input type="button" style="width: 150px" ="getPets()" value="Show household pets">
<input type="button" style="width: 150px" ="getOthers()" value="Show outdoor pets">
</p>
<p>
<input type="button" style="width: 150px" ="getFast()" value="Show fast animals">
<input type="button" style="width: 150px" ="getSlow()" value="Show slow animals">
</p>
<p>
<input type="button" ="showallCells();showallRows()" value="Refresh">
</p>
</center>
<br>
<br>
<br>
<p class="viewsource">[Right-click and choose View Source from the shortcut
menu.] </p>
<a class="copyright" href="http://www.microsoft.com/isapi/gomscom.asp?TARGET=/info/cpyright.htm">
?2007 Microsoft Corporation. All rights reserved. Terms of use.</a>
</div>

</body>

</html>

'프로그래밍 > Html' 카테고리의 다른 글

<DIV> 태그 border 셋팅 (0)	2009.02.11
table, tr, td 속성 (0)	2009.02.11
DTD (0)	2009.02.11
Div 와 Span (0)	2009.02.11
색상표코드 알아보는 프로그램 (0)	2009.02.11

HTML의 a태그로 만들어진 링크에는, 기본적으로 항상 밑줄(Underline)이 붙습니다.

요즘에는 링크에서 밑줄을 지우는 것이 일반적입니다. 링크에서 밑줄을 삭제하려면

style="text-decoration:none"

이라는 스타일을 지정하면 됩니다. 또는 클래스를 만들어 지정해 주어도 됩니다.

그런데 text-decoration:none 을 지정해도, 아주 복잡한 웹페이지의 경우에는 링크가 없어지지 않는 경우가 있습니다. CSS 속성들이 서로 뒤엉켜 있기 때문입니다. 이때는

!important

이라는 (느낌표+important) 구문을 추가하여 강제로 지정해야 합니다. 다음 예제와 같습니다:

링크 텍스트에서, 언더라인(밑줄) 삭제 예제

파일명: example.html

<html>
<head>
<style type="text/css">

/* 링크에서 밑줄 없애기 */
a.no-uline { text-decoration:none }

/* 마우스 지나갈 때만 삭제 + 강제로 없애기 */
a.noul:hover { text-decoration:none !important }

</style>
</head>

<body>


<a href="http://www.google.co.kr/" style="text-decoration:none">Google 검색</a>

<br />


<a href="http://www.google.co.kr/" class="no-uline">Google 검색</a>

<br />


<a href="http://www.google.co.kr/" class="noul">Google 검색</a>

</body>
</html>

▶▶ HTML-CSS] 마우스 가져갔을 때에만, 밑줄(언더라인) 표시; Mouse Hover Underline

모든 밑줄 한꺼번에 없애는 법: ▶▶ A태그에서 밑줄을 없애려면? 링크 언더라인 지우려면? Link Underline Remove

☞ HTML | CSS | 자바스크립트 JavaScript

'프로그래밍 > Html' 카테고리의 다른 글

Div 와 Span (0)	2009.02.11
색상표코드 알아보는 프로그램 (0)	2009.02.11
border-style (0)	2009.02.11
윈도우 크기 변화에 따른 폼 속성 크기 변경 (0)	2009.02.11
한글 깨짐 현상 (0)	2009.02.11

border-style 은 테두리의 스타일을 지정하는 속성입니다.

선택자{border-style:속성값}

테두리에 색상값을 지정할 때는 위와 같이 border-width 두께 속성과 함께 지정해야 테두리를 확인할 수 있습니다..

네 변의 테두리 색상값을 각각 다르게 설정할 때는 아래와 같이 합니다.

선택자{border-top-style:속성값;border-right-style:속성값;border-bottom-style:속성값;border-left-style:속성값;}

형태를 지정하는 border-style 속성의 속성값

solid (내부가 채워진 선 모양)
ridge (선이 입체적으로 돌출됨)
dotted (점선 모양으로 표시)
dashed (끊어진 선 모양으로 표시)
double (선을 두줄로 표시)
inset (내부가 약간 들어간 듯하게 선을 표시)
outset (바깥으로 돌출된 듯하게 선을 표시)
groove (홈이 파진 듯하게 선을 표시)
none (나타나지 않거나 혹은 기본적인 선 모양)
hidden (모양을 숨김)

'프로그래밍 > Html' 카테고리의 다른 글

색상표코드 알아보는 프로그램 (0)	2009.02.11
css !important (0)	2009.02.11
윈도우 크기 변화에 따른 폼 속성 크기 변경 (0)	2009.02.11
한글 깨짐 현상 (0)	2009.02.11
css 사전. (1)	2009.02.11

행복한 스마일맨 ^^*

html

[링크] html 태그 정리.

'프로그래밍 > Html' 카테고리의 다른 글

HTML INPUT 텍스트박스 한글 영문 숫자 입력설정

'프로그래밍 > Html' 카테고리의 다른 글

tr 의 style - display 불여우(파이어폭스) 문제점 해결..

'프로그래밍 > Html' 카테고리의 다른 글

불여우(FireFox)에서 투명효과 사용하기

'프로그래밍 > Html' 카테고리의 다른 글

Div Style

'프로그래밍 > Html' 카테고리의 다른 글

<DIV> 태그 border 셋팅

'프로그래밍 > Html' 카테고리의 다른 글

table, tr, td 속성

'프로그래밍 > Html' 카테고리의 다른 글

table display Example

'프로그래밍 > Html' 카테고리의 다른 글

css !important

링크 텍스트에서, 언더라인(밑줄) 삭제 예제

'프로그래밍 > Html' 카테고리의 다른 글

border-style

'프로그래밍 > Html' 카테고리의 다른 글

+ Recent posts

티스토리툴바