[html/css] 수직선 그리는법 2가지(인용문 앞에 활용)

 

 

[html/css] 수직선 그리는법 2가지(인용문 앞에 활용)

 

웹페이지에서 인용문이나, 중요 내용 앞에  큰 수직선이 그려져 있는 걸 본 적 있으시죠...

 

오늘은 아래 이미지처럼 큰 수직선 그리는 2가지 방법과 티스토리 본문에 수직선 넣기도 알아보겠습니다.

 

 

 

 

1. border 속성을 사용하는 방법

 

2. 이미지를 사용하는 방법

 

 

저는 1번이 파일 용량도  적을뿐 아니라, 가장 손쉬운 방법인 것 같습니다.

 

 

 

1. border 속성을 사용하는 방법

 

vertical bar.htm

 

(1) 왼쪽에 수직선을 그릴려면 border-left: 를,

오른쪽에 수직선을 그릴려면 border-right를 사용

 

(2) 선의 너비, 모양, 색상을 같이 지정합니다.

 

(3) padding으로 수직선과 인용문 사이에 여백을 지정해 줍니다.

 

 

예)

p.quote {border-left: 0.5em solid #E0CB52;padding: 0.5em;}

 

*border-left-width: 0.5em; border-left-style: solid; border-left-color: #E0CB52 와 같은 말 

 

*em사이즈는 아래 font-size 참조해주세요

 

 

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom)

 

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

 

 

2. 이미지를 사용하는 방법

verlical line(img).htm

 

(1) 저용량의 '점' 이미지를 준비합니다. (하기 파란색 점이 이미지입니다)

 

 

(2) 수직선이 들어가길 원하는 곳 앞에 이미지를 걸어줍니다.

 

<img src="dot.gif" class="quote"><p>내용

...

...

</p>

 

(3)css에서 이미지의 너비, 높이, 여백을 지정해주며, 이미지 옆으로 글자가 따라 붙게 하기 위해

float:left 속성을 씁니다.

 

예)

img.quote{width: 0.5em; height:10em;padding-right: 0.5em; float:left;}

 

단점: 인용문에  따라 높이 지정이 매번 달라지기 때문에 전체 적용이 어려움. 1번의 방법보다 용량이 더 나감.

 

 

이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법)

 

class, id 선택자

 

[css 기초] float 속성에 대하여

 

 

3. 티스토리 본문에 수직선 넣기

 vertical line(tistory).htm

 

(1) 문서 작성 시 화면 상단 □html에 체크버튼 누른 후 아래 코드를 문장 시작 시점에 넣고

 

<p style="border-left: 0.5em solid #E0CB52;padding: 0.5em;">

 

선의 모양과 색상 두께는 위에 링크 중 border 속성 참고해 주세요~

 

 

(2) 수직선이 끝나야 할 지점에 닫는 태그 </p>를 넣어줍니다.

 

예)

<p style="border-left: 0.5em solid #E0CB52;padding: 0.5em;">
Cascading Style Sheets (CSS) is a style sheet language used
for describing the look and formatting of a document
written in a markup language.
</p>

 

 

 

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