검색결과 리스트
HTML에 해당되는 글 51건
- 2015.04.16 HTML CSS JQUERY JAVASCRIPT 괜찮은 사이트 발견!!
- 2012.01.03 Table frame속성
- 2011.12.29 이미지맵
- 2011.12.25 html style background-color
- 2011.12.22 HTML style-1
- 2011.12.18 인용문 <blockquote> <q>
- 2011.12.13 글자 꺼꾸로 나타나게 하는 HTML 소스
- 2011.12.08 id,class
- 2011.11.30 초보자도 쉽게하는 분석하는 HTML 문서
- 2011.10.14 입체감있는 텍스트상자들
글
HTML CSS JQUERY JAVASCRIPT 괜찮은 사이트 발견!!
HTML CSS JQUERY JAVASCRIPT 괜찮은 사이트 발견!!
http://www.w3schools.com
HTML5와 CSS3까지 예제와 예제를 직접 보면서 편집해서 결과를 바로 볼수 있는 Try it yourself까지 있습니다. 간만에 괜찮은 사이트 발견한거 같습니다. 하나씩 보면서 따라해보시면 정말 재미도 있고 도움이 많이 되실거 같습니다. 태그도 정리되어 있더군요. 그럼 즐겁게 홈페이지공부해서 만들어 보세요~~
'HTML' 카테고리의 다른 글
| Table frame속성 (0) | 2012.01.03 |
|---|---|
| 이미지맵 (0) | 2011.12.29 |
| html style background-color (0) | 2011.12.25 |
| HTML style-1 (0) | 2011.12.22 |
| 인용문 <blockquote> <q> (0) | 2011.12.18 |
글
Table frame속성
안녕하세요?
오늘은 테이블에 프레임속성을 주는 그런 소스가 되겠습니다. 테이블 속성으로는 경계를 정하는 border 속성이 있을수 있겠고 또 정렬을 주는 align도 있겠습니다. 오늘은 그 중에 frame속성입니다. 이것은 예를들어 <table frame="above">를 주면 그 테이블은 셀위에만 줄이 그어진 형태가 되는 것입니다. 자세한 것은 예제를 보시면 이해가 빠르실겁니다.
<html>
<body>
<p>
<b>Note:</b>
If you see no frames/borders around the tables below, your browser does not support
the "frame" attribute.
</p>
<h4>With frame="border":</h4>
<table frame="border"> <!-- 경계가 있습니다. box형이랑 비슷합니다. -->
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="box":</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="void":</h4> <!-- 선이 아무것도 나타나지 않습니다. -->
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="above":</h4>
<table frame="above"> <!-- 셀위에만 선이 그어집니다. -->
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="below":</h4>
<table frame="below"> <!-- 셀 아래에만 선이 그어집니다. -->
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="hsides":</h4>
<table frame="hsides"> <!-- 가로줄만 그어집니다. -->
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="vsides":</h4>
<table frame="vsides"> <!-- 세로줄만 그어집니다. -->
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="lhs":</h4> <!-- 왼쪽선만 그어집니다.
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="rhs":</h4> <!-- 오른쪽 선만 그어집니다. -->
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
테이블은 잘 아시리라 생각하고 frame속성에 따라서 테이블이 다르게 그려집니다. 주석을 참고하시고 결과를 보시면 더 잘 이해하시겠지요?
Note: If you see no frames/borders around the tables below, your browser does not support the "frame" attribute.
With frame="border":
| First | Row |
| Second | Row |
With frame="box":
| First | Row |
| Second | Row |
With frame="void":
| First | Row |
| Second | Row |
With frame="above":
| First | Row |
| Second | Row |
With frame="below":
| First | Row |
| Second | Row |
With frame="hsides":
| First | Row |
| Second | Row |
With frame="vsides":
| First | Row |
| Second | Row |
With frame="lhs":
| First | Row |
| Second | Row |
With frame="rhs":
| First | Row |
| Second | Row |
이해하시겠지요? 그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| HTML CSS JQUERY JAVASCRIPT 괜찮은 사이트 발견!! (0) | 2015.04.16 |
|---|---|
| 이미지맵 (0) | 2011.12.29 |
| html style background-color (0) | 2011.12.25 |
| HTML style-1 (0) | 2011.12.22 |
| 인용문 <blockquote> <q> (0) | 2011.12.18 |
글
이미지맵
안녕하세요?
오늘은 이미지맵을 공부해보겠습니다. 이미지맵은 풀이하면 그림지도이지요. 그림을 지도라고 생각하고 지정한 위치를 눌렀을때 그 위치에 해당하는 명령을 실행하는 것입니다. 다음 예를 보시죠.
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<!-- img를 지정하고 usemap="#planetmap"이라고 이미지를 이미지맵으로 사용하게다고 얘기합니다.-->
<map name="planetmap">
<!-- map태그로 이미지맵을 설정합니다 -->
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<!-- shape="rect"는 사각형 영역을 얘기합니다. 그래서 coords즉 좌표 (0,0)-(82,126)의 사각형영역을 눌렀을때 alt설명은 Sun이라는 풍선도움말을 보여주고 href="sun.htm" 링크를 sun.htm으로 해서 클릭했을때 sun.htm파일이 읽어지도록 하는 것입니다. -->
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<!-- shape="circle"은 원모양의 영역으로 중심 90,58 반지름 3인 지점을 클릭하면 mercur.htm파일로 이동을 하게 됩니다. -->
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
<!-- 위와 마찬가지입니다. -->
</map>
</body>
</html>
주석을 보시면 이해가 되시지요? 직접 실행해 보시면 더 이해가 빠를것입니다. 이 소스를 실행하시려면 planets.gif파일과 sun.htm, mercur.htm, venis.htm 파일이 필요합니다.
<planets.gif> 입니다.
sun,,mercur,venis.htm 파일은 직접 작성해서 해보세요~
그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| HTML CSS JQUERY JAVASCRIPT 괜찮은 사이트 발견!! (0) | 2015.04.16 |
|---|---|
| Table frame속성 (0) | 2012.01.03 |
| html style background-color (0) | 2011.12.25 |
| HTML style-1 (0) | 2011.12.22 |
| 인용문 <blockquote> <q> (0) | 2011.12.18 |
글
html style background-color
안녕하세요?
오늘은 문서의 배경색과 글자의 배경색을 지정하는 스타일이 되겠습니다.
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
<body style> 은 body즉 문서전체의 스타일을 얘기합니다. 그래서 background-color:yellow 이렇게 해주면 배경색을 노란색으로 하는 문서가 되겠습니다. 그다음에는 <h2 style>이 나오는데 h2는 아시다시피 헤딩이지요. 글자형식을 h2로 쓰고(hx에서 x가 클수록 글자가 작습니다.) 스타일에서 background-color:red 즉 빨간색으로 글자의 배경색을 설정합니다. 그다음에는 <p style>이지요. p는 문단을 얘기하지요. 그래서 문단의 background-color:green 배경색을 초록색으로 한다는얘기가 되겠습니다. 이해되시지요?
이렇게 style로 하지 않고 그냥 <body bgcolor=yellow>이렇게 해도 되지만 h2나 p태그에 배경색을 주는 HTML이 없기때문에 style을 거기에 사용하면 된다는 거지요.
실행은 직접 해보시기 바라며 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| Table frame속성 (0) | 2012.01.03 |
|---|---|
| 이미지맵 (0) | 2011.12.29 |
| HTML style-1 (0) | 2011.12.22 |
| 인용문 <blockquote> <q> (0) | 2011.12.18 |
| 글자 꺼꾸로 나타나게 하는 HTML 소스 (0) | 2011.12.13 |
글
HTML style-1
안녕하세요?
오늘은 style 첫번째로 글자폰트와 색깔,그리고 크기를 지정하는 스타일과 문서배경색을 지정하는 스타일입니다. 다음은 소스입니다. 주석을 보시면 이해가 빠를겁니다.
<html>
<body style="background-color:PowderBlue;">
<!-- body즉 문서의 속성입니다. background배경이죠. color색깔을 PowderBlue로 지정한다는 얘깁니다. -->
<h1>Look! Styles and colors</h1>
<!-- h1은 제목서체로 제일 큰 제목입니다. hx에서 x가 클수록 글자크기가 작아집니다. -->
<p style="font-family:verdana;color:red;">
<!-- font-family는 어떤폰트를 사용할지 폰트종류가 되겠습니다. verdana폰트로 color색깔은 red빨간색으로 한다는 얘깁니다. -->
This text is in Verdana and red</p>
<p style="font-family:times;color:green;">
<!-- 똑같습니다. 단지 종류는 times이고 색깔은 녹색입니다. -->
This text is in Times and green</p>
<p style="font-size:30px;">This text is 30 pixels high</p>
<!-- font-size는 폰트의 크기입니다. 30px는 30픽셀이지요 픽셀은 화면에서 점하나가 1픽셀이 됩니다. 그러니깐 30픽셀은 점30개크기가 되겠지요. -->
</body>
</html>
실행결과화면
Look! Styles and colors
This text is in Verdana and red
This text is in Times and green
This text is 30 pixels high
어떻습니까? 별로 어렵지 않지요? 이 style을 제대로 하면 멋진 문서를 만들수 있습니다. 그럼 다음시간에 또 만나요.
'HTML' 카테고리의 다른 글
| 이미지맵 (0) | 2011.12.29 |
|---|---|
| html style background-color (0) | 2011.12.25 |
| 인용문 <blockquote> <q> (0) | 2011.12.18 |
| 글자 꺼꾸로 나타나게 하는 HTML 소스 (0) | 2011.12.13 |
| id,class (0) | 2011.12.08 |
글
인용문 <blockquote> <q>
안녕하세요?
오늘은 인용문을 HTML 문서에 넣은 법입니다. 긴인용문은 <blockquote></blockquote>로 둘러싸면 되고 이때 아래 예에서와 같이 앞에서 좀 띄워져서 나타나게 됩니다. 짧은 인용문은 <q></q>로 하면되고 "(따옴표)가 앞뒤에 붙게 된다고 하네요.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
A long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
<p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also inserts margins.</p>
A short quotation:
<q>This is a short quotation</q>
<p><b>Note:</b> The browser inserts quotation marks around the short quotation.</p>
</body>
</html>
실행결과
A long quotation:
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
Note: The browser inserts white space before and after a blockquote element. It also inserts margins.
A short quotation: This is a short quotation
Note: The browser inserts quotation marks around the short quotation.
출처 : w3schools.com
'HTML' 카테고리의 다른 글
| html style background-color (0) | 2011.12.25 |
|---|---|
| HTML style-1 (0) | 2011.12.22 |
| 글자 꺼꾸로 나타나게 하는 HTML 소스 (0) | 2011.12.13 |
| id,class (0) | 2011.12.08 |
| 초보자도 쉽게하는 분석하는 HTML 문서 (0) | 2011.11.30 |
글
글자 꺼꾸로 나타나게 하는 HTML 소스
HTML소스분석할려고 검색하다가 발견한 사이트에서 재밌는 것이 있길래 가져왔습니다. 이런기능이 있는지는 처음알았습니다. 별로 어렵진 않으니깐 그냥 함 보세요. <bdo dir="rtl"> 처음보는건데 글자를 거꾸로 출력되네요.
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
<결과화면>
출처 : www.w3schools.com
'HTML' 카테고리의 다른 글
| HTML style-1 (0) | 2011.12.22 |
|---|---|
| 인용문 <blockquote> <q> (0) | 2011.12.18 |
| id,class (0) | 2011.12.08 |
| 초보자도 쉽게하는 분석하는 HTML 문서 (0) | 2011.11.30 |
| 입체감있는 텍스트상자들 (0) | 2011.10.14 |
글
id,class
id 는 스타일을 반복적으로 사용하지 않고 웹페이지에서 한번만 사용할 때 쓰이며
class 는 동일한 스타일을 웹페이지내에서 반복적으로 사용할 때 사용합니다.
id 를 사용할려면 CSS에서 id명 앞에 "#"(=샵)을 붙여야 하고(ex: #test) 호출할 때는 id="test" 이런식으로 하시면 됩니다.
class 를 사용할려면 CSS에서 class명 앞에 "."(=마침표)을 넣어야 하고(ex: .test) 호출할 때는 class="test" 이런식으로 하시면 됩니다.
아래 참고소스에서
id는 테이블을 가운데 정렬 하는 #layout_wrap 이 id와 배경색이 서로 다른 class 즉 .td_color1 과 .td_color2를 반복적으로 사용한 예입니다.
▼ 참고소스:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<style type="text/css">
<!--
body { text-align:center; }
#layout_wrap { margin:0 auto; text-align:left; width:500px; }
.td_color1 { background:#00f; }
.td_color2 { background:#f00; }
}
-->
</style>
</head>
<body>
<div id="layout_wrap">
<table cellspacing="0" cellpadding="0">
<tr>
<td width="500" height="20" class="td_color1"></td>
</tr>
<tr>
<td height="20" class="td_color2"></td>
</tr>
<tr>
<td height="20" class="td_color1"></td>
</tr>
<tr>
<td height="20" class="td_color2"></td>
</tr>
<tr>
<td height="20" class="td_color1"></td>
</tr>
<tr>
<td height="20" class="td_color2"></td>
</tr>
<tr>
<td height="20" class="td_color1"></td>
</tr>
</table>
</div>
</body>
</html>
출처 : http://design123.kr/bs/40597
실행화면
class="td_color1와 class="td_color2를 반복해서 셀에 적용하고 있는것을 볼수 있네요.
'HTML' 카테고리의 다른 글
| 인용문 <blockquote> <q> (0) | 2011.12.18 |
|---|---|
| 글자 꺼꾸로 나타나게 하는 HTML 소스 (0) | 2011.12.13 |
| 초보자도 쉽게하는 분석하는 HTML 문서 (0) | 2011.11.30 |
| 입체감있는 텍스트상자들 (0) | 2011.10.14 |
| 텍스트상자를 투명하게 (0) | 2011.10.10 |
글
초보자도 쉽게하는 분석하는 HTML 문서
| 초보자도 쉽게하는 분석하는 HTML 문서 | | |
HTML은 인터넷 표준언어로서 거의 모든 웹페이지가 HTML 형식으로 작성되어 있습니다.
인터넷을 다양한 용도로 사용하면서 HTML태그는 홈페이지 제작을 위한 프로그래머 뿐 아니라 단순 이용자들도 알고 있으면 여러모로 편리합니다.
HTML태그 사용과 분석이 필요한 사람은?
1. 게시판에 멋진 그림과 TEXT를 꾸미고자 하는 분
2. 다른 소스에서 이미지나 플래쉬를 가져오고 싶은 분
3. 쇼핑몰 및 홈페이지 운영자
4. 인터넷 사업 홍보하시는 분
인터넷 초보자가 알아 두어야 할 HTML태그와 소스분석을 알아보겠습니다.
전문적인 컴퓨터 강사가 아니라 용어에 부족한 점이 있더라도 이해해 주시기 바랍니다.
아래의 내용은 HTML문서에 구성되는 기본적인 태그들입니다.
예제1 - 문서의 구조
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="성공,부업,창업">
<META NAME="Description" CONTENT="성공으로 가는 길">
</HEAD>
<BODY>
내용삽입
</BODY>
</HTML>
[예제1 분석]
모든 HTML문서는 <HTML>로 시작해서 </HTML>로 끝납니다. HTML태그는 쌍으로 사용하는 태그들이 많이 있습니다.
쌍으로 사용할때는 태그이름앞에 '/'을 사용합니다. '/'가 붙은 태그가 보인다면 사용된 태그의 끝을 의미한다고 보시면 됩니다.
HTML태그는 대문자 또는 소문자를 사용하며 시작태그가 대문자면 끝나는 태그도 대문자로 적는 것이 좋습니다.
<HTML>와 </HTML> 문서 사이에는 <HEAD></HEAD><BODY></BODY>태그가 존재합니다.
<HEAD>와 </HEAD> 사이는 웹페이지에는 보여지지 않지만 웹문서의 중요한 정보가 들어 갑니다.
<BODY>와 </BODY> 사이에는 웹페이지에 뿌려질 실제 내용을 입력합니다.
우리가 웹페이지에 보는 모든 내용은 <BODY>와 </BODY> 사이에 있는 내용이라고 보시면 됩니다.
<TITLE></TITLE>태그는 <HEAD>와 </HEAD>사이에 기록하며 문서의 타이틀을 적습니다.
<META>태그는<HEAD>와 </HEAD>사이에 기록하면 문서의 일반정보, 검색엔진 등록정보등을 수록하게 됩니다. 불필요한 경우 삭제해도 무방합니다.
웹사이트 분석시 가장 자주 보게 되는 곳은 <BODY>와 </BODY>사이입니다.
글씨나 이미지 등이 여기에 포함되어 있습니다.
위 문자은 매우 간단하지만 매우 장문으로 이루어진 HTML문서도 많습니다.
그런 문서는 대부분 테이블을 많이 사용합니다.
예제2 - 테이블의 구조
<TABLE>
<TR>
<TD>내용삽입</TD>
</TR>
</TABLE>
[예제2 분석]
테이블은 워드작성시 표의 역활과 유사합니다.
테이블은 <TABLE>로 </TABLE>로 끝나며 <TD>와 </TD> 사이에 내용이 입력되어 있습니다.
예제2_1
<TABLE>
<TR>
<TD>내용삽입1</TD>
<TD>내용삽입2</TD>
</TR>
</TABLE>
[예제2_1 분석]
웹사이트를 좌측과 우측으로 나눠서 내용을 삽입합니다.
예제2_2
<TABLE>
<TR>
<TD>내용삽입1</TD>
<TD>내용삽입2</TD>
</TR>
<TR>
<TD>내용삽입3</TD>
<TD>내용삽입4</TD>
</TR>
</TABLE>
[예제2_2 분석]
좌측/우측으로 2줄에 걸쳐서 내용을 삽입니다.
예제2_3 - 이중 테이블
<TABLE>
<TR>
<TD>
<TABLE>
<TR>
<TD>내용삽입</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
[예제2_3 분석]
테이블 속에 테이블이 있는 경우입니다. 또는 이중, 3,4,5 중의 테이블로 구성될 경우 매우 복잡해 집니다. 위 문서는 매우 간단하지만 실제 웹사이트 제작시 문서는 HTML태그와 문서내용으로 매우 길게 이루어져 있어서 테이블의 소스를 분석은 시작테이블(<TABLE>)과 끝나는(</TABLE>)의 위치를 파악해 보면 됩니다.
# 테이블 소스를 분석해야 하는 이유는 자신이 직접 배너를 삽입한다거나 로그분석프로그램을 설치할 경우 또는 다양한 경우가 있을 수 있습니다.
예제3 - 이미지 삽입하기
1. <IMG SRC="http://www.naver.com/logo.gif">
2. <IMG SRC="http://www.naver.com/logo.gif" ALT="네이버" WIDTH="200" HEIGHT="60" BORDER=1>
[예제3 분석]
HTML 문서에 이미지를 삽입할려면 위와 같이 <IMG>태그를 넣으면 됩니다.
'SRC', 'ALT', 'WIDTH', 'HEIGHT'는 파라메터라고합니다.
'SRC'는 이미지가 있는 주소를 기록합니다.
'ALT'는 이미지 설명(주석)이라고 보시면 됩니다.
'WIDTH'는 이미지의 가로크기를 적습니다.
'HEIGHT'는 이미지의 세로크기를 적습니다.
'ALT', 'WIDTH', 'HEIGHT' 는 삭제해도 무방합니다.
그러나 'WIDTH', 'HEIGHT'는 많이 되고 있습니다.
이미지에 테두리를 치고 싶다면 BORDER="1"을 삽입하면됩니다. 없애고 싶은면 0을 넣습니다. ( 많이 이용되는 기술 ... )
예제4 - 링크 걸기
<A HREF="http://www.naver.com" TARGET="">
<IMG SRC="http://www.naver.com/logo.gif" ALT="네이버" WIDTH="200" HEIGHT="60">
</A>
[예제4 분석]
<A>와 </A>사이에 링크될 텍스트나 이미지를 삽입합니다.(위내용은 이미지 삽입)
<A>태그는 링크될 주소를 입력할 'HREF'파라미터가 존재합니다.
'TAGET'파라미터는 링크로 이동할때 기존페이지로 이동할 것인지 새창을 뛰우면서 이동할 것인지를 선택할 수 있습니다.
보통은 'TARGET'은 사용하지 않아도 무방합니다. 하지만 새창 뛰우면서 이동하기 할 경우는 TARGET="_blank"를 써주면 됩니다. (많이 사용되는 기술중 하나)
예제5 - 텍스트 꾸미기
1. 안녕하세요? ( 전혀 꾸미지 않은 상태입니다. )
2. <FONT SIZE="1">안녕하세요?</FONT> (가장 작은 글씨입니다.)
3. <FONT SIZE="3">안녕하세요?</FONT> (중간 글씨 크기입니다. 보통크기는 별도로 SIZE를 파라미터를 사용하지 않습니다.)
4. <FONT SIZE="7">안녕하세요?</FONT> (가장 큰 글씨입니다.)
5. <FONT COLOR="RED">안녕하세요?</FONT> ( COLOR은 색상을 표기합니다.)
6. <B>안녕하세요</B> ( 글씨를 굵게 합니다. )
7. <I>안녕하세요</I> ( 글씨를 이태릭체로 바꿉니다. )
8. <U>안녕하세요</U> ( 글씨에 밑줄을 칩니다. )
예제5_1 - 복합적인 폰트 태그
<FONT SIZE="4" COLOR="BLUE"><B><U>안녕하세요</U> 반갑습니다.</B></FONT>
[예제5-1 분석] 태그는 위와 같이 복합적으로 사용되곤 합니다.
태그분석 TIP
1. 태그사용은 키보드의 복사하기(CTrl+C키)/붙여넣기(CTrl+V)를 사용하면 초보자는 매우 편리하고 빠를 겁니다.
2. 다른 홈페이지의 태그를 보고 싶다면 브라우저에서 '보기' 클릭 후 '소스'를 클릭하면 소스를 확인할 수 있습니다. 또는 오른쪽 마우스 클릭 후 '소스'를 선택하시면 딥니다. ( 일부 웹사이트는 볼 수 없는 경우도 많이 있습니다. )
3. 소스분석시 HTML문서를 불러와서 '찾기(CTrl+F)'를 잘 활용하면 빠르게 HTML문서의 원하는 위치를 찾을 수 있을 겁니다.
4. 보통 프로그래머는 소스보기가 편한 소스편집 전용프로그램을 사용합니다. 울트라에디터, 에디터플러스, HTML전용 편집 프로그램 등도 있습니다.
※ 기타 많이 사용되는 태그들
1. <style>내용</style> 이 태그는 <head></head>사이에 위치하며 글꼴, 폰트크기, 테이블 등 웹페이지 전반에 걸치는 속성을 미리 지정하는 것입니다.
2. <javascript>내용</javascript> 이 태그 사이에는 자바스크립트가 포함되어 있습니다.
주로 <head></head>사이에 위치하지만 웹페이지 어느위치에든 삽입할 수 있습니다.
3. <object>내용</object>에는 주로 플래쉬, 동영상이 삽입됩니다
출처 : 네이버카페
'HTML' 카테고리의 다른 글
| 글자 꺼꾸로 나타나게 하는 HTML 소스 (0) | 2011.12.13 |
|---|---|
| id,class (0) | 2011.12.08 |
| 입체감있는 텍스트상자들 (0) | 2011.10.14 |
| 텍스트상자를 투명하게 (0) | 2011.10.10 |
| 링크에 마우스를 대면 아래위로 선이 그려집니다. (0) | 2011.10.07 |
글
입체감있는 텍스트상자들
안녕하세요?
오늘은 input박스와 textarea를 입체감있게 보이게 하는 소스입니다.
<html>
<head>
<title>http://www.blueb.co.kr</title>
<style>
input, textarea{
background-color:#FFFFFF;
background-image:url("inputBG.gif");
background-position:left top;
background-repeat:no-repeat;
border:1px #AAAAAA solid;
padding-top:5px;
font-family:tahoma;
font-size:12px;
color:#777777;
}
</style>
<!--영어해석하면 됩니다. input과 textarea에 style을 적용시키는데 background-color 배경색은 #FFFFFF즉 흰색이고 background-image 배경이미지는 inputBG.gif이고 position은 left top 왼쪽 위이고 no-repeat이니깐 반복해서 보이게 하지 않고 border경계는 1px 1픽셀의 #AAAAAA색깔로 solid 실선으로 나타냅니다. -->
</head>
<body>
<input style="width:200px;height:30px;" />
<input style="width:250px;height:30px;" />
<textarea style="width:400px;height:150px;" scrolling="yes">
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
우리나라 대한민국
</textarea>
</body>
</html>
실행해보면
이렇게 텍스트상자가 입체감있게 보이는 것을 알 수 있습니다.
여기서 사용된 그림파일 inputBG.gif는
이 그림입니다. 이 그림을 텍스트 상자 배경으로 하니깐 입체감있게 표시된 것입니다. 그럼 오늘은 여기까지. 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| id,class (0) | 2011.12.08 |
|---|---|
| 초보자도 쉽게하는 분석하는 HTML 문서 (0) | 2011.11.30 |
| 텍스트상자를 투명하게 (0) | 2011.10.10 |
| 링크에 마우스를 대면 아래위로 선이 그려집니다. (0) | 2011.10.07 |
| 좌,우,중앙정렬되는 메뉴 (0) | 2011.10.04 |
