css h1 헤딩 꾸미기

머라 그래야 하지 css를 만들다 보면 h1,h2,h3 헤딩을 이쁘게 꾸며야 할 때가 상당히 많다.

 

h1,h2,h3만 잘 꾸며 놓아도 제목이나 소제목등이 눈에 확확 들어오면서 가독성이 올라가기도 한다.

 

아래에 보더가 있고 소제목을 뒷편 박스가 감싸는 형태의 샘플을 찾던중에 스택오버플로우에서 입맛게 맞는것을 발견.

 

물론 세부적인 프로퍼티는 조정을 해야 겠지만.

태그
    <div class="wrapper">
        <div class="row">
            <h1>Heading</h1>
        </div>
        <div class="row">
            <div class="stuff">Just some stuff.</div>
        </div>
    </div>
    
    
    css
        * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    
    body {
        padding: 10px;
    }
    
    .row {
        position: relative;
    }
    
    .row h1 {
        font: bold 20px/2 Sans-Serif;
        background-color: #222;
        color: white;
        display: inline-block;
        padding: 0 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .row h1:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background-color: #222;
    }

 

결과

css 태그

H1 헤더입니다.

내용입니다

 

css h1 가운데 정렬이나 속성등은 조절을 하면 될거 같다.

가운데 정렬은 h1을 감싸는 부모 속석에 center를 적용 했다.

 text-align:center;

 

css 태그

H1 헤더입니다.

내용입니다

css h1 같은 모양 다른 예제

.row {
  border-bottom:4px solid black;
}

.row .heading 
{
  display:inline-block;
  background-color:#111;
  color:#fff;
  font-size:24px;
  font-family:calibri;
  font-weight:bold;
  padding:10px 20px;
}

<div class="row">
        <div class="heading">Heading</div>
    </div>

Heading

 

참고 : 

https://stackoverflow.com/questions/30794685/css-style-heading-background-must-cover-only-text-with-a-bottom-border

CSS style heading - background must cover only text with a bottom border

 

몇가지 클라이언트가 필수로 요구하는 크로스 브라우징 테스트를 해보고 조금 더 꾸며서 마무리를 해야 겠다.

css는 가끔씩 해보면 매우 재미가 있다.

 

가끔 하드하게 퍼블리싱을 해야 할 때는 도망을 가고 싶지만 그래도결과를 보면 뿌듯하고 재미 있다.

재미만 있음 안될터..