상단 내비게이션 바의 높이, 글자 크기, 좌우 정렬을 바꾸려 했는데 Studio Pro에는 해당 속성이 없었다. 브라우저 콘솔에서 값을 먼저 맞춰 보고, 어느 규칙이 이기는지 확인한 뒤 theme/web/main.scss에 한 블록으로 확정했다.
문제
메뉴 글자 크기, 바 높이, 본문과의 좌우 정렬을 Studio Pro에서 조정할 수 없음
원인
테마 CSS가 결정. 모듈 변수, 예전에 덧붙인 규칙, 숨은 래퍼 여백이 겹쳐 있어 한 곳만 고쳐서는 반영되지 않음
해결
콘솔 주입으로 값 확정 → 계산된 스타일로 이기는 규칙 확인 → main.scss 맨 끝에 한 블록으로 정리
작업 순서
- 콘솔에서 값 맞추기style 태그를 주입해 숫자를 바꿔 가며 확인. 새로고침하면 원래대로 돌아감
- 반영이 안 되면 이기는 규칙 찾기개발자 도구의 Computed 탭에서 최종값을 정한 규칙과 파일 확인
- 변수에서 오는지 확인themesource 모듈의 custom-variables.scss 변수가 값을 정하는 경우가 있음
- main.scss에 한 블록으로관련 규칙을 한곳에 모아 두면 다음 수정 때 찾기 쉬움
1. 콘솔에서 시험
브라우저 콘솔
(() => {
const a = document.querySelector('.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a');
const before = getComputedStyle(a).fontSize;
document.getElementById('try-nav')?.remove();
const s = document.createElement('style');
s.id = 'try-nav';
s.textContent = `
.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a {
font-size: 14px !important; padding-left: 14px !important; padding-right: 14px !important;
}`;
document.head.appendChild(s);
return '메뉴 글자 ' + before + ' → ' + getComputedStyle(a).fontSize;
})();숫자를 바꿔 다시 실행하면 이전 시험 스타일은 지워지고 새 값이 적용된다.
2. 반영이 안 될 때 확인한 곳
| 원인 | 확인 방법 |
|---|---|
| 모듈 테마 변수 | themesource 아래 custom-variables.scss에서 높이, 글자 크기 변수 검색 |
| 예전에 덧붙인 규칙 | Computed 탭에서 같은 속성을 선언한 규칙이 여러 개인지 확인 |
| 숨은 래퍼 여백 | 바깥 스크롤 컨테이너의 padding이 좌우 정렬을 밀어냄 |
| Atlas 기본값 | 선택자 우선순위가 같으면 나중에 로드된 규칙이 이김 |
3. main.scss에 확정
theme/web/main.scss (맨 끝)
// 상단 내비게이션 바: 관련 규칙은 이 블록에만
.layout-custom .region-topbar {
height: 56px;
.mx-navbar {
min-height: 56px;
display: flex;
align-items: center;
}
// 메뉴 글자 크기와 간격
.mx-navbar ul.nav > li.mx-navbar-item > a {
font-size: 14px !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
// 하위 메뉴
.mx-navbar ul.nav > li.mx-navbar-item .dropdown-menu > li.mx-navbar-subitem > a {
font-size: 13px !important;
}
}
// 바 안쪽 좌우를 본문 가장자리에 맞춤
// 바깥 스크롤 컨테이너 래퍼의 padding이 정렬을 밀고 있었음 (클래스는 개발자 도구로 확인)
.layout-custom .region-topbar > .mx-scrollcontainer-wrapper {
padding-left: 24px !important;
padding-right: 24px !important;
}!important를 쓴 이유Atlas와 모듈 테마 규칙의 선택자가 깊어서 우선순위를 맞추려면 선택자가 지나치게 길어졌다. 범위를 레이아웃 클래스 아래로 한정하고 !important를 썼다.
로고와 배지
로고 옆 시스템명처럼 배지나 텍스트 위젯으로 만든 요소는 메뉴바 규칙의 영향을 받지 않는다. Studio Pro에서 해당 위젯의 Style 속성을 직접 고치는 편이 빠르다.
점검 목록
- 콘솔에서 값을 먼저 확정했는가
- Computed 탭에서 최종값을 정한 규칙을 확인했는가
- 모듈 테마 변수를 확인했는가
- 같은 영역 규칙이 main.scss 한 블록에 모여 있는가
- 배포 후 캐시를 지운 브라우저에서 다시 확인했는가
시리즈 목차 16편
- PI 담당자가 로우코드로 사내 시스템을 직접 만들고 운영한 기록
- Mendix Datagrid2 대신 HTMLSnippet과 JS로 목록 화면 만들기
- Mendix SPA에서 HTMLSnippet JS가 꼬이는 이유: 이벤트 중복과 DOM 공존
- Mendix mx.data.commit이 조용히 실패할 때
- Mendix Java heap OOM 추적기: base64 이미지 컬럼
- Mendix 커밋 롤백, 용량 문제가 아니었다: FileDocument 전환기
- Mendix 첫 접속 지연 줄이기: 워밍업과 캐시
- Mendix SAML SSO 자동 로그인과 딥링크 유지
- Mendix Studio Pro에서 안 바뀌는 스타일 main.scss로 바꾸기 (현재 글)
- Mendix MPK 파일 열어서 마이크로플로우 구조 보기
- SSO 로그 테이블로 MAU와 재방문율 구하는 SQL
- Mendix DateTime이 BI 도구에서 하루 빠르게 보이는 이유
- 대시보드 숫자가 틀렸을 때 확인하는 순서
- 보기 좋은 대시보드에서 할 일을 알려주는 대시보드로
- 여러 점검 시스템을 하나로 합치는 데이터 모델
- 데이터 비전공자에게 분석 결과 보고하기