programing

HTML에서 세로줄을 만드는 방법

javajsp 2023. 8. 7. 22:20

HTML에서 세로줄을 만드는 방법

HTML을 사용하여 수직선을 어떻게 만드나요?

<div>선을 다음에 표시할 마크업 주변에서 CSS를 사용하여 스타일을 지정합니다.

.verticalLine {
  border-left: thick solid #ff0000;
}
<div class="verticalLine">
  some other content
</div>

수평 규칙 태그를 사용하여 수직선을 작성할 수 있습니다.

<hr width="1" size="500" style="0 auto" />

가로줄은 최소 너비와 큰 크기를 사용하여 세로줄이 됩니다.

빈 항목을 사용할 수 있습니다.<div>선을 표시할 때와 똑같이 스타일이 지정됩니다.

HTML:

<div class="vertical-line"></div>

정확한 높이(선상에서 스타일 재지정):

  div.vertical-line{
      width: 1px; /* Line width */
      background-color: black; /* Line color */
      height: 100%; /* Override in-line if you want specific height. */
      float: left; /* Causes the line to float to left of content. 
        You can instead use position:absolute or display:inline-block
        if this fits better with your design */
    }
<div class="vertical-line" style="height: 45px;"></div>

3D 모양을 원하는 경우 테두리 스타일을 지정합니다.

    div.vertical-line{
      width: 0px; /* Use only border style */
      height: 100%;
      float: left; 
      border: 1px inset; /* This is default border style for <hr> tag */
    }
   <div class="vertical-line" style="height: 45px;"></div>

물론 고급 조합으로 실험할 수도 있습니다.

  div.vertical-line{
      width: 1px;
      background-color: silver;
      height: 100%;
      float: left;
      border: 2px ridge silver ;
      border-radius: 2px;
    }
 <div class="vertical-line" style="height: 45px;"></div>

HTML을 .<hr /> 

html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
}
<hr class="vertical" />

요소에 해당하는 수직이 없습니다.그러나 한 가지 방법은 분리할 항목의 왼쪽 또는 오른쪽에 간단한 테두리를 사용하는 것입니다.

#your_col {
  border-left: 1px solid black;
}
<div id="your_col">
  Your content here
</div>

HTML5 사용자 지정 요소(또는 순수 CSS)

enter image description here

자바스크립트

요소를 등록합니다.

var vr = document.registerElement('v-r'); // vertical rule please, yes!

*-모든 사용자 지정 요소에는 필수 항목입니다.

CSS

v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

display:inline-block|inlineinline요소의 높이를 포함하도록 확장되지 않습니다.여백을 사용하여 용기 내에서 선의 중심을 맞춥니다.

즉석에서 만든

js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

*불행히도 사용자 지정 자체 폐쇄 태그를 만들 수 없습니다.

사용.

 <h1>THIS<v-r></v-r>WORKS</h1>

enter image description here

예: http://html5.qry.me/vertical-rule

자바스크립트로 엉망으로 만들고 싶지 않나요?

이 CSS 클래스를 지정된 요소에 적용하기만 하면 됩니다.

CSS

.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

*위의 참고 사항을 참조하십시오.

한 가지 다른 옵션은 1픽셀 이미지를 사용하여 높이를 설정하는 것입니다. 이 옵션을 사용하면 이미지를 원하는 위치에 띄울 수 있습니다.

하지만 가장 우아한 해결책은 아닙니다.

HTML 요소와 함께 높이/폭을 사용하여 수직선을 그릴 수 있습니다.

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}
<div id="verticle-line"></div>

이 .<hr>가로줄 태그입니다.CSS와 함께 사용하여 가로줄을 만들 수도 있습니다.

.divider{
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    width: 1px;
    background-color: red;
}
<hr class="divider">

너비 특성에 따라 선의 두께가 결정됩니다.높이 특성에 따라 선의 길이가 결정됩니다.배경색 속성에 따라 선의 색상이 결정됩니다.

HTML에는 세로줄을 만드는 태그가 없습니다.

  1. 방법: 라인 이미지를 로드합니다.그런 다음 스타일을 설정합니다."height: 100px ; width: 2px"

  2. 방법: 사할수있다니습용을 사용할 수 .<td>꼬리표<td style="border-left: 1px solid red; padding: 5px;"> X </td>

div 내부에 수직선을 중심으로 작성하려면 이 코드를 사용할 수 있다고 생각합니다.'컨테이너'의 너비는 100%가 될 것입니다.

div.container {
  width: 400px;
}

div.vertical-line {
  border-left: 1px solid #808080;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
  width: 1px;
}
<div class="container">
  <div class="vertical-line">&nbsp;</div>
</div>

회전<hr>90도:

<hr style="width:100px; transform:rotate(90deg);">

hr(수평선) 태그를 사용하여 아래의 CSS로 90도 회전할 수 있습니다.

hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

한 가지 더 접근이 가능합니다. SVG를 사용하는 것입니다.

예:

<svg height="210" width="500">
    <line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
      Sorry, your browser does not support inline SVG.
</svg>

찬성:

  • 모든 길이와 방향의 선을 가질 수 있습니다.
  • 너비와 색상을 쉽게 지정할 수 있습니다.

단점:

  • SVG는 현재 대부분의 최신 브라우저에서 지원됩니다.그러나 IE 8 및 이전 버전과 같은 일부 오래된 브라우저는 이 기능을 지원하지 않습니다.

제안된 "hr" 코드를 조합하여 사용했는데, 제 코드는 다음과 같습니다.

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>

저는 단순히 "왼쪽" 픽셀 값을 변경하여 위치를 지정했습니다. (제 웹 페이지에서 세로줄을 사용하여 콘텐츠를 정렬한 다음 제거했습니다.)

div에 수직선 오른쪽

    <div style="width:50%">
        <div style="border-right:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>

div 왼쪽에 있는 수직선

    <div style="width:50%">
        <div style="border-left:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>

|의 html 특수 문자인 &#124를 사용하는 것은 어떻습니까?

컨테이너에 세로줄을 넣어 나란히 있는 하위 요소(열 요소)를 구분하는 것이 목표인 경우 다음과 같은 컨테이너 스타일을 지정할 수 있습니다.

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

그러면 두 번째 자식부터 시작하는 모든 자식 요소에 왼쪽 테두리가 추가됩니다.즉, 인접한 아이들 사이에 수직 테두리가 생깁니다.

  • >하위 선택기입니다.왼쪽에 지정된 요소의 하위 항목과 일치합니다.
  • *는 범용 선택기입니다.모든 유형의 요소와 일치합니다.
  • :not(:first-child)부모의 첫 아이가 아니라는 뜻입니다.

브라우저 지원: > * : 첫째 및 :not()

이건 단순한 것보다 나은 것 같아요..child-except-first {border-left: ...}규칙, 즉 수직선은 다른 하위 요소의 규칙이 아니라 컨테이너의 규칙에서 가져온 것이 더 의미가 있기 때문입니다.

이 방법이 임시 수직 규칙 요소(수평 규칙 스타일 등)를 사용하는 것보다 나은지 여부는 사용 사례에 따라 다르겠지만, 이 방법은 적어도 대안이 됩니다.

세로줄을 추가하려면 hr 스타일을 지정해야 합니다.

이제 세로줄을 만들면 페이지 중앙에 표시됩니다.

<hr style="width:0.5px;height:500px;"/>

이제 이 코드를 사용할 수 있는 위치에 배치합니다.

<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>

이렇게 하면 왼쪽으로 이동하고 반대로 이동하여 오른쪽으로 이동할 수 있습니다.

수직 행을 적용하려는 이전 요소에서 CSS를 설정할 수 있습니다...

border-right-width: thin;
border-right-color: black;
border-right-style: solid;

UTF-8 기타 기호 중 하나를 사용하면 됩니다.

&#124;

&#x7C;

그것이 당신이 필요로 하는 전부이며 모든 브라우저와 호환됩니다.

나중에 감사합니다.

인라인 스타일의 경우 다음 코드를 사용했습니다.

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />

그리고 그것은 그것을 바로 중앙에 위치시켰습니다.

저는 인라인 세로줄이 필요해서 단추를 속여서 줄로 만들었습니다.

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }

더 이상 아무것도 하지 않는 간단한 방법이라고 생각합니다. 필요에 따라 테두리를 왼쪽 또는 오른쪽으로 변경할 수 있습니다.

.vertical-line{
border-left:1px solid #000

}
<span class="vertical-line"></span

HTML 기호를 사용할 수도 있습니다. &#124;이는 '|'로 렌더링됩니다.

수직선을 가운데로 만들려면 다음을 사용합니다.

position: absolute; 
left: 50%;

언급URL : https://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line-in-html

'programing' 카테고리의 다른 글

pkl 파일의 압축을 푸는 방법은?  (0) 2023.08.07
대체 패턴에서 그룹 캡처에 대한 역참조 처리  (0) 2023.08.07
테이블 열 너비 설정  (0) 2023.08.07
Windows OS에서 MySQL 또는 MariaDb에 TokUdb 플러그인 사용  (0) 2023.08.02
JavaScript 또는 jQuery를 사용하여 Mac OS X 또는 Windows 컴퓨터를 검색하는 가장 좋은 방법  (0) 2023.08.02

'programing'의 다른글

  • 현재글HTML에서 세로줄을 만드는 방법

관련글

댓글

티스토리툴바