 |
| 인용 위 기본 상태 아래 마우스 오버 되었을경우 |
위에 이미지처럼 인용 부분입니당. 이렇게 생긴 건 이 블로그 에서 많이 보셨을 겁니당. 이러한 인용 하는 부분을 만들어볼까 합니당. 하지만 문제가 있는 게 블로거 에서는 인용 부분은 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 : 입체의 느낌으로 표시됩니당.
간단하죠? 이렇게 작성해주시면 저의 블로그처럼 인용부분을 조금 나만의 스타일로 꾸밀 수 있습니당. 인용부분은 모든 블로그가 같은 태그로 사용되는 걸로 알고 있습니당. 스타일시트만 지정해주면 당른 블로그 에서도 꾸밀 수 있습니당. 지금까지 너무 심심했던 인용구를 나만의 스타일로 변경해보세요.
댓글 없음:
댓글 쓰기