Div속성
Language/HTML 2010. 10. 20. 15:40Div속성
1. 글씨속성
<b>굵은글씨</b> → <strong>굵은글씨</strong>
<i>이태릭체</i> → <em>이태릭체</em>
2. 짝이 없는 태그(빈태그: 끝나는 표시가 없는 태그)는 뒤에 공백과 슬러쉬를 붙임.
<br> → <br/>
3. 속성값은 반드시 따옴표로 감싸고, 이미지에 반드시 대체텍스트 넣어줌.
<img src="이미지주소"> → <img src="이미지주소" alt="대체텍스트"/>
4. 약식표기(ex: checked, nowrap) 허용 안 됨.
5. 태그이름과 속성은 반드시 소문자로 표기.
<BODY><P>내용</P></BODY> → <body><p>내용</p></body>
6. <body>에 직접 내용을 삽입할 수 없고 반드시 블록요소(h1,p,div 등)로 감싸주어야 함.
<body>내용</body> → <body><p>내용</p></body>
*블록요소란: 항상 앞뒤에 줄넘김을 하는 요소. ex)<p></p>로 둘러싸인 내용 뒤에 <br />을 입력하지 않아도 줄이 넘어감.
<br />은 블록요소가 아닌 인라인요소.
7. name속성 대신 id사용.
<div name="이름"> → <div id="이름">
8. table 대신 div로 표현 예제.
①<table>
<tr>
<td>내용</td>
</tr>
</table>
→ <div>내용</div>
②<table>
<tr>
<td>내용</td>
<td>내용2</td>
</tr>
</table>
→ <div style="float:left;">내용</div>
<div>내용2</div>
③<table>
<tr>
<td width="80">내용</td>
<td>내용2</td>
</tr>
<tr>
<td colspan="2">내용3</td>
</tr>
</table>
→ <div style="float:left;width:80px;">내용</div>
<div style="margin:0 0 0 80px;">내용2</div>
<div style="clear:both;">내용3</div>
④<table>
<tr>
<td width="80">내용</td>
<td>내용2</td>
<td width="80">내용4</td>
</tr>
<tr>
<td colspan="3">내용3</td>
</tr>
</table>
→ <div style="float:left;width:80px;">내용</div>
<div style="margin:0 80px 0 80px;">내용2</div>
<div style="float:right;width:80px;">내용4</div>
<div style="clear:both;">내용3</div>
9.div style 속성 (정렬)
① style="text-align:left;" 텍스트의 좌,우,가운데 정렬. (left, right, center)
② style="vertical-align:middle;" 한 줄 안에서 크기가 다른 폰트의 상하위치 (top, middle, bottom, text-bottom)
10.div style 속성 (위치와 크기)
① style="position：absolute;" absolute(절대위치), relative(상대위치), static(기본값), fixed(고정)
② style="top:15px;" 위에서 아래로 얼만큼 떨어져있는지
③ style="left:15px;" 왼쪽에서 오른쪽 〃
④ style="bottom:15px;" 아래에서 위 〃
⑤ style="right:15px;" 오른쪽에서 왼쪽 〃
⑥ style="z-index:1" 레이어의 순서. 값이 높을 수록 맨 위에 나타남.
⑦ style="visibility:hidden;" hidden(레이어숨김), visible(레이어보임)
div 속성은 style시트로 설정한다. 레이어 객체에 접근 할때에는 레이어아이디.style.속성으로 접근한다.
ex) layerID.style.overflow="auto";
※ 속성
Ø ?position ： absolute(절대위치), relative(상대위치), static(기본값), fixed(고정)
Ø ?top : 위부터 아래쪽으로 위치
Ø ?left : 왼쪽부터 오른쪽으로 위치
Ø ?width : 레이어 가로 길이
Ø ?height : 레이어 세로 길이
Ø ?z-index : 레이어 순서(값이 높을수록 위쪽)
Ø ?visibility : hidden(레이어 숨김), visible(레이어 보임)
Ø background : 레이어 배경색
Ø ?overflow : visible(정해진 크기 무시하고 모두 보여줌), hidden(정해진 크기만큼만 보여줌, 넘는 내용은 짤림), scroll(수평,수직 스크롤을 보여줌), auto(내용이 넘치는 방향으로 스크롤 보여줌)
Ø ?font-family : 폰트종류
Ø ?font-size : 폰트크기
Ø ?padding-top : 위쪽으로부터의 안쪽 여백
Ø ?padding-left : 왼쪽으로부터의 안쪽 여백
Ø ?padding-right : 오른쪽으로부터의 안쪽 여백
Ø ?padding-bottom : 아래쪽으로부터의 안쪽 여백
- 추가
style.
background-color:#색상; - 배경색 지정.
border-left:값px solid #색상; - 왼쪽 테두리 값과 색상 지정.
border-right:값px solid #색상; - 오른쪽 테두리 값과 색상 지정.
border-top:값px solid #색상; - 위쪽 테두리 값과 색상 지정.
border-bottom:값px solid #색상; - 밑쪽 테두리 값과 색상 지정.
margin: 0 auto; - div 가운데 정렬.
width:값px; - 가로 크기 지정.
height:값px; - 세로 크기 지정.
float:left,center,right; - div 위치를 좌, 중간, 우측 정렬.
※ 레이아웃에 관련된 속성
Ø ?float:left - 레이어가 좌측으로 정렬되며, 이후 추가되는 레이어는 옆(좌측)으로 붙게 된다.
Ø ?float:right - 레이어가 우측으로 정렬되며, 이후 추가되는 레이어는 옆(우측)으로 붙게 된다.
Ø ?clear:both - 위의 적용이 해제된다.
ex) <div></div>
<div style="float: left;"></div>
<div></div>
<div style="clear: both;"></div>
'Language > HTML' 카테고리의 다른 글
| border-collapse (0) | 2011.05.12 |
|---|---|
| input/textarea에 한/영키 사용않고 한글이나 영문 자동으로 나오게 (0) | 2010.11.10 |
| 메타(META)태그 (0) | 2010.10.07 |
| cellpadding, cellspacing (0) | 2010.09.29 |
| check box 채크 여부 확인 (0) | 2010.09.13 |