제목에서처럼 누구나 손쉽게 만들어 볼 수 있는 인용구 장식 한가지를  소개해 보려고 합니다.

우선, 필자는 CSS 또는 Script 에 해박한 지식을 갖춘 사람이 아니라 이제 배움을 시작한 입장이라서, 설명에 부족함이나 오류가 있을수 있으니 양해를 먼저 구하며, 행여 부족한 부분에 대해 바로 지적해주시면 내용에 적극 반영하겠습니다.


  보통 여러분들이 블로그에서 글을 쓰시다가 명사의 명언이나 다른 사이트의 내용을 인용할 경우 각 블로그 사이트에서 제공하는 인용구의 표현 방식은 극히 제한되어 있습니다.  이를 조금 더 멋지고 인상깊게 표현할 수 있는 방법에 대해 알아 보던 중 CODEPEN 이라는 사이트에서 CSS 만으로도 멋지게 표현할 수 있는 방법에 대한 힌트를 얻어 나름대로 만들어 본 것입니다.


1. SAMPLE


정말 세련되고 고급지지 않나요?  이것은 이미지가 아니라 인용구의 진보적인 표현방식입니다.  멋지지 않나요?  전혀 어렵지 않습니다.  한번 시도해 보세요!!!

EDDYJAY

EDDYJAY Photography

AMATEUR Photographer


  이 방법은 Java Script 없이 CSS만으로 구현한 것이므로,  CSS3 와 HTML5 를 지원하지 않는 IE8이하 브라우저에서는 정상적인 구현이 불가능하니 참고하시기 바랍니다.


실제로 적용한 페이지로 가서 잘 어울리는 지 먼저 구경해 보세요. : 적용 페이지 바로 가기


2. HTML 과 CSS

See the Pen EJ-QUOTE-1 by EDDYJAY (@eddyjay) on CodePen.


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


2-1. HTML

1
2
3
4
5
6
7
8
9
10
11
<div class="quote">
   <p>Hello, it's me I was wondering if after all these years you'd like to meet 
      To go over everything
      They say that time's supposed to heal ya</p>
</div>
<div class="student">
<div class="photo">
<img src="http://cfile29.uf.tistory.com/image/2219813357E210861438A7#.jpg" class="photo">
</div>
   <p>Adele Laurie Blue Adkins</p>
   <p>BRITISH POP STAR</p>
</div>
cs


  다른 부분은 예제를 보면서 적용하시면 쉽게 이해하실 수 있는 내용이나, 8번째 줄의 이미지를 적용하는 부분에서 처음 적용하실 때에는 어려움이 있으실 겁니다.  이유는 '티스토리' 에서 업로드한 이미지의 직접 링크가 불가능하기 때문에 약간의 변칙을 사용하셔서 해결하셔야만 합니다.  하지만, 걱정하지 마세요.  너무나도 간단하고 쉽습니다.


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


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

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
.quote {                       < 말풍선 형태 설정 >
  background: #efefef;          - 말풍선의 배경색
  padding: 25px 30px 5px 30px;  - 말풍선 안의 여백 조정 ( 위 오른쪽 아래 왼쪽 )
  border-radius: 25px;          - 말풍선 모서리의 둥근 정도 조정
  margin-bottom: 10px;
    margin-left: 30px;
    margin-right: 30px;
    line-height: 1.5;
}
.quote:after {                 < 말풍선 하단의 역삼각형 >
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 18px 0 18px;
  border-color: #efefef transparent transparent transparent;
  position: relative;
  top: 37px;                     - 역삼각형이 안보이게 되면 수치를 키워보세요. 
  left: 6px;
}
.student {                      < 사진과 우측 텍스트 >
  margin-left: 55px;
  margin-bottom: 25px;
}
.student .photo {               < 사진 >
  background-color: #ccc;        - 사진이 없을 때 나타나는 배경색
  border-radius: 100px;
  width: 60px;                   - 사진의 가로길이
  height: 60px;                  - 사진의 세로길이
  float: left;
  margin-right: 10px;
}
.student p {
  position: relative;
  top: 5px;
  line-height: 1.5;
  text-transform: uppercase;
}
.student p:nth-child(2) {        < 사진 우측의 1번째 텍스트 설정 >
  font-size: 12px;                - 글자 크기
  font-weight: 600;               - 글자 두께
  margin-bottom: 0;
}
.student p:nth-child(3) {        < 사진 우측의 2번째 텍스트 설정 >
  font-size: 10px;                - 글자 크기
  color: #777;                    - 글자 색상
}
.student p:nth-child(4) {        < 사진 우측의 3번째 텍스트 설정 >
  font-size: 10px;                - 글자 크기
  color: #777;                    - 글자 색상
}
 
cs


CSS 에서는 혹시라도 수정하실 필요가 있는 부분은 미리 주석을 달아 놓았으니 간단하게 설명하겠습니다.

다시 한번 강조 드리지만 작업은 반드시 CSS 부터 선행해 주시기 바랍니다.  위의 사항 중 크게 바꿀 것은 없다고 생각하지만 배경색이랄지, 글자 크기 같은 것은 사이트 디자인이나 블로그 스킨의 특성에 따라 바꿔서 조화롭게 쓰시면 됩니다.


3. 활용


띠리리 리리리! 띠리리 리리리!  소쩍꿍! 소쩍꿍! 소쩍꿍! 소쩍꾸~웅! 소쩍꿍새가 울기만 하면 떠나간 우리님이 오신댔어요. 띠리리 리리리! 띠리리 리리리!

심형래 보다 영구

영구아트무비(주)

디워2 만드는 중


오는건 순서가 있어도 가는건 순서가 없다!  감사의 표시는 돈으로 하라!  참을 인이 세번이면 호구!  티끌 모아봤자 티끌이다.  선배는 입 닫고 지갑을 열어라!   열심히 공부 안하면 더울 때는 더운데서 일하고 추울 때는 추운 데서 일한다!

박명수

개그맨 / 방송인

초현실 주의자(?)


저작자 표시 비영리 변경 금지
신고


 

  • 플스디비전 2016.10.14 20:32 신고

    워~~ 이건 뭐 ㅎㅎ 이런 것도 있네여. 완전 멋집니다. 따라할 수 있을진 모르겠지만 일단 선추천 선리플 후 차근 차근 따라해 볼께여. 좋은 정보 감샤함니다. ㅎㅎ

    • 보이는 것처럼 그렇게 어렵진 않습니다. 거의 붙여넣기만 해도 될 정도로 쉬우니까요.
      그런데, 티스토리 회원은 아니신거 같은데 네이버나 다른 블로그에서 가능할지는 장담 못하겠네요. 오로지 티스토리에서만 테스트 했었으니까요. 아마 워드프레스 같이 CSS 를 손댈수 있는 환경이면 가능할 것 같습니다. ;)

  • UI개발자 (퍼블리셔)인 제가 봐도 깔끔한 정리네요! 저도 어서 퍼블리싱에 도움이 될만한 정보를 포스팅해야하는데 ㅎㅎ 영감얻고가요!

    • 퍼블리셔 분에게서 좋은 말씀을 들으니 이거 하나 가지고 지지고 볶던 고충이 말끔이 씻겨 내려가네요. 힘나는 말씀 감사합니다. 주말 잘보네세요. ;)

  • 인용구를 어떻게 꾸밀까 고민했었는데 좋은 팁을 남겨주셔서 해결했습니다.
    감사드립니다.

카테고리

STUDY

날짜

2016.10.16 04:32

최근 게시글

최근 댓글