본문으로 바로가기

HTML 요소(Elements)

category HTML 2019. 10. 29. 16:00

주석

<!-- contents-->

주석 태그, 웹브라우저가 해석하지 않음

 

*단축키 : 한 줄 주석 ctrl+/

 

 

요소(Elements)의 구성

  • 요소(Elements) = 여는 태그(<tag>) + 닫는 태그(</tag>)
  • 내용의 글자와 단어하나는 inline요소처럼 동작한다.(브라우저의 wide를 줄이고 늘림으로써 확인가능)
<tag(요소) attribute(속성)="value(값)"> 내용 </tag(요소)>

<script src="./js/util.js"></script>

 *자동완성 기능 :  "태그+tab" 또는 "태그{내용}*갯수+tab" etc.

  참고 문헌 : https://docs.emmet.io/cheat-sheet/

 

 

 

 요소(Elements)의 종류 

 

분류 Block Elements Inline Elements 범용 Elements
개념

- contents의 크기와 상관 없이 WebBrowser의 wide를 100% 차지한다.

 

- block 처럼 위에서 부터 아래로 쌓인다. (자동 줄 바꿈)

 

- contents, inline요소와 간혹 다른 블럭요소도 포함할 수 있다.

- 요소의 범위만큼만 wide를 갖는다

 

- 자동으로 줄 바꿈되지 않는다

 

- contents와 다른 inline요소만 포함할 수 있따.

 - 블록요소임에도 불구하고 모든 요소를 포함 할 수 있다.
예시 <address>,<article>,<aside>.<blockquote>,<details>,<dialog>,<dd>,<div>,<dl>,<dt>,<fieldset>,<figcaption>,<figure>,<footer>,<form>,<h1~6>,<header>,<hgroup>,<hr>,<li>,<main>,<nav>,<ol>,<p>,<pre>,<section>,<table>,<ul>  <a><abbr><acronym><audio> (컨트롤이 보이면)<b><bdi><bdo><big><br><button><canvas><cite><code><data><datalist><del><dfn><em><embed><i><iframe><img><input><ins><kbd><label><map><mark><meter><noscript><object><output><picture><progress><q><ruby><s><samp><script><select><slot><small><span><strong><sub><sup><svg><template><textarea><time><u><tt><var><video><wbr> <div>, <li>, <dd>, <address>(p요소만 가능)

**block 요소와 inline 요소는 default로 정해져 있으며, CSS를 이용해 언제든 default 값을 변경할 수 있다.

 

 

 

요소(Elements) & 속성(Attributes) 정리

주요범위

DOCTYPE html 태그

html 기본구조 자동완성

<!DOCTYPE html>

*자동완성 코드 html:5 + Enter

 html:5

 

HTML5 페이지 기본구조

  * 참고 문헌 : HTML요소 레퍼런스

https://developer.mozilla.org/ko/docs/Web/HTML/Element

 

 

html 태그

html 문서의 범위를 설정

<html> </html>
속성 의미 값
lang html 문서의 언어 ko, en, ...

 

head 태그

HTML 문서의 정보를 설정.

<head> </head>

 

body 태그

WebBrowser에 표시될 내용을 작성하는 태그

<body> </body>

 

 

메타데이터

style 태그

css 영역 설정 태그, 웹브라우저의 디자인 설정

<style> </style>
속성 의미 기본값
type MIME 타입 text/css

 

title 태그

브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 설정.

<title> contents </title>

 

 

link 태그

외부 리소스의 연결 및 현재 문서와의 관계를 명시.
(HTML, CSS, ICON 등 가져오기)

<link/>
속성 의미 값
rel (필수)현재 문서와 외부 리소스와의 관계(Link Types) stylesheet, icon…
href 외부 리소스의 URL URL
type 외부 리소스의 MIME 타입 text/css, image/x-icon…

 

 

meta 태그

기타 메타데이터 요소(<link />, <style> 같은)로 나타낼 수 없는 메타데이터를 나타내기 위해 설정.
(검색엔진이나 브라우저에 정보 제공)

<meta/>
속성 의미 값
charset 문자인코딩 방식 UTF-8, EUC-KR…
name 메타 데이터의 이름(정보의 종류) author, description…
http-equiv 서버/사용자 에이전트의 작동방식 변경에 대한 지시(HTTP 응답 헤더 제공) refresh, X-UA-Compatible…
content name, http-equiv의 값  

 

 

콘텐츠 구분

추후 추가 예정

 

https://heropy.blog/2019/05/26/html-elements/

 

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

인터넷에 검색 가능한 많은 HTML 문서들의 내용을 요소(Elements), 속성(Attributes)의 개념으로 핵심적인 내용들만 요약해서 정리했습니다. 각 요소들의 자세한 설명은 패스트캠퍼스 온라인 강의(online.fastcampus.co.kr)에서 확인할 수 있습니다.

heropy.blog

 

div 태그
  • 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정.
  • 주로 단순히 나누는 용도로 사용함.
<div> </div>

 

 

 목록 콘텐츠

ul 태그
  • 순서가 없는 목록
  • <ul>은 자식으로 <li>만 포함 가능하다.
<ul>
	<li>내용</li>
</ul>
속성 의미  값
start 항목에 매겨지는 번호의 시작 값 숫자(Number)
type 항목에 매겨지는 번호의 유형 a, A, i, I, 1

 

 

li 태그
  • <li>요소는 단독으로 사용 불가. <ol>또는 <ul>태그에 반드시 포함되어야함.
  • <li>는 범용요소 이기때문에 <ol>,<ul>요소 포함 가능
<li>내용</li>
속성 의미 값 특징
value 항목의 순서를 설정 숫자(Number) 이하 항목들의 순서가 다시 지정됨

 

ul 태그
  • 순서가 있는 목록
  • 순서는 중요도를 나타내기도 한다.
<ol>
	<li>내용</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>)/

(Column, 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

 

 

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 속성 값

 

fieldset 태그
  • 같은 목적의 요소를 양식으로 그룹화한다.
  • <fieldset>로 묶인 요소 주위에 상자를 그린다.
<fieldset> contents </fieldset>

 

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 태그

 

1. select 태그

dropo-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 속성의 값 

<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>

 

 (10) img 태그(inline 요소)

    - src 속성 : 외부에서 이미지 자료 불러오기

    - alt 속성 : 대체 텍스트. 이미지에 대한 상세한 설명. 시각장애인이 인터넷을 사용할 경우 alt의 값을 읽어준다.

<img src="./images/1.jpg" alt="한효주가 카메라를 들고 웃고 있는 모습">

    **경로 표기 : ./ 현재경로를 나타냄(생략가능). ../상위 폴더를 나타냄

 

 (11) span 태그(inline 요소)

    - 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정.

<span> </span>

 

 

(1) b 태그 (inline 요소)

  • 특별한 의미를 가지지 않음.
  • 읽기 흐름에 도움을 주는 용도로 사용.
  • 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용.
  • 기본적으로 글자가 두껍게(Bold) 표시됨.
<b> contents </b>

 

(2) strong 태그 (inline 요소)

  • 기본적으로 글자가 두껍게(Bold) 표시됨.
  • 의미의 중요성을 나타내기 위해 사용.(Strong Importance)
<strong> contents </strong>

 

(3) i 태그 (inline 요소)

<em>, <strong> <mark> <cite> <dfn> 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용.
(평범한 글자와 구분(아이콘이나 특수기호 같은)하기 위해 사용)

  • 기본적으로 이탤릭체(Italic type)로 표시됨.
<i> contents </i>

 

(4) em 태그 (inline 요소)

  • 중첩이 가능.
  • 중첩될수록 강조 의미가 강해짐.
  • 정보통신보조기기 등에서 구두 강조로 발음됨.
  • 기본적으로 이탤릭체(Italic type)로 표시됨.
  • 의미를 강조함.(Emphasis)
<em>contents</em>

 

(5) sub 태그 (inline 요소)

  •   위첨자를 나타냄
<sub>contents</sub>

 

(6) sup 태그 (inline 요소)

  • 아래첨자를 나타냄
<sub>contents</sub>

 

(7) ins 태그 (inline 요소)

  • 새로 추가된(변경된) 텍스트의 범위를 지정.
  • 속성

<ins>contents</ins>

 

(8) del 태그 (inline 요소)

  • 삭제된(변경된) 텍스트의 범위를 지정.
  • 속성

<del>contents</del>

 

(9) abbr 태그 (inline 요소)

  • 축약어를 나타냄
  • 속성 : title="설명"
<abbr>contents</abbr>

 

(10) q 태그 (inline 요소)

  • 짦은 인용문을 설정.

<q>contents</q>

 

(11) blockquote 태그 (inline 요소)

  • 긴 인용문을 설정.

<blockquote>contents</blockquote>

 

(12) small 태그 (inline 요소)

  • 상대적으로 작은글씨를 표현
  • CSS에서는 tag{font-size: smaller;}코드로 구현 가능
<small>contents</small>

 

(11) pre 태그 (block 요소)

  • 텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있음.
  • 기본적으로 Monospace 글꼴 계열로 표시됨.
    <pre>
        하나
            두울
                세엣
    </pre>

(12) code 태그  (inline 요소)

  • 컴퓨터 코드 범위를 설정.
        <code>
            var a="김구라";
            var f=function(){
                alert();
            };
        </code>

(13) 특수 문자 출력

 **참고 문헌 : http://kor.pe.kr/util/4/charmap2.htm

  • 웹브라우저는 특수기호에 민감하다. 따라서 특수기호를 다른 방법으로 변경해주어야한다.

    - 꺽쇠기호(<>)
    <p>만일 a>10 이면 a는 10보다 큰 것이다.</p>
    <p>만일 a&gt;10 이면 a는 10보다 큰 것이다.</p>
    
    <p>만일 a<10 이면 a는 10보다 작은 것이다.</p>
    <p>만일 a&lt;10 이면 a는 10보다 작은 것이다.</p>
    
    <p><> 요소는 문단을 나타낼때 사용합니다.</p>    
    <p>&lt;div&gt; 요소는 문단을 나타낼때 사용합니다.</p>

     - 띄어쓰기&공백

       웹브라우저는 &nbsp;를 공백으로 인식함.

    <p> 첫번째 단어 &nbsp; &nbsp; &nbsp; 두번째 단어</p>

     - & 기호

       웹브라우저는 &amp;를 &기호로 인식한다.

    

     - →←기호

  <p>&larr; &rarr;</p>

     - 기호 

 

 

 

(14) 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>

 

**참고 문서

https://www.w3schools.com/

https://heropy.blog/2019/05/26/html-elements/

 

W3Schools Online Web Tutorials

HTML Example:

This is a heading

This is a paragraph.

Try it Yourself » CSS Example: body {   background-color: lightblue; } h1 {   color: white;   text-align: center

 

www.w3schools.com

 

댓글 , 엮인글
sally의 프로그래밍 공부
블로그 이미지 롱디라니ldrn_sally_kim 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바