smarti,스마트아이

텍스트 요소

제목 (Headings)

제목 <h1>~<h6>

제목을 표현하는 태그를 <h1>에서 <h6>까지 제공한다.

가장 크기가 큰 <h1> 태그부터 가장 작은 <h6> 태그까지의 제목을 표현할 수 있다.

<h1>이 것은 제목1 입니다.</h1>
<h2>이 것은 제목2 입니다.</h2>
<h3>이 것은 제목3 입니다.</h3>
<h4>이 것은 제목4 입니다.</h4>
<h5>이 것은 제목5 입니다.</h5>
<h6>이 것은 제목6 입니다.</h6>

<h1>~<h6> 태그의 위아래로는 약간의 여백이 자동으로 삽입된다.

제목은 중요하다.

검색 엔진은 제목를 사용하여 웹 페이지의 구조와 내용을 색인화한다.
사용자는 제목을 보고 페이지의 내용을 파악 하기에 문서 구조에 있어서 제목을 사용하는 것을 중요하다. <h1> 표제는 주 표제 다음에 <h2> 표제 다음 덜 중요한 <h3> 등으로 사용되어야 한다.
머리말에만 HTML 제목을 사용하기 바란다.
제목을 사용하여 텍스트를 크게 또는 굵게 표시하지 말아야 한다.

 

단락 (Paragraph)

<p>태그와 </p>태그 사이에 위치하는 내용이 하나의 단락을 구성한다.

<p>이건 단락입니다.</p>
<p>이건 또 다른 단락입니다.</p>

align 속성 값

속성값	설명
기본	정렬하지 않은 문단은 기본적으로 왼쪽 정렬.
left	왼쪽 정렬. 정렬을 시키지 않으면 기본적으로 왼쪽정렬이 되므로 잘 사용하지 않는다.
center	가운데 정렬.
right	오른쪽 정렬.
justfy	맞춤 정렬. 한 문단이 길어져서 화면의 끝에서 자동 줄바꿈이 일어날때 그 가장자리 부분을 일정하게 맞춰주는 기능입니다. 언듯보면 왼쪽정렬(기본정렬)과 비슷하지만 줄바꿈이 일어난 오른쪽 가장자리를 비교하면 그 차이를 확인할 수 있다.

서식 그대로 표시 <pre>

HTML에서 작성한 텍스트 서식을 그대로 표현하려면 <pre>(preformatted text)태그를 사용한다. <pre>태그 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현된다.

<pre>
진달래꽃

나 보기가 역겨워
가실 때에는
말없이 고이 보내드리우리다.

영변에 약산
진달래꽃
아름 따다 가실 길에 뿌리우리다.
</pre>

줄 바꿈 <br />

<br> : HTML 레벨 html 4.01의 경우 <br>이 표준이다.
<br /> : XHTML 레벨(표준) / xhtml 1.0
모든 태그는 시작과 끝으로 표시함

<p>이 문단은 <br>줄 바꿈을<br>포함하고 있습니다.</p>

구분선 <hr />

단락을 나눌 때나 내용상의 구분을 표현하고자 할 때 수평 가로 구분선을 사용한다. 이렇게 사용되는 수평 가로 구분선을 HTML 코드에서는 <hr>태그(horizontal rule)로 간단하게 만들 수 있다.

hr 태그의 속성
 - size : 태그의 굵기를 설정한다.
 - width : 태그의 가로 길이를 설정한다.
 - align : 태그의 정렬값을 설정한다. left, center, right
 - color : 태그의 색상을 설정한다.
 - noshade : 입체감을 없앤 상태로 보여준다.

 

문자열 서식 (Text Formatting)

HTML은 텍스트(text)에 다양한 효과를 주는 여러 태그(tag)를 제공한다.

강조 <b>와 <strong>

텍스트를 굵게 표시를 해야 할 경우에는 <b>(bold text)태그나 <strong>태그를 사용한다.

<p><b>이 문장은 굵게 표시합니다.</b>은 단순히 글씨가 굵은 부분이에요!</p>
<p><strong>이 문장은 강조하여 표시합니다.</strong></p>

이탤릭체 <i>와 <em>

이탤릭체를 표시를 해야 할 경우에는 <i>(italic text)태그나 <em>(emphasized text)태그를 사용한다.

<p><i>이 문장은 이테릭체입니다.</i></p>
<p><em>이 문장은 강조합니다.</em></p>

마킹 표시 <mark>

<mark>태그는 텍스트에 하이라이팅(highlighting)을 해준다.

<p>이 부분은 <mark>하이라이팅</mark> 됩니다 </p>

추가 <ins>

<ins>(insert)태그는 텍스트 밑줄을 쳐서 텍스트를 삽입한 거처럼 해준다.

<p>내가 좋아하는 과일을 <ins>바나나</ins> 사과입니다.</p>

삭제 <del>

<del>(delete)태그는 텍스트에 줄을 쳐서 텍스트를 지운 거처럼 해준다.

<p>내가 좋아하는 과일을 <del>바나나</del> 사과입니다.</p>

위첨자 <sup>

위첨자는 <sup>(superscript)태그을 사용한다.

<p>X<sup>2</sup> + Y<sup>3</sup> = Z</p>

아래첨자 <sub>

아래첨자는 <sub>(subscript)태그을 사용한다.

<p>물을 나타내는 화학식은 H<sub>2</sub>O 입니다.</p>

 

인용 (Quotation)

HTML에서 인용구를 표현하는 방법은 다음과 같이 2가지가 있다.
 - 짧은 인용구
 - 블록 인용구

짧은 인용문 <q>

짧은 인용구는 <q>(quatation)태그를 사용하여 표현할 수 있으며, 자동으로 앞뒤에 큰따옴표가 붙는다.

<p>HTML는 <q>웹 페이지를 만들기 위한 하이퍼텍스트 마크업 언어</q>이다.</p>

블록 인용문 <blockquote>

길이가 긴 인용문은 <blockquote>(block quatation)태그를 사용하여 표현할 수 있다. <blockquote>태그는 이러한 인용 부분을 별도의 단락으로 구분하여 나타낸다.

<p>HTML의 정의</p>
<blockquote>
인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류이다.
</blockquote>

축약형 표현 <abbr>

HTML에서 용어의 축약형을 표현하기 위해서는 <abbr>(abbreviation)태그를 사용한다. <abbr>태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타난다.

<p><strong><abbr title="Hyper Text Markup Language 5">HTML5</abbr></strong>
란 웹 문서를 제작하는 데 쓰이는 프로그래밍 언어인 HTML의 최신규격입니다.</p>

주소 표현 <address>

<address>태그를 사용하면 HTML에서 주소를 표현할 수 있다. 이러한 주소는 이탤릭체로 표현되며, 위아래로 약간의 공백이 자동으로 삽입된다.

<address>서울특별시 용산구 이태원동</address>

 

주석 (Comments)

주석(comment)이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미한다. 주석은 다른 HTML 코드와는 달리 웹 브라우저에 의해 표현되지 않는다.

표현 : <!-- 내용 -->

<!--
주석은 HTML 코드의 어느 부분에서라도 사용할 수 있다.
여러 줄에 걸쳐 주석을 작성해도 인식한다.
-->

엔티티 (Entity)

HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약된 문자(reserved characters)라고 부른다.
이러한 HTML 예약된 문자를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석한다.
따라서 HTML 예약된 문자를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 한다.

엔티티의 형태는 다음과 같다.

표현 : &엔티티이름; 또는 &#엔티티숫자;

HTML 코드 내에서 꺾쇠괄호(<>)를 사용하면 웹 브라우저가 그것을 어떻게 해석하는지 보여준다.

<p>&lt;h2&gt;태그는 두 번째로 큰 제목을 나타내는 태그입니다.</p>
<p>&lt;p&gt;태그는 단락을 나타내는 태그입니다.</p>

위의 예제처럼 HTML 코드에서 사용된 꺾쇠괄호(<>)는 HTML 태그의 시작과 끝의 의미로 해석된다.

엔티티(entity)의 이름은 대소문자를 구분한다.

HTML에서 제공하는 대표적인 엔티티(entity)는 다음과 같다.

엔티티 문자	엔티티 이름	16진수 엔티티 숫자	설명
	 	 	줄 바꿈 없는 공백
<	&lt;	&#60;	보다 작은
>	&gt;	&#62;	보다 큰
&	&amp;	&#38;	AND 기호
"	&quot;	&#34;	큰따옴표
'	&apos;	&#39;	작은따옴표

HTML에서 사용할 수 있는 모든 엔티티에 대한 더 자세한 정보를 원한다면, W3C 공식 사이트를 방문하여 확인할 수 있다.

Character entity references in HTML

Character entity references in HTML 4

발음 구별 기호 (diacritical marks)

발음을 나타내는 부호를 악센트(accent)라고 한다. 이러한 악센트는 단독으로는 사용하지 않으며, 보통 다른 문자와 함께 사용된다. 이것을 정확하게 표현하기 위하여 HTML에서는 다음과 같은 발음 구별 부호를 별도로 제공하고 있다.

HTML에서 제공하는 대표적인 발음 구별 부호(diacritical marks)는 다음과 같다.

발음 구별 부호	문자	16진수 엔티티	결과
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

<p>j에 악센트가 있다는 발음 기호는 [j&#769;]입니다.</p>

심볼 (Symbol) 특수문자

HTML 예약어 이외에도 키보드에 입력할 수 없는 문자를 표현하기 위한 심볼 특수문자를 사용할 수 있다. 이러한 심볼 특수문자에는 수학 용어, 그리스 문자, 국제 통화 등이 있다.

HTML에서 제공하는 대표적인 심볼(Symbol) 특수문자는 다음과 같다.

심볼 특수문자	엔티티 이름	16진수 엔티티	설명
¢	¢	¢	센트
£	£	£	파운드화
¥	¥	¥	엔화
€	€	€	유로화
©	©	©	저작권
®	®	®	등록상표
×	×	×	곱셈
÷	÷	÷	나눗셈

문자코드 (Character Codes)

아래 사이트 참고

www.rapidtables.com/web/html/html-codes.htm

문자셋 (Character set)

웹 브라우저가 HTML 문서를 정확하게 나타내기 위해서는 해당 문서가 어떠한 문자셋으로 저장되었는지를 알아야 한다.
따라서 HTML 문서가 저장될 때 사용된 문자셋에 대한 정보를 <head>태그 내의 <meta>태그에 명시한다.

HTML4에서 UTF-8의 경우

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5에서 UTF-8의 경우

<meta charset="UTF-8">

위 두 예제는 해당 HTML 문서가 UTF-8 문자셋을 사용하여 저장되었음을 웹 브라우저에 알려준다.

문자셋의 종류

현재 사용되는 대표적인 문자셋(character set)은 다음과 같다.
 - ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있다.
 - ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원한다.
 - ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋이다.
 - UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋이다.

 

[세상살이] - 온라인에서 무료로 이미지, 동영상 용량 줄이기

온라인에서 무료로 이미지, 동영상 용량 줄이기

[코딩공부] - CSS3 2D, 3D Transform

CSS3 2D, 3D Transform

[세상살이] - 다음, 네이버 빠른 길 찾기

다음, 네이버 빠른 길 찾기

[세상살이] - 색으로 대표되는 컬러푸드 - Black (블랙푸드)

색으로 대표되는 컬러푸드 - Black (블랙푸드)

[디자인공부] - 포토샵으로 유리같은 문자 만들기

포토샵으로 유리같은 문자 만들기