피카(pica) 단위란 무엇인가요?
피카(pica)는 인쇄 및 타이포그래피 분야에서 오랫동안 사용되어 온 전통적인 길이 단위로, CSS에서도 글꼴 크기를 지정할 때 활용할 수 있습니다. 1피카(1pc)는 12포인트(12pt)에 해당하며, 1인치에는 6피카가 들어갑니다. 즉, 1pc = 12pt = 1/6인치라는 환산 관계가 성립합니다.
CSS에서 피카 단위를 사용하려면 속성 값 뒤에 pc를 붙여 표기하면 됩니다. 예를 들어 font-size: 3pc;처럼 작성하면 해당 요소의 글꼴 크기가 3피카(36pt)로 설정됩니다.
피카 단위로 글꼴 크기 설정하기
다음 예제는 font-size 속성에 피카(pc) 단위를 적용하여 div 요소의 글꼴 크기를 설정하는 방법을 보여줍니다.
예제 코드
<html>
<head>
</head>
<body>
<div style = "position:relative;left:10px;top:3px;background-color:yellow;font-size:3pc;">
이 div 요소는 피카(pc) 단위로 글꼴 크기가 설정되었습니다.
</div>
</body>
</html>
위 코드를 실행하면 노란색 배경의 div 요소가 화면에 나타나며, 내부 텍스트는 3피카(36pt) 크기의 글꼴로 표시됩니다.
피카 단위 사용 시 참고 사항
피카는 본래 인쇄 매체를 위한 단위이기 때문에, 화면 중심의 일반적인 웹 페이지에서는 px, rem, em 같은 단위를 더 널리 사용합니다. 다만 인쇄용 스타일시트(@media print)를 작성하거나 전통적인 출판·타이포그래피 규칙을 반영해야 하는 프로젝트에서는 피카 단위가 유용하게 활용될 수 있습니다.