img

양옆에 선이 있는 가운데 텍스트 배치(HTML, CSS)

by


 

이번 글에서는 HTML과 CSS를 활용하여 양옆에 선이 있는 가운데 텍스트를 배치하는 방법에 대해 알아보도록 하겠습니다.

 

목차
1. 양옆에 선이 있는 텍스트 배치의 HTML과 CSS 코드 작성
2. 구현된 결과와 코드 해석하기
2.1. HTML 코드 해석
2.2. CSS 코드 해석
3. 결론

양옆에 선이 있는 텍스트 배치의 HTML과 CSS 코드 작성

먼저, 아래와 같은 HTML과 CSS 코드를 작성합니다.

[HTML]

<div class="container">
  <hr>
  <span>가운데 텍스트</span>
  <hr>
</div>

[CSS]

.container {
display: flex;
align-items: center;
}

hr {
flex-grow: 1;
border: none;
border-top: 1px solid black; }

span {
padding: 0 10px;
}


 

구현된  결과와 코드 해석하기

다음 이미지는 구현된 화면입니다.

양옆에 선이 있는 텍스트

 

HTML 코드 해석

이제 작성한 코드를 하나씩 해석해 보겠습니다. HTML 코드에서는 div, hr, span과 같은 여러 요소를 사용하였습니다. div 요소는 “division”의 약자로 웹 페이지에서 특정 영역을 구분하거나 그룹화하는 역할을 합니다. hr 요소는 “horizontal rule”의 약자로 수평선을 그리는 역할을 합니다. span 요소는 텍스트나 인라인 요소를 그룹화하는 역할을 합니다.

 

CSS 코드 해석

CSS 코드에서는 display, align-items, flex-grow, border, padding 등의 여러 속성을 사용하였습니다. display: flex;는 해당 요소를 Flexbox 컨테이너로 만듭니다. align-items: center;는 Flexbox 컨테이너의 아이템들을 세로 축 중앙에 배치합니다. flex-grow: 1;는 남은 공간을 모두 차지하도록 설정합니다. border: none;과 border-top: 1px solid black;는 수평선의 스타일을 설정합니다. padding: 0 10px;는 텍스트의 패딩을 설정합니다.

 

결론

이번 글에서는 HTML과 CSS를 활용하여 양옆에 선이 있는 가운데 텍스트를 배치하는 방법에 대해 알아보았습니다. 이를 잘 활용하면 양옆에 선이 있고 가운데에 텍스트가 배치된 디자인 및 이를 응용해 다양한 디자인과 레이아웃을 쉽게 구현할 수 있습니다.  flex 코드를 이해하는 데 도움이 되었으면 좋겠습니다.



댓글