누구나 할 수 있는 CSS 인용구 의 끝판왕 #2

안녕하세요? 지난 번에 이어 이번에도 활용효과가 좋은 인용구 장식을 하나 소개시켜 드리겠습니다. <누구나 할 수 있는 CSS 인용구 의 끝판왕 #1 > 를 읽어 보신 분들은 아시겠지만 제가 소개해 드리는 표현법은 전문지식이나 스킬이 필요치 않습니다. 여러분들이 평상시 블로그에 글 쓰실 수 있을 정도만 되면 누구라도 따라 하실 수 있는 소재와 방법으로 안내해 드리기 때문에 복사하기, 붙여넣기 정도만 아셔도 사용하실 수 있으시리라 생각합니다.

이번 표현법 역시 인용구를 강조라고 인용구문의 신빙성을 뒷받침 하기 위한 원저작자 또는 사이트의 이미지를 삽입시켜 전체적으로 깔끔하고 직관적인 방식으로 표현됩니다. 소재의 출처는 CODEPEN 이라는 사이트에서 가져온 것으로, 원형은 1가지의 인용구를 위한 방식이 아닌 다수의 인용구 또는 이미지가 슬라이딩으로 교차하게끔 만들어 진 것을 인용구 표현으로 쓰기 위해 관련 부분만 정리했습니다. 이 방법 역시 자바스크립트는 사용을 하지않고 오로지 CSS 와 HTML 만으로 구현하는 것이며, CSS3 와 HTML5 를 지원하지 않는 IE8 이하의 웹브라우저에서는 호환되지 않습니다.

<누구나 할 수 있는 CSS 인용구 의 끝판왕 #1 > 바로 가기

1. SAMPLE

Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team.”

Kristi Bruno
Social Media Specialist
American College of Chest Physicians

오늘 소개해 드릴 인용구 표현이 출력된 모습입니다. 이번 것도 먼저 소개해 드린 것돠 같은 개념이긴 라지만 사진의 크기가 커져서 원출처에 대한 강조가 보다 더 향상되어진 듯한 표현법입니다. 물론, 사진의 크기는 조정이 가능합니다. 그리고, 소개해 HTML 구문을 보시면 아실 테지만 인용구 구문의 원형인 <blockquote> 나 <q> 를 사용하지 않고 <div> 를 사용하여 <class>를 지정한 것은 보다 더 많은 인용문의 표현방식을 사용해 보기 위함입니다. 물론, <blockquote> 도 <class> 를 사용하여 분류를 할 수 있겠지만, 그 부분은 조금 더 공부를 해본 뒤 시도 해 보도록 하겠습니다.

2. HTML 과 CSS

See the Pen Blockquote #2 by EDDYJAY (@eddyjay) on CodePen.

위의 코드에 대한 설명은 누구라도 쉽게 따라하실 수 있도록 최대한 쉬운 표현으로 주석을 달거나 설명할 것이며, 어렵게 생각하지 마시고 차근차근 해보시면 됩니다. 사실, 이미지를 사용하는 부분만 제외하면 복사하여 붙여넣기만 해도 됩니다. 붙여 넣을 때는 다들 잘 아시겠지만, HTML 은 티스토리 편집기 화면에서 바로 하시면 안되고 우측의 HTML 을 체크하여 HTML 구문 상에서 작업하시면 됩니다. CSS 는 [관리자 화면] 의 [꾸미기] 란의 [HTML/CSS 편집] 의 [CSS탭] 에서 붙여넣으시면 됩니다.

HTML : HTML 체크박스를 체크하여 HTML 모드에서 작업.
CSS : 티스토리 관리자 화면 > 꾸미기 > HTML/CSS편집 > CSS 에서 작업.

2-1. HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<div class="testimonial-quote group right">
        <img src="http://placehold.it/120x120">
        <div class="quote-container">
            <div>
                <div class="ejblockquote">
                    <p>Overall, fantastic! I'd recommend them to anyone looking for a creative,
                       thoughtful, and professional team.”</p>
                </div>  
                <cite><span>Kristi Bruno</span><br>
                    Social Media Specialist<br>
                    American College of Chest Physicians
                </cite>
            </div>
        </div>
  </div>
</body>
Colored by Color Scripter
cs

특별히 어려운 부분은 없으며, 인용구를 넣으실 부분에 전체 구문 중 <body>, </body> 부분은 빼고 복사하여 붙여넣으신 후 <p>, </p> 사이에 인용문을 입력하시고 <span>, </span> 에 출처를, 이하에 출처의 설명을 입력하시면 됩니다. 문제는 3번째 줄의 이미를 넣는 부분이 있는데, 외부에서 이미지를 직접 링크하시거나, 티스토리에 이미지를 올려 링크하는 방법이 있습니다. 하지만, '티스토리' 에서 업로드한 이미지는 직접 링크가 불가능하기 때문에 먼저 글에서도 안내해 드린 바와 같이 약간의 변칙을 사용하셔서 해결하셔야만 합니다. 어렵지 않습니다.

HTML 작업은 반드시 CSS 작업 ( 복사해 넣기 ) 을 먼저 하신 후 진행하셔야 합니다. 숙련자면 상관이 없으나, 초보자나 아예 관련 지식이 없으신 분들은 매우 곤란한 상황이 되버립니다.

작업하는 도중 이미지를 삽입하지 마시고 모든 작업을 다 끝내신 후 하셔야 합니다.
HTML 과 CSS 작업이 모두 끝나셨으면, 인용구 아래로 빈칸을 많이 만들어 놓습니다.
빈칸의 중간 쯤에서 삽입하실 이미지를 업로드하시고 발행하세요.
발행된 글 중 인용구에 삽입하실 이미지를 찾아 마우스 오른쪽 버튼을 클릭하신 후 이미지 주소(경로) 복사 를 선택합니다.
이제 발행한 글을 다시 수정하시면 되는데, 수정하실 때 편집기 화면이 아닌 HTML 모드에서 하셔야 합니다.
조금 전 복사한 이미지 주소를 조금 전 만들어 놓은 빈칸에 복사해 보세요. 아마도 확장자가 없이 "cfile29.uf.tistory.com/image/2219813357E210861438A7" 와 같은 형태로 표시되는데 이 상태로는 확장자가 없어 사용이 불가능 합니다. 조금 전, 변칙을 쓴다고 했죠? "cfile29.uf.tistory.com/image/2219813357E210861438A7" 의 끝에 #.jpg 를 붙여 넣으면 정상적인 사용이 가능한 형태가 됩니다. 물론 업로드한 이미지의 확장자가 png 였다면 #.png 를 gif 였다면 #.gif 를 붙여 넣으면 됩니다.
이렇게 완성한 이미지의 경로(주소)를 '3'번째 줄의 이미지 경로(주소)와 바꿔 줍니다.

※ 티스토리에서 업로드한 이미지를 외부링크시키는 방법에 대해서는 부족함이 있다면 추후 따로 글을 만들어 올리겠습니다.

2-2. CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
body {                                                body 구문은 빼고 사용하세요.
  padding: 30px;
}                                                     
.testimonial-quote {                                 
    position: relative;
    font-size: 16px;                                                                   
}
.testimonial-quote.right img {
    left: auto;
    right: 0;
}
.testimonial-quote img {                             < 이미지에 대한 설정입니다. >
    border: 3px solid #9CC1D3;                        이미지 테두리 선의 두께와 색 설정
    border-radius: 50%;
    display: block;
    width: 120px;                                     이미지의 가로폭 크기
    height: 120px;                                    이미지의 세로폭 크기
    position: absolute;
    top: -.2em;                                       이미지의 위치 
    left: 0;                                          이미지의 위치
}
.testimonial-quote .quote-container {
    padding-left: 160px;
}
.testimonial-quote.right .quote-container {
    padding-left: 0;
    padding-right: 160px;
}
.testimonial-quote .ejblockquote {                   < 인용문에 대한 설정입니다. >
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
    color: gray;                                      글자 색상
    font-family: Georgia, serif;                      글자 종류
    font-size: 1.5em;                                 글자 크기
    font-style: italic;                               글자의 기울기
    line-height: 1.4 !important;                      줄 간격
    margin: 0;
    position: relative;
    text-shadow: 0 1px white;                         글자 그림자 설정
    z-index: 600;
}
.testimonial-quote .ejblockquote p {
    color: #75808a;
    line-height: 1.4 !important;
}
.testimonial-quote .ejblockquote p:before {          < 우측 " 에 대한 설정 >
    content: '\201C';
    color: #81bedb;                                   " 색상
    font-size: 7.5em;                                 " 크기   
    font-weight: 700;                                 " 두께
    opacity: .3;
    position: absolute;
    top: -.4em;                                       " 위치
    left: -.2em;                                      " 위치
    text-shadow: none;                                " 그림자 설정
    z-index: -300;
}
.testimonial-quote .ejblockquote * {
    box-sizing: border-box;
}
.testimonial-quote cite {                            < 출처 에 대한 설정입니다. >
    color: gray;                                      글자 색상 
    display: block;
    font-size: .8em;                                  글자 크기
}
.testimonial-quote.right cite {
    text-align: right;
}
.testimonial-quote cite span {                       < 설명문 에 대한 설정입니다. >
    color: #5e5e5e;                                   글자 색상
    font-size: 1em;                                   글자 크기
    font-style: normal;
    font-weight: 700;                                 글자 두께
    letter-spacing: 1px;                              글자 간격 (자간)
    text-transform: uppercase;
    text-shadow: 0 1px white;                         글자 그림자 
}
 
Colored by Color Scripter
cs

이 글을 읽으시는 분 들중 타켓층은 극히 초보 단계의 CSS 입문자 혹은 CSS 에 관해 전혀 모르시는 분 들을 그 대상으로 하며, 제가 그러한 것처럼 기초지식이 부족하더라도 쉽게 설정이 가능하도록 주석 작업으로 설명을 대신합니다. 주석을 제외한 다른 부분은 크게 수정하실 것이 없으니 주석내용대로 각자의 사이트나 블로그에 맞춰서 사용하시면 됩니다. 인용구 표현이라는 것의 주요 구성요소는 글자이기 때문에 각 사이트나 블로그 마다 글자의 종류나 크기, 줄간격 그리고 페이지 크기 등 여러가지 부분에서 차이가 있기 때문에 본인에게 맞는 틀로 맞추어 놓으셔야 계속 그대로 쓰실 수 있습니다.

필자 또한, HTML, CSS, JAVA 등에 익숙치 못합니다. 이제 배움을 시작하는 입장이기 때문에 설명도 용어도 어색하거나 부족할 수 있음에 양해를 구하며, 이 글은 필자 같이 이제 배움의 길로 들어서신 분들 위주로 쓴 것입니다. 모쪼록 도움이 되셨으면 하는 바램입니다.