Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 수평선(hr) 만들고 CSS로 스타일링하는 방법

웹 페이지를 제작할 때 콘텐츠를 시각적으로 구분되는 여러 영역으로 나누고 싶은 순간이 찾아옵니다. 이 글에서는 HTML의 수평선(horizontal rule)이 무엇인지, 그리고 마크업에 어떻게 추가하는지 알아보겠습니다. 수평선을 잘 활용하면 웹 페이지를 한층 더 매력적이고 사용자 친화적으로 만들 수 있습니다.

<hr> 요소의 기본 이해

<hr> 요소는 다른 HTML 요소와 마찬가지로 CSS를 통해 자유롭게 스타일을 지정할 수 있습니다. 관례적으로는 닫는 태그 없이 <hr> 형태로 작성하지만, <hr />처럼 자체 종료(self-closing) 형식으로 작성해도 브라우저는 동일하게 해석합니다. <hr>은 블록 레벨(block-level) 요소로 화면에 표시되며, 모든 주요 브라우저에서 폭넓게 지원됩니다. 특히 HTML5에서는 단순한 장식선이 아니라 웹 페이지 내 주제 전환을 의미론적으로 나타내는 요소로 정의된다는 점도 기억해 두면 좋습니다.

CSS로 수평선 꾸며 보기

수평선 스타일링은 설명보다 직접 실험해 보는 것이 가장 빠르게 익히는 방법입니다. 아래 코드 예제는 아주 기본적인 HTML 페이지에 CSS를 적용해 <hr> 요소를 장식한 모습을 보여줍니다.

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>hr</title>
       <link
           href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400;700&display=swap"
           rel="stylesheet"
       />
       <style>
           body {
               font-family: 'Roboto Mono';
           }
           nav {
               display: flex;
               flex-flow: row wrap;
               justify-content: space-between;
               width: 100%;
               height: 50px;
               margin-left: 20px;
           }
           nav > div {
               display: flex;
               justify-content: space-around;
               align-items: center;
               width: 40%;
           }
 
           nav > div > a {
               text-decoration: none;
               color: black;
           }
 
           nav > a {
               text-decoration: none;
               font-variant: small-caps;
               align-self: center;
           }
 
           hr {
               border: none;
               border-top: 5px double black;
               color: #333;
               overflow: visible;
               text-align: center;
               height: 5px;
           }
 
           hr::after {
               content: '😀😀😀😀';
               padding: 0 4px;
               position: relative;
               top: -18px;
               background: #fff;
           }
          
           section {
               width: 100%;
               display: flex;
               align-items: center;
               margin: 0 auto;
           }
 
           section > div {
               width: 50%;
               display: flex;
               justify-content: center;
           }
           section > h1 {
               width: 50%;
               text-align: center;
           }
           section > div > img {
               height: 350px;
               object-fit:cover;
           }
 
           #diff-style-hr {
               border: none;
               border-top: 3px dotted black;color: #333;
               overflow:visible;
               text-align: center;
               height: 5px;
           }
 
           #diff-style-hr::after {
               content: "";
               padding: 0;
              
           }
           .lower-container {
               display: flex;
               flex-flow: row wrap;
           }
           .lower-main {
               display: flex;
               flex-direction: column;
               width: 40%;
               margin: 0 auto;
           }
           h4 {
              align-self: flex-start;
           }
       </style>
   </head>
   <body>
       <nav>
           <a href="#">
               <div>
                   Logo Goes Here
               </div>
           </a>
           <div>
               <a href="">
                   About Us
               </a>
               <a href="">
                   Services
               </a>
               <a href="">
                   Contact Us
               </a>
               <a href="">
                   Login
               </a>
           </div>
       </nav>
       <hr />
       <main>
           <section>
               <div>
                   <img src="https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2266&q=80" alt="code"/>
               </div>
               <h1>I'm a business name</h1>
           </section>
           <hr id="diff-style-hr">
           <div class="lower-container">
               <section class="lower-main">
                   <h4>I'm a headline</h4>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
               </section>
               <section class="lower-main">
                   <h4>I'm a headline</h4>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
               </section>
               <section class="lower-main">
                   <h4>I'm a headline</h4>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
               </section>
               <section class="lower-main">
                   <h4>I'm a headline</h4>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
               </section>
           </div>
          
       </main>
   </body>
</html>

예제 코드에서 눈여겨볼 핵심 포인트는 다음과 같습니다.

  • border 속성 활용: 기본 선을 제거한 후(border: none) border-top으로 이중선(double), 점선(dotted) 등 다양한 스타일을 적용할 수 있습니다.
  • ::after 가상 요소: 수평선 중앙에 이모지나 텍스트를 배치해 독특한 디자인 연출이 가능합니다.
  • ID 선택자로 스타일 분리: #diff-style-hr처럼 선택자를 달리하면 같은 페이지 안에서도 서로 다른 스타일의 수평선을 자유롭게 사용할 수 있습니다.

수고하셨습니다! 이제 <hr> 요소를 활용해 보기 좋은 웹 사이트를 만들 준비가 되었습니다. 다양한 CSS 속성을 조합하며 자신만의 개성 있는 수평선 디자인을 시도해 보세요.