Div [Division, 영역] 태그

작성자 정보

  • 작성자 관리자
  • 작성일

컨텐츠 정보

본문


▷ Division[구역}태그

 ⊙ 태그요소

 ① <div> ... </div>

영역, Division을 지정하고 각종 속성가 style을 적용하는 태그이다.
영역 내에서 자동 줄바꿈이 없다.

 ⊙ 속성(Atributes)

속성
용도
사용법
텍스트 왼쪽 줄 맞춤

<div align="left">글자의 정렬 속성</div>

텍스트 오른쪽 줄 맞춤

<div align="right">글자의 정렬 속성</div>

텍스트 가운데 줄 맞춤

<div align="center">글자의 정렬 속성</div>

텍스트 양쪽 줄 맞춤

<div align="justify">글자의 정렬 속성</div>

style

style 시트 지정

<div style="width:60px; float:left;"> - inline 방식

class

style 시트 class 적용변수

<div class="classname"> - embed 방식

id

style 시트 class 적용변수

<div id="idname"> - embed 방식

title

style 제목 - 풍선도움말

<div id="idname"> - embed 방식

datasrc

데이터 소스를 지정

<div datasrc="#BINDER" datafld="abc">

datafield

데이터에서 열을 선택 지정

<div datasrc="#BINDER" datafld="abc">

dataformatas

데이터 형식 지정

<div dataformatas="text | html | localized-text>

nowrap

줄바꿈 방지 설정

<div nowrap="yes | no">

contentEditable

크기조절 지정

<div contentEditable>수정할 컨텐츠</div>

 ⊙ 속성(Atributes)의 사용 예

Font color 속성 예제

실행결과

<html>
  <head>
    <title>태그 사용 예</title>

  </head>
  <body>
<div align="center">낙망은 청년의 죽음이요 청년이 죽으면 민족이 죽는다.-안창호-<br></div>
<center>영역 끝에서 줄바꿈이 발생하지 않는다.<br></center>
<div align="center">낙망은 청년의 죽음이요<br>
청년이 죽으면 민족이 죽는다.<br>
-안창호-<br></div>
<div nowrap>
웃음(笑)은 세상을 움직이는 힘의 근원이며 숨어 숨 쉬는 살아있는 萬病通治 의사와 같은 무한한 꿈의 에너지입니다.</div>
  </body>
</html>

 ⊙ contentEditable 속성(Atributes)의 사용 예

Font color 속성 예제

실행결과

<div contentEditable>
<img src="1.jpg">
</div>

1.jpg

<div contentEditable>
<span style="width:200; height: 200; border: 1px solid blue;">
</div>

Span 영역을 마우스로 클릭하면 크기를 조절할 수 있습니다.

<div contentEditable>
<table width=200 height=200> <tr> <td>표의 크기는 조절이 가능할 까요?</td> </tr> </table>
</div>

표의 크기는 조절이 가능할 까요?

관련자료

댓글 0
등록된 댓글이 없습니다.
알림 0