간단하게 HTML 이나 Script 을 연습하던지... html 파일을 만들지 않고

 

TEST 할 수 있는 연습장으로 보면 됨

 

미리보기 버튼을 누르면 새창으로 인터넷이 뜨면서

 

작성한 스크립트가 실행된다.

 

아래의 상자에 HTML 코드를 입력 한 후 [미리보기] 버튼을 클릭하세요

 

 

 

'IT TIP > Web' 카테고리의 다른 글

MARQUEE 태그  (0) 2017.04.13
HTML Tag 설명  (0) 2017.04.13
정규표현식 - 메타문자 설명  (0) 2017.04.11
마퀴태그는 글자들을 움직이게 하는 재미있는 태그입니다.

<MARQUEE>적고 싶은 말</MARQUEE>
behavior=scrol 일정방향 스크롤  
behavior=slide 반복후 화면끝에서 정지
behavior=alternate 좌우왕복  
scrolldelay=수치 스크롤 지연값을 정해준다. 값을 많이주면 점프하듯 스크롤
scrollamount=수치 스크롤 속도를 정해줌
loop=수치 반복 횟수를 정함. infinite 이면 무한반복   
bgcolor=RGB칼라 스크롤 영역의 배경색을 정함
width=수치 스크롤 영역의 넓이   
height=수치  스크롤 영역의 높이  
direction=reft,right,up,down  왼쪽,오른쪽,위로,아래 방향으로 스크롤
이렇게 넣으면

<MARQUEE behavior=scroll direction=right scrolldelay=10 scrollamount=20 loop=-1>안녕하세요 여러분!!*^.^*재미있죠?</MARQUEE>


안녕하세요 여러분!!*^.^*재미있죠?

<MARQUEE width=190>d^.^b<MARQUEE width=229>
◀-♡-◀</MARQUEE></MARQUEE>

d^.^b ◀ -♡-◀
<MARQUEE bgcolor=white direction=up height=100> 사랑이란.... <br>끝없는<br> 기다림의 연속이다....<br></MARQUEE>   사랑이란....
끝없는
기다림의 연속이다....

<MARQUEE direction=right>ⓘ ⓛⓞⓥⓔ</MARQUEE><MARQUEE direction=reft>ⓨⓞⓤ</MARQUEE> ⓘ ⓛⓞⓥⓔⓨⓞⓤ
<marquee width=229 scrollamount=70><H3>반짝반짝하죠?</marquee>
  

 

반짝반짝 하죠?

<marquee behavior=alternate width=229><font color=blue><strong>왔다갔다.하네요</marquee>
 
왔다갔다.하네요
<marquee direction=up height=50><marquee behavior=alternate > 뛰어다니네요. 하하^^</marquee> 뛰어다니네요.하하^^

 

 

Script 연습장 클릭

 

'IT TIP > Web' 카테고리의 다른 글

HTML / Script 연습장  (0) 2017.04.13
HTML Tag 설명  (0) 2017.04.13
정규표현식 - 메타문자 설명  (0) 2017.04.11

 

 

형 식

구  성

내            용

문서의 기본 구조를 나타내 주는 태그

<HTML>

<HTML>...</HTML>

 HTML 언어로 작성되어 있다는 것을 알려줍니다.

<HEAD>

<HEAD>...</HEAD>

 Heading의 준말로 글의 머리말에 해당합니다.

<TITLE>

<TITLE>...</TITLE>

 타이틀바에 새겨질 글자를 정의합니다.

<BODY>

<BODY>...</BODY>

 본문에 해당하는 부분을 알려줍니다. 

<Hn>

<Hn>...</Hn>

 표제 부분에 들어갈 말을 정의합니다. 1~6까지의 숫자를 사용하고 숫자가 커질수록    표제는 작아집니다.  기본 값은 H4입니다.

<!-...->

<!-주석내용-> 

 주석을 달거나 잠시동안 이미지를 보이지 않게 할 때 사용합니다.

문단 혹은 줄을 바꾸는 태그

<P>

<P>

 문단을 바꾸는 태그입니다. 줄 바꿈과 동시에 줄을 띈 것 같은 효과가 나타납니다.

<BR>

<BR>

 문단을 바꾸는 태그입니다. 줄 바꿈의 역할만을 수행합니다.

<PRE>

<PRE>...</PRE>

 여백이나 줄 간격 등을 고정시켜 주는 역할을 합니다.

글자의 크기를 마음대로 조절하는 태그

<FONT>

<FONT SIZE=n>...</FONT>

 글자의 크기를 마음대로 조절해 줍니다. 뒤의 숫자는 1~7이며 7이 가장  큰 크기입니   다. 기본 값은 3입니다.

선 그리기 태그

<HR>

<HR ARIGN=n

WIDTH=n SIZE=n>

 입체적인 선을 그려줍니다,  ALLIGN은 선의 정렬을 WIDTH는 선의 폭을, SIZE는    선의 높이를 정해줍니다. (※ n=숫자..^^)

목록을 정리해 주는 태그

<LI>

<UL>...</UL>

 순서가 없는 목록으로 일반적인 나열을 말합니다.

<OL>...</OL>

 순서가 있는 목록으로 위에서부터 번호를 매깁니다.

<MENU>...</MENU>

 메뉴 목록으로 그리 길지 않은 문장의 열거에 사용합니다.

<DIR>...</DIR>

 디렉토리 목록으로 메뉴 목록보다 짧은 문장을 나열합니다.

<DL>...</DL>

 정의 목록 태그입니다. <LI>가 아닌 <DT>와 <DD>를 사용합니다.

문서를 가운데로 정렬시켜 주는 태그

<CENTER>

<CENTER>...</CENTER>

 전체 문정을 가운데로 정렬시켜 줍니다.

인용하기 태그

<BLOCKQUOTE>

<BLOCKQUOTE>...

</BLOCKQUOTE>

 문장 내에서 인용을 할 경우 들여 쓰기를 한 후 인용구로 처리합니다.

글자의 모양을 정의해 주는 태그

<STRONG>

<STRONG>...</STRONG>

 굵은 글씨를 나타내 주는 태그입니다.

<B>

<B>...</B>

<EM>

<EM>...</EM>

 이탤릭체의 글씨를 나타내 주는 태그입니다.

<I>

<I>...</I>

<KBD>

<KBD>.../<KBD>

 타자기체의 글씨를 나타내 주는 태그입니다.

<CODE>

<CODE>...</CODE>

<TT>

<TT>...</TT>

배경 이미지 작업하기

<BODY>

<BODY BACKGROUNG="...">

 배경 이미지를 띄워줍니다.

<BODY BGCOLOR="#nnnnnn">

 배경 색깔을 지정해 줍니다.

그 밖의 태그들

<DFN>

<DFN>...</DFN>

 정의되어지는 단어에 대한 것을 말합니다.

<CITE>

<CITE>...</CITE>

 책이나 사진 등의 제목을 말할 때 쓰입니다.

<SAMP>

<SAMP>...</SAMP>

 컴퓨터 상에 메시지를 나타낼 때 쓰입니다.

<VAR>

<VAR>...</VAR>

 이탤릭체로 표현됩니다.

<SUB>

<SUB>...</SUB>

 첨자에 관한 태그입니다.

<SUP>

<SUP>...</SUP>

 윗첨자를 나타냅니다.

<BASEPOINT>

<BASEPOINT>... <BASEPOINT>

 기본적으로 미리 약속된 크기를 다시 정할 때 사용합니다.

부분은 강조해 주는 태그

<BLINK>

<BLINK>...</BLINK>

 글자를 깜박이게 해줍니다.

<U>

<U>...</U>

 글자에 밑줄을 그어줍니다.

연결하기 태그

<A>

<A HREF=“...”>...</A>

 다른 홈페이지와 연결 시켜줍니다.

<A NAME="...">...</A>

 자신의 홈페이지 내에서 연결해 줍니다.

주소 및 편지 쓰기

<ADDRESS>

<ADDRESS>... </ADDRESS>

 주소에 대한 정의를 내려줍니다.

<MAILTO>

<A HREF="MAILTO...">

 편지 쓰기 창을 띄워 줍니다.

 Ex. <A HERF="MAIL TO:THDTJSDN@NETSGO.COM"> 멜을 보내자!!</A>

색상 지정하기

<BODY>

<BODY TEXT="#nnnnnn">...</BODY>

 글자색을 지정합니다.

<BODY LINK="#nnnnnn">...</BODY>

 하이퍼링크의 색을 지정합니다.

<BODY VLINK="#nnnnnn">...</BODY>

 한 번 누른적이 있는 하이퍼링크의 색을 지정합니다.

<BODY ALINK="#nnnnnn">...</BODY>

 누르고 있는 동안의 색을 지정합니다.

이미지 다루기에 필요한 태그

<IMG>

<IMG SRC="...">

 이미지를 정의해줍니다.

<IMG SRC="..." ALIGN=...>

 이미지의 정렬 상태를 나타내 줍니다.

<IMG SRC="..." WIDTH="..." HEIGHT="...">

 이미지의 크기를 조절해 줍니다.

<IMG SRC="..." LOWSRC="...">

 이미지를 JPEG파일로 나타내 줍니다.

<IMG SRC="..."VSPACE= HSPACE=>

 이미지의 여백을 조절해 줍니다.

<IMG SRC="..." BORDER="...">

 이미지의 태두리선을 조절합니다.

<IMG SRC="..." ALT="...">

 이미지가 전송되지 않았을 경우에 글자로 대처해 줍니다.

 

창 만들기 태그

<FRAME>

<FRAMESET>...</FRAMESET>

 창의 기본 틀을 지정합니다.

<FRAMESET ROW= "숙자 혹은 %“>

 위 아래로 나눠줍니다.

<FRAME COLS= “숫자 혹은%”>

 좌우로 나눠줍니다.

<FRAME SRC="..." MARGINHEIGHT="...">

 창에 들어갈 상하 여백을 정의합니다.

<FRAME SCROLLING="...">

 스크롤바를 설정해 줍니다.

<NOFRAMES>...</NOFRAMES>

 프레임이 안보이게 해줍니가.

<FRAME SRC="..." MARGINWIDTH="...">

 창에 들어갈 좌우 여백을 설정해 줍니다.

<SELECT>

<SELECT NAME="...">

 선택 사항 상자를 만들어 줍니다.

<NOBR>

<NOBR>...</NOBR>

 화면 크기에 따라 문단이 바뀌는 것을 방지합니다.

 <WBR>

<WBR>...</WBR>

 위의 태그 안에서 문단을 바꿀 때 사용합니다.

CGI 양식 첨가하기

<FORM>

<FORM>...</FORM>

 양식을 정의 합니다.

<FORM METHOD="..." ACTION="...">

 양식의 방법을 정의합니다.

<TEXT

AREA>

<TEXTAREA NAME="..." ROWS="...">

 글틀 상자를 정의합니다.

<INPUT>

<INPUT TYPE="...">

 어떤 형태로 입력할 것인지를 정의합니다.

<INPUT TYPE="RADIO">

 라디오 단추를 만들어 줍니다.

<INPUT TYPE="CHECKBOX">

 체크 상자를 만들어 줍니다.

<INPUT TYPE="SUBMIT">

 제출 버튼을 만들어 줍니다.

<INPUT TYPE="RESET">

 취소 버튼을 만들어 줍니다.

<SELECT>

<SELECT NAME="..."

 선택 사항 상자를 만들어 줍니다.

표 만들기 태그

<TABLE>

<TABLE BORDER>...</TABLE>

 표의 전체 형식을 나타냅니다.

<TR><TD></TD></TR>

 표 내부에 들어갈 형식을 정의합니다.

<TD COLSRAN=n>

 가로칸을 n만큼 합쳐줍니다.

<TD ROWSPAN=n>

 세로칸을 n만큼 합쳐줍니다.

<TD ALIGN=...>

 표안의 좌우 정렬 방식을 정의합니다.

<TD VALIGN=...>

 표안의 상하 정렬 방식을 정의합니다.

<FONT>

<FONT COLOR="...">...</FONT>

 글자색을 바꾸고 싶은 것으로 마음대로 바꾼다.

 

'IT TIP > Web' 카테고리의 다른 글

HTML / Script 연습장  (0) 2017.04.13
MARQUEE 태그  (0) 2017.04.13
정규표현식 - 메타문자 설명  (0) 2017.04.11

 


메타 문자  설명


 
\v  : 수직 탭


\n  : 개행


\f   : 폼 피드


\r   : 캐리지 리턴


\t   : 탭


\b  : 백스페이스


\d  : [0-9]와 동일한 기능

 

\D  : [^0-9]와 동일한 기능


\w  : [a-zA-Z0-9_]와 동일한 기능

 

\W : [^a-zA-Z0-9_]와 동일한 기능  

 

\s  : [\f\n\r\t\v]와 동일한 기능

 

\S  : [^\f\n\r\t\v]와 동일한 기능 

 

\x  : 16진수 숫자와 일치

 

\0  : 8진수 숫자와 일치

 

+ : 문자가 하나 이상 있으면 일치

 

* : 문자가 없거나, 하나 이상 있으면 일치

 

? : 문자가 없거나, 하나만 있으면 일치

 

 

 

 

정규 표현식(正規表現式, 영어: regular expression, 간단히 regexp[1] 또는 regex) 또는 정규식(正規式)은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다.

 

정규 표현식은 많은 텍스트 편집기와 프로그래밍 언어에서 문자열의 검색과 치환을 위해 지원하고 있으며, 특히 펄과 Tcl은 언어 자체에 강력한 정규 표현식을 구현하고 있다.

 

컴퓨터 과학의 정규 언어로부터 유래하였으나 구현체에 따라서 정규 언어보다 더 넓은 언어를 표현할 수 있는 경우도 있으며, 심지어 정규 표현식 자체의 문법도 여러 가지 존재하고 있다.

 

수많은 프로그래밍 언어가 정규 표현식 기능을 제공하고 있으며, 일부는 펄, 자바스크립트, 루비, Tcl처럼 기본 내장되어 있는 반면 닷넷 언어, 자바, 파이썬, POSIX C, C++ (C++11 이후)에서는 표준 라이브러리를 이용하여 구현한다.

 

그 밖의 대부분의 언어들은 라이브러리를 통해 정규식을 제공한다.

 

링크 - 출처 - 위키백과

 

 

 

 

'IT TIP > Web' 카테고리의 다른 글

HTML / Script 연습장  (0) 2017.04.13
MARQUEE 태그  (0) 2017.04.13
HTML Tag 설명  (0) 2017.04.13

+ Recent posts