HTML 요소
주석
<!-- contents -->주석 태그, 웹브라우저가 해석하지 않음
* 단축키 : 한줄 주석 ctrl + /
요소(Elements)의 구성
- 요소(Elements) = 여는 태그(<tag>) + 닫는 태그(</tag>)
- 내용의 글자와 단어 하나는 inline 요소처럼 동작한다.(브라우저의 wide를 조절함으로써 확인 가능)
<tag(요소) attribute(속성)="value(값)"> 내용 </tag(요소)>
<script src="../js/util.js"></script>
요소(Elements) & 속성(Attributes) 정리
주요범위
DOCTYPE html 태그
html 기본구조 자동 완성
<!DOCTYPE html>* 자동완성 코드 => html:5 + tab / ! + tab
html 태그
HTML 문서의 범위를 결정
<html> </html>
head 태그
HTML 문서의 정보를 설정
<head> </head>
body 태그
WebBrowser에 표시될 내용을 작성하는 태그
<body> </body>
style 태그
css 영역 설정 태그, 웹브라우저의 디자인 설정(내부 css 파일을 지정할 때 사용)
<style> </style>
title 태그
브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 설정
<title> contents </title>
link 태그
외부 리소스의 연결 및 현재 문서와의 관계를 명시
(HTML, CSS, ICON 등 가져오기)
<link/>| 속성 | 의미 | 값 |
| rel | (필수)현재 문서와 외부 리소스와의 관계(Link Type) | stylesheet, icon ... |
| href | 외부 리소스의 URL | URL |
| type | 외부 리소스의 MIME 타입 | text/css, image/x-icon ... |
header 태그
header는 <h1>에서 <h6>까지 제공. 검색엔진은 웹페이지의 구조와 내용을 참조하기 위하여 header를 사용
<h1>This is header 1</h1>
<h2>This is header 2</h2>
br 태그
새로운 문단을 시작하지 않고, 개행(new line)을 작성할 때 사용. 끝 태그를 갖지 않음
<body>
첫번째 라인입니다.<br>
두번째 라인입니다.<br>
</body>
hr 태그
라인생성. 내용을 분리하기 위하여 사용하며 웹 페이지에 수평선을 생성
<hr/>
<hr size="3" noshade>
meta 태그
기타 메타데이터 요소(<link/>, <style> 같은)로 나타낼 수 없는 메타데이터를 나타내기 위해 설정
(검색엔진이나 브라우저에 정보를 제공)
<meta/>
| 속성 | 의미 | 값 |
| charset | 문자인코딩 방식 | UTF-8, EUC-KR ... |
| name | 메타 데이터의 이름(정보의 종류) | author, description ... |
| http-equiv | 서버/사용자 에이전트의 작동방식 변경에 대한 지시(HTTP 응답 헤더 제공) | refresh, X-UA-Comptible... |
| content | name, http-equiv의 값 |
div 태그
- block level 태그
- 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정
- 주로 단순히 나누는 용도로 사용함. 레이아웃 설정하기 위해서 주로 사용
<div> </div>
목록 콘텐츠
ul 태그
- 순서가 없는 목록
- <ul> 은 자식으로 <li> 만 포함 가능
<ul>
<li>contents</li>
<ul>| 속성 | 의미 | 값 |
| start | 항목에 매겨지는 번호의 시작 값 | 숫자(Number) |
| type | 항목에 매겨지는 번호의 유형 | a, A, i, l, 1 |
li 태그
- <li> 요소는 단독으로 사용불가. <ol> 또는 <ul>태그에 반드시 포함되어야 함
- <li>는 범용요소이기 때문에 <ol>, <ul> 요소 포함 가능
<li> contents </li>| 속성 | 의미 | 값 | 특징 |
| value | 항목의 순서를 결정 | 숫자(Number) | 이하 항목들의 순서가 다시 지정됨 |
ol 태그
- 순서가 있는 목록
- 순서는 중요도를 나타내기도 함
<ol>
<li>contents</li>
</ol>
Table 콘텐츠
<table>
<caption>Fruits</caption>
<colgroup>
<col span="1" style="background-color: yellowgreen;">
<col style="background-color: tomato;">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>F123A</td>
<td>Apple</td>
<td>$22</td>
</tr>
<tr>
<td>F098B</td>
<td>Banana</td>
<td>$19</td>
</tr>
</tbody>
</table>
table 태그
table을 정의한다
<table> </table>
caption 태그
- 표의 제목을 설정
- 열리는 table 태그 바로 다음에 작성해야 함
- table 요소 당 하나의 <caption> 만 사용 가능
<table>
<caption> contents /caption>
</table>
colgroup, col 태그
표의 열(칸,셀)들을 공통적으로 정의하는 컬럼(<col>)과 그의 집합(<colgroup>)/(Coulmn, Column Group)
<colgroup>
<col width="50"/>
<col width="100"/>
</colgroup>| 속성 | 의미 | 값 |
| span | 연속되는 열 수 | 숫자(Number), 기본값 1 |
| width | col(열)의 너비 설정 | 숫자(Number) |
thead, tbody, tfoot 태그
- 표의 머리글(<thead>), 본문(<tbody>), 바닥글(<tfoot>)을 지정
- table의 레이아웃에 영향을 주지 않음
** 행을 그룹화하면 브라우저의 스크롤을 통해 테이블을 탐색할 때 thead와 tfoot요소는 고정하고
tbody 요소만 스크롤 되게 할 수 있음
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
th 태그
- '머리글 칸'을 지정
- 정확한 특성은 범위 및 헤더 속성에 의해 정의 된다.
| 속성 | 의미 | 값 | 기본값 |
| abbr | 열에 대한 간단한 설명 | ||
| headers | 관련된 하나 이상의 다른 머리글 칸 id 속성값 | ||
| colspan | 병합하려는 열의 수 | 1 | |
| rowspan | 병합하려는 행의 수 | 1 | |
| scope | 자신이 누구의 '머리글 칸'인지 명시 | col:자신의 열, colgroup:모든 열, row:자신의 행, rowgroup:모든 행, auto |
auto |
tr 태그
table 행을 생성
<tr>
<td>contents</td>
</tr>
td 태그
- table의 열(<td>)을 생성
<tr>
<td>contents</td>
</tr>| 속성 | 의미 | 값 | 기본값 |
| headers | 관련된 하나 이상의 다른 머리글 칸 id속성 값 | id 속성 값 | |
| colspan | 병합하려는 열의 수 | 1 | |
| rowspan | 병합하려는 행의 수 | 1 |
FORM
웹 서버에 정보를 제출하기 위한 양식 범위를 정의
form 태그 (block 요소)
- 웹 서버에 정보를 제출하기 위한 양식 범위를 정의
- <form> 요소가 다른 <form>요소를 지식으로 포함할 수 없음
<form> contents </form>| 속성 | 의미 | 값 | 기본값 |
| action | 전송한 정보를 처리할 웹페이지의 URL | URL | |
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off | on |
| method | 서버로 전송할 HTTP 방식 | GET, POST | GET |
| name | 고유한 향식의 이름 | ||
| novalidate | 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정 | ||
| target | 서버로 전송 후 응답받을 방식을 지정 | _self, _blank | _self |
* method
- POST : 표준입력 방식으로 HTTP로 데이터를 전송하는 입력방식
입력폼이 서버에 데이터베이스화 할 때 사용되며 주로 방명록, 게시판에 사용
- GET : URL로 데이터를 전송하는 방식
입력 폼의 내용에 대한 결과를 서버로부터 가져와서 사용자에게 직접 볼 수 있도록 하여주며 검색 엔진의 검색
결과나 방문횟수를 보여주는 카운터 등에 주로 사용
* target 속성 : 링크된 문서를 어디에서 실행 시킬지를 지정할 수 있음
_blank : 새로운 윈도우 창 또는 tab에 문서를 open
_self : default로서 현재 클릭한 창 또는 tab에 문서를 open
_parent : parent 프레임에 문서를 open
_top : 현재 윈도우에 전체화면으로 open
label 태그
- 라벨링(labeling)이 가능한 요소의 제목
- 어떤 것을 입력해야하는지 알려주는 역할. 특히, 시각 장애인들을 위해
- 라벨 가능 요소 : <button>, <input>, <progress>, <select>, <textarea>
*label의 자식요소로 input요소를 사용하면 label 속성으로 for을 안 써줘도 관련된 것으로 인식됨
<label>
<input type="radio" name="gender" value="man" checked="checked" />남자
</label>
<label>
<input type="radio" name="gender" value="woman"/>여자
</label>| 속성 | 의미 |
| for | 참조할 라벨 가능 요소의 id속성 값 |
legend 태그
<fieldset>에 어떤 정보를 입력해야하는지 알려주는 역할을 한다
<fieldset>
<legend>성별 정보 선택</legend>
<label>
<input type="radio" name="gender" value="man" checked="checked" />남자
</label>
<label>
<input type="radio" name="gender" value="woman"/>여자
</label>
</fieldset>
input 태그
사용자에게 입력 받을 데이터 양식
<input />- 속성(attribute) 종류
- type 속성 값의 종류
select, optgroup, option 태그
<label for="job">직업 선택</label>
<select name="job" id="job">
<option value="">선택</option>
<option value="teacher">선생님</option>
<option value="doctor">의사</option>
<option value="programmer">프로그래머</option>
<option value="etc">기타 등등</option>
</select>
1. select 태그
drop-down 리스트를 만든다
<select> contents </select>
2. optgroup 태그
drop-down 목록에서 관련 옵션들을 그룹화하는데 사용된다.(block요소)
<optgroup label="Smoothie">
<option>Plain</option>
<option>Strawberry</option>
<option>Banana</option>
<option>Mango</option>
</optgroup>| 속성 | 의미 | 값 |
| label | 옵션 그룹에 대한 설명 | |
| disabled | 비활성화 됨 | Boolean |
3. option 태그
<select>요소 내부의 option태그는 목록에서 사용가능한 옵션을 정의한다(block요소)
<option>Strawberry</option>
textarea 태그
- 여러줄의 text를 입력할 수 있는 양식
- 주로 CSS로 box-size를 변경함
<textarea> contents </textarea>
button 태그
- 선택 가능한 버튼을 지정
- 이미지나 텍스트를 넣을 수 있음(<input type="button"/>에는 불가)
- 브라우저마다 <button>에 대한 default값이 다르므로 type속성을 이용해 값을 지정해 주는 것이 좋음
<button type="button">Click Me!</button>
Inline Text
a 태그 (anchor)
- 다른 페이지, 파일, 같은 페이지의 위치(#), 이메일 주소나 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듬
- 하이퍼링크는 텍스트 및 이미지 모두 가능, 타겟은 href 속성을 이용
- unvisited 링크 : underline + blue
visited 링크 : underline + purple
active 링크 : underline + red
- href 속성의 값
<a href="mailto:test@gmail.com">contents</a>mailto 값 : 웹브라우저에서 이메일 발송 기능을 제공할 경우, 기기에 default로 설정되어 있는 application을 실행함
<a href="tel:010-1111-2222">please call us!</a>tel 값 : 웹브라우저에서 이메일 발송 기능을 제공할 경우, 기기에 default로 설정되어 있는 application을 실행함
<h1>a(anchor)요소는 하이퍼링크, 책갈피, javascript 등을 수행할때 사용합니다.</h1>
<h2>상대 경로 이동</h2>
<!-- 현재 위치를 기준으로 상대경로 이동 -->
<a href="./Step08_list2.html">list2</a>
<h2>절대 결로 이동</h2>
<!-- 웹에서의 절대 경로 이동 -->
<a href="http://14.63.164.99/student.html">공부방</a>
<a href="http://daum.net">다음</a>
<!-- 파일 시스템 상에서의 절대 경로 이동 -->
<a href="C:/acorn2019/visual_work/html4/Step08_list2.html">이전예제</a>
<h1>책갈피 이동(같은 페이지 내에서의 스크롤 이동)</h1>
<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
</ul>
<div class="spacer"></div>
<p id="one">one Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi reiciendis dignissimos rem, quisquam facere eum distinctio minima quos quibusdam dolores, ipsum esse vitae? Voluptate, deleniti? Aspernatur debitis itaque officiis voluptatum?</p>
<div class="spacer"></div>
<p id="two">two Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus natus, beatae sunt aperiam fuga minus ad necessitatibus vero, fugiat mollitia aut eos exercitationem modi, cum nostrum perspiciatis iusto. Harum, aspernatur!</p>
<div class="spacer"></div>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Step09_anchor3.html</title>
<script>
// page가 로딩되는 시점에 실행되는 javascript 영역
alert("페이지가 로딩 중입니다.");
</script>
</head>
<body>
<h1>링크를 눌렀을때 javascript 실행</h1>
<!-- link를 클릭할때마다 실행되는 javascript 영역 -->
<a href="javascript:alert('눌렀네?');">눌러보셈</a>
</body>
문자 콘텐츠(typography)
p 태그
- 하나의 문단을 설정(Paragraph)
- 일반적으로 정보통신 보조기기 등은 다음 문단(<p>)으로 넘어갈 수 있는 단축키를 제공함
<p> </p>
img 태그 (inline 요소)
- src 속성 : 외부에서 이미지 자료 불러오기
- alt 속성 : 대체 텍스트. 이미지에 대한 상세한 설명. 시각장애인이 인터넷을 사용할 경우 alt값을 읽어줌
<img src="./images/1.jpg" alt="한효주가 카메라를 들고 웃고 있는 모습">** 경로 표기 : ./ : 현재경로를 나타냄(생략가능), ../ : 상위 폴더를 나타냄
span 태그 (inline 요소)
- inline level 태그, 텍스트(text)를 위한 컨테이너 역할, 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정
- 일반적으로 css와 같이 사용하여 텍스트(text)의 스타일 변경시 주로 사용
<span> </span>
b 태그 (inline 요소)
- 특별한 의미를 가지지 않음
- 읽기 흐름에 도움을 주는 용도로 사용
- 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용
- 기본적으로 글자가 두껍게(Bold) 표시됨
<b> contents </b>
strong 태그 (inline 요소)
- 기본적으로 글자가 두껍게(Bold) 표시됨
- 의미의 중요성을 나타내기 위해 사용(Strong Importance)
<strong> contents </strong>
i 태그 (inline 요소)
<em>, <strong>, <mark>, <cite>, <dfn> 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용
(평범한 글자와 구분(아이콘이나 특수기호 같은)하기 위해 사용)
- 기본적으로 이탤릭체(Italic type)로 표시됨
<i> contents </i>
em 태그 (inline 요소)
- 중첩이 가능
- 중첩될수록 강조 의미가 강해짐
- 정보통신보조기기 등에서 구두 강조로 발음됨
- 기본적으로 이탤릭체(Italic type)로 표시됨
- 의미를 강조함(Empasis)
<em> contents </em>
sub 태그 (inline 요소)
- 위첨자를 나타냄
<sub> contents </sub>
sup 태그 (inline 요소)
- 아래첨자를 나타냄
<sup> contents </sup>
ins 태그 (inline 요소)
- 새로 추가된(변경된) 텍스트의 범위를 지정
- 속성
<ins> contents </ins>
del 태그 (inline 요소)
- 삭제된(변경된) 텍스트의 범위를 지정
- 속성
<del> contents </del>
abbr 태그 (inline 요소)
- 축약어를 나타냄
- 속성 : title="설명"
<abbr> contents </abbr>
q 태그 (inline 요소)
- 짧은 인용문을 설정
<q>contents</q>
blockquote 태그 (inline 요소)
- 긴 인용문을 설정
<blockquote>contents</blockquote>
small 태그 (inline 요소)
- 상대적으로 작은글씨를 표현
- CSS에서는 tag{font-size: smaller;} 코드로 구현 가능
<small>contents</small>
pre 태그 (block 요소)
- 텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있음
- 기본적으로 Monospace 글꼴 계열로 표시됨
<pre>
하나
두울
세엣
</pre>
code 태그 (inline 요소)
- 컴퓨터 코드 범위를 설정
<code>
var a="김구라";
var f=function(){
alert();
};
</code>
특수문자 출력
- 웹브라우저는 특수기호에 민감. 따라서 특수기호를 다른 방법으로 변경해주어야 함
- 꺽쇠 기호(<>)
<p>만일 a>10 이면 a는 10보다 큰 것이다.</p>
<p>만일 a>10 이면 a는 10보다 큰 것이다.</p>
<p>만일 a<10 이면 a는 10보다 작은 것이다.</p>
<p>만일 a<10 이면 a는 10보다 작은 것이다.</p>
<p><> 요소는 문단을 나타낼때 사용합니다.</p>
<p><div> 요소는 문단을 나타낼때 사용합니다.</p>
- & 기호
: 웹브라우저는 & 를 &기호로 인식함
- →← 기호
<p>← →</p>
iframe 태그 (inline 요소)
- 다른 HTML 페이지를 현재 페이지에 삽입(중첩된 브라우저 컨텍스트(프레임)를 표시)
- 속성
<iframe width="424" height="238" src="https://www.youtube.com/embed/GxF_DOHYzaA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
** 참고 문서 **