Vertical Rhythm 기준선 긋기

Vertical Rhythm이란 수직 방향으로 글을 읽는 리듬을 설계하는 것을 말한다. 이렇게 설계를 하고 시작하면, 보다 체계적이고 깔끔하게 정확하게 HTML 화면을 구성할수 있다.
이 설계의 기준이 되는 수평선을 그리기 위한 CSS를 만들어 보자.

body {  
    font-size: 14px;
    line-height: 1.5;
}

.leading-guide-21 {
    /*화면에 패턴을 그리는데, 그림은 수평선을 그리는데 간격이 21px(=14px * 1.5)이다.*/
    /*CSS3 리니어 그레디언트(선형 그레디언트)*/
    background-image: linear-gradient(180deg, transparent 95%, #f00 95%);
    background-size: 1px 21px;
}

수평선의 간격은 body에서 정해준 font-sizeline-height의 곱으로 해주면 된다.
이제 이 CSS를 body 태그에 추가만 해주면 된다.

<body class="leading-guide-21">  
    <!-- 내용 -->
</body>  

이제 아래와 같이 브라우저에 수평선이 출력되고, 그 선에 맞추어 HTML 구성요소들을 배치해주면 된다.