[인용] 태그 : cite

인용에 사용하는 태그 : <cite> </cite>


<cite></cite> 태그는 문단 내에 영화나 책의 제목이나, 인용, 주석이 필요할 때 사용한다. <blockquote>가 독립된 문단으로 인용할 때 주로 사용한다면 <cite>는 단독으로 쓰이는 경우는 거의 없고 <p>태그 안에서 단어 등을 꾸밀 때 주로 사용한다. <cite> 태그의 기본 스타일은 기울임 글꼴이며 CSS에서 다양한 스타일을 지정할 수 있다.


◈ <span> </span>태그 문법

<p>인용문에는 blockquote<cite>(긴글 인용)</cite>와 cite<cite>(문단내 인용)</cite>태그를 사용합니다. blockquote는 인용할 내용이 많아 새로운 문단으로 인용문을 정리할 때 사용하며 cite는 문단 내에서 짧게 인용하거나 짧은 주석을 달 때 사용하면 편리합니다. HTML5에서 cite는 영화나 책의 제목을 꾸밀 때(the title of a work) 사용하도록 정의하고 있습니다.</p>


<cite>는 이탤릭 태그인 <em>이나 <i>와 기능이 비슷하다. 태그의 용도에 따라 스타일을 적용해서 사용하면 보다 효율적인 편집이 가능하기 때문에 각 태그별 특징을 기억해 두면 유용하다. 

다른 태그의 속성으로 사용하는 cite(url등을 표시해 주는 속성)과 혼동할 수 있으니 주의하기 바란다. 


cite_tag_style_sample.html




'EPUB 편집 가이드 > EPUB을 위한 HTML' 카테고리의 다른 글

[편집] 태그 : del, ins  (0) 2013.12.03
[강조] 태그 : strong(b), em(i), u  (0) 2013.12.03
[인용] 태그 : cite  (0) 2013.11.28
[인용] 태그 : blockquote  (0) 2013.11.28
[스타일] 태그 : span  (0) 2013.10.29
[스타일] 태그 : div  (0) 2013.10.25

설정

트랙백

댓글

[인용] 태그 : blockquote

인용에 사용하는 태그 : <blockquote> </blockquote>


<blockquote></blockquote> 태그는 문단 단위의 인용문에 사용한다. 인용문 같은 텍스트 편집은 CSS에서 클래스를 지정해서 사용할 수 있다. 하지만 HTML에서 기본적으로 제공하는 텍스트 편집 태그를 사용하면 태그 정리를 보다 깔끔하게 할 수 있다. 

<blockquote>는 별도의 스타일을 지정하지 않아도 대부분의 브라우저에서 본문 들여쓰기가 적용된다. CSS에서 스타일을 지정하면 다양한 편집 스타일을 적용할 수도 있다.

<blockquote>태그는 HTML과 XHTML에서 사용법이 다르다. HTML에서는 <blockquote> 인용 문구 </blockquote>로 쓸 수 있지만 XHTML에서는 반드시 <blockquote><p>인용 문구 </p></blockquote>처럼 태그 안쪽에 다른 태그를 추가해야 한다. 


◈ <span> </span>태그 문법

<p>인용문에는 blockquote 태그를 사용합니다. blockquote 태그를 사용하면 브라우저에서 기본 설정된 스타일이 적용되어 본문과 구분이 됩니다. 대부분의 브라우저에서 들여쓰기가 자동으로 적용됩니다.</p>

   <blockquote>

       <p>문단 단위의 인용문에 사용</p>

       <p>들여쓰기가 자동으로 적용됨</p>

   </blockquote>


인용에는 <blockquote>와 <cite>태그를 주로 사용한다. <blockquote>는 문단 단위의 인용에 <cite>는 문단 내의 단어나 문장 같은 짧은 인용에 주로 사용한다.


blockquote_tag_style_sample.html


□ 사용 가능한 속성

속성

설명

cite

url

cite="http://ko.wikipedia.org"

인용문이 있는 사이트의 출처를 밝힐 필요가 있을 경우 사용한다. 문서에는 아무런 영향을 주지 않아 실제 링크가 걸리지는 않는다. 


'EPUB 편집 가이드 > EPUB을 위한 HTML' 카테고리의 다른 글

[강조] 태그 : strong(b), em(i), u  (0) 2013.12.03
[인용] 태그 : cite  (0) 2013.11.28
[인용] 태그 : blockquote  (0) 2013.11.28
[스타일] 태그 : span  (0) 2013.10.29
[스타일] 태그 : div  (0) 2013.10.25
[줄바꿈] 태그 : br, hr  (0) 2013.10.24

설정

트랙백

댓글

[스타일] 태그 : span

CSS 스타일을 적용해 주는 태그 : <span> </span>


<span></span> 태그는 문단 내에 특정 단어나 문장에 스타일을 변경해야 할 때 사용한다. <span></span>태그 자체는 아무 속성이 없어 단독으로 사용할 경우 문단에 아무런 영향을 주지 않고 <span style="color:red"></span> 처럼 스타일 속성과 함께 사용해야 한다. 

전자책을 편집할 때 가장 많이 사용하는 태그 중 하나로 CSS에서 정의한 속성으로 문서를 꾸밀 때 사용할 수 있다. 또한, 뷰어의 설정이 바뀌더라도 변경이 되면 안되는 스타일이 있을 경우 <span>태그로 인라인 스타일을 적용할 수 있다.


◈ <span> </span>태그 문법

<span class="css_class">스타일을 적용할 내용</span>

CSS에 있는 스타일을 적용할 때 class="css_class" 속성을 사용합니다. 


<span style="color:blue; font-size:1.5em;">스타일을 적용할 내용</span>

직접 스타일을 적용해야 할때는 style="속성1:값; 속성2:값; 속성3:값;...속성n:값;"을 사용합니다.

속성과 속성은 세미콜론(;)으로 구분해서 여러개의 속성을 적용할 수 있습니다. 


class 속성은 CSS 스타일을 적용할 때 사용하기 때문에 CSS 스타일만 수정하면 문서 전체의 스타일을 적용할 수 있고 뷰어에서 스타일을 변경할 수 있습니다. 이런 스타일을 외부 스타일이라고 합니다. 반면 style 속성을 사용하면 스타일이 고정되서 뷰어가 스타일을 변경할 수 없고, 스타일을 변경하려면 직접 html의 스타일을 변경해야 합니다. 이런 스타일을 내부 스타일이라고 합니다. 외부 스타일은 문서 전체에 공통적으로 적용되는 스타일을, 내부 스타일은 스타일 자체가 내용과 연결된 스타일을 적용할 때 사용하면 좋습니다. 


<p>동일한 문단 내에서도 여러가지 스타일을 적용할 수 있다. <span style="color:blue">주석</span> 표시나, <span style="font-size:1.5em">강조</span>를 할 때, 혹은 <span style="color:red">'빨강'</span>처럼 내용 자체가 스타일이 필요한 경우가 있다. 이럴 때 &lt;span&gt;태그를 사용하여 스타일을 적용할 수 있다.

<p>


span_tag_sample.html


□ 사용 가능한 속성

속성

설명

class

class ID

CSS에서 설정한 클래스로 스타일을 적용할 수 있음

<span class="classID"></span>

style

스타일 값

다양한 스타일을 적용할 수 있으며 세미콜론(;)으로 구분하여 여러개의 스타일 적용 가능

<span style="color:red; font-size:15em"></span>


◈편집에 적용한 예◈

<html>

<head>

<title>Title of the document</title>

<style>

h1 {text-align:center;}

.text_italic {font-style:italic;}

</style>

</head>


<body>

<h1>HTML의 <span style="color:red;">R</span><span style="color:green;">G</span><span style="color:blue;">B</span> 색상에 대해</h1>


<p>컴퓨터는 사람처럼 색을 눈으로 보는게 아니고 숫자로 인식합니다. <span class="text_italic">그래서 HTML을 작성할 때 색을 지정해야 할 필요가 있을 경우 RGB 코드를 이용합니다.</span> HTML에서 사용 가능한 색은 약 1600만가지 입니다. 색의 채도, 명도에 따라 빨간색 255개, 초록색 255개, 파란색 255개로 구분이 가능하며 이 3가지 색을 조합할 수 있습니다.</p>


<p><span class="text_italic">색은 0부터 255까지의 수를 16진수로 표시합니다.</span> 그래서 <span style="color:#ff0000;">빨간색은 #0000ff</span>, <span style="color:#00ff00;">초록색은 #00ff00</span>, <span style="color:#0000ff;">파란색은 #0000ff</span>이 됩니다. 흰색은 #ffffff, 검정색은 #000000입니다. 이렇게 해서 오랜지색을 표현하고 싶다면 <span style="color:#ff4500;">#ff4500</span>이라고 표시할 수 있습니다. 이중 많이 쓰이는 색은 이름이 있습니다. 빨간색은 #ff0000 대신 red로, 파란색은 #0000ff 대신 blue로 쓸 수 있습니다. <span style="color:orange;">orange(#ffa500)</span>, <span style="color:brown;">brown(#a52a2a)</span>, <span style="color:grey;">grey(#808080)</span> 등 이름이 있는 색상들은 그 이름을 직접 사용할 수 있습니다. </p>

</body>


</html>


span_tag_style_sample.html



'EPUB 편집 가이드 > EPUB을 위한 HTML' 카테고리의 다른 글

[인용] 태그 : cite  (0) 2013.11.28
[인용] 태그 : blockquote  (0) 2013.11.28
[스타일] 태그 : span  (0) 2013.10.29
[스타일] 태그 : div  (0) 2013.10.25
[줄바꿈] 태그 : br, hr  (0) 2013.10.24
[본문]태그 : p  (0) 2013.10.18

설정

트랙백

댓글