검색결과 리스트
HTML에 해당되는 글 51건
- 2011.08.10 textarea를 이용한 자기소개란 만들기
- 2011.08.08 input태그와 간단한 로그인 박스 만들기
- 2011.08.03 HTML태그정리표
- 2011.07.27 HTML공부 iframe 2
- 2011.07.26 frame 제어
- 2011.07.25 frame기본
- 2011.07.21 셀의 정렬속성
- 2011.07.19 표의 경계선, 너비와 높이조절
- 2011.07.17 Rowspan, Colspan
- 2011.07.14 표만들기 기초
글
textarea를 이용한 자기소개란 만들기
오늘도 입력하는 방법에 대해서 배워보겠습니다. 오늘 배울 내용은 textarea입니다. 홈피를 다니다보면 회원가입할때 자기 소개란 같은게 있지요. 거기에 자기소개를 쓰는데요. 그 쓰는 상자를 만드는 겁니다. 글을 써서 어떻게 하는 가는 차후의 문제고 일단 글을 쓸수 있게 글상자를 나타내는 법부터 배워봅시다. 형식은
<textarea rows="값" cols="값"></textarea>
입니다. rows는 몇줄로 할것인지 cols는 몇칸으로 할것인지입니다. rows="5" cols="15" 이렇게하면 5줄에 15칸으로 한다 이런뜻입니다. 그럼 저번에 배운 로그인박스 기억나시죠? 그 밑에 자기소개를 적는 란을 만드는 예제를 배워보겠습니다. 예제전체 코드는
<html>
<head><title>로그인과 textarea</title>
</head>
<body>
<table border=1>
<tr>
<td>아이디</td>
<td><input type="textbox" size="15"></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="password" size="15"></td>
</tr>
<tr>
<td>자기소개</td>
<td><textarea rows="5" cols="15"></textarea></td>
</tr>
</table>
</html>
이렇습니다. 오늘 배운 textarea부분도 보이시죠? cols는 textbox와 password와 크기가 같게 설정했습니다. 실행이 어떻게 될거 같습니까? 아이디, 패스워드나오고 밑에 자기소개가 나오겠지요? 그리고 글상자가 나오고 자기소개를 입력하면 될겁니다. 결과화면입니다.
'HTML' 카테고리의 다른 글
| 체크박스 (0) | 2011.08.16 |
|---|---|
| <select><option>으로 드랍다운메뉴 만들기 (0) | 2011.08.13 |
| input태그와 간단한 로그인 박스 만들기 (0) | 2011.08.08 |
| HTML태그정리표 (0) | 2011.08.03 |
| HTML공부 iframe (2) | 2011.07.27 |
글
input태그와 간단한 로그인 박스 만들기
안녕하세요?
오늘은 폼에 대해서 배워보겠습니다. 인터넷에보면 회원가입하는 사이트가 많은데요. 거기보면 이름입력하고 비밀번호 입력하고 여러가지 입력하는 것을 보신 적이 있으실겁니다. 물론 선택하는 것도 있지요. 그 중에 오늘은 아이디와 비밀번호를 입력하는 폼을 만들어 보겠습니다. 이 폼이 작동되게 할려면 좀 복잡한데 여기서는 작동은 안되고 그냥 아이디와 비밀번호만 입력하게 하는 폼을 만들어 보겠습니다. 먼저 소스코드를 보시죠.
<html>
<head><title>로그인</title>
</head>
<body>
<table border=1>
<tr>
<td>아이디</td>
<td><input type="textbox" size="15"></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="password" size="15"><td>
</tr>
</table>
</html>
안배운게 input type="textbox", "password" 일겁니다. 이 input 태그는 사용자와 대화를 할수 있게 여러가지 대화틀을 제공합니다. 입력할수 있는 상자라든가 글을 많이 적을수 있는 글상자, 그리고 하나만 선택할수 있는 radio버튼, 여러개를 동시에 선택할수 있는 checkbox등등입니다. 오늘은 그 중에 글자를 한줄 입력하는 textbox와 암호를 입력하는 password 두가지를 살펴보죠. textbox는 크기(여기서는 15라고 했죠)에 맞게 한줄글을 입력받는 틀입니다. 실행해보면 아시겠지만 보통 사이트에서 아이디 입력받는 형식으로 나옵니다.
그리고 password는 비밀번호를 입력받아야 하기때문에 글자가 안보이고 점으로 나타납니다. 이것도 많이 보셨으리라 생각됩니다. 그럼 실행결과를 볼까요?
자 이렇게 오늘은 폼에 대해 간단하게 알아봤습니다. 다음시간에는 더 좋은 내용으로 찾아뵙겠습니다. 그럼이만~
'HTML' 카테고리의 다른 글
| <select><option>으로 드랍다운메뉴 만들기 (0) | 2011.08.13 |
|---|---|
| textarea를 이용한 자기소개란 만들기 (0) | 2011.08.10 |
| HTML태그정리표 (0) | 2011.08.03 |
| HTML공부 iframe (2) | 2011.07.27 |
| frame 제어 (0) | 2011.07.26 |
글
HTML태그정리표
HTML 테그 정리표
|
형 식 |
구 성 |
내 용 |
|
문서의 기본 구조를 나타내 주는 태그 | ||
|
<HTML> |
<HTML>...</HTML> |
HTML 언어로 작성되어 있다는 것을 알려줍니다. |
|
<HEAD> |
<HEAD>...</HEAD> |
Heading의 준말로 글의 머리말에 해당합니다. |
|
<BODY> |
<BODY>...</BODY> |
본문에 해당하는 부분을 알려줍니다. |
|
<TITLE> |
<TITLE>...</TITLE> |
타이틀바에 새겨질 글자를 정의합니다. |
|
<Hn> |
<Hn>...</Hn> |
표제 부분에 들어갈 말을 정의합니다. 1~6까지의 숫자를 사용하고 숫자가 커질수록 표제는 작아집니다. 기본값은 H4입니다. |
|
<!-...-> |
<!-주석내용-> |
주석을 달거나 잠시동안 이미지를 보이지 않게 할 때 사용합니다. |
|
문단 혹은 줄을 바꾸는 태그 | ||
|
<P> |
<P> |
문단을 바꾸는 태그입니다. 줄바꿈과 동시에 줄을 띤 것같은 효과가 나타납니다. |
|
<BR> |
<BR> |
문단을 바꾸는 태그입니다. 줄바꿈의 역할만을 수행합니다. |
|
<PRE> |
<PRE>...</PRE> |
여백이나 줄간격 등을 고정시켜 주는 역할을 합니다. |
|
글자의 크기를 마음대로 조절하는 태그 | ||
|
<FONT> |
<FONT SIZE=n> ...</FONT> |
글자의 크기를 마음대로 조절해 줍니다. 뒤의 숫자는 1~7이며 7이 가장 큰 크기입니다. 기본값은 3입니다. |
|
선그리기 태그 | ||
|
<HR> |
<HR ALIGN= WIDTH= SIZE=> |
입체적인 선을 그려줍니다. ALIGN은 선의 정렬을, WIDTH는 선의 폭을, SIZE는 선의 높이를 정해줍니다. |
|
이미지 맵을 처리하는 태그 | ||
|
<ISMAP> |
<IMG SRC= "..." ISMAP> |
이미지맵을 정의합니다. |
|
<MAP> |
<MAP NAME=...> ...</MAP> |
넷스케이프2.0에서 이미지맵을 정의합니다. |
|
목록을 정리해 주는 태그 | ||
|
<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 BACKGROUND="..."> |
배경 이미지를 띄워줍니다. |
|
<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..."> |
편지쓰기 창을 띄워 줍니다. |
|
색상 지정하기 | ||
|
<BODY> |
<BODY TEXT= "#nnnnnn">...</BODY> |
글자색을 지정합니다. |
|
<BODY LINK= "#nnnnnn">...</BODY> |
하이퍼링크의 색을 지정합니다. | |
|
<BODY VLINK= "#nnnnnn">...</BODY> |
한 번 누른적이 있는 하이퍼링크의 색을 지정합니다. | |
|
<BODY ALINK= "#nnnnnn">...</BODY> |
누르고 있는 동안의 색을 지정합니다. | |
|
표 만들기 태그 | ||
|
<TABLE> |
<TABLE BORDER>... </TABLE> |
표의 전체 형식을 나타냅니다. |
|
<TR><TD></TD></TR> |
표 내부에 들어갈 형식을 정의합니다. | |
|
<TD COLSPAN=n> |
가로칸을 n만큼 합쳐줍니다. | |
|
<TD ROWSPAN=n> |
세로칸을 n만큼 합쳐줍니다. | |
|
<TD ALIGN=...> |
표안의 좌우 정렬 방식을 정의합니다. | |
|
<TD VALIGN=...> |
표안의 상하 정렬 방식을 정의합니다. | |
|
문서를 임의로 고정시키는 태그 | ||
|
<NOBR> |
<NOBR>...</NOBR> |
화면 크기에 따라 문단이 바뀌는 것을 방지합니다. |
|
<WBR> |
<WBR>...</WBR> |
위의 태그 안에서 문단을 바꿀 때 사용합니다. |
|
CGI 양식 첨가하기 | ||
|
<FORM> |
<FORM>...</FORM> |
양식을 정의합니다. |
|
<FORM METHOD="..." ACTION="..."> |
양식의 방법을 정의합니다. | |
|
<TEXTAREA> |
<TEXTAREA NAME="..." ROWS="..."> |
글틀 상자를 정의합니다. |
|
<INPUT> |
<INPUT TYPE="..."> |
어떤 형태로 입력할 것인지를 정의합니다. |
|
<INPUT TYPE="RADIO"> |
라디오 단추를 만들어줍니다. | |
|
<INPUT TYPE= "CHECKBOX"> |
체크 상자를 만들어 줍니다. | |
|
<INPUT TYPE= "SUBMIT"> |
제출 버튼을 만들어 줍니다. | |
|
<INPUT TYPE="RESET"> |
취소 버튼을 만들어 줍니다. | |
|
<SELECT> |
<SELECT NAME="..."> |
선택 사항 상자를 만들어 줍니다. |
|
창만들기 태그 | ||
|
<FRAME> |
<FRAMESET>... </FRAMESET> |
창의 기본 틀을 지정합니다. |
|
<FRAMESET ROW= "숫자 혹은 %"> |
위 아래로 나눠줍니다. | |
|
<FRAMESET COLS= "숫자 혹은 %"> |
좌우로 나눠줍니다. | |
|
<FRAME SRC="..." MARGINWIDTH="..."> |
창에 들어갈 좌우 여백을 정의합니다. | |
|
<FRAME SRC="..." MARGINHEIGHT="..."> |
창에 들어갈 상하 여백을 정의합니다. | |
|
<FRAME SCROLLING= "...> |
스크롤바를 설정해 줍니다. | |
|
<NOFRAMES>... </NOFRAMES> |
프레임이 안보이게 해줍니다. | |
|
이미지 다루기에 필요한 태그 | ||
|
<IMG> |
<IMG SRC="..."> |
이미지를 정의해 줍니다. |
|
<IMG SRC="..." ALIGN=...> |
이미지의 정렬 상태를 나타내 줍니다. | |
|
<IMG SRC="..." WIDTH="..." HEIGHT="..."> |
이미지의 크기를 조절해 줍니다. | |
|
<IMG SRC="..." LOWSRC="..."> |
이미지를 JPEG파일로 나타내 줍니다. | |
|
<IMG SRC="..." VSPACE= HSPACE=> |
이미지의 여백을 조절해 줍니다. | |
|
<IMG SRC="..." BORDER="..."> |
이미지의 태두리선을 조절합니다. | |
|
<IMG SRC="..." ALT="..."> |
이미지가 전송되지 않았을 경우에 글자로 대처해 줍니다. | |
'HTML' 카테고리의 다른 글
| textarea를 이용한 자기소개란 만들기 (0) | 2011.08.10 |
|---|---|
| input태그와 간단한 로그인 박스 만들기 (0) | 2011.08.08 |
| HTML공부 iframe (2) | 2011.07.27 |
| frame 제어 (0) | 2011.07.26 |
| frame기본 (0) | 2011.07.25 |
글
HTML공부 iframe
지난번에는 프레임을 사용해서 메뉴프레임과 메인프레임으로 나눠서 링크를 누르면 메인프레임에 그 링크가 가리키는 문서를 나타내게 하는 것을 배워보았습니다. 오늘은 iframe에 대해서 배워보겠습니다. iframe은 일종의 frame인데 문서 중간에 들어가는 프레임입니다.
위의 사진에서 중간에 스크롤바가 있는 네모난 곳이 IFRAME입니다. 문서가 너무 길때 중간에 이렇게 IFRAME으로 문서를 넣으면 편리하겠죠?
그럼 위의 IFRAME이 들어간 문서는 어떤 모양일까요? 먼저 IFRAME을 선언하는 문서가 있어야하고 그 IRAME에 들어갈 문서가 있어야 겠지요. 그전에 IFRAME의 형식은 FRAME의 형식과 똑같습니다
<iframe src="iframe_main.html" width=500 height=100 name="iframe"></iframe>
이런식으로 하시면 됩니다. 이말은 iframe을 선언하는데 src즉 그 안에 들어갈 문서는 iframe_main.html이고 width 너비는 500픽셀, height 높이는 100픽셀 별칭은 iframe으로 한다는 것입니다. 별칭이 있으니 문서어디서라도 참조가 가능하겠죠? 예를들어
<a href=http://www.naver.com target="iframe"></a>
이렇게하면 네이버로 가는 링크가 걸려있으므로 이것을 클릭하면 iframe안에 네이버가 뜨게 될겁니다. 그럼 iframe선언 문서부터 소스코드를 보시죠.
<html>
<head><title>IFRAME</title>
</head>
<body>
<p>IFRAME 예제
<p>이 문서 중간에 IFRAME이 삽입되었습니다.
<p><iframe src="iframe_main.html" width=500 height=100 name="iframe"></iframe>
<br>이위가 IFRAME입니다.<br>
</body>
</html>
중간에 iframe들어간 부분 보이시죠?
그다음에 iframe안에 들어간 문서입니다.
<html>
<head><title></title>
</head>
<body>
<p>이 안이 IFRAME입니다.
<p>
<p>죽는 날까지 하늘을 우러러...
<p>한점 부끄럼없기를...
</body>
</html>
대충 이해가 가셨으리라 생각합니다. 문서중간에 들어가는 프레임이라고 생각하시면 되겠습니다.
이것으로써 html기초부분을 마치겠습니다. 그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| input태그와 간단한 로그인 박스 만들기 (0) | 2011.08.08 |
|---|---|
| HTML태그정리표 (0) | 2011.08.03 |
| frame 제어 (0) | 2011.07.26 |
| frame기본 (0) | 2011.07.25 |
| 셀의 정렬속성 (0) | 2011.07.21 |
글
frame 제어
안녕하세요?
지난번에는 frame의 기본에 대해서 배웠습니다. 오늘은 프레임을 제어하는 것으로 왼쪽 메뉴프레임에서 링크를 눌렀을때 오른쪽에 그 링크에 해당하는 화면이 나오도록 하는 것입니다. 예전에는 보통 이런식으로 문서를 만들었지요.
예를들어 위와 같은 경우지요. 왼쪽 프레임에는 메뉴가 나오고 오른쪽에는 그 메뉴를 눌렀을때 그 메뉴페이지로 이동하는 겁니다. 위에서는 네이버를 누르면 오른쪽에 네이버로 가는거지요. 그럼 이런것은 어떻게 만들끼요? 먼저 프레임셋을 정해줍니다.
<html>
<head>
<title>FRAME</title>
</head>
<frameset cols=200,*>
<frame src="menu.html" name="menu">
<frame src="main.html" name="main">
</frameset>
</html>
이건 앞에서 배우셨죠? 왼쪽 프레임은 menu.html이 오른쪽 프레임은 main.html이 불려져 올겁니다. 그다음에 왼쪽 menu.html에 위의 그림과 같이 네이버,다음,야후 이렇게 메뉴를 적어주고 오른쪽 main.html에는 위에 나오는 글자를 출력해 주면 되겠지요.
<html>
<head><title>MENU Frame</title>
</head>
<body>
<p><a href="http://www.naver.com" target="main">네이버</a></p>
<p><a href="http://www.daum.net" target="main">다음</a></p>
<p><a href="http://www.yahoo.co.kr" target="main">야후</a></p>
</body>
</html>
- menu.html입니다.
<html>
<head><title>MAIN FRAME</title>
</head>
<body>
<p>왼쪽을 누르면 여기에 네이버,다음,야후로 이동합니다.</p>
</body>
</html>
- main.html입니다.
우리가 이때까지 안배운것중에 위에 menu.html에 target이 있습니다. 이것은 그 별칭으로 링크를 보내라는 뜻입니다. 여기서는 target="main" 이니깐 main이라는 이름을 가진 오른쪽 프레임으로 링크를 보내라는 겁니다. 이해하시겠지요? 그러니깐 네이버를 누르면 오른쪽 main프레임에 그 링크 즉 http://www.naver.com으로 이동한 페이지가 표시된다는 겁니다. 그렇게 하면 네이버를 눌렀을때는
다음을 눌렀을때는
야후를 눌렀을때는
이렇게 됩니다. 이해하셨죠? 좀 더 멋진 홈피을 이제 만들 수 있을거 같지 않습니까? 그럼 다음시간에는 iframe에 대해서 배워보도록 하겠습니다. 그럼 이만~
'HTML' 카테고리의 다른 글
| HTML태그정리표 (0) | 2011.08.03 |
|---|---|
| HTML공부 iframe (2) | 2011.07.27 |
| frame기본 (0) | 2011.07.25 |
| 셀의 정렬속성 (0) | 2011.07.21 |
| 표의 경계선, 너비와 높이조절 (0) | 2011.07.19 |
글
frame기본
지난번까지 테이블에 대해서 배워보았습니다. 오늘은 기초 마지막 주제로 frame에 대해서 배워보겠습니다.
frame은 틀이라는 뜻입니다. 그러니깐 한창을 여러개로 분할했을때 하나의 분할된 것을 하나의 프레임이라고 합니다. 사용법은
<frameset cols="300,*">
이렇게 먼저 프레임셋을 지정합니다. cols는 프레임을 두개를 나누는데 가로로 두개를 나눈다는 뜻입니다. 뒤에 "300,*"는 하나는 300픽셀로 프레임을 나누고 나머지 하나는 300픽셀을 제하고 남은 픽셀로 프레임을 하겠다는 것입니다. 그다음에 그 프레임마다 들어갈 페이지를 만들어 줘야 합니다. 왼쪽 프레임에 하나의 파일을 오른쪽 프레임에 하나의 파일을 만들어야 그 페이지에 그 문서가 나타나겠죠?
<frame src="left.html" name="left">
<frame src=right.html" name="right">
이렇게 해주면 됩니다. 이 뜻은 300픽셀짜리 프레임에는 left.html이라는 파일을 불러들이고 별칭 즉, 이름은 left로 한다. 오른쪽 프레임은 right.html파일을 읽어들이고 별칭은 right로 한다는 뜻입니다. 별칭은 나중에 프레임을 참조할때 사용됩니다. 이렇게 하면 두개의 왼쪽 오른쪽 프레임으로 나누어진 하나의 프레임셋에 왼쪽에는 left.html 오른쪽에는 right.html파일이 각각 불러들여지게 됩니다.
left.html은
<html>
<head><title>LEFT</title>
</head>
<body>
여기는 왼쪽 프레임입니다.
</body>
</html>
right.html은
<html>
<head><title>RIGHT</title>
</head>
<body>
여기는 오른쪽 프레임입니다.
</body>
</html>
이렇게 만들어봤습니다. 물론 자신이 원하는 스타일로 만드시면 됩니다. 자 이세개의 파일로 프레임을 만들면 어떻게 될지 대충 감이 오시죠? 그럼 실행결과를 보도록 하겠습니다.
이렇게 두개의 프레임으로 나누어진 문서가 생깁니다. 대충 이해하셨으리라 보고 오늘은 여기까지 하겠습니다. 그럼 다음시간에 또 frame에 대해서 배워봐요~
'HTML' 카테고리의 다른 글
| HTML공부 iframe (2) | 2011.07.27 |
|---|---|
| frame 제어 (0) | 2011.07.26 |
| 셀의 정렬속성 (0) | 2011.07.21 |
| 표의 경계선, 너비와 높이조절 (0) | 2011.07.19 |
| Rowspan, Colspan (0) | 2011.07.17 |
글
셀의 정렬속성
오늘도 table의 속성에 대해서 배워보겠습니다.
오늘 할 내용은 테이블 내의 글자를 정렬하는 것입니다. 왼쪽,오른쪽,가운데, 위쪽,아래쪽, 가운데 이렇게 정렬하는건데요. 써보면...
<TD ALIGN=LEFT/CENTER/RIGHT>
<TD VALIGN=TOP/MIDDLE/BOTTOM>
입니다. 왜 td에 할까요? td가 직접 글자가 들어가는 부분이니깐요. align은 말그대로 정렬하다는 뜻이죠. left는 왼쪽정렬 center는 가운데 정렬 right 는 오른쪽 정렬 top은 표의 셀(표의 한칸한칸을 셀이라고합니다. )에 글자를 위쪽으로 middle은 가운데로 bottom은 아래쪽에다가 써라하는 내용입니다. 이렇게 말로 설명하는것보다 직접 해보면 더 이해하기가 쉽겠죠?
그럼 각각의 속성을 이용해서 글자를 한번 나타내봅시다.
<table border=1 width=500>
<tr>
<td align=left>왼쪽 정렬셀</td>
<td align=center>가운데 정렬셀</td>
<td align=right>오른쪽 정렬된셀</td>
</tr>
</table>
이렇게 표를 만들면 셀이 3갠데 그중에 하나씩 정렬속성이 다르게 들어가는 것을 볼수 있습니다. 마찬가지로 위 아래 정렬도
<table border=1 height=300>
<tr>
<td valign=top>위쪽 정렬셀</td>
<td valign=middle>가운데 정렬셀</td>
<td valign=bottom>아래쪽 정렬된셀</td>
</tr>
</table>
이렇게 해주면 되겠습니다. 이해안가시는 분 없으시겠죠? ㅎㅎ
그럼 전체 소스코드입니다.
<html>
<head><title>표의 글자속성</title>
</head>
<body>
<table border=1 width=500>
<tr>
<td align=left>왼쪽 정렬셀</td>
<td align=center>가운데 정렬셀</td>
<td align=right>오른쪽 정렬된셀</td>
</tr>
</table>
<br>
<br>
<table border=1 height=300>
<tr>
<td valign=top>위쪽 정렬셀</td>
<td valign=middle>가운데 정렬셀</td>
<td valign=bottom>아래쪽 정렬된셀</td>
</tr>
</table>
</body>
</html>
실행결과는 어떻게 될거 같으세요? 표가 두개 있지요. 둘다 3개의 셀을 가지고 있습니다. 위의 표는 왼쪽,오른쪽,가운데정렬이고 아래표는 위쪽,가운데,아래정렬입니다. 위의 표는 width즉 너비가 500픽셀이고 아래표는 height 높이가 300픽셀입니다. 자 그럼 실행결과를 보도록 합시다. 대충 감이 오시죠?
예상했던대로 이렇게 나왔네요. ㅎㅎ
어떻습니까? 별로 안 어렵지요? 그럼 다음시간에 또...
'HTML' 카테고리의 다른 글
| frame 제어 (0) | 2011.07.26 |
|---|---|
| frame기본 (0) | 2011.07.25 |
| 표의 경계선, 너비와 높이조절 (0) | 2011.07.19 |
| Rowspan, Colspan (0) | 2011.07.17 |
| 표만들기 기초 (0) | 2011.07.14 |
글
표의 경계선, 너비와 높이조절
지난번에는 colspan,rowspan 행과 열합치기를 배웠습니다. 오늘은 border,height,width 즉 표의 경계, 표의 높이 너비조절하는 법을 배워보겠습니다.
먼저 border속성입니다. border는 경계라는 말이죠. 그래서 표의 경계선을 1을 주면 1픽셀만큼 3을주면 3필셀만큼 두꼅게 그려라하는 뜻입니다.
예제를 보지요.
<html>
<head><title>표</title>
</head>
<body>
<table border=1>
<tr>
<td>border=1인 표</td>
<td>border=1인 표</td>
</tr>
<tr>
<td>경계가1인표</td>
<td>경계가1인표</td>
</tr>
</table>
<br><br>
<table border=5>
<tr>
<td>border=5인 표</td>
<td>border=5인 표</td>
</tr>
<tr>
<td>경계가5인표</td>
<td>경계가5인표</td>
</tr>
</table>
</body>
</html>
결과는...
자 그럼 이번에는 height와 width속성에 대해 배워봅시다.높이와 너비인데요. %로 적용할수도 있고 픽셀단위로 적용할수도 있습니다. 저번에 선그리기 할때도 그렇게 했지요? 예를들어
<table height=50% width=50%>
이렇게 하면 높이도 창의 반, 너비도 창의 반으로 하라는 뜻입니다.
<table height=200 width=200>
이렇게하면 높이도 200픽셀 너비도 200픽셀로 하라 그런 뜻이 됩니다.
이것도 예제를 통해서 쉽게 배워보도록 하겠습니다.
<html>
<head><title>표</title>
</head>
<body>
<table border=1 height=50% width=50%>
<tr>
<td>border가 1인 표</td>
<td>height가 창의 절반인 표</td>
</tr>
<tr>
<td>width가 창의 절반인 표</td>
<td>예제</td>
</tr>
</table>
<br><br>
<table border=5 height=200 width=500>
<tr>
<td>border가 5인 표</td>
<td>높이가 200픽셀인 표</td>
</tr>
<tr>
<td>너비가 500픽셀인표</td>
<td>예제</td>
</tr>
</table>
</body>
</html>
이렇게 주면 처음 표는 높이가 창의 50%, 너비도 창의 50%인 표이고 두번째 표는 높이가 200픽셀, 너비가 500픽셀인 표가 됩니다. 결과를 보면...
이렇게 위의 표를 보면 너비가 창의 50%이지요? 높이도 창의 절반입니다. 아래표는 창의 크기에 영향을 안받습니다. 절대크기와 너비가 되지요.
이해가시죠? 이해안가신다면 댓글달아주시는거 잊지 마시기 바랍니다. 그럼 다음에 또 만나요~
'HTML' 카테고리의 다른 글
| frame기본 (0) | 2011.07.25 |
|---|---|
| 셀의 정렬속성 (0) | 2011.07.21 |
| Rowspan, Colspan (0) | 2011.07.17 |
| 표만들기 기초 (0) | 2011.07.14 |
| 글자색바꾸기, <BODY TEXT>, <FONT COLOR> (0) | 2011.07.12 |
글
Rowspan, Colspan
안녕하세요?
오늘은 테이블 두번째 시간으로 행합치기와 열합치기를 하도록 하겠습니다.
<TD>태그에서 COLSPAN, ROWSPAN이라는 속성인데요. COLSPAN은 열합치기, ROWSPAN은 행합치기입니다. 행과열은 저번에 했지요? 행이 2칸, 열이 2칸인 테이블이 있다고 합시다.
| 1행1열 | 1행2열 |
| 2행1열 | 2행2열 |
이렇게요.
이중에 1행1열과 1행2열을 합치는게 COLSPAN이고 1행1열과 2행1열을 합치는게 ROWSPAN입니다.
그럼 직접 코드를 만들어 보면서 보시죠.
<html>
<head><title>COLSPAN ROWSPAN</title>
</head>
<body>
<table border=1>
<tr>
<td>1행1열</td>
<td>1행2열</td>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
</tr>
</table>
<p> 열을 합치면
<table border=1>
<tr>
<td colspan=2>1행1열과 1행2열을 합침</td>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
</tr>
</table>
<p> 행을 합치면
<table border=1>
<tr>
<td rowspan=2>1행1열과 2행1열을 합침</td>
<td>1행2열</td>
</tr>
<tr>
<td>2행2열</td>
</tr>
</table>
</body>
</html>
머릿속으로 그림을 그려가면서 하셔야 이해가 빠를겁니다. td colspan=2는 열을 합치는 것이기 때문에 두개의 열이 합쳐졌기때문에 td가 하나만 쓰고 다음행에서는 td가 두번이 들어가죠. 행을 합칠때는 반댑니다. td가 두번들어가고 다음행에서는 td가 한번만 들어간다는 거죠. 행이 합쳐졌으니깐요. 이거는 많이 해봐야 이해가 갈겁니다. 그럼 실행했을때 어떻게 될지 감이 오시는지요?
맨위의 테이블은 정상적인 테이블이구요. 그 밑에는 1행1열과 1행2열을 합친겁니다. colspan이죠. 세번째 테이블은 1행과 2행1열을 합친겁니다. rowspan이죠. 좀 감이 오시는지 모르겠습니다. 그럼 오늘은 여기까지 하고 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| 셀의 정렬속성 (0) | 2011.07.21 |
|---|---|
| 표의 경계선, 너비와 높이조절 (0) | 2011.07.19 |
| 표만들기 기초 (0) | 2011.07.14 |
| 글자색바꾸기, <BODY TEXT>, <FONT COLOR> (0) | 2011.07.12 |
| 페이지 배경색을 내맘대로 (0) | 2011.07.10 |
글
표만들기 기초
지난번에는 글자색을 바꾸는 법을 배워봤습니다. 오늘은 대망의 표만들기를 배워보도록 하겠습니다. 왜 대망의 라고 하는가하면 이 표만들기가 아주 중요하기 때문입니다. 웹페이지를 돌아다니다보면 마치 글자들이 정렬된듯이 아주 잘 짜여져 있는 것을 보는데 이게 다 표를 이용해서 글자를 정렬하기 때문입니다. 웹페이지의 거의 모든 레이아웃(구성)은 표로 이루어져 있다고 봐도 무방합니다. 그럼 표는 어떻게 만드는지 알아볼까요?
먼저 표를 하나 그려볼까요?
| 1행1열 | 1행2열 |
| 2행1열 | 2행2열 |
이 표는 어떻게 만들까요? 바로 <TABLE>이라는 태그로 만듭니다. 위와 같이 만들려면
<TABLE>
<TR>
<TD>1행1열</TD>
<TD>1행2열</TD>
</TR>
<TR>
<TD>2행1열</TD>
<TD>2행2열</TD>
</TR>
</TABLE>
이렇게 해주면 됩니다. 그럼 하나하나 설명해드리겠습니다. 먼저 <TABLE>은 표라는 뜻이죠? 그래서 표를 만들겠다라는 뜻입니다. 표에는 행과 열이 있습니다. 세로가 행이고 가로가 열입니다. 그래서 <TR>로 행을 먼저 생성하고 <TD>로 열을 하나씩 늘려가는 겁니다. 즉, <TR>은 행을 추가하는 태그이고 <TD>는 그추가한 행에 열들을 추가하는 것입니다. 그럼 1행3열짜리 테이블은 어떻게 만들까요?
<TR>
<TD>1행1열</TD>
<TD>1행2열</TD>
<TD>1행3열</TD>
</TR>
이렇게 하면 되겠죠? 이제 이해가시죠? 그 열안에 무슨 글자나 그림을 넣을려면 글자는 그냥 써주시면되고 그림은 저번에 배운 <IMG SRC>태그를 이용하시면 됩니다. 그럼 간단하게 시간표를 한번 만들어 봅시다.
| 시간 | 과목 |
| 1교시 | 국어 |
| 2교시 | 수학 |
| 3교시 | 영어 |
이렇게 만들려고 합니다. 어떻게 하면 될까요?
먼저 테이블을 만들고 <TR>이 몇번 들어갈까요? TR은 행이니깐 4행이니깐 4번들어가겠죠? <TD는 각 <TR>당 2번씩 들어가면 되겠습니다. 그럼 소스가 이렇게 되겠죠?
<html>
<head><title>테이블</title>
</head>
<body>
<table border>
<tr>
<td>시간</td>
<td>과목</td>
</tr>
<tr>
<td>1교시</td>
<td>국어</td>
</tr>
<tr>
<td>2교시</td>
<td>수학</td>
</tr>
<tr>
<td>3교시</td>
<td>영어</td>
</tr>
</table>
</body>
</html>
이렇게요. 위에 <table>에 border가 들어간것은 표의 테두리를 주기 위해서입니다. 이것에 대해서는 계속해서 배워보도록 하구요. 오늘은 이렇게 표를 만들어봤습니다. 결과는 어떻게 될까요? 한번 보시죠.
이렇게 나오네요. 잘 나왔죠? 신기하지 않습니까? 이렇게 표도 만들수 있고...ㅎㅎ...그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| 표의 경계선, 너비와 높이조절 (0) | 2011.07.19 |
|---|---|
| Rowspan, Colspan (0) | 2011.07.17 |
| 글자색바꾸기, <BODY TEXT>, <FONT COLOR> (0) | 2011.07.12 |
| 페이지 배경색을 내맘대로 (0) | 2011.07.10 |
| IMG 태그, 링크, 경계선 (0) | 2011.07.08 |
