[블로그 꾸미기] CSS로 인용부분을 꾸며보자.

 안녕하세요. 오늘도 블로그 꾸미기 입니다. 어제는 블로그 분위기와 다른 글을 한번 올려봤습니다. 레벨 업을 하고 싶은 마음에 저도 모르게 글을 적고 말았군요 ㅠㅠ 그까짓 20포인트가 뭔지 ㅋㅋ 어차피 많은 글이 있어야 검색엔진에서도 검색이 될 것이고 그런 마음으로 적어봤습니다. 오늘은 저번부터 인용 하는 부분을 어떻게 글을 적어야지 라고 마음먹고 있었는데 깜박해버렸습니다. 그래서 이번에 한번 적어볼까 합니다. 인용은 보통 블로그 에서 대표되는 제목이나 주제를 잡던지 아니면 추가되는 내용에 핵심단어를 적곤 합니다. 저 같은 경우 서브 타이틀로 인용 부분을 사용합니다. 내용을 보시면 점선 박스로 되어있는 부분이 보이시죠? 그 부분입니다. 그래도 어디가 인용부분인지 잘 모르겠다 하시는 분은 아래 이미지를 봐주세요.

인용 위 기본 상태 아래 마우스 오버 되었을경우

 위에 이미지처럼 인용 부분입니다. 이렇게 생긴 건 이 블로그 에서 많이 보셨을 겁니다. 이러한 인용 하는 부분을 만들어볼까 합니다. 하지만 문제가 있는 게 블로거 에서는 인용 부분은 class 가 지정되어있지 않습니다. 이런 부분은 인용 부분을 한가지 스타일로 지정해야 한다는 겁니다. 인용은 여러 형태로 사용이 가능하기 때문인데요. 하지만 큰 문제는 아니니 그냥 넘어가도록 하겠습니다. 그럼 이제 본격적으로 어떻게 수정을 해야 하는지 알아봅시다.

인용은?

<blockquote> </blockquote> 로 묶인 부분이 인용 부분입니다. 태그는 이렇게 사용하는데 잘 보시면 block + quote 로 되어있습니다. 합성어 입니다. 박스형태의 인용이라고 해서 그대로 사용하나 봅니다. 하여튼 중요한 거는 이 부분을 활용해야 한다는 겁니다. 기본적으로 class 는 지정되어있지 않습니다. 즉 blockquote 자체를 CSS로 적용해줘야 한다는 말이 됩니다.

스타일시트 ( CSS )

 HTML편집에서는 수정해주실 부분이 없습니다. CSS 추가 하는 부분에서 처리를 하면 되는데요. 추가는 아래 이미지의 추가 에서 해주시면 됩니다. 이미 많은 블로그 꾸미기 글에 적혀있으니 쉽게 아실 수 있을 겁니다.

CSS 추가

그럼 이제 인용이 무엇이고 어디에 어떻게 삽입하는지 아셨을 겁니다. 이제 스타일을 구성하면 되겠습니다. 제 블로그 기준으로 작성됩니다.

인용 스타일시트 지정하기

blockquote {
color:#333;
background:#fff;
font-size:10pt;
font-weight:bold;
padding:10px;
border:1px dashed #ccc;
}

blockquote:hover {
color:#fff;
background:#333;
font-size:10pt;
font-weight:bold;
padding:10px;
border:1px dashed #ccc;
}

 이번에도 hover 을 추가했습니다. 마우스가 오버 되었을 때 나타나는 효과로 넣었습니다. 내용은 기존과 별반 다를 게 없습니다. 글 색상 배경색상 폰트크기 폰트 굵기 간격 테두리 이렇게 지정했을 뿐입니다. 테두리 스타일에 대해 조금 궁금하신 분도 있으실 것 같아 이 부분은 속성을 안내해드리겠습니다.

border 사용법은 이렇게 하시면 됩니다.

border:1px solid #000

• 1px 부분은 크기 입니다. 자유롭게 숫자를 변경하시면 됩니다.
  
• solid 부분은 테두리 스타일입니다. 이 부분은 아래를 참고해주셔서 변경하시면 됩니다.
  
• #000 은 테두리 색상입니다. 000은 검정색이죠.

border 위치지정은 이렇게 해주시면 됩니다.

border-left/right/top/bottom

• left : 왼쪽에 테두리가 표시됩니다.
  
• right : 오른쪽에 테두리가 표시됩니다.
  
• top : 위에 테두리가 표시됩니다.
  
• bottom : 아래 테두리가 표시됩니다.

border 속성은 이렇게 해주시면 됩니다.

border:1px solid #000

테두리 스타일

• none : 아무것도 표시되지 않습니다.
  
• dotted : 테두리를 점선으로 표시합니다.
  
• dashed : 테두리를 점선으로 표시하는데 조금 두껍습니다.
  
• solid : 실선으로 평범한 선으로 표시됩니다.
  
• double : 테두리가 이중으로 표시됩니다.
  
• groove : 음각 테두리로 표시됩니다.
  
• ridge : 양각으로 테두리가 표시됩니다.
  
• inset : 테두리 안에 내용에 대해 입체로 표시됩니다.
  
• outset : 입체의 느낌으로 표시됩니다.

 






  간단하죠? 이렇게 작성해주시면 저의 블로그처럼 인용부분을 조금 나만의 스타일로 꾸밀 수 있습니다. 인용부분은 모든 블로그가 같은 태그로 사용되는 걸로 알고 있습니다. 스타일시트만 지정해주면 다른 블로그 에서도 꾸밀 수 있습니다. 지금까지 너무 심심했던 인용구를 나만의 스타일로 변경해보세요.