html, CSS로 코드를 작성하는 올바른 방법
수평선을 그려야하며 세 가지 방법이 있습니다.
1) 클래스를 정의하고 h_lineCSS 기능을 추가 합니다.
#css
.hline { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <div class="h_line"></div>
2) hr태그 사용
#css
hr { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <hr />
3) after의사 클래스 처럼 사용하십시오.
#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
<div class="block_1 h_line">Lorem</div>
가장 실용적인 방법은 무엇입니까?
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}<div>Hello</div>
<hr/>
<div>World</div>다음은 html5boilerplate 이 수행하는 방법입니다 .
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
시맨틱 마크 업을 위해 사용합니다 <hr/>.
원하는 차량이 아니라면 패딩, 그리고 여백의 조합을 사용하여 원하는 경계를 얻을 수 있습니다.
HTML5에서
<hr>태그는 주제별 구분을 정의합니다. HTML 4.01에서<hr>태그는 가로 규칙을 나타냅니다.
http://www.w3schools.com/tags/tag_hr.asp
그래서 정의 후에, 나는 선호합니다 <hr>
나누기 주제별 를 정말로 원한다면반드시<hr>태그를사용하십시오.
디자인 라인을 사용할 CSS 클래스와 같은 것을 사용할 수 있습니다.
.hline-bottom {
padding-bottom: 10px;
border-bottom: 2px solid #000; /* whichever color you prefer */
}
그리고 그것을 사용하십시오
<div class="block_1 hline-bottom">Cheese</div>
내 간단한 해결은 CSS로 hr의 스타일을 지정하여 경계 및 여백이없고 0이며 높이가 1 픽셀이며 배경색이 대조적입니다. 스타일을 직접 설정하거나 클래스를 정의하여 수행 할 수 있습니다 (예 :
.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
요구 사항에 따라 달라 지지만 많은 개발자의 제안은 코드를 최대한 간단 하게 만드는 것 입니다. 간단한 "hr"태그와 CSS 코드를 사용하십시오.
나는 줄처럼 대시를 원했기 때문에 사용 긴했습니다.
.dash{
border: 1px solid red;
width: 120px;
height: 0px;
}<div class="dash"></div>.line {
width: 53px;
height: 0;
border: 1px solid #C4C4C4;
margin: 3px;
display:inline-block;
}<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}<div>Hello</div>
<hr/>
<div>World</div>참고 URL : https://stackoverflow.com/questions/14821087/horizontal-line-and-right-way-to-code-it-in-html-css
'IT' 카테고리의 다른 글
| NgFor는 Angular2에서 파이프로 데이터를 업데이트하지 않습니다. (0) | 2020.08.02 |
|---|---|
| 웹뷰에서 HTML 콘텐츠를 얻는 방법? (0) | 2020.08.02 |
| 장고에서 말하는 것을 설정하는 방법? (0) | 2020.08.02 |
| 모든 이스케이프 문자는 무엇입니까? (0) | 2020.08.02 |
| __init__.py를 사용하여 전역 변수를 정의 할 수 있습니까? (0) | 2020.08.02 |