때때로 웹 페이지의 흐름을 만들 때 콘텐츠를 시각적으로 구별되는 부분으로 나누는 방법을 찾고 싶을 것입니다. 이 기사에서는 HTML의 수평선과 이를 마크업에 삽입하여 시각적으로 웹 페이지를 더욱 매력적이고 사용자 친화적으로 만들 수 있는 방법에 대해 알아봅니다.
<hr> HTML 요소는 CSS를 사용하여 다른 HTML 요소처럼 스타일을 지정할 수 있습니다. 관례는 자체 닫는 태그(
) 대신 닫지 않는 태그(
)이지만 마크업은 어느 쪽이든 동일하게 읽습니다. 이는 광범위한 브라우저 지원이 있는 블록 수준 요소로 표시되며 웹 페이지의 주제 이동을 나타냅니다.
CSS가 무엇을 하는지 알아보기 위해 CSS로 실험하는 것이 가장 좋다고 생각합니다. 다음 코드 샌드박스는 HTML
요소를 장식하는 데 사용되는 일부 CSS가 포함된 매우 기본적인 HTML 페이지를 보여줍니다.
시간 <스타일> body { font-family:'Roboto Mono'; } 탐색 { 디스플레이:플렉스; flex-flow:행 랩; justify-content:사이의 공백; 너비:100%; 높이:50px; 여백-왼쪽:20px; } 탐색> div { 디스플레이:플렉스; justify-content:공백 주위; 항목 정렬:가운데; 너비:40%; } 탐색> div> a { 텍스트 장식:없음; 검정색; } 탐색> a { 텍스트 장식:없음; 글꼴 변형:작은 대문자; align-self:센터; } hr { 테두리:없음; border-top:5px 더블 블랙; 색상:#333; 오버플로:보이는; 텍스트 정렬:가운데; 높이:5px; } hr::after { 내용:'😀😀😀😀'; 패딩:0 4px; 위치:상대; 상단:-18px; 배경:#fff; } 섹션 { 너비:100%; 디스플레이:플렉스; 항목 정렬:가운데; 여백:0 자동; } 섹션> div { 너비:50%; 디스플레이:플렉스; 정당화-내용:중앙; } 섹션> h1 { 너비:50%; 텍스트 정렬:가운데; } 섹션> div> img { 높이:350px; 개체 맞춤:커버; } #diff-style-hr { 테두리:없음; 테두리 상단:3px 검은색 점선; 색상:#333; 오버플로:보임; 텍스트 정렬:가운데; 높이:5px; } #diff-style-hr::after { 내용:""; 패딩:0; } .lower-container { 디스플레이:플렉스; flex-flow:행 랩; } .lower-main { 디스플레이:플렉스; 플렉스 방향:열; 너비:40%; 여백:0 자동; } h4 { align-self:플렉스 시작; }
<메인> <섹션>
저는 비즈니스 이름입니다.