이미지에서 HTML 텍스트를 분리하는 수직선 그리기

HTML은 수평선처럼 수직선을위한 솔루션을 제공하지 않습니다.

1.

텍스트 내에 이미지를 설정하고 "스타일"속성 태그를 추가하십시오. 예를 들어 이미지의 HTML 코드는 다음과 같습니다.

2.

"style"속성 내에 경계를 정의하십시오. 예를 들어 테두리를 전체 이미지에 적용하려면 CSS가 다음과 같이 표시됩니다.

이것은 바로 가기 테두리 설정입니다 - 첫 번째 값은 테두리의 너비를 설정하고 두 번째는 테두리 유형을 정의하고 세 번째 값은 색상을 설정합니다. 테두리는 단색, 점선, 대시 또는 이중 일 수 있습니다. 또는 groove, ridge, inset 또는 outset과 같은 3 차원 경계선을 지정할 수 있습니다.

하나의면에만 테두리를 적용하여 실제 세로선을 만들려면 "테두리"대신 "테두리 왼쪽"또는 "테두리 오른쪽"을 사용하십시오.

삼.

패딩을 추가하여 이미지와 텍스트 사이에 공간을 만듭니다. 테두리가 이미지에서 5 픽셀 떨어져있게하려면 "패딩 : 5 픽셀;"을 추가하십시오. 스타일 태그에. 예를 들어, "padding-left : 5px;"를 사용하여 한면에만 패딩을 지정할 수 있습니다. 테두리와 텍스트 사이에 공백을 만들려면 여백을 사용하십시오. 또한 "src"태그에 대한 이미지 URL을 지정해야합니다. 모두 넣으면 코드가 다음과 같이 보일 수 있습니다.

4.

HTML을 저장하고 테스트하여 테두리가 의도 한대로 표시되는지 확인하십시오.