CSS / 짧은 밑줄 만들기

짧은 밑줄 만들기

밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 그런데 그렇게 만든 밑줄은 선택한 요소 전체에 적용됩니다. 즉, 요소가 길면 밑줄도 길게 만들어지고, 요소가 짧으면 밑줄도 짧게 만들어집니다.

요소보다 짧은 밑줄을 만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을 만들고 위치와 길이를 정해주면 됩니다. 예를 들어 h1 요소에 짧은 밑줄을 만들고 싶다면 다음과 같이 합니다.

h1:after {
  content: "";
  display: block;
  width: xxx;
  border-bottom: xxx;
}

밑줄의 길이는 width 속성으로 정하고, 요소와 밑줄 사이의 간격을 조정하고 싶으면 padding이나 margin 속성을 추가하면 됩니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      h1.a:after {
        content: "";
        display: block;
        width: 60px;
        border-bottom: 1px solid #bcbcbc;
        margin: 20px 0px;
      }
      h1.b {
        text-align: center;
      }
      h1.b:after {
        content: "";
        display: block;
        width: 60px;
        border-bottom: 1px solid #bcbcbc;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <h1 class="a">Lorem Ipsum Dolor</h1>
    <h1 class="b">Lorem Ipsum Dolor</h1>
  </body>
</html>

Related Posts

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS만으로 만든 드롭다운 메뉴입니다. Ipsum, Dolor에 마우스를 올리면 하위 메뉴가 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Tips | Dropdown Menu</title> <style> .dropdown > ul > li { ...

CSS / quotes / 인라인 인용문의 기호를 꾸미는 속성

CSS / quotes / 인라인 인용문의 기호를 꾸미는 속성

q 태그는 문단 안에서 사용하는 인용문입니다. 기본 모양은 큰따옴표로 감싸는 것입니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> </head> <body> <h1>Lorem <q>Ipsum</q> Dolor</h1> </body> </html> 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 것이 quotes 속성입니다. 예를 들어 ...

CSS / table-layout / 표(table) 크기 고정시키기

CSS / table-layout / 표(table) 크기 고정시키기

표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 500px인 간단한 표입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 500px; } td { padding: 10px; border: 1px solid #666666; } </style> </head> <body> <table> <tr> <td class="c1">HAHAHA</td> <td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</td> </tr> </table> </body> </html> 표 ...

CSS / 마우스 오버 효과 /  이미지 확대

CSS / 마우스 오버 효과 / 이미지 확대

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

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

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

문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다. 하지만 CSS에는 그러한 정렬이 없습니다. text-align 속성의 justify가 있지만, 그건 빈 공간을 늘려서 양 끝으로 맞추는 게 아닙니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> ...

CSS / font-size / 글자 크기 정하는 속성

CSS / font-size / 글자 크기 정하는 속성

개요 font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit medium : 웹브라우저에서 정한 기본 글자크기입니다. xx-small, x-small, small, large, x-large, xx-large : medium에 ...

CSS / radial-gradient - 원형 그라데이션 효과 만들기

CSS / radial-gradient - 원형 그라데이션 효과 만들기

radial-gradient radial-gradient로 원형 그라데이션 효과를 만들 수 있습니다. CSS3에서 추가된 것으로,인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 문법 radial-gradient( shape size at position, color1, color2, ..., color3 ) shape : 원 모양인지 타원 모양인지 정합니다. size : 크기를 정합니다. position : 중심의 위치를 정합니다. color : 색을 정합니다. 아래의 예제로 하나씩 알아보겠습니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div.jb { margin: ...

CSS / 도형 만들기 / 마름모

CSS / 도형 만들기 / 마름모

CSS로 마름모를 만들어 보겠습니다. 마름모는 삼각형을 두 개 붙여서 만들 것이므로, 삼각형을 만드는 방법을 먼저 보시는 게 좋습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 넣습니다. <div class="rhombus"></div> 크기를 0으로 한 후, border 속성을 이용하여 삼각형을 만듭니다. position: relative;는 나머지 반쪽의 위치를 잡기 위해 넣은 것입니다. .rhombus { width: 0px; height: 0px; ...

CSS / list-style-image / 목록의 마커로 이미지 사용하기

CSS / list-style-image / 목록의 마커로 이미지 사용하기

개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...

CSS / counter-reset, counter-increment로 일련 번호 붙이기

CSS / counter-reset, counter-increment로 일련 번호 붙이기

CSS를 이용하여 특정 요소에 일련 번호를 붙일 수 있습니다. 이때 사용하는 속성은 counter-reset과 counter-increment입니다. 일련 번호를 붙이려는 요소의 부모 요소에 counter-reset으로 시작하는 번호를 정하고, 일련 번호가 붙을 요소에 counter-increment로 증가량을 정합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...