'JAVA/HTML'에 해당되는 글 8건

Div 태그 속성

id : 객체를 구별하기 위해서 사용하며, 자바스크립트로 객체에 접근할 때 사용된다.

class : 설정된 같은 태그들 중에서 같은 모양의 style속성을 적용할 때 사용한다.

style : 레이아웃의 모양등에 관한 실제적인 설정을한다. 

    속성과 속성에 대한 값은 콜론(:)으로 구분하고, 각 속성의 구분은 세미콜론(:)으로 한다.

position : 위치를 정할 때 어떤 방식으로 선택할지 지정

• absolute : 브라우저의 위치로 부터 위치가 시작이된다.
• relative : 특정 엘리먼트로 부터 위치가 시작된다.

left, top : 문서내에서 레이어의 위치를 지정해준다. 레이어의 위치를 이동하거나 수정 할 수 있다.

left : y좌표(좌측기준)

top : x좌표(상단기준)

width : 레이어 너비

height : 레이어높이

overflow : 레이어속의 내용이 레이어보다 클경우 스크롤바생성

• auto : 내용이 클 경우에만 스크롤이 생성된다.
• hidden  : 지정된 크기에서 벗어나는 부분은 보이지 않는다.
• scroll : 내용의 크기와 상관없이 스크롤바가 생성된다.
• visible : 정해진 크기와 상관없이 내용을 모두 보여준다.

visibility ; 레이어를 보여줄지 말지를 결정하는 속성(visible,hidden,inherit)

z-index : 레이어의 겹치는 순서를 설정한다. 수치가 클수록 상위에 위치

background-color : 레이어의 배경색

background-repeat : 배경 이미지의 반복여부

• repeat : xy방향모두
• repeat-x : x방향만
• repeat-y : y방향만
• no-repeat : 반복하지않는다.

backgournd-attachment : 문서가 스크롤 될때 배경 이미지의 스크롤 여부 지정

• fixed : 대상이 스크롤이 되더라도 배경 이미지는 고정
• scroll : 대상이 스크롤이 되면 배경 이미지도 스크롤이 된다.

font-size : 레이어 안쪽에서 작성될 글자 크기를 설정한다.

color : 레이어 안쪽에서 사용되는 글자의 색상을 설정한다.

padding : 여백에 관한 속성

• padding-top : 상 
• padding-right : 우
• padding-bottom : 하
• padding-left : 좌

filter : 레이어에 적용되는 필터 속성을 지정한다.

• alpha : 투명도 설정 style = "filter:alpha(opacity = 50)"
• blur : 빠르게 움직이는 물체를 촬영한효과 style = "filter:blur(direction = 135, strength = 30"
• chroma : 특정 색상을 투명하게 style = "filter:chroma(color=yellow)"
• dropshadow : 그림자 효과 style = "filter:dropshadow(color = gray, offx = 3, offy=3, positive = 0"
• flipH : 수평방향으로 반사되어 비치는 효과 style = "filter:flipH()"
• flipV : 수직방향으로 반사되어 비치는 효과 style = "filter:flipV()"
• glow : 경계선 바깥쪽에 색번짐 효과 style = "filter:glow(color = cornflowerblue, strength = 8)"
• gray : 대상을 흑백으로 표현 style = "filter:gray()"

form태그 이외의 태그들이 폼에 데이터를 적게된다.

input태그

형식을 지정함에 따라 여러 형태의 필드를 폼에 구성 할 수 있다.

 input태그 속성

<frameset>

웹페이지를 여러영역으로 나눌 때 사용한다.

rows - 페이지를 상하(픽셀이나%)로 나눌 때 사용한다.

cols - 페이지를 좌우(픽셀이나%)로 나눌 때 사용한다.

border - 나누어진 프레임의 테두리(0이나 숫자)를 지정한다. 기본값은 1이다.

bordercolor - 테두리 색(색상이나 색상코드)을 지정한다.

frameborder - 프레임을 구분하는 테두리를 화면에 표시할지 여부(yes,no)를 지정한다.

                   기본값은 yes이다. no의 경우 border 값을 0으로 해야 한다.

프레임분할 예

<frameset rows=" 50, 30, * ">

화면을 상하로 3등분하는데 크기는 50픽셀, 30 픽셀, 나머지로 분할한다.

</frameset>

<frameset rows=" 50%, 50% ">

화면을 상하로 50%씩 분할한다.

</frameset>

<frameset rows=" *, 2* ">

화면을 상하 2개로 분할하는데 아래가 위의 2배가 되도록 분할한다.

</frameset>

<frame>

<frameset>태그로 나누어진 영역들에 대하여 파일을 지정하는 태그이다.

name - 프레임의 이름을 지정한다. target 속성을 사용할 때 필요하다.

src - 프레임에 해당하는 파일(파일 경로와 파일 이름)을 지정한다.

noresize - 프레임을 고정하여 크기가 바뀌지 않게 지정한다.

scrolling - 프레임에 스크롤 막대가 표시되지 않게 지정(yes,no,auto)한다. 기본값은 auto이다.

<frame src = "about:blank"> - 빈페이지

frameset 에서 작성

<frame src = "frame1.htm" name = "f1"> 

frame2.htm 에서 작성

<a target = "f1" href = "www.naver.com">네이버바로가기</a>

이렇게 하면 frame2.htm에서 하이퍼링크(네이버바로가기)를 클릭했을때 frame1.htm에서 화면을 표시해준다.

<iframe>

다른 웹 페이지를 자신의 웹 페이지에 포함시키는 태그이다.  다른사이트를 자신의 웹페이지에 포함시키려고한다면 이 태그를 이용하면 된다.

 <table>태그

 표 를 만들 때 사용한다. 웹페이지 전체를 구성하기도함
   
    align - 정렬
    bgcolor - 배경색
    background - 배경이미지
    border - 테두리 두께
    bordercolor - 테두리색 

    bordercolordark  - 테이블의 그림자 
    cellpadding - 셀안쪽여백(픽셀)
    cellspacing - 셀과 셀사이 여백 (픽샐)
    width - 너비(픽셀)

    height - 높이 (픽셀)
    frame - 표바깥쪽 테두리 (above,below, border, box, ihs,rhs,hsides,vsides,void)
    rules - 표안쪽 테두리 (all,cols,rows,group,none)

    hspace/vspace - 테이블과 주변 글들과의 여백 지정

<table>

  <caption>표 제목</caption>

   <tr>  <-- 행구분

    <th>열의 제목</th>
    <td>셀의 내용</td>
   </tr>

<table>
 

 <tr>태그

 표에서 행을 관리할 때 사용한다.

 align - 행의정렬
 bgcolor - 행의 배경색
 valign - 행의 세로정렬방식(top,middle,bottom)
 height - 행의 높이
 rowspan - 행의 병합(개수)

<th>와 <td> 태그

표에서 열을 관리할 때 사용한다 특히 <th>태그는 열의 제목을 표시할 때 사용한다. 기본적으로 굵게,중앙 정렬이 적용된다. <td>태그는 열을 구분지을 때 사용한다.

align - 셀의 정렬방식(left,right,center)을 지정한다. 기본값을 left이다.

valign - 셀에서 세로 정렬방식(top,middle,bottom)을 지정한다. 기본값을 middle이다.

background - 셀의 배경 이미지(이미지파일)를 지정한다.

bgcolor - 셀의 배경색(색상이나 색상코드)을 지정한다.

colspan - 셀의 병합(열의 개수)을 지정한다.

nowrap - 셀에서 중 바꿈이 되지 않도록 지정한다.

width - 셀의 너비(픽셀)를 지정한다.

<table> 태그 내에서 사용하는 태그들에는 다음과 같은 것들이 있다.

<caption> - 표의 제목이나 간단한 설명을 표시할 때 사용한다.

<col> - 모든 행에 대해 해당 열의 속성을 지정할 때 사용한다.

<colgroup> - 여러 열을 하나의 그룹으로 묶어서 속성을 한번에 지정하는 태그로 span속성을 사용해서 몇개의 열을 묶을지 표시하는 것이 가는 하다.

<thead> - 표 내부에서 또 다른 그룹을 지정한 경우 머리글을 지정해 준다.

<tfoot> - 표 내부에서 또 다른 그룹을 지정한 경우 바닥글을 지정해 준다. <tbody>태그보다 우선해서 적는다.

<tbody> - 표 내부에서 또 다른 그룹을 지정한 경우 본문을 지정해 준다.

 GIF,JPEG,PNG정도로 제한 로컬 경로는 바람직하지 못하다.
 http://서버의_IP_주소:8080/파일이름.확장자  웹경로로 사용하기에 적합하다.

  src 이미지 경로를 지정
  alt 이미지에 대한 설명텍스트
  align 이미지 정렬방식 left,right,top,middle,bottom
  border 이미지주위 테두리(숫자) 0일경우 테두리없음
  height 이미지높이(픽셀)
  width 이미지 너비(픽셀)
  hspace 좌우여백(픽셀)
  vspace 상하여백(픽셀)

<embed>태그
 src 경로
 autostart 웹페이지 열었을때 사운드 파일을 자동재샐여부 true,false
 hidden 미디어 플레이어를 화면에서 감출지 여부 true false
 width 미디어 플레이어를 화면에 보여줄 경우 너비를 지정
 height 미디어 플에이어를 화면에 보여줄 경우 높이를 지정
 loop 재생하는 반복횟수지정 true 무한반복 false 한번만 재생 
 
 <a>태그

 href 연결할 문서의 경로

<a href = "http://www.naver.com"> 네이버사이트로 접속

<a href = "aa.htm"> aa.htm 파일로 연결 

<a href = "a.gif"><img src = "a.gif"> a.gif 이미지 파일로 연결 

<a href = "mailto:a@naver.com"> 해당 메일 주소로 아웃룩 익스프레스 실행 

 name 동일문서 내 특정위치로 이동

<a name = "#top"> top이라는 이름으로 책갈피 설정

      target 링크된 내용이 열릴대상(_blank, _parrent,_self,_top)

  <a href = "aa.htm" target = _blank> aa.htm 파일을 새 창에서 보여줌

      title 링크에 마우스를 올리면 설명문 보여줌

  <a href = "aa.htm" title = "설명문"> 링크에 마우스를 올리면 설명문 보여줌

 [프로그래밍리스트종류]
 

순서를 부여하는 목록을 나열할 수 있는 태그 -  순서 목록(Ordered list)
 <ol type = "a"  >  // 이렇게 하면 a.b.c순으로 나옴

  <lh>목록의 제목</lh>
  <li>JAVA</li>
  <li>c</li>
  <li>c++</li>
 </ol><br/>
 

순서없이 목록을 나열할수 있는 태그이다. - 비순서 목록(Unordered list)

 <ul type = "square"> //기본값 disc이다. (한글 서식같은 느낌)

  <lh>목록의 제목</lh>
  <li>JAVA</li>
  <li>c</li>
  <li>c++</li>
 </ul><br/>
 

순서없이 목록나열할수 있으나 자식태그로 제목과 설명형태의 목록을 구성할수 있다.

 <dl>
  <dt>제목</dt>
  <dd>내용</dd>
 </dl>

인용문

<blockquote>

인용문

</blockquote>

목록태그 속성

start - 시작번호지정

value - 해당목록의 시작번호 지정

type - 목록 번호 스타일지정

<font>태그의 속성

color 색상

face 글씨체

size 글씨 크기

  <b>굵은 글씨</b>

  <i>글씨 기울이기</i>

  _아래첨자

  ^위첨자

  <u>글씨 아래 줄</u>

  <s>글자취소</s>

  <strike>최소선 표시</strike>
 
  <tt>타이핑체</tt>
 
  <big>한단계 크게</big>
 
  <small>한단계 작게</small>

  <address>경기도 수원시 권선구</address><br/>

  <blockquote>문단 들여쓰기</blockquote><br/>

  <pre>
  글자 그대로 이안에 쓰면 그래도올라감
  </pre>
 
  <xmp>
 <pre>와 비슷하지만 <xmp>는 태그 까지 다 보여줌
 <pre>,<xmp> 둘다 태그가 끝나는 시점에서 개행함
  </xmp>
 
  <marquee behavior="slide" >글자 움직임</marquee><br/>

body 태그

background -  배경 이미지(파일 이름이나 URL)을 지정

bgcolor - 배경색(색상이나 색상코드)을 지정한다. 기본값은 흰색이다.

text -  글꼴색(색상이나 색상코드)을 지정한다. 기본값은 검은색이다.

link - 링크색(색상이나 색상코드)을 지정한다.

vlink - 방문했던 링크 색(색상이나 색상코드)을 지정한다.

alink - 링크를 클릭하는 순간의 색(색상이나 색상코드)을 지정한다.

topmargin  - 위여백

leftmargin - 왼쪽여백

bgproperties - 배경이미지 고정

scroll - 스크롤바 비활성화

<p>태그는 HTML은 공백(스페이스)과 엔터를 여러번 입력하더라도 하나의 공백으로만 인식합니다.

<h1>~<h6>  헤드라인 숫자가 커질수록 작아진다.

<hr> 태그는 문단과 문단 사이를 구분할 때나 간단한 시각적 효과를 줄때 문성의 중간에 입체감을 주는 수평선 태그이다.  

 특수 문자

&lt;  여는괄호

&gt; 닫는괄호

&copy; 저작권표시

&trade; 상표표시

&nbsp; 공백문자

&reg; 등록상표 표시

&smp; &기호 표시

&#163; 프랑표시

&#165; 엔표시

&quot; 쌍따옴표