HTML - Tags

빈 태그

1.  종류

<br> <!-- 개행 -->
<hr> <!-- 수평선 -->

 

2.  예제

exam01-font.html

<br> <hr> <font> <strong> <u> <i>

 

---

 

<a>

1.  개념

<a href="" target=""></a>

새로운 웹페이지를 열 때 사용 된다

href  =" link ="

target = "  _blank / _self / _parent / _top "

<ul>
	<li type="square"><a href="./exam02-img.html">현재 사이트의 특정 파일로 링크</a>
	<li><a href="https://www.naver.com" target="_blank">다른 사이트로 링크 (새 창)</a></li>
</ul>

• 현재 사이트의 특정 파일로 링크
• 다른 사이트로 링크 (새 창)

 

 

2.  target 종류

•  _blank
  • 새 윈도우 창을 열어서, 웹페이지가 열린다. 기존의 창은 그대로 남겨져 있다

 

• _self
  • 현재 윈도우창에 그대로, 링크된 웹페이지가 열린다 (현재의 프레임)

 

• _parent
  • 현재 프레임의 부모 프레임에서 새 웹페이지가 열린다
  • 만약 어떤 창 A에서 창 B를 새로 열었다
  • 그런데 창 B에서 _parent로 창을 열면 창 A에서 열리게 된다

 

• _top
  • 최상위 프레임에서 열린다
  • _parent와 비슷하지만 _parent는 바로 이전 창(부모창)에서 열리고
  • _top은 최상위(가장 최고 부모)창에서 열린다

 

 

3.  예제

exam02-img.html

<img src="" alt="" />

 

---

 

목록 리스트(list) 관련 태그

<ul>, <li>

1.  개념

• <ul>
  • 비순차적 목록
  • unordered list 의 약자

• <li>
  • 세부리스트항목
  • <li> 에는 <br>태그 속성이 포함된다

<ul type="square"> 
   <li type="disc">javascript</li>
   <li>php</li>
   <li>java</li>
   <li>python</li>
   <li>c#</li>
</ul>

• javascript
• php
• java
• python
• c#

 

2.  예제

exam03-ul.html

<ul> <li> <a href="https://www.naver.com" target="_blank">

 

 

<ol>, <li>

• <ol>
  • Ordered List의 약자
  • 순서를 표현하는 방식을 지정 가능

• <li>
  • 세부리스트항목
  • <li> 에는 <br>태그 속성이 포함된다

<ol type="A/a/I/i/1" start="적용할 시작순서">Laungage
   <li type="A/a/I/i/1" value="적용할 시작순서">javascript</li>
   <li>php</li>
   <li>java</li>
   <li>python</li>
   <li>c#</li>        
</ol>

Laungage
1. javascript
2. php
3. java
4. python
5. c#

 

 

definition tags <dl>, <dt>, <dd>

1.  개념

• 용어와 그에 대한 정의를 나열하는데 사용

 

2.  종류

• <dl>
  • 정의 목록의 전체
  • 제목과 설명이 한 쌍인 설명 목록(description list)을 만들 때 사용
• <dt>
  • 용어
  • 제목 표시
• <dd>
  • 그 용어에 대한 정의
  • 설명(내용) 표시

 

 

3.  예제

<dl>
   <dt>HTML</dt>
   <dd>HyperText Markup Language</dd>
   <dd>웹페이지를 위한 지배적 마크업 언어</dd>
   <hr />
   <dt>JAVA</dt>
   <dd>객체지향 프로그래밍 언어</dd>
   <dd>웹 애플리케이션 등 가장 많이 사용되는 언어</dd>
</dl>

HTML

HyperText Markup Language

웹페이지를 위한 지배적 마크업 언어

---

JAVA

객체지향 프로그래밍 언어

웹 애플리케이션 등 가장 많이 사용되는 언어

 

<h3>도시 소개</h3>
<hr>
<dl>
    <dt>California</dt>
    <dd>맑고 화창한 날씨가 좋고 태평양의 아름다운 해변을 가진 멋진 주</dd>

    <dt>Florida</dt>
    <dd>미국의 동남부에 위치한 주로 많은 휴양 도시가 있고 미국 최 남단이 연결된 아름다운 주</dd>

    <dt>Texas</dt>
    <dd>드넓은 목장들이 있어 텍사스 바베큐로 유명하고 석유가 생산되는 주</dd>
</dl>

도시 소개

---

California

맑고 화창한 날씨가 좋고 태평양의 아름다운 해변을 가진 멋진 주

Florida

미국의 동남부에 위치한 주로 많은 휴양 도시가 있고 미국 최 남단이 연결된 아름다운 주

Texas

드넓은 목장들이 있어 텍사스 바베큐로 유명하고 석유가 생산되는 주

 

exam18-definition.html

<dl> <dt> <dd>

 

---

 

영역 태그

<div>

• 화면 1줄 영역
• body 문서 안에서 각 영역의 세션을 구분 정의
• 구역을 나누는 태그. 가로줄 전체 다 차지 (너비 100%)
• block

⚒️ 예제

exam19-div.html

<div id="wrap" >

 

 

<p>

• 줄바꿈 됨
• 문단(paragraph) 텍스트 절을 기재할 때 사용
• div와 거의 같음
• block

 

 

<span>

• 일반적으로 텍스트에 색칠, 크기, 좌우간격을 조절하는데 사용
• inline

 

<div> vs <p>

<div>	<p>
세션 나누기	글자 표현
개행 O
<div>는 <p>를 포함할 수 있다 각 영역의 용도를 구분하는 기능이므로 다른 블록 요소가 하위에 포함될 수 있	<p> 태그 하위에는 다른 블록 요소가 포함되어서는 안됨 <p> 태그 하위에는 <span>, <a>, <strong> 등과 같은 인라인 요소만 올 수 있다

 

---

 

<form>

1.  개념

• 정보를 입력 또는 선택하고 버튼을 클릭하며 정보를 서버에 전달하고 응답받는 양방향의 의사소통을 지원하는 입력양식
• 입력 양식 전체를 감싸는 태그
• form 의 내부에는 <input>, <select>, <textarea> 등의 태그들이 포함된다
• name 속성의 값과 유저가 입력한 값이 한 쌍이 되어 서버측에 전달된다
• <form></form> 사이에 다른 <form> 태그가 올 수 없다
• <form> 속성의 이름은 한 페이지에서 중복하여 사용하면 안된다

 

2. <form> 속성

Form 태그의 속성	설명
method	전송 방식 선택 - get : 256~4096 byte까지만 전송 가능 - post : 입력 내용의 길이에 제한 X
name	form의 이름 서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용
action	form을 전송할 서버 쪽의 script 파일을 지정 전송되는 서버 url 또는 html 링크
target	action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정
autocomplete	자동 완성 on으로 명시하면, 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값들을 드롭다운 옵션으로 보여준다
enctype	폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시 - application/x-www-form-urlencoded 기본값으로, 모든 문자들은 서버로 보내기 전에 인코딩됨을 명시함  - multipart/form-data 모든 문자를 인코딩하지 않음을 명시함. 이 방식은 <form> 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용함 - text/plain 공백 문자(space)는 "+" 기호로 변환하지만, 나머지 문자는 모두 인코딩되지 않음을 명시함
novalidate	폼 데이터(form data)를 서버로 제출할 때 해당 데이터의 유효성을 검사하지 않음을 명시

 

3.  <form> 예제

내용 입력하기

아이디

비밀번호

자기소개

숨겨진 항목

 

exam04-form.html

아이디, 비밀번호, 자기소개, 숨겨진 항목

 

 

<input>

1.  개념

• 사용자가 정보를 입력하는 부분
• type 에 따라 어떤 형식으로 폼 양식을 정할지 결정

 

 

2.  <input> 속성

input 속성	설명
readonly	읽기 전용 필드로 만들기
placeholder	input 요소에 입력되어야 할 값에 대한 힌트를 제공 (필드 클릭시 내용 사라짐) 이러한 힌트는 예시가 될 수도 있고, 입력 형식에 대한 설명이 될 수도 있다
autofocus	페이지를 불러오자 마자 특정 부분에 마우스 커서가 표시되도록 하는 것
autocomplete	자동완성 설정
max / min	<input> 필드의 최대값과 최소값 지정
maxLength	텍스트 필드에 최대로 입력할 수 있는 문자의 개수 지정
step	숫자의 간격 설정 <input> 이 date, datetime, datetime-local, month, week,time, number, range일 경우만 사용가능
required	필수 입력 필드 지정(빈칸이면 안 넘어감) 반드시 입력되어야 할 필수 input 요소를 명시
type ⭐	input 태그의 타입을 지정 단순히 텍스트입력창인지 이메일, 전화번호 양식 혹은 파일첨부, 동영상 첨부 인지
pattern	<input> 요소에 입력된 값을 위한 정규 표현식(regular expression)을 명시

pattern

• input 요소에 입력된 값을 검사하기 위한 정규 표현식(regular expression)을 명시
• 정규 표현식 : 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴

 

• 대괄호 앞에 ^가 붙으면 시작을 뜻하고 대괄호 안에 ^가 붙으면 제외를 뜻한다
• ^[a-z]로 되어 있으니 시작을 영문 a-z로 하는 것을 뜻한다
• []+[] : + 연산자로 연결을 한다
• [ +] :  1회 또는 그이상 횟수로 매치
• [ ]* :  0회 또는 그이상 횟수로 매치
• {5,19}는 5~19자리를 뜻한다

 

<form>
	여러분의 이메일 주소를 입력해주세요 : <br><br>
	<input type="email" name="email"
	pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*" title="이메일 양식">
	<input type="submit" value="전송">
</form>

위의 예제에서 정규 표현식의 의미

• [a-zA-Z0-9] : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나올 수 있음
•  [@] : '@' 문자만이 나와야 함
• [.] : '.' 문자만이 나와야 함
• [.]* : '.' 문자가 나와도 되고 나오지 않아도 됨
• [a-zA-Z0-9]* : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나와도 되고 나오지 않아도 됨

 

⚒️  예제

exam05.html

pattern 속성을 이용한 입력 형식 제한

 

 

3.  <input> type 속성

input type 속성	설명
hidden	서버로 보내는 값들을 보내는 필드(사용자에게는 보이지 X)
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 <input type="text" value="write email or phone number" size="10" maxlength="5" />
search	검색상자 (크롬이나 사파리에서만 사용 가능하며 크로스브라우징이 안되기에 잘 사용하지는 않는다.)
tel	전화번호 입력 필드 <input type="tel" />
url	URL 주소를 입력 필드 <input type="url" />
email	메일주소 입력 필드 '@' 가 들어간 이메일 형식인지 검사해준다 <input type="email" id="useremail" name="useremail" />
password	비밀번호 입력 필드 <input name="password" required type="password" placeholder="Password" />
number	숫자를 조절할 수 있는 화살표
range	숫자 범위를 조절할 수 있는 슬라이드 막대 min 과 max로 범위를 지정하고 step 으로 증가 값을 세팅할 수 있다. 참고로 기본 세팅은 파란색으로 되어있는데, CSS로 커스터마이징을 할 수 있다. 다만 각 브라우저마다 가능한 정도가 다르니 확인할 필요가 있다. <input type="range" id="volume" name="volume" min="0" max="11" />
color	색상표
checkbox	체크박스 (2개이상 선택 가능) <input type="checkbox" id="cookie" name="cookie" checked> <label for="cookie">Cookie</label>
radio	라디오 버튼 (1개만 선택 가능) <input type="radio" id="apple" name="drone" value="apple" checked> <label for="huey">Apple</label>
datetime	국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)
datetime-local	사용자가 있는 지역을 기준으로 한 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)
date	사용자 지역을 기준으로 한 날짜(연, 월, 일) <input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31">
month	사용자 지역을 기준으로 한 날짜(연, 월)
week	사용자 지역을 기준으로 한 날짜(연, 주)
time	사용자 지역을 기준으로 한 시간(시, 분, 초, 분할 초)
button	버튼을 만들어 클릭했을 때 이벤트를 발생시킬 수 있다. Submit과는 차이가 있다. JavaScript를 사용해 효과를 만들면 된다. <input type="button" value="새 창 열기" onclick="window.open()" />
file	파일을 첨부할 수 있는 버튼 (accept를 사용해 제출 가능한 파일 양식을 지정할 수도 있다.) <input type="file" accept=".doc,.docx" />
submit	서버전송 버튼 <input type="submit" value="Log In" />
image	submit 버튼 대신 사용할 이미지
reset	리셋 버튼 사용자가 입력한 모든 정보를 지울 수 있다. 해당 Form에 입력했던 내용들을 처음부터 입력하고 싶을 때 활용함. <input type="reset" />

value : 해당 요소에 기본적으로 작성되어 있을 값을 기술

 

 

4.  <input> 예제

exam05-choice.html	checkbox, radio
exam08-file.html	파일첨부
exam03.html	<form oninput="total.value = parseInt(x.value) + parseInt(y.value)" action="">
exam04.html	date 타입을 이용한 날짜 선택
exam06.html	required 속성을 이용한 필수 입력 설정

 

button

---

checkbox

사과
포도
복숭아

---

color

---

date

---

datetime

---

datetime-local

---

email

---

file

---

hidden

hidden filed는 사용자에 표시되지 않는다.

---

image

---

month

---

number

---

password

---

radio

남자
여자

---

range

---

reset

---

search

---

submit

---

tel

---

text

---

time

---

url

---

week

 

 

submit ~ action

1.  개념

• <form>태그 안에 있는 입력상자의 데이터를 들고 페이지 이동

 

2.  종류

• button   
  • button ~ onclick
  • <input type="button"/>
  • <button />

 

• 이미지
  • <input src="" alt=""/>
  • <input type="image" src="" alt=""/>
  • input type="image" : 자동으로 submit

 

3.  예제

exam09-form.html exam09-result.html

• exam09-form.html; 입력결과를 전송받기 위한 페이지

<input type="button" value="입력완료"
onclick="javascript:location.href='exam09-result.html'" />


<!-- input type="image" : 자동으로 submit -->
<input type="image" src="../image/ok.png" width="30" alt="OK"/>
<!-- return false; : 자동으로 submit 해제 -->
<input type="image" src="../image/ok.png" width="30" alt="OK" onclick="return false;" />

• exam09-result.html; 사용자가 form에 입력한 내용을 전달받아서, 후속 처리를 진행한다

<input type="button" value="뒤로" onclick="history.go(-1)" />

 

 

<textarea>

1.  개념

<input> 요소의 "text" 타입과 비슷한 형태

 

2.  <input> 요소의 "text"   vs   <textarea>

<input> 요소의 "text"	<textarea>
한 줄만 입력 가능	여러 줄의 긴 내용 입력 가능

 

3. <textarea> 속성

textarea 속성	설명
autofocus	페이지가 로드될 때 자동으로 포커스가 <textarea> 요소로 이동됨을 명시
cols	텍스트 입력 영역 중 보이는 영역의 너비를 명시
dirname	폼 데이터(form data)가 서버로 제출될 때 서버로 보낼 텍스트 입력 영역의 텍스트 방향성(text directionality)을 저장할 이름을 명시 (언제나 이름 뒤에 “.dir”를 추가함)
disabled	해당 <textarea> 요소가 비활성화됨을 명시
form	해당 <textarea> 요소가 포함될 하나 이상의 <form> 요소를 명시
maxlength	<textarea> 요소에서 허용되는 최대 문자수를 명시
name	<textarea> 요소의 이름을 명시
placeholder	<textarea> 요소에 입력될 값에 대한 짧은 힌트를 명시
readonly	<textarea> 요소의 텍스트 입력 영역이 읽기 전용임을 명시
required	폼 데이터(form data)가 서버로 제출되기 전 텍스트 입력 영역이 반드시 채워져 있어야 함을 명시
rows	텍스트 입력 영역 중 보이는 영역의 라인수를 명시
wrap	폼 데이터(form data)가 서버로 제출될 때 입력된 텍스트의 줄바꿈(wrap) 방식을 명시

 

 

<label>

1.  개념

• <label> 그 자체로는 효과가 없지만, <input> 태그를 제어하여 상태값을 변경 하도록 돕는 역할
• <label> 태그를 클릭하면 텍스트 컨트롤에 초점이 맞춰져 사용성이 높아진다

<form name="selectFruit">
  <!-- 체크박스를 눌러야 체크가 된다 -->
  <input type="checkbox" /> 바나나
  <br>
  <!-- 레이블이 있다면 텍스트 영역을 클릭해도 체크가 된다 -->
  <label>
    <input type="checkbox" /> 바나나
  </label>
</form>

 

 

2.  <textarea> 예제

바나나
바나나

 

 

3.  레이블 분리

만약 스타일로 인해 위와 같이 <label> 안에 <input> 태그가 위치하는 형식을 취할 수 없고 따로 분리해야 한다면, 

<label> 태그의 for 속성을 통해 <input> 태그와 매핑 시킬 수 있다

<!-- for 속성을 통해 태그를 분리할 수도 있다 -->
<input id="fruitItem" type="checkbox" /> 
<label for="fruitItem">바나나</label>

label 태그안의 영역을 클릭할 경우 for 속성이 지정된 fruititem 이라는 id 값을 찾게 된다
input 태그가 원격으로, 자동으로 클릭한 것과 같이 동작하게 된다

 

 

<select> & <option>

1.  개념

• <select>
  • 드롭 메뉴에서 선택을 할 수 있는 양식을 생성
• <option> 
  • <select> 요소 내부에 위치
  • 드롭다운 리스트(drop-down list)에서 사용되는 각각의 옵션 정의

 

 

2.  <select> 속성

속성명	설명
autofocus	페이지가 로드될 때 자동으로 포커스(focus)가 드롭다운 리스트로 이동됨을 명시
disabled	해당 드롭다운 리스트가 비활성화됨을 명시
form	해당 드롭다운 리스트가 포함될 하나 이상의 <form> 요소를 명시
multiple	사용자가 한 번에 두 개 이상의 옵션을 선택할 수 있음을 명시
name	드롭다운 리스트의 이름을 명시
required	폼 데이터(form data)가 서버로 제출되기 전 사용자가 반드시 드롭다운 리스트의 값을 선택해야 함을 명시
size	드롭다운 리스트에서 한 번에 보일 옵션의 개수를 명시

 

3.  <select> & <option> 예제

exam06-select.html

드롭다운 싱글타입, 드롭다운 멀티타

 

Choose a pet:
--Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish

 

 

4.  <option> 태그의 value 속성   vs   필드에서의 value 속성

< option> 태그의 value 속성	필드에서의 value 속성
이 목록이 선택된 경우 전송되는 값 지정	기본값 입력

 

 

5.  콤보박스 기본값 지정

<label for="pet-select">Choose a pet:</label><br />
<select name="pets" id="pet-select">
      <option value="">--Please choose an option--</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" selected>Hamster</option> <!-- 기본값을 햄스터로 자동 설정 -->
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
</select>

Choose a pet:
--Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish

 

 

6.  특정 항목 선택 금지

<label for="pet-select">Choose a pet:</label><br />
<select name="pets" id="pet-select">
      <option value="">--Please choose an option--</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider" disabled>Spider</option> <!-- 거미는 선택이 안되도록 처리 -->
      <option value="goldfish">Goldfish</option>
</select>

Choose a pet:
--Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish

만일 완전히 목록에서 없애고 싶은데 태그는 남겨두고 싶다면 hidden 속성을 써주면 된다

 

 

7.  콤보박스 다중 선택

• <select> 태그에 size 속성을 지정해 주면 드롭다운 형태가 아닌, 선택 목록이 지정된 크기만큼 보여지게 된다
• 만일 항목의 개수보다 size 가 작으면 자동으로 스크롤이 생성된다
• <select> 태그에 multiple 속성을 지정해주면 'shift' 또는 'ctrl' 키를 누르고 항목을 선택하면 중복으로 항목 선택이 가능해진다

<label for="pet-select">Choose a pet:</label><br />
<!-- 목록 사이즈가 4줄 + shift로 다중 선택 -->
<select name="pets" id="pet-select" size=4 multiple> 
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
</select>

Choose a pet:
Dog Cat Hamster Parrot Spider Goldfish

 

 

8.  콤보박스 그룹 지정

<optgroup> 태그를 사용하면 목록을 그룹화하여 카테고리를 구분할 수 있다

<optgroup> 의 label 속성에는 카테고리를 구분할 때 보여줄 text 를 넣어준다

<label for="pet-select">Choose a pet:</label><br />
<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  
  <optgroup label="포유류"> <!-- 선택목록 그룹 -->
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
  </optgroup>
  
  <optgroup label="조류">
    <option value="parrot">Parrot</option>
  </optgroup>
  
  <optgroup label="물고기">
    <option value="goldfish">Goldfish</option>
    <option value="spider">Shark</option>
  </optgroup>
</select>

Choose a pet:
--Please choose an option-- Dog Cat Hamster Parrot Goldfish Shark

 

 

<datalist>

1.  개념

• 리스트에서 어느 한가지를 선택하거다 키워드에 입력

 

2. <datalist> 예제

<!-- <input>의 list 속성값과 <datalist>의 id명을 똑같이 맞춰주어야 동작된다. -->
<label for="movie">What is your favourite Browser?</label>
<input type="text" list="browsers"/>

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

What is your favourite Browser?

 

exam07-datalist.html

<datalist id="lectures"> </datalist>

 

 

<fieldset> & <legend>

1.  개념

• <fieldset>
  • 관련된 입력 양식들을 그룹화할 때 사용 
• <legend> 
  • <fieldset> 태그 내에서 사용되어야 하며 그룹화된 fieldset 의 제목 정의

 

2.  <fieldset> & <legend> 예제

<form>
  <fieldset>
    <legend> Login </legend>
    ID : <input type="text" /> <br>
    password : <input type="password" />
  </fieldset>

  <br>

  <fieldset>
    <legend> Login 2 </legend>
    E-mail : <input type="e-mail" /> <br>
    password : <input type="password" />
  </fieldset>
</form>

Login

ID :
password :

Login 2

E-mail :
password :

exam06-select.html

드롭다운 싱글타입, 드롭다운 멀티타

 

 

 

<button>

1.  개념

• 버튼 요소
• 페이지에 버튼을 넣고 form을 전송하거나 reset 할 때 사용

 

2. <button> 예제

<button type="button" onclick="alert('onclick에 alert를 쓰면 이런식으로 경고창이 뜬다.')">
   Click Me!
</button>

 

3.  <button>   vs   <input>

<button>	<input>
시작태그와 종료태그 사이에 글자나 이미지 삽입	종료태그 없이 type 속성 이용해 버튼에 글자나 이미지 삽입
<button> 태그의 type 속성을 명시해야함	<form> 태그 안에서 버튼을 만들 땐, 반드시 <input> 태그 이용해 버튼을 만들어야 한다.

 

출처: https://inpa.tistory.com/entry/HTML-📚-폼Form-태그-정리#html5_form_요소 [Inpa Dev 👨‍💻:티스토리]

 

---

 

<table>

1.  개념

• 표 생성

 

2.  영역

제목 영역 <thead></thead>	<tr> <!-- 행, 줄 -->     <th>NO</th> <!-- 열, 칸 -->     <th>획득 포인트</th> <!-- th : 가운데 정렬, 굵게 --> </tr>
본문 영역 <tbody></tbody>	<tr align="center"> <!-- align="left/center/rignt" --> <!-- valign = "top/middle(center)/bottom -->      <td>2</td><!-- 행, 줄 --><!-- td : 왼쪽 정렬 -->      <td>루비 결제 5000G</td> </tr>
하단 영역 <tfoot></tfoot>	<tr>      <th width="50" height="30">합계</th>      <th>15000G</th> </tr>

 

3.  예제

<h1>문제1</h1>
<table border="1" cellpadding="10" cellspacing="0">
	<tr align="left">
		<td width="200" height="20">1-1</td>
		<td align="center" width="50">1-2</td>
	</tr>
	<tr align="left">
		<td width="50" height="">2-1</td>
		<td align="center">2-2</td>
	</tr>
	<tr align="left">
		<td colspan="2" align="center">3-1</td>
	</tr>
	<tr align="left">
		<td rowspan="2"><img src="../image/mangom.jpeg" width="200" height="200" alt="망곰"/></td>
		<td colspan="2" align="center">4-2</td>
	</tr>
	<tr align="left">
		<td colspan="2" align="center">5-2</td>
	</tr>
</table>

exam10-table.html	<thead><tbody><tfoot>
exam11-table.html
exam12-table.html
exam13-a.html

 

---

 

<video>

1.  개념

 

 

2.  속성

• control 속성
  • 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성한다
  • height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있다
• autoplay 속성
  • 웹 페이지가 로드(load) 될 때 비디오를 자동으로 재생할지를 설정한다
• loop 속성
  • 비디오의 재생이 끝나도 계속적으로 반복해서 비디오를 재생한다

 

3.  예제

<video style="width:576; height:360" controls autoplay muted loop>
	<!-- muted를 써야 autoplay 속성이 된다; 크롬의 저작권 때문에 써줘야 함 -->
	<source src="../video/BigBuck.mp4" type="video/mp4">
	video 요소를 지원하지 않아요..ㅠㅠ
</video>

 

exam07.html

<video style="width:576; height:360" controls autoplay muted loop> </video>

 

---

 

<audio>

1.  개념

• HTML5 이전에는 웹 페이지에서 오디오(audio)를 들려주기 위한 표준안이 없었다
• 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했다
• 하지만 HTML5에서는 <audio> 태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공한다
• <audio>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <audio>태그를 지원하지 않을 때만 화면에 표시된다

 

2.  속성

• control 속성
  • 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성한다
• autoplay 속성
  • 웹 페이지가 로드(load) 될 때음악을 자동으로 재생할지를 설정한다
• loop 속성
  • 오디오의 재생이 끝나도 계속적으로 반복해서 오디오를 재생한다

 

3.  예제

<audio controls>
	<source src="../audio/Maps.mp3" type="audio/mp3">
</audio>

 

exam08.html

<audio controls> </audio>

 

---

 

그 외 tags

<em>

1.  개념

• emphasize
• 중요한 문구를 강조하는 HTML 태그 중 하나
• (기본) 글자가 기울임체로 표현

 

2.  예제

CSS\webapp\01_css
exam06.html	<em>, 상속

 

<mark>

• 구문을 하이라이팅한다

 

 <abbr> 

• 약어 또는 두문자어를 나타내는데, 'title' 속성으로 약어의 원형을 나타낸다

 

<dfn>

• 단어의 정의를 나타낸다
• 'title' 속성으로 정의를 표현하는데, <abbr> 태그와 같이 사용할 수도 있다

 

<cite>

• 본문에서 책, 노래, 게임, 그림, 영화, 연극, 전시회 등의 작품 제목을 표현한다

 

<small>

• 일반적으로 면책 조항, 주의 사항, 법적 제한, 저작권 등을 나타낸다

 

<ruby>

• 기본 텍스트 주변에 짧은 텍스트를 배치하고 싶을 때 사용한다
• 주로 일본어나 한자에 발음이나 주석을 얹는 방법으로 많이 쓰인다
• <ruby>태그로 감싼 후, <rt>태그로 루비 주석을 표현한다

 

<blockquote>

• 다른 사람의 말이나 글, 혹은 다른 소스를 인용하는 경우에 사용한다
• block
• 들여쓰기 형태로 출력된다
• cite 속성 : 해당 컨텐츠의 출처를 나타낸다
• title 속성 : 내용을 요약해 입력

 

<q>

• 다른 사람의 말이나 글, 혹은 다른 소스를 인용하는 경우에 사용한다
• inline
• 인라인 형태의 짧은 인용문을 작성할 때 사용하기 때문에 title 속성은 필요하지 않다
• “ ”로 묶는다

 

 

<pre>

• img, big, small, sub, sup, ins, del, label, input, select, textarea, button, noscript 태그 등의 텍스트를 장식하기 위한 요소를 사용하면 안된다
• 폼과 스크립트 관련 요소도 포함할 수 없다
• 일반적으로 코드의 예제를 보여주기 위한 방안으로 활용된다
• 내용을 있는 그대로 보여줄 때 사용한다

 

<code>

• 코드임을 알리는 용도

⚒️ 예제

exam15-tags.html	<mark> <abbr> <dfn> <cite> <small> <ruby> <strong>
exam16-tags.html	<blockquote> <q>
exam17-tags.html	<pre> <code>

<p>옵티컬 아트는 굳이 번역한다면 <strong>광학적 미술</strong>이라고 할 수 있는데,
<mark>광학적</mark>이란 망막에 접수된 자극이 시신경에 의해 지각되어진다는 것을 의미한다</p>
<hr>

<p><abbr title="HyperText Markup Language">HTML</abbr>은 제목, 단락, 목록 등과 같은
본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다</p>
<hr>

<p>창이 작고 벽이 넓은 로마네스크 교회의 실내는 거의 모두
<dfn title="소석회에 모래를 섞은 모르타르를 벽면에 바르고 수분이 있는 동안 채색하여 완성하는 회화">
프레스코화</dfn>로 장식되었다.</p>

<p><dfn><abbr title="HyperText Markup Language">html</abbr></dfn>은
웹 문서를 만들ㄴ기 위해 사용하는 기본적인 프로그래밍 언어의 한 종류이다. 하이퍼텍스트를 작성하기 위해 개발되었다.</p>
<hr>

<p>고갱은 1988년 브르타뉴의 풍타벙에서 <cite>천사와 싸우는 야콥</cite>을 그리고 나서 반 고흐에게 편지를 썼는데...</p>
<hr>

<p>이 기사는<small>&copy; &phone; 홍길동 기자</small>가 작성하였습니다.</p>

<h1><ruby>舊<rt>구</rt>石<rt>석</rt>器<rt>기</rt></ruby> 시대</h1>

옵티컬 아트는 굳이 번역한다면 광학적 미술이라고 할 수 있는데, 광학적이란 망막에 접수된 자극이 시신경에 의해 지각되어진다는 것을 의미한다

---

HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다

---

창이 작고 벽이 넓은 로마네스크 교회의 실내는 거의 모두 프레스코화로 장식되었다.

html은 웹 문서를 만들ㄴ기 위해 사용하는 기본적인 프로그래밍 언어의 한 종류이다. 하이퍼텍스트를 작성하기 위해 개발되었다.

---

고갱은 1988년 브르타뉴의 풍타벙에서 천사와 싸우는 야콥을 그리고 나서 반 고흐에게 편지를 썼는데...

---

이 기사는© ☎ 홍길동 기자가 작성하였습니다.

舊구石석器기 시대

 

<h1>다음은 '웹 접근성 연구소'에서 정리한 웹 접근성 정의 내용입니다.</h1>
<blockquote cite="http://www.wah.or.kr/Accessibility/define.asp"
            title="'웹 접근성 연구소'에서 정리한 웹 접근성 정의 내용입니다.">
    <p>
        월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 
        웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며,
        웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 
        이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 
        불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.
    </p>
    <p>
        월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 
        웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며,
        웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 
        이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 
        불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.
    </p>
</blockquote>
<hr/>

<p>
    월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란<br>
    <q cite="http://www.wah.or.kr/Accessibility/define.asp">
        '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며,
        웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 
        이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 
        불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.
    </q>
</p>

다음은 '웹 접근성 연구소'에서 정리한 웹 접근성 정의 내용입니다.

월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.

월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.

---

월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란
'장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.

 

<pre>
    <code>
        &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
        &lt;script&gt;
        $(".selector").click(function(){
            $(".box").hide();
        });
        &lt;/script&gt;
    </code>
</pre>

    
        <script src="js/jquery.js"></script>
        <script>
        $(".selector").click(function(){
            $(".box").hide();
        });
        </script>