HTML 태그

HTML 텍스트

제목 (Heading)

페이지의 타이틀 표시

<h1>내용1</h1>
<h2>내용2</h2>
    ...
<h6>내용</h6>

단락 (Paragraph)

표시할 글의 한 단락을 표시

단락 시작시 줄이 바뀌지만, 내용에서 줄을 바꿔도 변하지 않음

<p></p>

줄바꿈 (Line Break)

브라우저 화면 표시시 줄 바꿈. 시작 태그만 있고 종료 태그는 없음

<br>

가로선 (Horizontal Rule)

수평으로 가로선. 시작 태그만 있고 종료 태그는 없음

<hr>

강조 (Boldface)

텍스트의 특정 부분 강조

<strong>이 의미적으로 보다 강조 됨

<b></b>
<strong></strong>

기울임 (Italic)

이탤릭체로 기울여 표시

<em>도 기울여서 표시하나 강조(emphasize)의 의미를 지님

<i></i>
<em></em>

부등호 기호

< 와 > 는 태그에 이용되기에 특수한 방법으로 작성함

＆lt; <!-- < -->
＆gt; <!-- > -->

HTML 링크

앵커 (Anchor)

'링크' 버튼을 누르면 intro.html 주소로 이동

<a harf='../intro.html'>링크<a>

상대 경로 & 절대 경로

상대 경로 : 내가 위치한 곳에서 찾고자 하는 파일의 위치

절대 경로 : 일의 root 부터 해당 파일까지의 위치

타겟 (Target) 속성

링크를 열때 어떤 window를 이용할지에 대한 내용

생략하면 현재 창에서, _blank 로 지정하면 새 창이 열림

<a harf='../intro.html' target="_blank">링크<a>

HTML 이미지

scr 속성에 이미지 파일의 URL 지정. 종료 태그 없음

width, height 를 사용하여 px 단위로 크기 지정 가능

<img src="fall.jpg" alt="이미지" width="320" height="214">

HTML 리스트

순서 리스트 (Ordered List)

<li> 로 순서를 매겨 표시

type 값을 통하여 순서 문자의 종류를 바꿀 수 있음 (A, a, I, i, 1)

<ol type="A">
    <li>사과</li>
    <li>멜론</li>
    <li>바나나</li>
</ol>

비순서 리스트 (Unordered List)

<li>로 지정된 아이템에 글머리 기호를 매겨 표시

스타일 값에 list-style-type 을 추가해서 점 모양을 변경할 수 있음

<ul style="list-style-type:none">
    <li>사과</li>
    <li>멜론</li>
    <li>바나나</li>
</ul>

HTML 표

테이블 (Table)

표 형식으로 내용을 표시

<table style="width:100%">
    <tr style="background-color:lightgrey">
        <th>이름</th>
        <th>금액</th>      
    </tr>
    <tr>
        <td>상어</td>
        <td>문어</td>
    </tr>
    <tr>
        <td>1000</td>
        <td>3000</td>
    </tr>
</table>

HTML 폼

사용자의 입력을 받는 폼 표시

suvmit 단추를 두르면 모든값을 가지고 action 속성에 지정된 페이지로 이동

폼 (Form)

<form action="처리할 페이지 주소.html" method="get|post">
  <input type="submit">
</form>

action 속성

데이터를 처리할 서버상 스크립트 파일의 주소

이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler) 라고 부름

method 속성

입력받은 데이터를 서버에 전달할 방식

form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달 됨

• get : 데이터를 받음 / post : 데이터를 보냄

텍스트 (Textbox)

input type="text" 폼 내의 항목들은 name 속성으로 구별됨

<form action="처리할 페이지 주소.html">
  <input type="text" name="FirstName">
      <P>
        <input type="submit">
    </p>
</form>

라벨 (Label)

화면 표시 이외에도 해당 텍스트 박스에 포커스가 위치하면 스크린 리더 프로그램에서 그 라벨 내용을 읽어 줌

비밀번호 (Password)

텍스트와 동일하나 복사와 확인이 불가능

<label for="pwd">Password:</label>
<input type="password" name="pwd">

라디오 (Radio)

같은 name 을 가진 것들끼리 묶임, value 속성은 다르게 지정

id 속성으로 label 생성. checked 속성을 주면 기본 선택 되어있음

<input type="radio" id="male" name="gender" value="M" checked><label for="male">Male</label>
<input type="radio" id="female" name="gender" value="F"><label for="female">Female</label>

체크박스 (checkbox)

개별적인 항목을 선택하게 할 때 사용

<input type="checkbox" name="apple" value="apple" checked>Apple
<input type="checkbox" name="orange" value="orange" checked>Orange
<input type="checkbox" name="kiwi" value="kiwi" checked>Kiwi

드롭다운 리스트 (Drop-down)

Radio와 유사. select, option 으로 구현

size="x" 속성에서 한번에 보여지는 수 조절 가능

multiple 속성을 주면 여러 개 선택 가능

<label for="gender">Gender:</label>
<select name="gender">
    <option value="M">Male</option>
    <option value="F" selected>Female</option>
</select>

텍스트 에어리어 (Textarea)

사용자의 자유로운 텍스트 입력

rows, cols 속성으로 크기 조절 가능

<textarea name="intro" cols="30" rows="5">Please introduce yourself here
</textarea>

파일 (File)

파일을 선택하는 다이얼로그가 표시

파일에 대한 처리는 자바스크립트 등을 이용하여 구현하여야 됨

<input type="file" name="picture">

버튼 (Button)

버튼을 표시하고 value 속성으로 텍스트 표시

<input type="button" name="show" value="show">

히든 (Hidden)

화면에 표시되지는 않으나, 내부적으로 어떤 값을 가지고 있다가 자바스크립트 혹은 subit 대상 페이지로 넘겨주는 역활

<input type="hidden" name="hvalue1" value="xyz"