[HTML] TABLE 태그

|
<TABLE></TABLE> : 테이블의 시작과 끝을 뜻한다. 테이블을 선언한다고 한다.
<THEAD></THEAD> : 테이블의 머리글을 뜻하며 TABLE 태그 안에 들어간다.
<TFOOT></TFOOT> : 테이블의 바닥글을 뜻하며 TABLE 태그 안에 들어간다.
<TBODY></TBODY> : 테이블의 주 내용을 뜻하며 우리가 흔히보는 워드의 표형태가 이부분이다.
<caption></caption> : 테이블 자체의 제목이나 설명을 설정할 때 사용한다. 표 밖 위쪽에 위치한다.
<colgroup></colgroup> : 열을 그룹지어 속성을 부여합니다. 스타일을 부여해 통일 시킬 수 있습니다.
<col/> : <colgroup> 안에 들어가며 테이블 구조상의 하나 추가 될때마다 왼쪽에서 순서대로 적용됩니다. 속성은 여기에 주면 된다.
<th></th> : 테이블에서 각열의 제목을 나타낼 때 사용되며 보통 맨 윗줄에 사용된다. TD와 같은 기능이지만 자동으로 굵고 중앙정렬형태로 나타난다.
<tr></tr> : 열
<td></td> : 행

id = "아이디" : 태그에 구분할 수 있는 아이디를 부여한다. 아이디는 CSS나 JS등 여러가지로 쓰인다.
html에서 한 개체당 하나의 아이디를 부여할 수 있다. 중복시 오류
class = "클래스명" : CSS에서 클래스끼리 묶어 스타일을 적용할 때 사용
여러가지 태그에 스타일을 중복 적용할 때 유용하다. 중복 가능
title = "제목" : 개체에 부여할 텍스트를 입력한다. 마우스를 가져가면 말풍선으로 나타난다.
style = "스타일시트" : CSS를 입력하여 적용
bgcolor = "색상" : 배경색을 의미
background = "경로" : 여기에 URL 및 경로를 넣어주면 img 파일을 배경으로 사용가능
width = "숫자" : 가로 크기를 정하여 보통 px단위를 사용 %로도 사용가능
height = "숫자" : 세로 크기를 정하여 보통 px단위를 사용 %로도 사용가능
align = "방향" : 정렬 형태를 뜻한다. left, center, right 세가지가 있다.
table 태그에 쓸 경우 테이블 전체의 정렬 상태를 뜻한다.
tr, td, th, col에 쓸 경우 안에 있는 글씨의 정렬 상태를 뜻한다.

caption 에서 top, bottom을 이용하면 글이 표 아래나 위로 가게된다.(바깥쪽)
left, right를 주면 표 위쪽(바깥쪽)에서의 정렬상태를 뜻한다. 기본 top

border = "숫자" : 테두리 굵기를 정하며 단위를 적지 않아도 무관합니다.
bordercolor = "색상" : 테두리 색상을 설정합니다.
colspan = "숫자" : 워드프로그램에서 표를 작성할 때 행합치기와 같습니다. 오른쪽 왼쪽 옆으로 길게
rowsapn = "숫자" : 워드프로그램에서 표를 작성할 때 행합치기와 같습니다. 아래 위쪽으로 길게
nowrap = 셀안에서 줄바꿈하지 않도록 바꿉니다.

'IT > HTML' 카테고리의 다른 글

[HTML] TABLE 태그  (0) 2011.12.19
[HTML] input style 옵션  (0) 2011.11.24
[HTML] TABLE 태그중 THEAD, TFOOT, TBODY 태그에 대해 알아보기  (0) 2011.11.17
[HTML] DIV 태그와 SPAN 태그의 차이점  (0) 2011.11.16
[HTML] DIV 태그  (0) 2011.11.16
[HTML] 메타 태그 (META)  (0) 2011.11.16
트랙백0 And 댓글0

[HTML] input style 옵션

|

# input type='text'
style="ime-mode:active;" //글입력시 기본 한글모드
style="ime-mode:inactive;" //글입력시 기본 영문모드
style="ime-mode:disabled;"; //글입력시 무조건 영문모드 (한/영키 변환해도 무조건 영문)

style="font-size:10pt;" //글자크기
style="color:blue;" //글자색
style="border-size:1;" //테두리 크기
style="border-color:black;" //테두리색
style="background-color:white;" //배경색
style="border-width:1;" //테두리 두께
style="border-style:dotted;" //테두리 스타일
( 옵션항목 -> dotted solid outset dashed double groove hidden inset ridge )
style="border-left-color:white;" //테두리 왼쪽 색
style="border-right-color:white;" //테두리 오른쪽 색

style="height:60px;" //세로
style="width:100px;" //가로

# input 비활성
<input type='text' disabled> //disabled -> input 비활성
<input type='text' readonly> //readonly -> input 읽기전용

# 스크립트 사용시
document.form.name.style.imeMode = "active";
document.form.name.style.imeMode = "inactive";
document.form.name.style.imeMode = "disabled";

document.form.name.disabled = true;
document.form.name.readOnly = true; //readOnly -> O는 대분자로

<form name='form'>
<input type='text' name='name'>
</form>

# input 글자수 제한
<input type='text' maxLength='10'> //10까지

# input 타입
<input type='text'> //텍스트
<input type='hidden'> //숨김
<input type='radio'> //라디오버튼
<input type='checkbox'> //체크박스
<input type='button'> //버튼
<input type='submit'> //전송버튼
<input type='image'> //전송버튼 이미지
<input type='password'> //비밀번호
<input type='file'> //업로드파일
<input type='reset'> //모두비우기

'IT > HTML' 카테고리의 다른 글

[HTML] TABLE 태그  (0) 2011.12.19
[HTML] input style 옵션  (0) 2011.11.24
[HTML] TABLE 태그중 THEAD, TFOOT, TBODY 태그에 대해 알아보기  (0) 2011.11.17
[HTML] DIV 태그와 SPAN 태그의 차이점  (0) 2011.11.16
[HTML] DIV 태그  (0) 2011.11.16
[HTML] 메타 태그 (META)  (0) 2011.11.16
트랙백0 And 댓글0

[HTML] TABLE 태그중 THEAD, TFOOT, TBODY 태그에 대해 알아보기

|

THEAD, TFOOT, TBODY 태그란?


TABLE 태그중에 THEAD, TFOOT, TBODY라는 태그들이 존재한다.
이전에는 스타일 적용이나 알아보기 좋게만 하는 용도인줄 알았는데 테이블에 대해
공부하다 보니 많은 기능들이 있는것을 알게되었다.


<thead>
태그는 표의 머리글 역활을 하며, <th>태그( 셀의 내용이 중앙에 출력되면서 두껍게 출력 )를 이용한다.
Table 요소의 자손으로 caption, colgroup 요소의 뒤 tbody, tfoot, tr 요소의 앞에 선언
열 제목(헤더)으로 구성된 행의 집합을 나타내며 Table 요소 하나에 한번만 쓸 수 있다.

<tfoot>태그는 표의 바닥글 역활을 한다.
<tbody>태그는 본문이 들어가는 행의 묶음이다.
THEAD, TFOOT, TBODY 태그들은 기술순서를 지켜야한다.

코딩순서: THEAD -> TFOOT -> TBODY

여기에서 이상한점은 TFOOT이 먼저 온다는 점인데 DTD 선언문에 위와같은 순서로 정의가 되어있고,
위와 같은 순서로 코딩하더라도 화면 출력시에는 THEAD - TBODY - TFOOT 형식으로 출력이 된다.

또한, 중요한 부분이 있다.
표 출력시 페이지가 넘어가게 되면 THEAD부분과 TFOOT 부분이 반복 인쇄가 된다.
이런 이유로 THEAD부분과 TFOOT부분을 먼저 읽어들이고, 본문부분을 마지막에 읽어들이는듯 하다.

그리고 한가지.
THEAD, TFOOT은 하나의 테이블 하나만 존재해야 하지만,
TBODY여러개 존재 가능하다는 점이다.

<예제> THEAD, TFOOT, TBODY 사용예
[출력]
책목록
제목 가격
저작권: bookstore
헤리포터 29,000
반지의제왕 30,000

[소스]
<table border="1" cellspacing="0">
<caption>책목록</caption>
<thead>
<tr>
<th>제목</th>
<th>가격</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">저작권: 해리포터</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>헤리포터</td>
<td>29,000</td>
</tr>
<tr>
<td>반지의제왕</td>
<td>30,000</td>
</tr>
</tbody>
</table>

예전에는 표를 통해 데이터 출력시 헤더 출력하고 PHP로 데이터부분 출력하고,
푸터부분에 페이지 번호나 버튼등을 출력하는 경우가 많았는데 이 태그들을 잘 활용하면
좀더 보기좋고 정리된 코딩이 가능할듯 하네요.


출처 : http://blog.naver.com/ckhdyw1

'IT > HTML' 카테고리의 다른 글

[HTML] TABLE 태그  (0) 2011.12.19
[HTML] input style 옵션  (0) 2011.11.24
[HTML] TABLE 태그중 THEAD, TFOOT, TBODY 태그에 대해 알아보기  (0) 2011.11.17
[HTML] DIV 태그와 SPAN 태그의 차이점  (0) 2011.11.16
[HTML] DIV 태그  (0) 2011.11.16
[HTML] 메타 태그 (META)  (0) 2011.11.16
트랙백0 And 댓글0

[HTML] DIV 태그와 SPAN 태그의 차이점

|

SPAN태그를 알기 위해선 DIV태그와 SPAN 태그의 차이점을 알면 쉽게 알 수 있습니다.

DIV 태그는 한 줄이라고 생각하시고, SPAN태그는 한 문장으로 생각하시면 됩니다.

 

ex)

<html>
<head>
<title>
div태그와 span태그의 차이점
</title>
</head>
<body>
<div style="color:white;background:black;">div태그 영역</div>
<span style="color:#fe6700;background:blue">span태그 첫번째 블럭</span>
<span style="color:#fe6700;background:green">span태그 두번째 블럭</span>
<span style="color:#fe6700;background:red">span태그 세번째 블럭</span>
</body>
</html>

 

# 엘리먼트에 대해서 알아가자.

 

원래는 이것부터 설명하고 위에 내용을 설명하는게 맞았지만, 저의 공부 스타일은 일단

저것이 무엇인지 머리속에서 깨닳음을 알고 안에 내용을 보면서 더 깊게 이해하는 스타일이라..

 

1. html 엘리먼트란 ?

시작 <태그> 부터 종료 <태그> 그 사이 엘리먼트 내용까지를 포함한다..

어쩌구저쩌구.. 막 이럼 ;; 우리나라 사람들은 초보자들은 모르게 일부로 어려운 말들 써가면서

하는 경향이 있음. (책과 인터넷에 보면 다 그러함 ;; 한번 엘리먼트가 몬지 찾아보시길..)

더도 말고 딱 짤라서 <font> 내용 </font> , <b1> 내용 <b2>, <table> 내용 </table> 등등등..

이런 것들이 다 엘리먼트라고 한다. 한마디로 문법이다. 

 

html 엘리먼트(element)는 크게 2가지로 나눌 수 있다.

1). 블록 엘리먼트

2). 인라인 엘리먼트

 

블록엘리먼트에는 div, p, pre, table 태그등등..

인라인엘리먼트에는 span, strong 태그등등.. 이 있다.

 

2. 블록엘리먼트와 인라인엘리먼트의 차이점

 

1). 블록엘리먼트 속 인라인 엘리먼트는 존재할 수 있으나, 인라인 엘리먼트 속 블록엘리먼트는 존재할 수 없습니다.

(예 : <div><span></span></div> 가능

       <span><div></div></span> 불가능)

2). 블록엘리먼트는 아무런 스타일이 없을경우 가로길이가 100% 이고, 인라인 엘리먼트는 내용의 크기에 따라 달라집니다.

3). 블록엘리먼트는 가로나 세로길이를 수정할 수 있지만, 인라인 엘리먼트는 그럴 수 없습니다.

4). 블록엘리먼트는 가로길이에 상관없이 최소 한줄을 차지하지만, 인라인 엘리먼트는 그렇지 않습니다.

 

* 한마디로 블록엘리먼트는 큰 블럭이고, 인라인 엘리먼트는 작은 블럭이며,

큰 블럭안에는 작은 블럭이 갈 수있지만, 작은 블럭 안에는 큰 블럭이 들어갈 수 없다는 것이다.

2-1) 처럼 div는 큰 블럭 span은 작은 블럭이다.

 

 

ex)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>div와 span태그에 대해 알아보자</title>
</head>


<body style="margin:0;padding:0;width:569px; margin-left:auto; margin-right:auto;
text-align:center; font-family:Gulim; font-size:12px; color:#707070;">

<div style="border:1px solid #c3dc8b; background-color:#f9fceb; padding:15px 0 15px 10px; text-align:left;">

<span style="width:545px; line-height:150%; padding:10px 0 10px 0; display:block;">안녕하세요.</span>

<span style="width:545px; line-height:150%; padding:10px 0 10px 0; display:block;">
div와 span 태그의 차이점을 알아보겠습니다.</span>

<span style="width:545px; line-height:150%; padding:10px 0 10px 0; display:block;">
<span style="color:#fe6700;">span태그 안에 span태그</span></span>

<span style="line-height:150%;padding:0px 0 10px 0; display:block;">감사합니다.</span>
       

</div>
</body>
</html>

  

이번 예제물을 봅시다.. div 태그 안에 span 태그가 들어갔습니다.

혹시 한글이 깨지시면, <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />

이부분의 charset=utf-8로 바꿔 주시면 됩니다.

div태그와 span태그의 style 속성들을 보시면서 stlye속성에 사용법을 아셨으면 좋겠습니다.

div에 style 값들은 대부분 span태그에서 사용할 수 있습니다.

div안에 span태그를 사용하기 위해선 span태그 안을 보면 display:block 이라는 style속성을 써 줘야 합니다.

출처 : http://blog.naver.com/baegaha 

'IT > HTML' 카테고리의 다른 글

[HTML] input style 옵션  (0) 2011.11.24
[HTML] TABLE 태그중 THEAD, TFOOT, TBODY 태그에 대해 알아보기  (0) 2011.11.17
[HTML] DIV 태그와 SPAN 태그의 차이점  (0) 2011.11.16
[HTML] DIV 태그  (0) 2011.11.16
[HTML] 메타 태그 (META)  (0) 2011.11.16
[HTML] html 기본 폰트 목록  (0) 2011.10.26
트랙백0 And 댓글0

[HTML] DIV 태그

|

DIV태그와 SPAN태그의 정의, DIV태그와 SPAN태그의 차이와 같이 쓰는 방법을 설명하겠습니다.

웹디자이너가 아니라서 DIV태그에는 소홀했었는대 회사에서 필요성을 느끼더군요..

인터넷에서 찾아봐도 너무 분포 되있어서.. 책과 인터넷검색을 동원해서 div, span태그를

정리하였습니다. 길어도 웹디나 HTML(css),JAVASCRIPT,JSP에 공부하시는 분들에게는 꼭 필요한 자료가 아닌가 싶습니다.

 

DIV태그란?

DIVISION의 약자로 DIV안에있는 줄은 속성과 크기등을 바꿀 수 있습니다.

레이어를 만들때 가장 많이 사용 됩니다.

태그가 끝나면 자동줄바꿈이 됩니다.

 

** 레이어라는 개념을 알고 계셔야 합니다.

포토샵에 레이어와 같은 개념으로, 쉽게 설명하면 한그림이 있으면 겹쳐서 다른그림을

보이게 할 수 있습니다. 넓이가 100자리인 흰색 사각형안에 넓이가 50인 빨간색

사각형이 가운대 있게 할 수있습니다. 물론 포토샵이나 다른 편집프로그램으로 가능하지만,

css의 스타일 속성으로도 할 수 있습니다. 그림을 한 레이어 안에 집어넣고 다른그림도 다른

레이어에 집어넣어서 위치를 조정하는 것이죠.

 

기본형식

<DIV id, class, title, stlye, align >내용...</div>

id : head속성 안에 지정된 id

class : head속성 id안에 지정된 class id

title : 제목, 웹접근성에 의거하여 사용되기도 함.

align(center,left,right) : 정렬

style: div는 style이 정말 중요합니다. 따로 설명하겠습니다. 너무길어서..

 

ex)

<DIV id="contents" class="logo" title="로고" align="left" stlye= "border:1px solid #c3dc8b;
background-color:#f9fceb; padding:15px 0 15px 10px;">

 

1. 위치 style 속성

- position :속성; top:숫자; botoom:숫자; right:숫자; width:숫자; heigth:숫자; z-index:숫자;

visibility:속성;

ex) <DIV stlye="position:absolute; top:200px; left:-50px; width:250; heigth:250; z-index:3;">

 

1) position : 레이어의 위치를 지정합니다. 속성으로 일반 그림이나 글자와 같이 현재 위치에 고정적으로
배치되는 absolute, 삽입되는 위치를 기준좌표로 x와 y좌표를 정할 수 있는 relative,

웹브라우저에서 11시 지점으로 기준좌표를 정한후 x,y 좌표를 정할 수 있는 absolute가 있습니다.

fixed는 ie7부터 사용할 수 있으며, 스크롤이 위아래도 움직여도 지정한 곳에서 벗어나지 않습니다.

인터넷 뉴스같은거보면 팝업창이 스크롤바를 움직였는대도 그대로인 것들이 있을 겁니다.

그것은 다 position : fixed를 이용한 것들 입니다.

static속성도 있지만 필요가 없는.. 그냥 기본값 입니다.

-정의 : position:(absolute, relative, fixed, static)의 속성이 있다.

2)top/left : position이 relative일 경우에 현재 삽입되는 위치를 기준으로 x와 y좌표를 입력합니다.

                position이 absolute일 경우 11시 지점을 기준으로 x와 y좌표를 입력합니다.

3)bottom/right: top/left 속성과 같이 사용할수 없으며 top/left 속성과 차이점은 5시 방향으로 x,y표를

지정합니다.

4)width/height : 레이어의 가로세로 크기를 입력합니다. 단위는 픽셀입니다.

5)z-index : position이 absolute일 경우에만 사용할 수 있습니다. 겹치기 순서를 지정하며, 높은숫자일

경우 위에 나타나게 됩니다.

6)visibility : hidden과 visible 값을 가지며 레이어를 눈에 보이게 하거나 보이지 않게 합니다.

자바스크립트와 함께 사용합니다. 기본값은 visible로 입력합니다.

 

----------------------------------------------------------------------------------

(그림예제)

position 속성 안에 absolute와 relative의 차이점

 

<absolute를 줬을경우>

ex)

<html>
<head>
<title>
position : absolute와 relative의 차이
</title>
</head>
<body>
<DIV style="background:red; width:200; height:200;"></div>
<DIV style="position:absolute; top:50px; left:50px; width:200; height:200; background:green"></div>
</body>
</html>





<relative를 줬을경우>

<html>
<head>
<title>
position : absolute와 relative의 차이
</title>
</head>
<body>
<DIV style="background:red; width:200; height:200;"></div>
<DIV style="position:relative; top:50px; left:50px; width:200; height:200; background:green"></div>
</body>
</html> 

 

 

absolute를 줬을때는 첫번째 그림과 같이 처음 빨간사각형에 겹쳐서 position:absolute를 한 그린 사각형이 11시를 기점으로 위 아래로 50px를 이동했다.

하지만 relative를 주었을경우 2번째 그림과 같이 빨간색 사각형을 기준으로 position:relative를 한 그린사각형이 위아래로 50px를 이동했다.

 

  

2. 그 밖에 style 속성 

 

top : 위부터 아래쪽으로 위치

left : 왼쪽으로부터 오른쪽 위치

width : 가로길이

heigth : 세로길이

z-index : 레이어 순서(값이 높을수록 위쪽)

visibility : hidden(레이어 숨김), visible(레이어 보임)

background : 레이어 배경색

overflow :

- visible : 정해진 크기  무시하고 모두 보여줌

- scroll : 스크롤을 보여줌

- auto : 넘치면 스크롤을 보여줌

- hidden : 정해진 크기만 보여주고 나머지 내용은 짤림

font-family : 폰트종류

font-size : 폰트크기

padding-top : 위쪽으로 부터 안쪽 여백

padding-left : 왼쪽으로 부터 안쪽 여백

padding-rigth : 오른쪽으로 부터 안쪽 여백

padding-bottom : 아래쪽으로부터 안쪽 여백

 

float:left - 레이어가 좌측으로 부터 정렬된다.  

float:right - 레이어가 우측으로 부터 정렬된다.

clear:both - float 속성이 해제된다.

#float

style 속성중에 float를 설명하자니.. span 태그를 하나도 설명 안했는대 여기서

설명하기에는 좀 무리가 있는 듯 싶다. 3장 쯤에 float의 이해와 사용방법을 적도록 하겠습니다..

출처 : 
http://blog.naver.com/baegaha 

트랙백0 And 댓글0
prev | 1 | 2 | 3 | 4 | next

티스토리 툴바