구분선 만드는 방법

글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.

1 예제 문서
2 border로 구분선 만들기
3 짧은 구분선 만들기
4 중간에 강조점 만들기

예제 문서

<div class="jb-division-line"></div>를 꾸며서 구분선을 만들 것입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        font-family: Consolas, monospace;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <div class="jb-division-line"></div>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </body>
</html>

border로 구분선 만들기

border로 구분선을 만들고, margin으로 적절한 간격을 만듭니다.

.jb-division-line {
  border-top: 1px solid #444444;
  margin: 30px 0px;
}

짧은 구분선 만들기

구분선을 짧게 만들고 싶다면 width로 가로 크기를 정합니다.
배치를 가운데로 하고 싶다면 좌우 magin의 값을 auto로 합니다.

.jb-division-line {
  border-top: 1px solid #444444;
  margin: 30px auto;
  width: 300px;        
}

중간에 강조점 만들기

네이버 블로그에서 자주 보는 모양인데, 선 중간에 도형을 넣을 수 있습니다.
content 속성을 이용하고, 배치와 크기는 적절히 정합니다.

.jb-division-line {
  border-top: 1px solid #444444;
  margin: 30px auto;
  width: 300px;
  height: 0px;
}
.jb-division-line:after {
  content: "◆";
  position: relative;
  top: -9px;
  left: calc( 50% - 8px );
}

CSS / Tutorial / 링크 꾸미는 방법

링크는 a 태그로 만듭니다. 따라서 링크는 a 태그를 선택하여 꾸밉니다. 예를 들어 다음은 링크의 색을 빨간색으로 만듭니다.

CSS / Tutorial / 표 꾸미기 / 배경색

배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.

CSS / Tutorial / 원 또는 타원 만드는 방법

CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.

CSS / Tutorial / 세로 가운데 정렬하는 방법

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.

CSS / Tutorial / 상속(inheritance)

CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.

CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법

문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.

CSS / Tutorial / ul, ol 가운데 정렬하는 방법

목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.

CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.

CSS / Tutorial / 문법

CSS 문법은 선택자(selector), 속성(property), 값(value)의 조합으로 구성됩니다. 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값입니다.

CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.