2021-02-04 게시 됨2021-02-04 업데이트 됨 YoungHea Kim HTML26분안에 읽기 (약 3906 단어)

HTML Element와 구조

1. Element 구조

<여는 태그> 컨텐츠 </닫는 태그>
<태그 이름 속성 = "값"> 컨텐츠 </ 태그 이름>
태그 안에 값은 “”권장

2. 콘텐츠를 감싸지 않은 요소

내용이 필요 없는 경우 여는 태그만 존재

3. 표준 호환모드

<!doctype html> 웹 표준을 설정함 표준호환모드로 변환

4. 문서에 사용되는 주 언어 설정

<html lang="ko-KR"> 이런식으로 html에 언어를 설정해주면 시각장애인들을 위해 웹에서 해당언어로 읽어줄수 있게 설정해준다.

5. 제목과 단락

제목은 태그로 감싼다
단락은
태그로 감싼다
<h1>태그는 문서에서 하나만 작성 가능

6. HTML 이미지 & 피규어 & 캡션

도표나 이미지 차트 등을 감싸는 태그는 <figure>을 사용해서 감싸준다.
이미지태그는 <img src="이미지 경로" alt="이미지에 대한 설명"/> 으로 사용해준다.
<figcaption>는 이미지에 대한 캡션을 작성해주는 태그이다. (사진 밑에 사진에 대한 설명)

7. HTML 문법 유효성 검사 (validator)

validator.w3.org : 온라인으로 문법이 틀린곳이 없는지를 확인해주는 툴이다.

사이트 사용법

URI를 사용하여 문법검사를 해주는 방법
File을 직접 업로드하여 문법검사를 해주는 방법

entitycode.com : html에 entitycode 설명이 나와있는 사이트

8. HTML 목록 디자인

목록(lists)

비순차 목록 (순서가 중요하지 않은 목록)
1
2
3
4
<ul>
<li></li>
<li></li>
</ul>
순차 목록(순서가 중요한 목록)
1
2
3
4
<ol>
<li></li>
<li></li>
</ol>

9. 하이퍼링크(Hyperlink)

anchor는 웹 페이지 내에서 다른 페이지 이동을 하지않고 현재 페이지 하단 부분으로 이동하는 것을 의미한다.

1
2
3

<!--a태그를 사용하여 href값에 #태그와 id값을 다음과 같이 넣어주면 해당 id의 위치로 이동하게 된다.-->
<a href="#id">achor이동</a>
<h3 id="id">여기로</h3>

hyper link는 link가 이동되는 것을 의마한다.

1 2	<!--a태그를 사용하여 href값에 이동할 링크값을 다음과 같이 넣어주면 해당 링크로 이동하게 된다.--> <a href="https://www.google.com">구글 링크로 이동</a>

10. 그룹 디자인

다음과 같이 dl을 통해 그룹화를 해준후 dt요소와 dd요소를 사용해서 그룹화의 제목과 설명을 적어준다.

<!--설명목록 (Description Lists)-->
<dl> 
    <dt>용어(Definition Term)</dt>
    <dd>설명(Definition Description)</dd>
    
    <dt>용어(Definition Term)</dt>
    <dd>설명(Definition Description)</dd>
    <dd>설명(Definition Description)</dd>
    <dd>설명(Definition Description)</dd>

    <dt>용어(Definition Term)</dt>
    <dd>설명(Definition Description)</dd>
    <dd>설명(Definition Description)</dd>
</dl>

11. 인용문

<!--인라인 인용문-->
<q>짧은 인라인 인용문</q>
<cite>출처에서 가져온 구문</cite>
<q cite="출처 주소"></q>
<!--꼭 q요소를 사용할 필요는 없고 ""를 사용해주어도 된다-->
<!--중복 인용 가능-->

<!--블록 인용구문-->
<blockquote>
    <p>글</p>
    <p>글</p>
    <cite>인용한 구문 출처</cite>
</blockquote>

12. 줄바꿈(`<br>`)

단락으로 나누지 않고 줄 바꿈을 사용할 때
<br>을 두번 사용하지 말아야한다

13. 어휘에 사용 되는 요소들

강조와 표현적인 목적으로 나눔

강조
<em> : 특정 내용의 스트레스 강조 (문장 의미를 변경)
<strong> : 내용의 중요성, 심각성, 긴급성을 강조할 경우
표현적인 목적
<b> : 단순히 다른 글자와 구분된 용도로 사용, 문서 요약의 주요 단어, 리뷰 제품 이름 등
<i> : 다른 글자와 구분된 용도로 사용, 기술적 용어, 다른 언어(목소리), 인물의 생각 등을 표현

14. 문서의 섹션 및 메인 요소 구조화

섹션 요소에 포함되어있는 것

<header>: 일반적으로 섹션의 제목, 목차(Nav), 검색, 로고 등을 포함하여 사용
<footer>: 일반적으로 섹션의 저자, 링크, 저작권 정보 등을 포함하는데 사용

섹션 요소와 포함되어 있지 않음

<main>: 일반적으로 주요페이지 요소들 사용 여러 번을 사용해도 상관없다.

<!--잘못된 예시-->
<section>
    <main></main>
</section>
<!--올바르게 사용되는 예시-->
<main>
    <section>
        <header></header>
    </section>
</main>

다음과 같은 구조로 크게 나뉜다.

<body>
    <header>
        <nav></nav>
    </header>
    <aside>
<!--   웹 사이트의 사이드바에 해당되는 부 콘텐츠 섹션을 가르킨다.-->
    </aside>
    <main>
        <section> 
<!--일반적인 컨테이너 요소가 아니며, 문서 개요에 명시적으로 나열되는 경우에만 섹션 요소가 적합하다는 규칙이 있다. -->
            <article>
<!--문서 페이지 애플리케이션 사이트 등에 포함된 독립적인 섹션을 말한다.-->
<!--일반적인 규칙은 article요소의 내용이 문서 개요에 명시적으로 나열되는 경우에만 적합하다. 제목(h1~h6요소)를 꼭 포함시켜야 한다.-->
                <h2>꼭 article 내부에는 heading 필요~!!</h2>
            </article>
        </section>
    </main>
    <footer>
        <nav></nav>
    </footer>
</body>

15. 컨테이너 요소

아무런 의미를 가지지 않는 요소들에 사용
<div>: 블럭 컨테이너
<span>: 인라인 컨테이너

16. 텍스트 레벨 시멘틱 요소

<sup> : 윗첨자 시 사용

<p>각주<sup><a href="#movehear">[1]</a></sup></p>
<div id="movehear">각주엗 대한 설명</div>
```  
`<sub>` : 아래첨자 시 사용  
```html
<dfn>H<sub>2</sub>SO<sub>4</sub></dfn>
```  
`<mark>` : 검색을 할 때 검색어가 **하이라이트** 되는 부분  
```html
<span>
    해당 부분 <mark>강조</mark> 및 <mark>하이라이트</mark> 처리 됨   
</span>
```  
`<abbr>` : 축약 요소(줄임말에 대해 설명하는 요소)  
```html
<h2><abbr title="맥도날드">맥날</abbr></h2>
```  
`<time>` :  기계가 이해할 수 있는 형태로 날짜나 시간을 나타내는 요소  
```html
<span>
    <time pubdate="2020-06-25">Jun 25, 2020</time>
</span>
```  
`<s>` : 더 이상 관련이 없거나 더 이상 정확하지 않은 요소(쇼핑몰에서 가격 할인시 가격에 줄이 가있는 것)  
```html
<p>
    <span class="hidden-text">원래 가격</span><s>11,900원</s>
    <em>50%</em><span class="hidden-text">할인</span>  5,900원
<!--웹페이지에서 알수 있도록 time요소와 data요소 사용-->
    <p><time datetime="2020-06-25">오늘마감</time> <data value="7">7개</data>구매 </p>
</p>

<data> : 댓글과 같은 갯수들을 나타낼때 감싸주는 요소

1	<span>댓글 <data value="0">0</data></span>

17. 그룹핑(Grouping) 요소

<address> : 조직의 정보를 담는 요소(footer에서 주로 사용)

<address>
서울시 서초구 방배로00길 00
전화: <a href="tel:02-000-000">02-000-0000</a>
</address>
```  
`<pre>` : 이메일, 빈 줄이 표시된 단락, 글 머리표가 붙은 줄로 표시된 목록 등에 사용, 컴퓨터 코드(아스키 코드 등) 표시 목적으로 사용  
```html
<!--코드를 다음과 같이 pre 요소로 감싼 후 code 요소로 감싸주면 사용 가능-->
<pre>
    <code>
        const code = () => {
            code function
        }
    </code>
</pre>

18. 임베디드(Embedded) 요소

01. HTML 픽쳐(Picture) 요소

<picture> 요소

0개 이상의 <source> 요소와 1개 이상의 를 포하맣는 컨테이너 요소
다양한 스크린 환경에 맞는 적합한 이미지를 제공하기 위한 목적으로 사용

최신브라우저에서는 <source>를 인식하면 <source>요소에 대한 정보를 표시, 인식하지 못하는 경우는 <img>요소를 사용

<!--media 속성-->
<picture>
    <source srcset="사진.png" media="(min-width: 600px)">
    <img src="사진.png" alt="사진에 대한 설명">
</picture>
<!--type 속성-->
<picture>
    <source srcset="사진.svg" type="image/svg+xml">
    <img src="사진.png" alt="사진에 대한 설명">
</picture>
```  
`<source>` 요소
- `<picture>`, `<audio>`, `<video>` 요소의 다중 미디어 리소스를 지정하기 위해 사용.   
- 여러개 사용 가능  
- media 속성을 사용하여 반응형 웹을 사용할 수 있다.  

### 02. HTML 비디오(Video) 요소
`<video>` 요소  
- 동영상 콘텐츠를 포함하기 위해서 사용.
- src 속성이나 `<source>` 요소을 이용해 여러 개의 동영상 소스 중 하나를 표시.
- mp4를 사용하면 요즘 모든 브라우저에서 사용 가능하기 때문에 따로 `<source>`요소를 사용하지 않아도 된다.
- 속성
    - src : 비디오 파일 경로
    - poster : 포스터 이미지 경로
    - preload : auto(기본값) 브라우저를 미리 읽어와서 사용자 경험을 향상시키는데 목적이 있음
    - controls : 재생 컨트롤러 표시 설정
    - autoplay : 자동 재생 설정
    - loop : 반복 설정
    - mute : 소리 꺼짐
```html
<video src="비디오 path 작성" poster="비디오 포스터 path" muted>
    <p>
        HTML5 <code>video</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용 중입니다.
        <a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a> 하세요.
    </p>
</video>

03. HTML 오디오(Audio) 요소

<audio> 요소

오디오는 controls 속성을 사용하여 표시해 주어야 한다.
mp3를 사용하면 요즘 모든 브라우저에서 사용 가능하기 때문에 따로 <source>요소를 사용하지 않아도 된다.

보통은 다음과 같이 사용해준다.

<figure>
    <img src="이미지 path" alt="img 설명">
    <figcaption>
        <audio src="오디오 path 작성" controls>
            <p>
                HTML5 <code>video</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용 중입니다.
                <a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a> 하세요.
            </p>
        </audio>
    </figcaption>
</figure>
```  

### 04. HTML 트랙(Track) 요소
`<track>` 요소 
- 비디오, 오디오 재생 시, 자막을 표시
- 실제 서버에서만 자막을 출력가능
```html
<video src="비디오 path">
    <track kind="subtitles" src="자막 path" srclang="ko" label="한국어" default>
    <track kind="subtitles" src="자막 path" srclang="en" label="영어">
</video>

<audio src="오디오 path">
    <track kind="subtitles" src="자막 path" srclang="ko" label="한국어" default>
    <track kind="subtitles" src="자막 path" srclang="en" label="영어">
</audio>

05. HTML 인라인 프레임(iframe) 요소

<iframe> 요소

인라인 프레임에 다른 HTML 페이질르 포함하여 화면에 표시 (구글 맵이나 유투브등)
속성
- src: 프레임 소스 설정
- width : 프레임 너비 설정
- height : 프레임 높이 설정
- allowfullscreen : 프레임 전체화면 설정

06. HTML 이미지 맵(map) 요소

<map> 요소

이미지 앱(클릭 가능한 링크 영역)을 정의하기 위해 <area>와 함께 사용됨.
눈에 보이지 않음

<area> 요소

이미지의 핫스팟 지역 정의, 하이퍼링크 설정. <map> 내부에서만 사용 가능.
이미지에 좌표 생성 도구 (https://www.image-map.net)
속성
- shape
- coords
- href
- target
- alt
- hreflang
- download

1
2
3

<map name="map에 이름">
    <area shape="모양 설정" coords="좌표" href="눌렀을때 이동할 사이트" alt="사이트 설명">    
</map>

07. HTML 확장 가능한 벡터그래픽(SVG) 요소

<svg> 요소

확장가능한 백터 그래픽은 2차원의 백터 그래픽을 기술하기 위한 XML 마크업 언어.

19. 표 디자인

<table> 요소

테이블 몸체에 해당되면, 행/열 및 셀을 포함한다.
복잡한 내용을 x,y축에 따라 이해하기 쉽게 데이터를 구조화하는데 테이블을 사용한다.
테이블 내에 테이블 중첩사용은 안된다.
테이블을 레이아웃 목적으로 사용해서는 안된다.
area-describedby속성을 사용하여 자세한 설명과 연결해줄수 있다.
또는 <figure>요소에 aria-labelleby 속성을 사용해 제목(caption)을 연결해줄수 있다.
<table> 요소 안에는 <tr>요소와 <caption>요소를 갖을 수 있다.

<tr> 요소

테이블의 행을 가르킨다.
<tr>요소는 <th>와 <td>를 갖을 수 있다.

<th> 요소

테이블 셀 제목
속성
- scope : 행 또는 열, 행그룹, 열그룹의 제목임을 명시
- colspan: 열을 그룹 지을때 사용
- rowspan: 행을 그룹 지을때 사용

<tr> 요소

테이블 셀 내용
속성
- headers : 셀 제목을 하나 이상 연결하여 읽기 용이하도록 구성할 때 사용
- colspan: 열을 그룹 지을때 사용
- rowspan: 행을 그룹 지을때 사용

<col> 요소

테이블 열을 하나 이상 묶고자 할 때 사용한다.
일반적으로 colgroup 요소 내부에 포함시킨다.
속성
- span : 열 묶음 개수 설정

<colgroup> 요소

테이블 열을 그룹을 만들고자 할 때 사용한다.
내부에 col요소를 포함하거나, 포함하지 않을 수 있다.
속성
- span : colgroup 요소가 col을 포함하지 않을 경우, 열 묶음 개수 설정

20. 폼 디자인

<form> 요소

폼은 텍스트필드, 버튼, 체크박스와 같은 폼 컨트롤을 포함하는 웹페이지의 컴포넌트를 말한다.
사용자와 인터렉션을 수행한 결과 (예: 검색)를 서버로 보낼 수 있다.

<label> 요소

속성
- for : <input>요소의 id 값과 동일하게 만들면 해당 요소의 label이 된다.

<input> 요소

사용자의 데이터를 받을 수 있는 폼 컨트롤을 말한다.
다양한 유형 설정이 가능하며, 유형에 맞는 역할을 수행한다.
속성
- name
- placeholder
- value
- readonly
- required
- disabled
- minlength
- maxlength
- list
type
- text
- password
- checkbox
- radio
- file
- submit
- button
- image
- reset
- hidden
- search
- url
- tel
- email
- date
- month
- week
- time
- datetime-local
- number
- range
- color

<button> 요소

버튼 폼 컨트롤로 사용자의 인터렉션을 받아 액션을 트리깅 처리한다.
type
- submit
- button
- reset

<select> 요소

드롭 다운 메뉴 컨트롤을 말한다.
내부에 <option>요소를 포함하여 사용자에게 선택할 수 있도록 한다.
<option>요소를 묶어 그룹으로 만들고자 한다면 <optgroup>요소를 사용하고 <label>속성을 사용해 그룹 이름을 설정한다.
속성
- name
- multiple
- disabled
- required
- size

<textarea> 요소

멀티라인 일반 텍스트 편집 컨트롤을 말한다.
속성
- name
- placeholder
- rows
- cols
- readonly
- required
- disabled
- minlength
- maxlength

<filedset> 요소

하나 이상의 폼 컨트롤을 그룹화 하는데 사용됨
속성
- name
- disabled

<legned> 요소

<filedset> 컨트롤의 레이블을 설정하는 컨트롤

<output> 요소

계산된 결과를 출력하는 컨트롤
속성
- name
- for

<datalist> 요소

데이터 목록 요소 컨테이너 컨트롤
내부에 <option> 요소를 사용해 항목을 만든다.

<progress> 요소

작업의 완료 진행 상황을 표시하는데 사용되는 컨트롤
속성
- value
- max

<meter> 요소

알려진 범위 내에서의 스칼라 측정 또는 분포 비율을 나타내는 컨트롤 (게이지라고도 부른다.)
디스크 사용 현황, 쿼리 결과의 관련성, 특정 후보에 대한 투표율 등이 해당됨.
속성
- value
- max
- min
- low
- high
- optimum

21. 인터랙티브 요소(
,
, )

<details> 요소

디스클로저 위젯으로 정보를 감추거나, 펼처서 보여준다.
모든 정보를 일시에 고액하지 않고 사용자의 요구에 맞춰 정보를 공개할 수 있다.
아코디언 컴포넌트와 비슷하게 작동한다.
속성
- open : 페이지 로딩 시, 위젯을 표시하도록 설정

<summary> 요소

<details> 요소의 레이블/ 제목(캡션), 요약(서머리) 등을 표시한다.
폼 <filedset> 요소의 제목을 <legend> 요소가 표시하듯 비슷하다.

<dialog> 요소

사용자의 결정 또는 정보 입력을 요구하는 컴포넌틀를 말함.
‘모달 윈도우’ 또는 대화상자로도 불린다.
속성
- open : 페이지 로딩 시, 위젯을 표시하도록 설정

22. 스크립팅 요소들

<script> 요소

JS 코드 또는 파일을 HTML 문서에 작성하거나, 연결할 때 사용한다.
속성
- src
- type
- async
- defer

<noscript> 요소

사용자의 웹 브라우저 환경에서 스크립트를 지원되지 않거나, 스크립트가 꺼져있는 경우, 문서에 표시될 문구를 삽입한다.

<canvas> 요소

JS를 사용하여 그래픽을 그릴 떄 사용한다.
2D 또는 WebGL 컨텍스트 객체를 추출해 그래픽을 그릴 수 있다.

23. 사용자와 상호작용하는 속성(인터랙티브 요소)

hidden 속성

<div> 요소 안에 속성으로 hidden을 넣어 놓으면 화면에서는 보이지 않는다. JS를 통해 조작 가능하다.

tabindex 속성

요소를 키보드로 탐색할 수 있도록 설정하거나, 제외 또는 순서대로 탐색할 수 있도록 설정할 수 있다.
속성값으로 0을 주면 비포커스 요소(<div> 등)에 포커스를 적용해야 할 경우 사용된다.
속성값으로 -1을 주면 포커스 순서에서 제외시킬 수 있다.
기본적 포커스 가능한 요소들
- 폼컨트롤 요소 : <input>, <button>, <textarea>, <select> 등
- href 속성을 가진 요소 : <a>, <area>
- controls 속성을 가진 요소 : <video>, <audio>

accesskey 속성

모든 HTML 요소는 accesskey 속성을 가질 수 있다. 속성 값은 키보드 단축키로 설정된다.
accesskey 속성의 단축키는 브라우저와 운영체제 플랫폼에 의존하고 있어 운영체제마다 단축키가 달라진다.

contenteditable 속성

설정된 요소는 사용자가 직접 편집할 수 있도록 만들어 준다.
ture(“””) or false로 설정하고 false면 사용자가 수정하지 못하고 빈문자열이나 true일 때는 수정 가능하다.

draggable 속성

drag가능

HTML Element와 구조

https://youngheakim.github.io/HTML/htmlElement/

Author

YoungHea Kim

Posted on

2021-02-04

Updated on

2021-02-04

Licensed under

HTML Element와 구조

HTML Element와 구조

1. Element 구조

2. 콘텐츠를 감싸지 않은 요소

3. 표준 호환모드

4. 문서에 사용되는 주 언어 설정

5. 제목과 단락

6. HTML 이미지 & 피규어 & 캡션

7. HTML 문법 유효성 검사 (validator)

validator.w3.org : 온라인으로 문법이 틀린곳이 없는지를 확인해주는 툴이다.

8. HTML 목록 디자인

9. 하이퍼링크(Hyperlink)

10. 그룹 디자인

11. 인용문

12. 줄바꿈(`<br>`)

13. 어휘에 사용 되는 요소들

14. 문서의 섹션 및 메인 요소 구조화

섹션 요소에 포함되어있는 것

섹션 요소와 포함되어 있지 않음

15. 컨테이너 요소

16. 텍스트 레벨 시멘틱 요소

17. 그룹핑(Grouping) 요소

18. 임베디드(Embedded) 요소

01. HTML 픽쳐(Picture) 요소

03. HTML 오디오(Audio) 요소

05. HTML 인라인 프레임(iframe) 요소

06. HTML 이미지 맵(map) 요소

07. HTML 확장 가능한 벡터그래픽(SVG) 요소

19. 표 디자인

20. 폼 디자인

21. 인터랙티브 요소(
,
, )

22. 스크립팅 요소들

23. 사용자와 상호작용하는 속성(인터랙티브 요소)

Author

Posted on

Updated on

Licensed under

카테고리

최근 글

태그

HTML Element와 구조

HTML Element와 구조

1. Element 구조

2. 콘텐츠를 감싸지 않은 요소

3. 표준 호환모드

4. 문서에 사용되는 주 언어 설정

5. 제목과 단락

6. HTML 이미지 & 피규어 & 캡션

7. HTML 문법 유효성 검사 (validator)

validator.w3.org : 온라인으로 문법이 틀린곳이 없는지를 확인해주는 툴이다.

8. HTML 목록 디자인

9. 하이퍼링크(Hyperlink)

10. 그룹 디자인

11. 인용문

12. 줄바꿈(<br>)

13. 어휘에 사용 되는 요소들

14. 문서의 섹션 및 메인 요소 구조화

섹션 요소에 포함되어있는 것

섹션 요소와 포함되어 있지 않음

15. 컨테이너 요소

16. 텍스트 레벨 시멘틱 요소

17. 그룹핑(Grouping) 요소

18. 임베디드(Embedded) 요소

01. HTML 픽쳐(Picture) 요소

03. HTML 오디오(Audio) 요소

05. HTML 인라인 프레임(iframe) 요소

06. HTML 이미지 맵(map) 요소

07. HTML 확장 가능한 벡터그래픽(SVG) 요소

19. 표 디자인

20. 폼 디자인

21. 인터랙티브 요소(, , )

22. 스크립팅 요소들

23. 사용자와 상호작용하는 속성(인터랙티브 요소)

Author

Posted on

Updated on

Licensed under

카테고리

최근 글

태그

12. 줄바꿈(`<br>`)

21. 인터랙티브 요소(
,
, )