Post

(Web) Html의 모든것

Posted
800, "height"=>500}" class="preview-img" alt="Preview Image" w="1200" h="630" >
By Jogyejin 19 min read

HTML란

HTML은 HyperText Markup Language의 약자
웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성된다
각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용된다

HTML 기본 구조

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

- <!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시한다

- <html> : HTML 문서의 루트(root) 요소를 정의한다

- <head> : HTML 문서의 메타데이터(metadata)를 정의한다

- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다
- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있다

- <title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용된다
    > 웹 브라우저의 툴바(toolbar)에 표시
    > 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 된다
    > 검색 엔진의 결과 페이지에 제목으로 표시된다

- <body> : 웹 브라우저를 통해 보이는 내용(content) 부분

- <h1> ~ <h6> : 제목(heading)을 나타낸다

- <p> : 단락(paragraph)을 나타낸다

Tag(태그)

웹 페이지를 구성하는 요소는 텍스트, 이미지, 버튼 등 매우 다양하다 태그는 이런 다양한 구성 요소를 정의하는 역할을 하며, HTML 문법을 이루는 가장 작은 단위입니다. 기본 형식은 다음과 같이 괄호(< >) 사이에 태그명을 넣는 형태이다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

[각종 태그 종류]

- hn 태그 : hn 태그는 제목이나 주제를 나타내는 텍스트를 표현할 때 사용
(hn 태그는 h1부터 h6 태그까지 6개가 있는데, 여기서 h는 heading을 의미하고 n에 들어가는 숫자는 중요도를 나타낸다)

- p 태그 : p 태그는 본문의 문단(paragraph)을 작성할 때 사용
(HTML에서는 제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기 때문에 p 태그를 자주 사용한다)

- br 태그 : br 태그는 문단에서 줄 바꿈할 때 사용

- blockquote 태그 : blockquote 태그는 출처에서 인용한 문단 단위의 텍스트를 작성할 때 사용한다 이때 출처가 확실한 인용문은 cite 속성으로 출처 경로를 명시해야 한다

- q 태그 : q 태그는 문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용할 수 있는 태그 q 태그를 사용한 콘텐츠는 큰따옴표("")로 묶임

- ins와 del 태그 : ins 태그는 새로 추가된 텍스트임을 나타낼 때 사용하고, del 태그는 기존에 있던 텍스트가 삭제된 텍스트임을 나타낼 때 사용한다 ins 태그를 사용한 콘텐츠에는 밑줄이, del 태그를 사용한 콘텐츠에는 취소선이 생긴다

- sub와 sup 태그 : sub 태그와 sup 태그는 각각 아래 첨자, 위 첨자에 해당하는 텍스트를 작성할 때 사용한다

- div 태그 : div 태그는 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용한다
(body 태그 안에 영역 구분 없이 표시하려는 텍스트만 작성하면 코드가 복잡해질수록 텍스트를 구분하기 어려워지는데 이 코드를 div 태그를 사용해 영역별로 그룹을 지으면 코드 단순화가 가능하다)

- span 태그 : span 태그는 인라인 요소를 그룹으로 묶을 때 사용한다

- ul 태그 :ul(unordered list) 태그는 순서가 없는 비순서형 목록을 생성할 때 사용하며 이때 목록 내용은 li(list item) 태그로 구성한다

- ol 태그 : ol(ordered list) 태그는 순서형 목록을 생성할 때 사용하며 ul 태그와 마찬가지로 li 태그로 목록 내용을 구성 한다

- dl 태그 : dl(description list) 태그는 정의형 목록을 만들 때 사용합니다. 정의형 목록은 용어와 용어 설명을 나열한 형태의 목록이라고 보면 된다 dl 태그로 목록을 생성할 때는 li 태그 대신에 dt(description term) 태그로 용어를, dd(description details) 태그로 용어 설명을 작성한다

- a 태그 : a 태그는 HTML에서 내부나 외부 링크를 생성하며 a 태그는 대상 경로를 의미하는 href 속성을 필수로 사용해야 하고, 그 외에 target, title 속성을 선택해서 사용할 수 있다

- img 태그 : HTML에서 이미지 객체를 삽입하고 싶을 때는 img 태그를 사용하며 img 태그는 src 속성과 alt 속성으로 구성된다

- strong 태그 : strong 태그는 텍스트의 의미를 강조하고 싶을 때 사용하며 strong 태그는 스타일에서 차이를 두기 위해 시각적으로 텍스트를 굵게 표시하는 것뿐 아니라 웹 브라우저에 중요한 부분임을 알려 주는 역할을 한다

- em 태그 : em(emphasis) 태그 역시 텍스트의 의미를 강조하고 싶을 때 사용하며 em 태그를 사용하면 텍스트가 기울어져 보이면서 강조 효과를 낼 수 있다

주석

주석(comment)은 실행결과(웹 브라우저)에는 표시되지 않지만, 코드에 어떠한 메모나 설명을 남기고 싶을 때 사용하며 <!--와 --> 사이에 내용을 작성하면 해당 내용은 주석으로 처리된다

DTD (Documen Type Definition)

웹 브라우저가 처리할 해당 문서가 어떤 문서 형식을 따라야 하는지
미리 정의 하는 것으로 HTML문서 작성시 항상 맨처음에 넣어야 한다 <!DOCTYPE html>

기본구조

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

- html 태그는 HTML 문서의 시작과 끝을 의미한다 따라서 모든 태그는 html 태그 안에 작성해야 한다
- head 태그는 HTML 문서의 메타데이터(metadata)를 정의하는 영역이다 메타데이터란 HTML 문서에 대한 정보(data)로, 웹 브라우저에는 직접 노출되지 않는다 보통 meta, title, link, style, script 등의 태그를 사용해 HTML 문서의 여러 정보를 정의한다
- meta 태그는 메타데이터를 정의하는 데 사용한다
- title 태그는 HTML 문서의 제목을 지정하는 데 사용한다
- body 태그는 웹 브라우저에 노출되는 내용을 작성하는 영역이다, 따라서 웹 브라우저에서 표시되는 모든 내용은 body 태그 영역 안에 작성한다

<html> 
    <head> 
        <title> 제목 </title> 
        <meta charset="UTF-8">
        <meta name="keyword" content="HTML, meta, tag, element, reference">
        <meta name="description" content="HTML meta tag page">
        <meta name="author" content="gyejin">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
    </head> 
    
    <body>
        내용
    </body> 
</html>

부모,자식,형제 관계

HTML은 태그 사용 위치에 따라서 부모,자식,형제 관계가 성립된다 상위 태그 안에 하위 태그가 존재하면 상위태그는 하위태그의 부모가 되며 해당 상위태그 밑에 존재하는 하위태그들은 각 형제 관계를 갖게된다

폼(Form) 구성하기

폼(form)은 HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식을 의미한다 실제로 웹 페이지에서 폼은 흔하게 찾아볼 수 있다 예를 들어, 네이버 로그인 화면에는 아이디와 비밀번호를 입력하는 요소와 로그인 상태 유지를 설정하는 체크박스, 버튼 요소까지 다양한 상호작용 요소가 존재한다

폼(Form) 관련 태그

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19


- form 태그 : 폼 양식을 의미하는 태그이며 HTML의 폼을 구성하는 태그는 모두 form 태그 안에 작성해야 한다
(form 태그는 action과 method 속성을 함께 사용)
    * `action 속성` : action 속성에는 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 적는다
    * `method 속성` : method 속성에는 입력받은 값을 서버에 전송할 때 송신 방식을 적습니다. 속성값으로 get 또는 post를 사용할 수 있다

- input 태그 : 로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때는 input 태그를 사용한다
(input 태그에는 type, name, value 속성이 있는데, type 속성은 필수로 사용해야 하고, name과 value 속성은 선택해서 사용할 수 있다)
    * `type 속성` : type 속성은 입력된 값에 따라 상호작용 요소의 종류를 결정하며 입력 요소는 아이디나 비밀번호를 입력받는 요소 외에도 콤보박스, 파일 업로드, 체크박스, 라디오버튼 등 다양하다 이런 요소의 종류를 type 속성에 사용된 값으로 결정한다
    * `name 속성` : name 속성에는 입력 요소의 이름을 작성하며 입력 요소가 form 태그에 의해 서버로 전송될 때, name 속성에 적힌 값이 이름으로 지정된다 서버에서는 지정된 이름으로 입력 요소를 식별할 수 있다
    * `value 속성` : value 속성에는 입력 요소의 초깃값을 작성하며 입력 요소는 보통 사용자에게서 수동으로 값을 입력받지만, 상황에 따라 초깃값을 설정해야 하는 경우가 있다 이럴 때 사용하는 속성이다

- label 태그 : label 태그는 form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용한다

- textarea 태그 : 여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 textarea 태그를 사용하며 웹 사이트에서 글을 작성할 때 사용하는 입력 요소는 대부분 textarea 태그로 생성한다

- select, option, optgroup 태그 : elect 태그를 사용하면 콤보박스(combobox)를 생성할 수 있으며, 콤보박스에 항목 하나를 추가할 때는 option 태그를 사용하고, 항목들을 그룹으로 묶고 싶다면 optgroup 태그를 사용한다

- button 태그 : input 태그에서 type 속성값을 submit, reset, button으로 지정해 생성할 수 있으며 별도의 button 태그로 생성할 수도 있다. button 태그도 마찬가지로 type 속성을 가진다

테이블(Table) 관련 태그

표(table)는 웹 페이지에서 흔하게 볼 수 있는, 2차원 격자 형태로 구성된 데이터를 의미하며 표는 다음 그림처럼 행(row), 열(column) 그리고 행과 열이 만나는 셀(cell)로 구성된다

1
2
3
4
5
6
7
8
9
10
11
12
13

- table 태그 : html에서 표를 생성할 때 사용한다
폼과 동일하게 표 관련 태그는 모두 table태그 안에서 사용해야 한다

- caption 태그 : 표 제목을 지정할 때 사용하는 태그

- tr 태그 : 표에서 행을 생성할 때 사용하며, tr 태그 하나는 행 하나를 생성하기 때문에 행을 여러 개 생성할 때는 tr 태그를 여러 번 사용한다

- th, td 태그 : 표에서 열을 생성할 때 사용하며 th태그는 표에서 제목을 나타내는 열을 생성, td태그는 표에서 일반적인 데이터를 나타내는 열을 생성한다

- thead, tfoot, tbody 태그 : 표에서 행을 묶어 그룹화가 가능하다

- col과 colgroup 태그 : 표에서 열을 그룹화 하고자 할 때 사용된다

멀티미디어 관련 태그

1
2
3
4
5
6

- audio 태그 : audio 태그는 항상 src 속성과 함께 사용하며, src 속성값에는 삽입하려고 하는 오디오 파일의 경로를 적어 준다, 그리고 오디오 컨트롤 패널이 웹 브라우저에 노출되도록 controls 속성을 설정해야 한다

- video 태그 : video 태그도 비디오 경로를 입력하는 src 속성을 필수로 사용해야 하며,controls 속성을 추가해 사용자가 제어할 수 있는 컨트롤 패널도 표시해야 한다

- source 태그 : audio 태그와 video 태그는 다양한 포맷을 지원하지만, 웹 브라우저별로 지원하는 포맷과 미디어 타입은 각각 다르다 예를 들어 오디오에서, MP3 포맷은 모든 웹 브라우저에서 지원하지만 WAV나 OGG 포맷은 지원하지 않는 웹 브라우저도 있다 그런데 OGG 포맷을 우선 지원하고 어쩔 수 없는 경우에만 MP3 포맷을 지원해야 하는 경우 source 태그를 사용해야한다
Develop, html
html
This post is licensed under CC BY 4.0 by the author.