CSS 해커틀: 코드 블록이 컨테이너 너비를 벗어나는 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 개발자 및 디자이너 (중간 난이도)
핵심 요약
- 문서의 핵심 주장: 코드 블록은 텍스트와 달리 너비 제한이 오히려 가독성을 저해하며,
fit-content
와negative margin
을 통해 해결할 수 있음 - 핵심 기술:
Hugo
의wrapperclass
설정과.full-width-content
CSS 클래스를 활용한 너비 제한 해제 - 성능 영향:
fit-content
는 모든 현대 브라우저에서 지원되며, 좁은 화면에서는 미디어 쿼리로 비활성화 가능
섹션별 세부 요약
1. 텍스트와 코드의 너비 요구 차이
- 텍스트는 50-75자 줄 길이가 가독성에 최적화
- 코드 블록의 너비 제한은 수평 스크롤 발생, 구조 파괴, 복사/이해 어려움 유발
2. 문제 해결 방법
- Hugo 설정:
config.yaml
에wrapperclass: highlight full-width-content
추가 - CSS 적용:
.full-width-content
클래스에margin-right: -50vw
및max-width: fit-content
적용
3. 기술적 작동 원리
-50vw
는 화면 중앙 정렬 시 오른쪽 여백만 해제하여 왼쪽 정렬 유지fit-content
는 코드 블록의 최소 확장 너비를 자동 조정position: relative
로 문서 흐름 유지
4. 결과 및 고려사항
- 텍스트는 여전히 가독성 유지, 코드는 필요한 만큼 확장
- 주의 사항:
- 좁은 화면에서 미디어 쿼리로 비활성화 권장
- -50vw
기술은 콘텐츠가 중앙 정렬되어야 효과적
- Hugo 문법 강조: markup.highlight.wrapperclass
설정
결론
- 실무 팁:
fit-content
와negative margin
을 조합해 코드 블록 확장, 미디어 쿼리로 반응형 최적화, Hugo 설정 시wrapperclass
명시 - 핵심 구현:
.full-width-content { margin-right: -50vw; max-width: fit-content; }
적용 후 테스트 필수