랄지 IT
HTML 심화 정리 본문
HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다.
*마크업 언어(markup 言語, markup language)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 일반적으로 데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와는 구별된다. *
웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다.
HTML: 마크업 랭귀지
CSS 스타일시트 랭귀지
JS: 프로그래밍 랭귀지
HTML5는 서버와의 소켓 통신을 지원하므로 서버와의 양방향 통신이 가능하다.
HTML5는 요소의 의미를 명확히 설명하는 시맨틱 태그를 도입하여 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명할 수 있다.
이를 통해 HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있다.
HTML5 문서는 반드시 <!DOCTYPE html>으로 시작하여 문서 형식(document type)을 HTML5로 지정한다.
<head>와 </head>이 정보들은 브라우저에 표시되지 않는다.
웹브라우저에 출력되는 모든 요소는 <body>와 </body> 사이에 위치한다.
HTML document는 .html 확장자를 갖는 순수한 텍스트 파일이다.
다양한 편의 기능을 제공하는 editor 또는 IDE(Integrated Development Environment)를 사용하는 것이 일반적이다.
*추천 도구들:
Visual Studio Code
WebStorm
Atom
Brackets
Sublime text
HTML 요소는 시작 태그(start tag)와 종료 태그(end tag) 그리고 태그 사이에 위치한 content로 구성된다. <p>content</p>
HTML document는 요소(Element)들의 집합으로 이루어진다.
요소의 중첩 (Nested Element)
요소는 중첩될 수 있다. 즉, 요소는 다른 요소를 포함할 수 있다. 이때 부자관계가 성립된다. 이러한 부자관계로 정보를 구조화하는 것이다.
이런 중첩 관계(부자 관계)를 시각적으로 파악하기 쉽게 indent(들여쓰기)를 활용한다. 보기좋은 코드는 읽기 쉬우며 읽기 쉬운 코드는 좋은 코드이다.
content를 가질 수 없는 요소를 빈 요소(Empty element or Self-Closing element)라 한다.
아래의 예와 같이 빈 요소는 content가 없으며(필요가 없다) 어트리뷰트(Attribute)만을 가질 수 있다.
br
hr
img
input
link
meta
어트리뷰트(Attribute 속성)이란 요소의 성질, 특징을 정의하는 명세이다.
요소에 추가적 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공한다.
글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다.
글로벌 어트리뷰트는 대체로 모든 요소에 사용될 수 있다.
id, class, hidden, lang, style, tabindex(?), title
검색엔진(SEO)
웹사이트는 검색엔진에의 노출이 매우 중요하다.
당연한 것이 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다.
검색엔진은 이 시대의 가장 강력한 권력 중의 하나라고 말할 수도 있겠다.
SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다.
로봇(Robot)
검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.)
그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)
검색로봇은 html 코드만으로 그 의미를 인지하여야 함, 이때 시맨틱 요소를 해석하게 됨
HTML으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다.
시맨틱 태그
1. <font size="6"><b>Hello</b></font>
2. <h1>Hello</h1>
1행의 요소는 의미론적으로 어떤 의미도 가지고 있지 않다. 즉, 의도가 명확하지 않다. 개발자가 의도한 요소의 의미를 명확하게 나타내지 않고 다만 폰트 크기와 볼드체를 지정하는 메타데이터만을 브라우저에게 알리고 있다.
그러나 2행의 요소는 header(제목) 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소의 의미가 명확히 드러나고 있다.이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.
시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다.
즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
시맨틱 웹
시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로, 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.
HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.
* non-semantic 요소: div, span 등, 말그대로 의미없는 요소
* semantic 요소: form, table, img 등, content의 의미를 명확히 설명
HTML5에서 새롭게 추가된 시맨틱 태그
header, nav, aside, section, article, footer
<!DOCTYPE html>
문서 형식 정의 tag이다
문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다.
html버전에 따라 다르다.
html 태그
html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다.
즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. 단 <!DOCTYPE>는 예외이다.
html은 글로벌 어트리뷰트를 지원한다. 특히 lang 어트리뷰트를 사용하는 경우가 많다.
head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다.
link 요소에는 외부 리소스와의 연계 정보를 정의한다. 주로 HTML과 외부 CSS 파일을 연계에 사용된다.
script 요소에는 client-side JavaScript를 정의한다.
meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다.
메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.
charset 어트리뷰트는 브라우저가 사용할 문자셋을 정의한다.
keywords 어트리뷰트는 SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 keywords을 정의한다.
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="Web tutorials on HTML and CSS"> 웹페이지의 설명 정의
<meta name="author" content="John Doe"> 웹페이지의 저자 명시
<meta http-equiv="refresh" content="30"> 웹페이지를 30초마다 refresh 함
body tag는 HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재한다.
메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술된다.
HTML 요소 레퍼런스: developer.mozilla.org/ko/docs/Web/HTML/Element
Heading 태그는 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있다.
strong 태그
b tag와 동일하게 bold체를 지정한다. 하지만 b태그와는 다르게 strong 태그는 의미론적(Semantic) 중요성의 의미를 갖는다.
웹표준을 준수하고자 한다면 b태그보다는 strong를 사용하는 것이 바람직하다.
em 태그
emphasized(강조, 중요한) text를 지정한다.
i tag와 동일하게 Italic체로 표현된다. 하지만 i태그와는 다르게 의미론적(Semantic) 중요성의 의미를 갖는다.
sub 태그 subscripted(아래에 쓰인) text를,
sup 태그는 superscripted(위에 쓰인) text를 지정한다.
br tag는 (강제)개행 (line break)을 지정한다.
br tag는 빈 요소(empty element)로 종료태그가 없다.
연속적 공백을 삽입하는 방법은 를 사용해준다
q태그
짧은 인용문(quotation)을 지정한다. 브라우저는 인용부호(큰따옴표/quotation marks)로 q 요소를 감싼다
blockquote태그
긴 인용문 블록을 지정한다. 브라우저는 blockquote 요소를 들여쓰기한다.
css를 이용하여 다양한 style을 적용할 수 있다.
HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다.
이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다.
한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link)라 한다.
HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다.
루트 디렉터리
파일 시스템 계층 구조 상의 최상위 디렉터리이다.
Unix: /
Windows: C:\
홈 디렉터리
시스템의 사용자에게 각각 할당된 개별 디렉터리이다.
Unix: /Users/{계정명}
Windows: C:\Users\{계정명}
작업 디렉터리
작업 중인 파일의 위치한 디렉터리이다.
./
부모 디렉터리
작업 디렉터리의 부모 디렉토리이다.
../
target 어트리뷰트는 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정한다.
_self 링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈한다 (기본값)
_blank 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈한다
목록 태그는 내비게이션 메뉴를 만들 때 자주 사용된다.
순서없는 목록 (Unordered List) <ul>
순서있는 목록 (Ordered List) <ol>
type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있다 ,
“1” 숫자 (기본값)
“A” 대문자 알파벳
“a” 소문자 알파벳
“I” 대문자 로마숫자
“i” 소문자 로마숫자
start 어트리뷰트로 리스트의 시작값을 지정할 수 있다.
reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현한다.
중첩 목록 사용가능, 아래처럼
<ul>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ul>
table 태그
표(table)를 만들 때 사용하는 태그이다.
과거에는 테이블 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 공간 분할 태그인 div 태그를 사용하여 레이아웃을 구성한다.
table 표를 감싸는 태그
tr 표 내부의 행 (table row)
th 행 내부의 제목 셀 (table heading)
td 행 내부의 일반 셀 (table data)
<table border="1">
<tr>
<th>First name</th>
<th>Last name</th>
<th>Score</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
border 표 테두리 두께 지정. (CSS border property를 사용하는 것이 더 나은 방법이다.)
rowspan 해당 셀이 점유하는 행의 수 지정
colspan 해당 셀이 점유하는 열의 수 지정
audio 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.
src 음악 파일 경로
preload 재생 전에 음악 파일을 모두 불러올 것인지 지정
autoplay 음악 파일을 자동의 재생 개시할 것인지 지정
loop 음악을 반복할 것인지 지정
controls 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.
<audio src="assets/audio/Kalimba.mp3" controls></audio>
웹브라우저 별로 지원하는 음악 파일 형식이 다르다. 파일 형식에 따라 재생되지 않는 브라우저가 존재한다는 뜻이다.
source 태그를 사용하여 파일 형식의 차이 문제를 해결 할 수 있다. type 어트리뷰트는 생략 가능하다.
<audio controls>
<source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
<source src="assets/audio/Kalimba.ogg" type="audio/ogg">
</audio>
video태그: audio태그와 비슷,
폼 태그
form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용된다
input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.
action: URL 입력 데이터(form data)가 전송될 URL 지정
method: get / post 입력 데이터(form data) 전달 방식 지정
GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라 한다
GET 방식은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식이다.
전송 URL 바로 뒤에 ‘?’를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가한다. 1개 이상의 전송 데이터는 ‘&’로 구분한다.
URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터의 한계가 있다. (최대 255자).
POST 방식은 Request Body에 담아 보내는 방식이다. URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다. REST API에서 POST 메소드는 특정 리소스의 생성을 요청한다.
input 태그는 form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다.
input 태그는 다양한 종류가 있는데 type 어트리뷰트에 의해 구분된다.
form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나 ajax를 사용할 시에는 form 태그 내에 존재하지 않아도 된다.
서버에 전송되는 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로하여 key=value의 형태로 전송된다.
select 태그
서버에 전송되는 데이터는 select 요소의 name 어트리뷰트를 키로, option 요소의 value 어트리뷰트를 값으로하여 key=value의 형태로 전송된다.
select: select form 생성
option: option 생성
optgroup: option을 그룹화한다
button 태그
button 태그는 클릭할 수 있는 버튼을 생성한다.
<input type="button">과 유사하지만 input 태그는 빈 태그인 반면 button 태그는 그렇지 않다.
따라서 button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.
type 어트리뷰트는 반드시 지정하는 것이 바람직하며 어트리뷰트값으로 button, reset, submit를 지정할 수 있다.
<button type="submit" name="myButton" value="foo">Click me</button>
위 예제의 경우, IE6, IE7에는 ‘foo’ 대신 ‘Click me’를 서버로 전송한다.
따라서 오래된 IE를 지원해야 한다면 input 태그를 사용하는 것이 바람직하다.
fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용한다.
legend 태그는 fieldset 태그 내에서 사용되야 하며 그룹화된 fieldset의 제목을 정의한다.
<fieldset>
<legend>Login</legend>
Username <input type="text" name="username">
Password <input type="text" name="password">
</fieldset>
웹페이지의 레이아웃을 구성하기 위해서 공간을 분할할 필요가 있다.
공간을 분할할 수 있는 태그는 div, span, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다.
그런데 div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 아래와 같이 HTML5에서 새롭게 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이나 IE에서 작동하지 않기 때문에 주의가 필요하다.
header 헤더를 의미한다
nav 내비게이션을 의미한다
aside 사이드에 위치하는 공간을 의미한다
section 본문의 여러 내용(article)을 포함하는 공간을 의미한다
article 분문의 주내용이 들어가는 공간을 의미한다
footer 푸터를 의미한다
이와 같은 공간 분할 태그는 일반적으로 다른 요소를 포함하는 컨테이너 역할을 하게 된다.
스터디 사이트: poiemaweb.com
'html' 카테고리의 다른 글
| html 기초 정리 (0) | 2020.12.16 |
|---|---|
| 웹의 역사 (0) | 2020.12.16 |