'JavaScript / HTML/HTML'에 해당되는 글 8건

  1. 2012.12.07 Style sheet 점과 샤프
  2. 2011.07.28 HTML a link에 javascript 연동
  3. 2010.08.19 HTML Text의 영문을 대문자로 변경
  4. 2010.08.19 IFrame에서 상위 페이지의 필드 값 가져오기
  5. 2009.01.05 HTML 특수 기호 코드
  6. 2009.01.04 Input type의 텍스트와 패스워드 필드 길이가 다를때
  7. 2008.12.27 웹 페이지에 swf 링크 걸기 (1)
2012.12.07 13:53

Style sheet 점과 샤프

css는 웹페이지를 손쉽게 작성하고 수정하는데 아주 긴요한 프로그래밍 언어입니다.
스타일은 가장 친숙한 워드나 한글에서도 찾아볼 수 있습니다. 워드에서 제목을 정하고 그 제목에 스타일을 적용하면 그 스타일은 다른 제목에도 사용할 수가 있습니다. 이 스타일에 대해서 잘 알아두면 다른 프로그램에서도 이해하기 쉽습니다. 문서를 만드는데 스타일을 사용하지 않는 프로그램이 없을 정도입니다. 그만큼 편리하기 때문이죠.

  1. 태그(Tag) : 이것은 html 태그에 대해서 스타일을 재설정하는 것입니다. 예를 들어 제목을 정할때 h1태그를 사용하는데 이것을 사용하면 이 태그로 정해진 크기의 글씨로 나오게 됩니다. 이것에 대해서 색상을 수정하거나 크기를 변경하고자 한다면 h1태그에대해서 설정을 해줍니다. 앞에 클래스스타일이나 아이디스타일과는
    달리 아무것도 안붙입니다. html태그의 모든 태그에 대해서 스타일을 설정할 수가 있습니다.

  2. 클래스(Class) : 이것은 태그 스타일이 아닌 html의 모든 요소에 대해서 스타일을 정합니다. 예를 들면 caption을 넣을 경우 이 이름을 사용하여 클래스를 정합니다. 그러면 웹페이지의 모든 caption은 이 설정대로 표현됩니다. 코드작성시 앞에 . 점을 찍습니다.

  3. 아이디(id) : 아이디의 앞에 샤프(#)를 붙입니다. 이것은 위의 클래스 스타일과는 달리 설정을 하면 어떤 특정한 한 부분에 대해서만 적용을 할 수가 있습니다. 그러니 웹페이지의 한부분에 사용되는 것인 container라든가 content라든가 sidebar라든가 하는 부분에 대해서 설정을 하는 것입니다.

  4. 복합(Compound) : 위에서 말한 것 중에서 이미 적용된 스타일을 수정하여 다른 스타일을 적용하고자 할때 사용합니다. 예를 들어 아이디스타일 안에 h1태그를 다르게 설정하고 싶은 경우 복합스타일을 사용합니다. 예를 들어 container안의 h1태그를 다르게 하고 싶을때 이 스타일을 적용하는데 #container .h1~ 이런 식으로 스타일을 설정하게 됩니다.

페이지 제작할때 제일 처음으로 만드는 것이 body태그이고 그다음이 div태그입니다. body는 페이지 전체이고 네이게이션바나 본문인 content나 sidebar, footer는 div태그를 사용합니다. 이 태그는 가상의 박스라고 생각하면됩니다. 이 안에 이미지가 들어가고 글내용이 들어갑니다.


ul태그는 목록을 만들기 위해 사용합니다. 주로 네이베이션바를 만들때 많이 사용하는데요. 이태그 안에 li태그로 상세 항목을 사용합니다.
 
기본적인 내용을 작성해보면..

<body>
<div id="nav">
    <ul>
        <li><a href="home.htm">Home</a></li>
        <li><a href="products.htm">Products</a></li>
        <li><a href="services.htm">Services</a></li>
        <li><a href="about.htm">About Us</a></li>
    </ul>
</div>
</body>


위 내용에 대해서 스타일을 적용을 하면..

<style type="text/css">
#nav ul {
    list-style: none;         /* nav아이디의 ul태그에 대해서 앞에 작은 네모인 목록마크를 없애줍니다. */
}
#nav ul li {
    text-align: center;       /* li 태그에 대해서 설정해줍니다. */
    float: left;                 
    line-height: 46px;
}
#nav ul li a {               /* 하이퍼링크인 a태그에 대해서 설정합니다. */
    padding: 0 20px;
    display: block;
    padding: 0 15px 0 0;
    margin-right:5px;
    font-size:1.5em;
    text-align: center;
}
#nav ul li a:link, #nav ul li a:visited {      /* 하이퍼링크에서 이미 방문했을 경우 색상을 정합니다. */
    color: #000;
    text-decoration: none;
}
#nav ul li a:hover, #nav ul li a:active {       /* 하이퍼링크에 마우스를 올렸을 경우와 사용중인 경우 설정 */
    color: #F0F;
    text-decoration: none;
}
</style>

위 스타일의 내용을 보면 거의가 복합 스타일을 적용합니다.  그만큼 사용빈도가 많습니다.


[출처] style sheet 점과 샤프...펌

Trackback 0 Comment 0
2011.07.28 18:37

HTML a link에 javascript 연동

JavaScript 부분
<head>
<script type="text/javascript">
function someFunction() {
....
}
</script>
</head>

A Link 부분
<a href="javascript:someFunction();">클릭</a>


[참고] Using Link Tags with JavaScript
Trackback 0 Comment 0
2010.08.19 17:22

HTML Text의 영문을 대문자로 변경

HTML에서 Textbox의 영문을 대문자로 변경하는 방법으로 스타일시트의 text-transform을 사용하면 된다.

스타일시트

.uppercase
{
 text-transform: uppercase;
}


사용법
<input type="textbox" .... class="uppercase" />


여기서 주의할 점은 보여지기만 대문자로 보여질뿐 실제 내용은 소문자로 유지된다. 따라서 실제 데이터를 처리시 대문자로 바꿔줘야 한다.
Trackback 0 Comment 0
2010.08.19 10:42

IFrame에서 상위 페이지의 필드 값 가져오기

웹 프로그래밍을 하면서 IFrame에서 상위 페이지의 값을 가져와야 되는 경우가 발생한다. 이는 자바 스크립트를 이용해 해결할 수 있다.

상위페이지
<html>
<head>
    <title>제목 없음</title>
</head>
<body>
    <form name="TheForm" action="ParentPage.aspx">
        <input type="text"name="name"/>
        <input type="text" name="email"/>
    </form>
    <p>
        <iframe style="width: 500px; height: 300px;" src="Junki.aspx"></iframe>
    </p>
</body>
</html>

IFrame 내부 페이지
<html>
<head>
<title>제목없음</title>
<script type="text/javascript">
function getParentValue( )
{
    var ffrom = parent.document.TheForm;
    var fto = document.TheForm;
    for ( var e = 0; e < ffrom.elements.length; ++e )
    {
        var fld = ffrom.elements[e]; // won't work for checkboxes/radio/selects
        fto.elements[fld.name].value = fld.value;
    }
}
</script>
</head>
<body>
    <form name="TheForm" action="Junki.aspx">
        Name: <input name="name"/><br/>
        EMail: <input name="email"/><br/>
        <input type="button" name="submit" value="값 가져오기" onclick="getParentValue()"/>
    </form>
</body>
</html>

만약 페이지 로드시 가져오고 싶다면 body의 onload에 자바스크립스 메소드를 지정해주면 된다.

Trackback 0 Comment 0
2009.01.05 15:30

HTML 특수 기호 코드

설명

숫자표현

문자표현

기호

eft single quote

 

&lsquo;

right single quote

 

&rsquo;

single low-9 quote

 

&sbquo;

left double quote

 

&ldquo;

right double quote

 

&rdquo;

double low-9 quote

 

&bdquo;

dagger

 

&dagger;

double dagger

 

&Dagger;

per mill sign

 

&permil;

single left-pointing angle quote

 

&lsaquo;

single right-pointing angle quote

 

&rsaquo;

black spade suit

 

&spades;

black club suit

 

&clubs;

black heart suit

 

&hearts;

black diamond suit

 

&diams;

overline, = spacing overscore

 

&oline;

leftward arrow

 

&larr;

upward arrow

 

&uarr;

rightward arrow

 

&rarr;

downward arrow

 

&darr;

trademark sign

&#x2122;

&trade;

unused

&#00;-
&#08;

 

 

horizontal tab

&#09;

 

 

line feed

&#10;

 

 

unused

&#11;

 

 

space

&#32;

 

 

exclamation mark

&#33;

 

!

double quotation mark

&#34;

&quot;

"

number sign

&#35;

 

#

dollar sign

&#36;

 

$

percent sign

&#37;

 

%

ampersand

&#38;

&amp;

&

apostrophe

&#39;

 

'

left parenthesis

&#40;

 

(

right parenthesis

&#41;

 

)

asterisk

&#42;

 

*

plus sign

&#43;

 

+

comma

&#44;

 

,

hyphen

&#45;

 

-

period

&#46;

 

.

slash

&#47;

&frasl;

/

digits 0-9

&#48;-
&#57;

 

 

colon

&#58;

 

:

semicolon

&#59;

 

;

less-than sign

&#60;

&lt;

< 

equals sign

&#61;

 

=

greater-than sign

&#62;

&gt;

> 

question mark

&#63;

 

?

at sign

&#64;

 

@

uppercase letters A-Z

&#65;-
&#90;

 

 

left square bracket

&#91;

 

[

backslash

&#92;

 

\

right square bracket

&#93;

 

]

caret

&#94;

 

^

horizontal bar (underscore)

&#95;

 

_

grave accent

&#96;

 

`

lowercase letters a-z

&#97;-
&#122;

 

 

left curly brace

&#123;

 

{

vertical bar

&#124;

 

|

right curly brace

&#125;

 

}

tilde

&#126;

 

~

unused

&#127;-
&#149;

 

 

en dash

&#150;

&ndash;

em dash

&#151;

&mdash;

unused

&#152;-
&#159;

 

 

nonbreaking space

&#160;

&nbsp;

 

inverted exclamation

&#161;

&iexcl;

¡

cent sign

&#162;

&cent;

¢

pound sterling

&#163;

&pound;

£

general currency sign

&#164;

&curren;

¤

yen sign

&#165;

&yen;

¥

broken vertical bar

&#166;

&brvbar; or &brkbar;

¦

section sign

&#167;

&sect;

§

umlaut

&#168;

&uml; or &die;

¨

copyright

&#169;

&copy;

©

feminine ordinal

&#170;

&ordf;

ª

left angle quote

&#171;

&laquo;

«

not sign

&#172;

&not;

¬

soft hyphen

&#173;

&shy;

­

registered trademark

&#174;

&reg;

?

macron accent

&#175;

&macr; or &hibar;

¯

degree sign

&#176;

&deg;

°

plus or minus

&#177;

&plusmn;

±

superscript two

&#178;

&sup2;

²

superscript three

&#179;

&sup3;

³

acute accent

&#180;

&acute;

´

micro sign

&#181;

&micro;

µ

paragraph sign

&#182;

&para;

middle dot

&#183;

&middot;

·

cedilla

&#184;

&cedil;

¸

superscript one

&#185;

&sup1;

¹

masculine ordinal

&#186;

&ordm;

º

right angle quote

&#187;

&raquo;

»

one-fourth

&#188;

&frac14;

¼

one-half

&#189;

&frac12;

½

three-fourths

&#190;

&frac34;

¾

inverted question mark

&#191;

&iquest;

¿

uppercase A, grave accent

&#192;

&Agrave;

À

uppercase A, acute accent

&#193;

&Aacute;

Á

uppercase A, circumflex accent

&#194;

&Acirc;

Â

uppercase A, tilde

&#195;

&Atilde;

Ã

uppercase A, umlaut

&#196;

&Auml;

Ä

uppercase A, ring

&#197;

&Aring;

Å

uppercase AE

&#198;

&AElig;

Æ

uppercase C, cedilla

&#199;

&Ccedil;

Ç

uppercase E, grave accent

&#200;

&Egrave;

È

uppercase E, acute accent

&#201;

&Eacute;

É

uppercase E, circumflex accent

&#202;

&Ecirc;

Ê

uppercase E, umlaut

&#203;

&Euml;

Ë

uppercase I, grave accent

&#204;

&Igrave;

Ì

uppercase I, acute accent

&#205;

&Iacute;

Í

uppercase I, circumflex accent

&#206;

&Icirc;

Î

uppercase I, umlaut

&#207;

&Iuml;

Ï

uppercase Eth, Icelandic

&#208;

&ETH;

Ð

uppercase N, tilde

&#209;

&Ntilde;

Ñ

uppercase O, grave accent

&#210;

&Ograve;

Ò

uppercase O, acute accent

&#211;

&Oacute;

Ó

uppercase O, circumflex accent

&#212;

&Ocirc;

Ô

uppercase O, tilde

&#213;

&Otilde;

Õ

uppercase O, umlaut

&#214;

&Ouml;

Ö

multiplication sign

&#215;

&times;

×

uppercase O, slash

&#216;

&Oslash;

Ø

uppercase U, grave accent

&#217;

&Ugrave;

Ù

uppercase U, acute accent

&#218;

&Uacute;

Ú

uppercase U, circumflex accent

&#219;

&Ucirc;

Û

uppercase U, umlaut

&#220;

&Uuml;

Ü

uppercase Y, acute accent

&#221;

&Yacute;

Ý

uppercase THORN, Icelandic

&#222;

&THORN;

Þ

lowercase sharps, German

&#223;

&szlig;

ß

lowercase a, grave accent

&#224;

&agrave;

à

lowercase a, acute accent

&#225;

&aacute;

á

lowercase a, circumflex accent

&#226;

&acirc;

â

lowercase a, tilde

&#227;

&atilde;

ã

lowercase a, umlaut

&#228;

&auml;

ä

lowercase a, ring

&#229;

&aring;

å

lowercase ae

&#230;

&aelig;

æ

lowercase c, cedilla

&#231;

&ccedil;

ç

lowercase e, grave accent

&#232;

&egrave;

è

lowercase e, acute accent

&#233;

&eacute;

é

lowercase e, circumflex accent

&#234;

&ecirc;

ê

lowercase e, umlaut

&#235;

&euml;

ë

lowercase i, grave accent

&#236;

&igrave;

ì

lowercase i, acute accent

&#237;

&iacute;

í

lowercase i, circumflex accent

&#238;

&icirc;

î

lowercase i, umlaut

&#239;

&iuml;

ï

lowercase eth, Icelandic

&#240;

&eth;

ð

lowercase n, tilde

&#241;

&ntilde;

ñ

lowercase o, grave accent

&#242;

&ograve;

ò

lowercase o, acute accent

&#243;

&oacute;

ó

lowercase o, circumflex accent

&#244;

&ocirc;

ô

lowercase o, tilde

&#245;

&otilde;

õ

lowercase o, umlaut

&#246;

&ouml;

ö

division sign

&#247;

&divide;

÷

lowercase o, slash

&#248;

&oslash;

ø

lowercase u, grave accent

&#249;

&ugrave;

ù

lowercase u, acute accent

&#250;

&uacute;

ú

lowercase u, circumflex accent

&#251;

&ucirc;

û

lowercase u, umlaut

&#252;

&uuml;

ü

lowercase y, acute accent

&#253;

&yacute;

ý

lowercase thorn, Icelandic

&#254;

&thorn;

þ

lowercase y, umlaut

&#255;

&yuml;

ÿ

Alpha

&Alpha;

Α

alpha

&alpha;

α

Beta

&Beta;

Β

beta

&beta;

β

Gamma

&Gamma;

Γ

gamma

&gamma;

γ

Delta

&Delta;

Δ

delta

&delta;

δ

Epsilon

&Epsilon;

Ε

epsilon

&epsilon;

ε

Zeta

&Zeta;

Ζ

zeta

&zeta;

ζ

Eta

&Eta;

Η

eta

&eta;

η

Iota

&Iota;

Ι

iota

&iota;

ι

Kappa

&Kappa;

Κ

kappa

&kappa;

κ

Lambda

&Lambda;

Λ

lambda

&lambda;

λ

Mu

&Mu;

Μ

mu

&mu;

μ

Nu

&Nu;

Ν

nu

&nu;

ν

Xi

&Xi;

Ξ

xi

&xi;

ξ

Omicron

&Omicron;

Ο

omicron

&omicron;

ο

Pi

&Pi;

Π

pi

&pi;

π

Rho

&Rho;

Ρ

rho

&rho;

ρ

Sigma

&Sigma;

Σ

sigma

&sigma;

σ

Tau

&Tau;

Τ

tau

&tau;

τ

Upsilon

&Upsilon;

Υ

upsilon

&upsilon;

υ

Phi

&Phi;

Φ

phi

&phi;

φ

Chi

&Chi;

Χ

chi

&chi;

χ

Psi

&Psi;

Ψ

psi

&psi;

ψ

Omega

&Omega;

Ω

omega

&omega;

ω

 

Trackback 0 Comment 0
2009.01.04 18:05

Input type의 텍스트와 패스워드 필드 길이가 다를때

일반적으로 HTML로 로그인 페이지를 작성하다 보면 아이디와 패스워드 필드의 길이가 다르다.
이를 해결하는 방법으로 style 속성을 이용해 길이를 정해주면 둘의 길이가 같아진다.

사용 예

<input type="text" style="width:100px;">

<input type="password" style="width:100px;">

Trackback 0 Comment 0
2008.12.27 00:56

웹 페이지에 swf 링크 걸기

게시판이나 홈페이지를 운영하다 보면 swf파일을 보여주고 싶을때가 있을 것이다.
요즘 블로그는 그냥 파일을 올리기만하면 자동으로 보여주지만 부득이하게 직접 링크를 걸어야 할 경우에
아래와 같은 소스를 이용하면 swf 파일을 보여줄 수 있다.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0" width="가로사이즈" height="세로사이즈">
<param name="movie" value="화일이름.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="quality" value="high">
<embed src="화일이름.swf" play="true" loop="true" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" width="가로사이즈" height="세로사이즈"></embed>
</object>

참고로 화일 이름 부분에 웹 링크(예 http://www.tistory/example.swf)를 걸어도 표현이 가능하다.

덧) 이재호님의 질문에 답변 드립니다.
저도 잘 몰라 구글링 해보니깐 다음과 같이 처리하면 된다네요..

<a href="http://www.mydomene.com" target="_blank">

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
      width="728" height="90" title="My SWF object">

          <param name="movie" value="pics/swf/zt_zalet_728x90.swf">

          <param name="quality" value="high">

          <embed src="pics/swf/zt_zalet_728x90.swf" quality="high"
            pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"
            width="728" height="90"></embed>

    </object>

</a>

 
링크는 원문입니다. 
Trackback 0 Comment 1