DAY 77. HTML - 글자 태그, 목록 태그

 

인터넷

전 세계의 컴퓨터들이 네트워크를 통해 연결되어 정보를 공유하는데 목적을 둔다.

프로토콜을 이용하여 통신한다.

초기에는 군사용과 민간용이 구분되었으나 민간용이 지금의 인터넷이 되었다.

웹(WEB)

인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 고유할 수 있는 공간이다.

인터넷의 통신망 위에서 작동하는 서비스이다.

역사

팀 버너스리가 하이퍼링크(Hyper Link)를 포함하는 문서의 개념으로 제안하며 월드 와이드(WWW)을 개발 및 배포하였다.

 

웹 표준 단체 W3C를 창설했다.

→ 인터넷 등장 (1960) —————> 웹의 등장 (1990)

 

웹 처리 과정

네트워크를 통해 서로 연결된 컴퓨터들 간에 서버와 클라이언트의 역할을 나누고 HTML이라는 마크업(Markup) 언어를 통해 자료를 주고 받는다.

소스를 브라우저가 읽고 해석해서 화면 형태로 보여준다.

 

사용자가 도메인 주소를 입력하면 → 주소에 해당하는 IP 주소를 얻어와서 웹 서버에 요청을 한다. → 웹서버는 HTML 형태의 문서 페이지를 응답해준다. → 그러면 우리가 사용하는 브라우저가 받아서 해석을 해서 웹페이지로 보여준다. ** 코드는 동일하지만 브라우저에 따라서 보여주는게 달라질 수도 있다

 

웹 특징

HTTP(Hyper Text Transfer Protocol) 사용

HTML(Hyper Text Markup Language)로 작성된 문서를 연결한다.

텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스를 제공한다.

 

✔️ 반응형 웹

웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 환경

 

 

 

HTML

웹에서 정보를 표현할 목적으로 만든 마크업 언어이다.

웹 페이지를 작성하기 위해 사용되는 언어이며 웹 브라우저에게 보일 문자열과 이를 감싸는 일종의 해석 기호인 태그들로 이루어진다.

마크업와 마크업 언어

• 마크업(태그) : 문서의 논리적인 구조를 정의하고 출력장치에 어떤 형태로 보일 것인지 지시하는 역할이다.
• 마크업 언어 : 마크업(태그)의 형식과 규칙을 정의한 언어( 태그를 이용해서 어떠한 문서나 데이터의 구조를 정의하는 언어 )

 

HTML5 (웹 표준)

✔️ 특징

• 구조적 설계 지원(시멘틱)
• 그래픽 및 멀티미디어 기능 강화
• CSS3 및 Javascript 지원
• 다양한 API 제공
• 모바일 웹 지원 및 장치 접근 가능(배터리 정보, 카메라, GPS 등)
• 웹 브라우저가 서버와 양방향 통신 가능
• 인터넷이 연결되지 않은 상태에서도 애플리케이션 동작

 

---

 

문자 관련 태그

<hn></hn>

제목 입력시 폰트의 크기를 지정하는 태그

n에는 크기를 정하는 숫자를 입력한다.

 

<br>

개행 시 사용하는 태그

 

<hr>

페이지에 가로로 밑줄을 만들 때 사용하는 태그

 

<strong></strong> 또는 <b></b>

문장에서 강조할 문자를 굵게 표시할 때 사용하는 태그

• bold는 단순히 글자만 굴게
• strong은 문자를 강조할 때

 

<mark></mark>

배경 부분을 노란색으로 표시하여 형광펜 표시가 된 듯하게 출력하는 태그

 

<u></u>

밑줄 (수평 줄) 긋는 태그

 

<s></s>

취소선 긋는 태그

 

<em></em> 또는 <i></i>

문자에 기울임을 주는 태그

• i는 단순히 글자만 기울임
• em은 기울여서 문자를 강조하는 의미

 

<small></small>

원 문자보다 작은 글씨로 표시할 때 사용하는 태그

부가 정보를 표현할 때 사용한다.

 

<blockquote></blockquote>

다른 사이트의 글을 인용할 경우에 사용한다.

자동으로 들여쓰기가 되어 다른 텍스트와 구별된다.

안에 개행을 내포하고 있다.

 

<q></q>

다른 사이트의 글을 인용할 경우에 사용한다.

인용 문구에 " " 표시가 된다.

안에 개행을 내포하고 있지 않는다.

 



태그로 감싼 내용만 위 첨자가 되는 태그

 

<sub>

태그로 감싼 내용만 아래 첨자가 되는 태그

 

<abbr></abbr>

두 문자어와 약어에 사용한다.

태그 위에 마우스를 올려 놓으면 툴팁 형태로 출력이 된다.

title 속성 안에 툴팁으로 나올 값을 지정한다.

<abbr title = "속성 값">내용</abbr>

 

<cite>

웹 문서나 포스트에서 참고할 때 사용한다.

이탤릭으로 표시된다. (브라우저마다 상이하다.)

 

<code></code>

컴퓨터 인식을 위해 소스코드를 담는 태그

<pre> 태그 내부에 작성한다.

 

<kbd></kbd>

키보드 입력이나 음성 명령과 같이 사용자 입력 내용을 표시하는 태그

 

---

 

목록 관련 태그

<ul></ul>

• UnOrderList

순서가 필요하지 않은 목록을 만들 때 사용한다.

리스트 앞에 특정 모양 출력이 되고 기본 값은 · 이다.

해당 모양은 CSS를 이용하여 수정이 가능하다.

 

<li></li>

• ListItem

리스트에 적힐 내용을 표시하는 태그

 

<ol></ol>

• OderList

순서가 있는 목록을 만들 때 사용한다.

속성으로 A(대문자), a(소문자), 1(숫자), i(소 로마자), I(대 로마자) 가 있다.

시작순서를 지정할 수 있다.

<ol type="설명문자" start="시작순서"> 
	<li>내용1</li> 
	<li>내용2</li> 
	...
</ol>

 

<dl></dl>

• DefinitionList

용어나 문장에 대한 정의 리스트이다.

자동으로 들여쓰기가 된다.

<dl>
	<dt>내용1 = 정의 제목</dt>
	<dd>내용2 = 정의 내용</dd>
	<dd>내용3</dd>
</dl>