CSS / Tutorial / 구분선 만드는 방법

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

예제 문서

  • <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 / 문법

CSS / Tutorial / 문법

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

CSS / Tutorial / 표 꾸미기 / 정렬

CSS / Tutorial / 표 꾸미기 / 정렬

표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 다음과 같습니다. 표(table) : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬

CSS / Tutorial / !important

CSS / Tutorial / !important

CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.

CSS / Tutorial / 삼각형 만드는 방법

CSS / Tutorial / 삼각형 만드는 방법

CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다. 삼각형 만들기 기본 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. <div class="triangle"></div> 가로와 세로의 크기를 0으로 만듭니다. 아래쪽, 왼쪽, 오른쪽에 테두리를 추가하면 사각형을 만들 수 있습니다. .triangle { width: 0px; height: 0px; border-bottom: 360px solid #666666; ...

CSS / Tutorial / CSS를 HTML에 적용시키는 방법

CSS / Tutorial / CSS를 HTML에 적용시키는 방법

HTML에 CSS를 적용시키는 방법은 세 가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣습니다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣습니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결합니다. 보통 여러 문서에 적용되는 스타일은 Linking Style Sheet으로 만들고, ...

CSS / Tutorial / 구분선 만드는 방법

CSS / Tutorial / 구분선 만드는 방법

글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다. 예제 문서 <div class="jb-division-line"></div>를 꾸며서 구분선을 만들 것입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / Tutorial / 변수 사용하는 방법

CSS / Tutorial / 변수 사용하는 방법

CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다.

CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법

CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법

placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.

CSS / Tutorial / 마우스 오버 효과 /  이미지 확대하는 방법

CSS / Tutorial / 마우스 오버 효과 / 이미지 확대하는 방법

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법

CSS / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법

position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다. 아래는 가운데에 위치한 두 요소가 있는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...