본문 바로가기

PC관련

HTML 기본구조 및 내용

반응형

HTML 기본구조 및 내용

[HTML 기본구조]


<HTML>
     <HEAD>
          <TITLE>
          </TITLE>
     </HEAD>
     <BODY text = "색상지정" background = "배경이미지경로" bgcolor = "배경색상">
     </BODY>
</HTML>
<p> : 한줄 띄우기
<br> : 줄바꿈


 

[Font]
<font>
 size = "크기조절": 1~6
 face = "글씨체"
 color = "색상지정"
</font>
h1 ~ h6 : <h1></h1>
<big>보다크게</big> <small>보통글씨 보다작게</small> 
<sup>위로</sup> 보통글씨 <sub>아래로</sub> <p>
<strong>굵게</strong> <em>기울이기</em>
<blink>깜빡이기</blink> : 인터넷익스플로러 지원안됨
<blockquote>한단락으로 구분지어 자동들여쓰기</blockquote>
<address>서명 : 기울이기 효과</address>

 


[color] : 색상지정
bordercolor : 테이블의 테두리 색
bgcolor : 배경색
align : 정렬 => left / center / right
valign : 수직정렬 => top / middle / bottom
&nbsp; : 공백표시

 


[링크]
<a href = "경로" target = "_blank/ _top / _self / 프레임name">링크걸기</a>
target : blank 새창 / top :  현재 창의 제일 상위 프레임으로 열기 / self : 현재 프레임 / 프레임 name : 지정하고자 하는 프레임
link = "색상지정" : 한번도 클릭하지 않은 링크
alink = "색상지정" : 클릭했을 때의 링크 색상
vlink = "색상지정" : 클릭한 후의 링크 색상

<a href = "mailto:메일주소">이메일 보낼때 사용</a>
mailto: => 아웃룩 이용하여 메일을 보냄

 

 

[Frame구분]
frameset : rows/ cols 로 행과 열을 나눌 수 있음
-frame

 

 

[이미지]
<img src = "이미지경로" alt = "마우스커서 이미지에 대면 뜨는 말풍선" width = "가로크기조절" height = "세로크기조절">

 


[Form]
<form name = "폼이름지정">
action = "보여줄 페이지"
method = "보여줄 방식"

 input
 <input type = "~" maxlength = "수치조절" size = "보여지는 수">
 ~ => text : 한줄짜리 입력 form
 maxlength : 입력하는 글자 수 제한
 size : 보여지는 글자 수 제한
 type : password로 하면 ●●● 이런식으로 나타남
 
 radio 버튼 : 한가지만 선택가능
 <input type = "radio" name = "동일한 이름" value = "다른 값" checked>
 checked : 미리 선택되어져있는 기본설정
 
 check박스 : 다중선택가능
 <input type = "checkbox" name = "동일한 이름" value = "다른값" checked> 빨강

 

 textarea
 <textarea name = "" cols ="가로넓이 조절" rows = "입력칸의 높이 조절">
 한줄 이상 입력
 </textare>

 

 선택사항 : 기본적으로 하나만 보여지고 나머지는 밑으로 나열됨(화살표클릭), 한가지만 선택가능
 <select name = "~" size = "세로 길이조절" multiple(여러개 선택가능)>
  <option value = "다른값"> ex1</option>
  <option value = "다른값"> ex2</option>
 </select>


  Hidden : 감춰주는 타입
 <input type = "hidden" name = "a" value = "1234" />

 

 파일찾기
 <input type = "file"  />

<input type = "submit" value = "데이터 전송하는 버튼"/>
=>이미지로 만든 데이터 전송버튼
<input type = "image" src = "경로" >

<input type = "reset" value = "입력한 데이터들을 지우는 취소 버튼"/>
<input type = "button" value = "버튼"/>
</form>

 


[table]

<table cellpadding = "cell과 데이터사이 여백조절" cellspacing = "cell 과 cell사이 여백조절"
 border = "테이블 테두리 두께" width = "넓이">
<thead>
</thead>
      </tbody>
              <tr align = "정렬">row를 나타냄(줄/행)
   <td align = "정렬">col를 나타냄(칸/열)</td>
   <td>tr에 align이 되어있고, td에는 지정하지 않으면 tr의 속성을 이어받음 </td>
             </tr>
       </tbody>
     </tfoot>
</table>

=> thead / tbody / tfoot 생략가능

 

 

[JavaScript] (HTML안/HTML코드안/별도 페이지)
-버튼 클릭시 경고창 띄우기 : onClick = "alert('내용')"

-<SCRIPT LANGUAGE = "JavaScript">
<!--
 function showMsg()
 {
  alert('경고창!');
 }
//-->
=> 자바스크립트 선언 후 , 함수 만들고 onClick = "showMsg()" 이런식으로 함수명 불러서 사용


출처 : http://rladmsdk3.blog.me/90097453612 (김바비님 블로그)


반응형