HTML 태그

1. 주석

 <!-- -->  (ctrl + / 로 생성가능)

2. 목록태그

• 목록(순서 O). OrderedList

 <ol> </ol>

• 목록(순서 X). UnorderedList

 <ul> </ul>

• 목록의 각 항목

 <li> </li>

• 직선을 표시. 레이아웃의 영역을 나누는 과정에서 사용

 <hr/>

• 본문을 정의하기 위한 태그. 하나의 문단을 구성하고자 할 때 사용

 <p></p>

○ 구현

• html 코드

<p>
  <ol>
    <li> 목록1</li>
    <li> 목록2</li>
    <li> 목록3</li>
  </ol>
  <hr/>
  <ul>
    <li> 목록1</li>
    <li> 목록2</li>
    <li> 목록3</li>
  </ul>
</p>

• 웹 브라우저 상에서의 화면
  1. 목록1
  2. 목록2
  3. 목록3

  ---

  • 목록1
  • 목록2
  • 목록3

3. 문서 구조를 표현

• 문서의 구조를 표현하는 태그
• 각 영역의 구분은 이 태그에 고유한 id값을 부여하여 처리한다.

<div></div>

4. HTML 안에서의 특수문자

• &

5. 이미지 표시

• 이미지

 <img src = "이미지 파일의 경로"
	alt = "이미지 설명"
	width = "가로px"
	height = "세로px"/>

• 이미지를 감싸는 용도로 사용되는데 범위를 지정

 <figure></figure>

• 이미지의 설명을 담은 태그

 <figcatption> </figcatption>

6. 테이블

• 표

 - <table border="테두리 두께"> </table> 

• 행

 - <tr> </tr> 

• 열

 - <td> </td> 

• 제목

 - <th> </th> 

• 표의 최상단

 - <thead> </thead> 

• 표의 본문

 - <tbody> </tbody> 

• 표의 최하단

 - <tfoot> </tfoot> 

6-1. 테이블 속성

• align : 정렬
  • left, center, right 속성 부여 가능
• rowspan : 행을 병합
  • 현재 열이 아래로 몇 행을 병합할지 결정하는
    속성
  • 만약 rowspan="3" 을 지정했다면 그 열은 3줄을
    병합하게 된다.
  • 병합된 열에 해당하는 2, 3 번째 행은 열을 정의해서는 안된다.
• colspan : 열을 병합
  • 가로로 열을 몇 칸 병합할 것인지 설정하는
    속성이다.

○ 구현

• html 코드

<table border="2">
        <thead>
            <tr>
                <th><strong>이름</strong></th>
                <th><strong>성별</strong></th>
                <th><strong>주소</strong></th>
                <th><strong>회비</strong></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>홍길동</td>
                <td>남자</td>
                <td rowspan="2">서울</td>
                <td>1000</td>
            </tr>
            <tr>
                <td>강하늘</td>
                <td>여자</td>
                <td>500</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">합계</td>
                <td>1500</td>
            </tr>
        </tfoot>
    </table>

• 웹 브라우저 상에서의 화면

  이름	성별	주소	회비
  홍길동	남자	서울	1000
  강하늘	여자	500
  합계	1500

7. 입력양식

• 입력 양식을 표시

 <input name = "이름(영어)"
		id = "식별자(영어)" 
		type = "종류"
		value = "기본값"
		maxvalue = "숫자"/>

• name 속성과 id 속성
  • name 속성은 웹 프로그램과 연계되는 속성으로
    한 페이지 안에서 고유한 값을 명시해야 한다
  • id 속성은 해당 페이지에서 그 요소를 식별하기
    위한 값으로 고유한 값을 명시해야 한다.

• 입력요소 앞이나 뒤에서 표시되는 제목을 구성
• 입력 칸이나 버튼 부분 밖의 이름 부분을 클릭해도 되게 함

 <label for="input의 id"></label>

• 장문 입력

 <textarea></textarea>

○ 구현

• html 코드

<div>
  <label for="user_id">아이디</label>
  <input type="text" name="user_id" id="user_id" maxlength="20" 
         placeholder="아이디를 입력해주세요">
</div>
<div>
  <label>회원이름
    <input type="text" name="user_name" id="user_name" maxlength="20" 
           placeholder="이름을 입력해주세요">
  </label>
</div>
<div>
  <label>자기소개
    <textarea type="text" name="memo" id="memo" maxlength="100" 
              placeholder="자기소개를 입력해주세요">
    </textarea>
  </label>
</div>

• 웹 브라우저 상에서의 화면
  아이디
  회원이름
  자기소개

8. 기타 태그

• \n 처럼 줄바꿈

<br/>

• HTML에서 사용자 입력을 수집하고 서버로 제출하는 데 사용

<form action="제출할 URL"></form>

• 웹 양식 요소들을 그룹화하는 데 사용

<fieldset>
  <legend>필드셋 제목</legend>
</fieldset>