HTML (Hyper Text Markup Language)

Hyper Text: 웹사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능.
Markup: tag를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것을 말합니다.

웹에서 자유롭게 오갈 수 있는 웹문서를 만드는 언어가 HTML Web editor - 웹문서 작성 Web browser - 웹문서 보는 프롣그램

웹 브라우저가 HTML5를 얼마나 지원하는지 알고 싶다면 http://HTML5test.com/ 에 접속

웹제작

front-end 개발: 사용자와 직접 마주하는 부분

back-end 개발: 서버단에서 내용을 저장, 수정, 삭제하는 부분

Visual Studio Code - 파일 - 기본설정 - 색테마

HTML 표준 명세서에서 태그와 태그안의 속성들은 소문자 사용을 권장함(대문자도 가능)

국내 검색 사이트는 각 포털 내의 블로그를 중심으로 검색하기 때문에 <meta> 태그가 제 역할을 못합니다.
구글 검색 엔진에서 이해할 수 있는 <meta> 태그에 대한 자세한 설명은 https://support.google.com/webmasters/answer/79812?hl=ko를 참고하세요.

특수 기호 사용하기

HTML에서 사용하는 모든 특수 기호를 보려면 검색 사이트에서 'HTML 특수 기호 엔티티 테이블(Entity Table)'을 검색해보세요.

& → &
(공백 한 칸) →  
< → <
> → >
" → "
| → |
´ → ´

텍스트를 덩어리로 묶어주는 태그

<hn>-제목 표시용 <h1>~<h6>
 - 줄 바꿈
<hr> - 수평줄 넣기
<blockquote> ~ </blockquote> - 인용문 넣기

인용내용
인용 내용을 채워 넣습니다.

<pre> ~ <pre> - 입력하는 그대로 화면에 표시하기

텍스트를 한 줄로 표시하는 태그

- '인라인 레벨' 태그: 텍스트에서 사용하는 태그들 중에서 태그를 적용해도 줄바꿈 없이 텍스트를 표시하는 태그
, - 굵게 강조할 텍스트 (낭독기에서 강조 표현)
, - 굵게 표시할 텍스트 (문서의 키워드 처럼 단순히 굵게 표시활 때)
, - 이탤릭체로 표시하기

 - 이탤릭체로 강조할 텍스트. 문장에서 흐름상 특정 부분을 갖오하고 싶을 때, (중요한 내용임을 강조할 때)
 - 이택릭체로 표시할 텍스트. 생각이나 꿈, 기술적인 용어, 다른 언어의 관용구 등 (단순히 이탤릭체로 표시하고 싶을때)

<q> - 인용내용 표시하기. <blockquote>와 달리 인라인 레벨 태그이기 때문에 줄바꿈없이 따옴표를 붙여 표시함
<blockquote>태그에서처럼 cite 속성을 이용해 사이트 주소를 표시할 수 있습니다.

예) 웹의 창시자인 팀 버너스 리(Time Berners-Lee)의 웹의 힘은 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.라는 말로 웹 접근성을 설명한다.

- 형광펜 효과내기
 - 줄바꿈 없이 영역 묶기

예) 텍스트 단락안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용할려고 할 때 주로 사용

<ruby> - 동아시아 글자들에 comment를 함께 표기하기 위한 용도로 사용

예) 루비(Ruby)는 1995년 일본의 프로그래머인 마츠모토 유키히로(松本行弘まつもとゆきひろ)가 만든 프로그래밍 언어입니다.

<abbr> - 약자 표시. title 속성을 함께 사용할 수 있음

IoT란 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술을 의미

<cite> - 웹 문서나 포스트에서 참고 내용 표시

내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화 '비포선셋' 중

<code> - 컴퓨터 인식을 위한 소스 코드


	void main(void)
	{
		printf("abc\r\n");
	}

<kbd> - 키보드 입력이나 음성 명령 같은 사용자 입력 내용

예) 웹화면을 다시 불러오려면 F5키를 누릅니다.

- 부가 정보처럼 작게 표시해도 되는 텍스트

가격 : 13,000원 (부가세 별도)

- 아래첨자

예) 물의 화학식은 H₂O 다.

- 위 첨자

E = mc²

<s> - 취소선

~~34,000원~~ 19,000원

- 밑줄

링크 표시 용도가 아니라 단순히 밑줄을 긋는다면 u 태그

■ <ul>, <li> 태그 - 순서없는 목록 만들기 (ul: unordered list, li: list item)
CSS의 list-style-type 속성을 이용해 bullet 을 수정할 수 있습니다.


	<ul>
		<li>내용</li>
	</ul>

■ <ol>, <li> 태그 - 순서없는 목록 만들기 (ol: ordered list, li: list item)


	<ol>
		<li>내용</li>
	</ol>

■ 다단계 목록

■ <dl>, <dt>, <dd> - 서술하는 리스트


	<dl>
		<dt>HTML</dt>
		<dd>: HTML은 문서의 정보 구역을 정의합니다.</dd>
		<dt>CSS</dt>
		<dd>: CSS은 문서의 디자인 구역을 정의합니다.</dd>
	</dl>

HTML (Hyper Text Markup Language)

특수 기호 사용하기

텍스트를 덩어리로 묶어주는 태그

텍스트를 한 줄로 표시하는 태그

목록을 만드는 태그