화면에 검은 테두리가 생기면 대부분 해상도나 디스플레이 설정 문제로 보기 쉽지만, 실제로는 웹페이지나 앱의 레이아웃이 현재 화면 크기와 맞지 않아 발생하는 경우가 많습니다. 이 경우 별도 프로그램 없이도 CSS의 맞춤 크기 수동 적용만으로 문제를 해결할 수 있습니다. 검은 테두리가 생기는 위치와 상황에 따라 적용 방법이 조금씩 다르므로, 아래 내용을 확인해 보시면 됩니다.
검은 테두리, 왜 생기는 걸까
검은 테두리는 크게 두 가지 상황에서 나타납니다. 하나는 웹사이트나 앱을 사용할 때 화면 가장자리에 검은 여백이 보이는 경우이고, 다른 하나는 문서나 이미지를 인쇄할 때 용지 가장자리에 검은 선이 출력되는 경우입니다.
웹 화면에서 검은 테두리가 생기는 주된 원인은 화면 비율과 디자인 요소의 크기가 서로 맞지 않기 때문입니다. 예를 들어 웹사이트 배경 이미지가 특정 비율로 고정되어 있는데, 사용자가 그와 다른 비율의 모니터나 모바일 기기로 접속하면 내용이 잘리거나 빈 공간이 생기면서 검은색 영역이 드러나게 됩니다. 특히 반응형 웹 디자인을 적용하지 않은 페이지에서 이런 현상이 잦습니다.
인쇄물에서 검은 테두리가 생기는 경우는 프린터 설정에서 용지 크기와 인쇄 영역이 서로 맞지 않을 때 발생합니다. 문서의 여백 설정이 프린터가 지원하는 최소 여백보다 작으면, 프린터가 강제로 여백을 추가하면서 검은 선이 나타나기도 합니다.
웹 화면 검은 테두리, CSS로 직접 고치는 법
웹페이지에서 검은 테두리가 보인다면, 해당 페이지의 CSS에서 요소 크기를 현재 화면에 맞게 조정해야 합니다. 가장 기본적인 방법은 이미지와 비디오 같은 미디어 요소의 가로폭을 화면 너비에 맞추는 것입니다.
img {
width: 100%;
height: auto;
}
이렇게 하면 이미지가 화면 폭을 넘지 않으면서 세로 비율은 자동으로 유지됩니다. 문제가 배경 이미지나 특정 콘텐츠 영역에서 발생한다면, background-size: cover; 속성을 추가하는 것도 방법입니다. 이 속성은 배경 이미지가 요소의 비율을 유지하면서 영역을 가득 채우도록 만들어 줍니다.
- 픽셀(px) 대신 퍼센트(%), 뷰포트 폭(vw), 뷰포트 높이(vh) 같은 상대 단위 사용
- CSS 미디어 쿼리로 화면 너비 구간별 스타일 지정
- Flexbox나 Grid 레이아웃으로 요소 자동 배치
미디어 쿼리는 특정 화면 크기에서만 스타일을 바꾸고 싶을 때 유용합니다. 예를 들어 모바일 화면(768px 이하)에서만 요소 크기를 조정하려면 아래처럼 작성합니다.
@media (max-width: 768px) {
.your-element {
width: 100%;
height: auto;
}
}
이 코드를 적용하면 모바일 기기에서는 해당 요소가 화면 너비에 맞춰지고, PC 화면에서는 기존 스타일이 유지됩니다. 검은 테두리가 특정 화면 크기에서만 나타난다면, 그 크기에 맞는 미디어 쿼리를 추가하는 방식으로 접근하면 됩니다.
인쇄할 때 생기는 검은 테두리 해결 방법
프린터로 출력할 때 검은 테두리가 생기는 경우는 웹 화면과 원인이 다릅니다. 대부분 프린터 드라이버의 용지 설정이 실제 사용하는 용지 크기와 다르게 지정되어 있을 때 이런 문제가 발생합니다.
먼저 프린터 설정 창을 열어 용지 종류와 크기를 확인하세요. A4 용지를 사용하는데 프린터 설정이 Letter(레터) 크기로 되어 있다면, 인쇄 영역이 어긋나면서 가장자리에 검은 선이 생길 수 있습니다. 용지 크기를 실제 사용하는 규격으로 바꾼 뒤, 인쇄 미리보기에서 여백이 정상적으로 표시되는지 확인합니다.
- 프린터 설정에서 용지 크기와 종류 확인
- 인쇄 미리보기로 여백 상태 점검
- 테두리 없는 인쇄 기능이 활성화되어 있는지 확인
- 드라이버 캐시에 저장된 이전 설정값 초기화
일부 프린터는 테두리 없는 인쇄 기능을 지원하는데, 이 기능이 꺼져 있으면 문서 가장자리에 의도치 않은 여백이나 선이 생길 수 있습니다. 프린터 모델에 따라 이 기능의 위치가 다를 수 있으므로, 제조사에서 제공하는 사용 설명서를 참고하는 것이 좋습니다.
검은 테두리 적용 후 반드시 해야 할 확인 작업
크기 조정을 마친 뒤에는 실제 화면이나 출력물에서 검은 테두리가 사라졌는지 확인해야 합니다. 웹 화면이라면 브라우저 개발자 도구를 활용하면 편리합니다.
Chrome이나 Edge 브라우저에서 F12 키를 누르면 개발자 도구가 열리고, 좌측 상단의 요소 선택 버튼을 클릭한 뒤 문제가 되는 영역을 클릭하면 해당 요소의 CSS 속성을 실시간으로 수정할 수 있습니다. 수정한 값은 저장하지 않아도 바로 화면에 반영되므로, 어떤 값을 적용해야 하는지 빠르게 테스트할 수 있습니다.
- 모바일, 태블릿, PC 등 다양한 화면 크기에서 테스트
- 브라우저 개발자 도구로 CSS 속성 실시간 변경 확인
- 인쇄물은 미리보기 기능으로 최종 확인 후 출력
배포 전에는 변경 사항을 기록해 두고, 문제가 생길 경우를 대비해 이전 버전을 백업해 두는 것이 안전합니다. 특히 웹사이트라면 CSS 파일 하나를 잘못 수정해도 전체 레이아웃이 깨질 수 있으므로, 수정 전 파일을 별도로 저장해 두는 습관이 필요합니다.
Q. 검은 테두리가 특정 브라우저에서만 보입니다. 어떻게 해야 하나요?
브라우저마다 CSS 렌더링 방식이 조금씩 달라서 동일한 코드도 다르게 보일 수 있습니다. 해당 브라우저의 개발자 도구로 문제 요소를 확인한 뒤, 그 브라우저에서만 적용되는 CSS 속성을 추가하는 방법이 있습니다. 대부분의 경우 -webkit-이나 -moz- 같은 브라우저 접두사를 붙이면 해결됩니다.
Q. 인쇄할 때만 검은 테두리가 생기고 화면에서는 정상입니다.
화면 표시와 인쇄는 서로 다른 영역이라서, 화면에서 멀쩡해 보여도 인쇄할 때 문제가 생길 수 있습니다. 프린터 설정의 용지 크기와 인쇄 여백을 먼저 확인하고, 그래도 해결되지 않으면 프린터 드라이버를 최신 버전으로 업데이트해 보세요.