🪞 3분할 구도 격자 가이드 | 교점은 어디일까?

캔버스 가로 (px)

캔버스 세로 (px)

3분할 한 칸 크기 (소수 2자리)

세로 격자선 x (px)-

가로 격자선 y (px)-

교점 수-

교점	x (px)	y (px)

붙여 쓰는 격자 오버레이 CSS

3분할 격자선과 교점을 px로 구하는 방법

3분할 구도는 화면을 가로·세로로 셋씩 나눈 격자를 기준선으로 쓰는 방식입니다. 머릿속으로 가늠하면 선이 조금씩 밀리는데, 디자인 툴의 안내선이나 CSS 오버레이에 넣을 숫자는 결국 px로 필요합니다. 캔버스 가로·세로만 넣으면 세로선 두 개의 x, 가로선 두 개의 y, 교점 네 개의 좌표, 한 칸 크기를 한 번에 계산합니다.

계산은 단순한 삼등분입니다. 세로선은 가로의 1/3과 2/3 지점, 가로선은 세로의 1/3과 2/3 지점이고 교점은 그 네 조합입니다. 표시는 소수 2자리이며 나누어떨어지지 않는 값도 반올림하지 않고 계산한 뒤 표시 순간에만 자릿수를 맞춥니다. 함께 만들어 주는 오버레이 CSS는 반복 선형 그라디언트로 격자선을 그리므로 요소에 그대로 붙여 쓸 수 있습니다. 2026년 10월 기준 CSS 문법으로 확인했습니다.

이 도구는 좌표만 계산합니다. 어느 교점에 피사체나 버튼을 두라는 권장안은 제시하지 않습니다. 3분할에 맞춘 배치가 항상 더 좋다는 공인 기준은 없고, 사진·웹 화면·인쇄물에서 쓰는 방식도 제각각입니다. 황금비 분할이나 대각선 구도는 다루지 않으며, 격자 안쪽 여백이나 안전 영역 계산도 지원하지 않습니다.

자주 묻는 질문

교점 좌표가 소수로 나와도 괜찮을까?

가로·세로가 3으로 나누어떨어지지 않으면 소수가 나옵니다. 화면에 실제로 선을 그릴 때는 반올림된 정수 px로 맞춰 그려지므로 1px 정도 차이가 날 수 있습니다.

어느 교점에 핵심 요소를 둬야 할까?

이 도구는 좌표만 계산하고 배치는 제안하지 않습니다. 교점 네 곳 중 어디가 더 좋다는 공인 기준은 없어 콘텐츠와 읽기 방향을 보고 직접 정해야 합니다.

만들어 준 CSS를 그대로 붙여도 될까?

격자선을 반복 선형 그라디언트로 그리는 선언이라 요소의 style 또는 클래스에 그대로 넣으면 됩니다. 캔버스 크기를 바꾸면 값이 달라지므로 다시 계산해 복사하세요.

🪞3분할 구도(rule of thirds) 가이드

관련된 도구

황금비 레이아웃 분할 계산기

비대칭 균형 시각 무게 배치 가이드

3분할 격자선과 교점을 px로 구하는 방법

자주 묻는 질문

관련된 도구

황금비 레이아웃 분할 계산기

비대칭 균형 시각 무게 배치 가이드

3분할 격자선과 교점을 px로 구하는 방법

자주 묻는 질문

같은 카테고리 도구