[html] blockquote 태그(인용문 꾸미기 5가지)

[html] blockquote 태그(인용문 꾸미기 5가지)

오늘은 인용문을 쓸 때 필요한 blockquote 태그, cite 속성, cite 태그에 대해 알아보겠습니다

blockquote는, 인용문을 표시할 때 사용하는 태그입니다.

보통 blockquote 요소를 사용한 곳은 들여쓰기가 됩니다.

(한 줄짜리 짧은 인용문은 q태그를 사용)

글을 읽으시다가 모르시는 부분은, 제 블로그에 대부분 관련 글이 있으니

참조해주세요~

html40.01 에서 blockquote 태그는 긴 인용문을 지정할 때 사용했다면,

html5에서 blockquote는 다른 자원에서 인용한 일부를 지정할 때 사용

▶사용 예:

<p>인용문

</p>

</blockquote>

cite 속성

blockquote는 cite 속성과 함께 사용할 수 있습니다.

cite 속성은 인용문의 출처를 표시합니다.

화면에서 특별히 표시되는 부분은 없지만,

검색 엔진이 이 주소 정보를 사용할 수 있습니다.

▶ 사용 예:

인용문

</blockquote>

cite 태그

cite 태그는 cite 속성과 달리, 책, 영화, 그림 같은 작품의 제목을 지정할 때 사용합니다.

이탤릭체로 표시 함.

html 4.01에서 cite 태그는 인용구를 지정하는 역할을 했다면

html5에서 cite는 작품의 제목을 지정합니다.

▶ 사용 예:

<p>인용문

<cite>해리포터와 불의 잔 [Harry Potter And The Goblet Of Fire] </cite> 조앤 K. 롤링 </p>

</blockquote>

▶ html 작성 예:

html

<p>국보 제1호. 문화재 관리국은 1996년 11월 28일 광복 50주년 역사 바로 세우기 일환으로 일본식 표현, 부적절한 명칭, 역사왜곡, 우리역사와 무관한 유적, 가치평가의 왜곡 등을 주요 항목으로 설정하고 심의 작업을 벌여왔다. ‘숭례문(국보 제1호)’이 이제서야 원래의 명칭에 담긴 뜻을 되살리게 되었다.</p>

<cite>-[네이버 지식백과] (국어국문학자료사전, 1998, 한국사전연구사)-</cite>
</blockquote>

▶실행화면

인용문 앞에 큰 인용부호 넣기

이번에는 인용문 앞에 큰 인용부호를 넣어 보겠습니다.

지난 시간에 배운 :before 가상 요소와, content 속성을 활용 했습니다(구 ie는, 지원하지 않음)

[css] - :before , :after 가상 요소

[css] content 속성 사용법

css

blockquote:before

{

color:#33a8e5;
content:'“';
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}

blockquote p {
display: inline;
}

▶실행화면

blockquote1.htm

인용문 앞에 큰 수직선 표시하기

어제 배운 것처럼 border 속성을 사용합니다.

수직선 그리는법 2가지(인용문 앞에 활용)

css

blockquote{
border-left: 10px solid #ccc;
margin: 10px;
padding: 10px;}

▶실행화면

인용문 위 아래로 수평선 그리기

border-top: 2px solid #ccc 요소 맨 위에 선을 그리기(선 너비, 선 모양, 선 색상 순)

border-bottom 요소 맨 아래에 선 그리기

text-align:center 내용 가운데 정렬

css

blockquote{
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
text-align:center;
margin: 10px;
padding: 10px;}

▶실행화면

인용문 안을 다른 색상으로 표시하기

css

blockquote {
background-color: #B2CCFF;
margin: 10px;
padding: 10px;
border: 0px solid #000;
-moz-border-radius:10px;
border-radius:10px;
}

background-color 배경색

border-radius 는 선 모서리를 둥글게 만드는 속성입니다.다음 시간에 자세히 다루어 볼게요~

▶실행화면

blockquote2.htm

line-height 속성 배우기

글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이)

글자색 color 속성, 배경색 background-color 속성 배우기

vertical-align 속성 자세히 알기(수직 정렬)

text-align 속성으로 정렬하기 (left, right, center, justify)

'티스토리 툭탁툭탁' 카테고리의 다른 글

[css]드롭다운 메뉴 만들기(기초) (0)	2014.11.28
지구별 안내서, 오픈캐스트 구독자수 천명 돌파! (0)	2014.09.29
[html/css] 수직선 그리는법 2가지(인용문 앞에 활용) (0)	2014.08.28
티스토리에 웹폰트를 적용했는데, 글꼴이 일부 바뀌지 않는 이유 (0)	2014.08.11
나눔고딕 웹폰트 적용, 제대로 배우기 (0)	2014.08.09