데스크톱처럼 모바일 화면에도 Twenty Seventeen 테마 내비게이션을 상단에 고정하는 방법을 찾았다. 이 반응형responsive 내비게이션 바는 테마의 ‘메뉴’ 기능을 사용할 때 활성화되는데, 이 기능이 모바일 기기에서는 미려하지 않았기 때문이다.
Twenty Seventeen 테마는 메뉴 기능을 켜거나 끌 수 있다. 이 메뉴는 블로그 제목과 소갯말tagline을 포함한 ‘헤더’ 영역 아래 내비게이션바에 배열된다. 각 메뉴 항목에는 블로그의 카테고리 목록을 표시하거나, 특정 페이지를 표시하거나, 임의의 링크 주소를 지정할 수 있다. 한참 예전엔 블로그 첫 화면을 단순히 최신 글 목록으로 썼기 때문에 메뉴를 쓰지 않았다. 얼마 전 첫 화면을 일반 웹사이트처럼 소개화면으로 바꾸고 개인 프로필, 글 목록 등 페이지와 카테고리 버튼을 추가한 메뉴를 만들었다.
앞서 내비게이션 바의 첫 위치는 헤더 영역 아래라고 했는데, 이후 바뀔 수 있다. 방문자가 콘텐츠를 읽기 위해 스크롤바를 아래로 움직이면, 스크린의 상단에 내비게이션 바가 닿는 순간부터 이후 스크롤바를 화면 끝까지 내리는 동안 계속 스크린의 상단에 붙어 따라다닌다. 스크롤바를 다시 위로 움직이는 동안에도 스크린의 상단에 붙어 있다가, 첫 위치인 헤더 영역의 바로 아래까지 올라오면 그제서야 스크린에서 떨어진다. 이는 Twenty Seventeen 테마에 내장된 자바스크립트 기능을 통해 구현된다.
가로폭이 48em 이상인 데스크톱 화면에서는 메뉴의 여러 항목이 내비게이션 바에 곧바로 표시된다. 반면 가로폭이 48em 미만인 좁은 모바일 화면에서는 모든 항목이 표시되지 않고 내비게이션 바 위치에 생기는 [메뉴] 버튼 하나로 대체된다. 이 버튼을 눌러야 메뉴 항목이 표시되기에 처음 방문한 사람에게는 아무런 정보를 주지 않는다. 항목 너댓개면 충분한 내 개인 블로그에서 메뉴를 굳이 하나로 뭉뚱그리며 메뉴를 펼치는 조작 한 단계를 추가해야 하는 것은 번잡하다.
데스크톱처럼 너비가 충분하다면 버튼 하나짜리가 아니라 펼쳐진 내비게이션 바 형태를 유지하는 게 낫다. 화면 스크롤바를 움직이는 동안 스크린의 상단을 따라다니는 내비게이션 바 동작도 유지하는 게 나은데, 버튼 하나짜리 메뉴는 이 동작도 해제된다. 따라서 스크린 상단에 붙어 따라다니며 항목들이 펼쳐져 표시되는 내비게이션 바를 가로폭 48em 미만인 모바일 환경에서 동일하게 표시하기로 했다. 반응형 메뉴를 ‘비(非) 반응형’으로 바꾸는 것이다.
CSS 커스터마이즈를 통해 비 반응형 내비게이션 구현하기
Twenty Seventeen 테마의 반응형 메뉴를 무반응형으로 되돌리는 것은 사용자 정의 기능에서 ‘추가 CSS’라는 이름으로 입력할 수 있는 커스텀CSS에 다음 코드를 입력함으로써 실현된다.
/*너비가 48em 미만(47.999em 이하)인 스크린에 적용*/
@media screen and (max-width: 47.999em) {
/*사이트 헤더 상하단에 여백 지정*/
.site-branding {
margin-bottom: 3.75em;
padding: 1.875em 0;
position: relative;
z-index: 3;
}
/*내비게이션 바 초기 위치 지정*/
.navigation-top {
bottom: 0;
font-size: .7em;
left: 0;
position: absolute;
right: 0;
width: 100%;
z-index: 3;
transition: top 0.2s ease;
}
/*내비게이션 바 상단 고정 위치*/
.site-navigation-fixed.navigation-top {
bottom: auto;
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
z-index: 1000;
transition: top 0.2s ease;
}
/*마스터헤더 여백 보정*/
#masthead .wrap {
position: relative;
padding: .5em 1.5em;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
/*모바일 내비게이션 메뉴 펼침버튼 없앰*/
#site-navigation .menu-toggle {
display: none;
}
/*메뉴 항목 배열*/
#top-menu {
display: flex;
flex-wrap: nowrap;
align-items: center;
border-top-width: 0;
}
/*메뉴 항목 버튼 스타일*/
#top-menu li {
margin-right: .9em;
border-bottom: 0;
}
#top-menu li a {
font-size: .8rem;
}
/*관리자 로그인 시 고정된 admin bar 반영*/
.admin-bar .site-navigation-fixed.navigation-top,
.admin-bar .site-navigation-hidden.navigation-top {
top: 46px;
}
}
@media screen and (max-width: 37.5em) {
/*폭 600px 이하 스크린에서 관리자 로그인 시 고정 해제된 admin bar 반영*/
.admin-bar .site-navigation-fixed.navigation-top,
.admin-bar .site-navigation-hidden.navigation-top {
top: 0;
}
/*내비게이션 바 초기 위치*/
.admin-bar .navigation-top {
top: 128px;
}
/*커스텀 헤더 여백 보정*/
.admin-bar .custom-header {
margin-bottom:4.05em;
position: relative;
z-index: 2;
}
}위 CSS는 미디어쿼리를 써서 48em 이상 크기의 스크린에 기본 적용되는 내비게이션 바 동작을 48em 미만 스크린에도 유지하도록 만든 코드다. 메뉴 항목 배열, 스타일 등은 원하는 대로 바꿀 수 있다.
관리자 로그인 화면에서 어드민 바 높이를 고려한 추가 보정
나머지 뒷부분에 주석으로 admin bar를 반영한다고 표시한 코드가 있는데, 이는 일반 방문자가 아니라 관리자가 접하는 자신의 블로그 화면을 위해 필요한 코드다. admin bar는 워드프레스 블로그를 운영하는 관리자가 로그인했을 때 전체 사이트 표시 화면의 최상단에 화면 폭 전체를 차지하는 컨트롤 바다. Twenty Seventeen 테마의 내비게이션 바처럼 admin bar도 스크롤바를 위아래로 움직이는 동안 화면 최상단에 붙어 따라다닌다.
이러한 admin bar가 내비게이션 바의 상단 고정 움직임에 영향을 준다. admin bar 관련 코드는 그 높이값을 감안해 내비게이션 바의 상단 표시 위치를 제어한다. admin bar의 높이값은 데스크톱 화면에서 기본 32px이며, 이는 48em 이상 스크린에서 문제 없이 보이도록 이미 처리되고 있다. 다만 스크린 가로폭이 더 좁아지면 admin bar의 높이값은 46px로 두꺼워진다. 내 CSS 코드는 이 부분에 대응해 48em 미만 스크린에서도 문제 없도록 만들어 준다.
뒤따르는 고정 해제된 admin bar 반영 코드는 정반대 역할이다. admin bar 상단 고정 동작은 스크린 폭이 37.5em(또는 600px) 이하로 좁아지면 해제된다. 여전히 처음 로드된 웹사이트의 최상단에 표시되지만, 스크롤하면 화면 상단에 계속 따라다니지 않는다. 이 변화 때문에 관리자 로그인 상태에서 내비게이션 바의 상단 고정 동작이 실제 고정돼야 할 위치에 인접하기 이전에 ‘점프’하듯 시작된다.
이 문제를 완화하기 위해 admin bar 고정을 반영하지 않도록 내비게이션 바 초기 위치와 커스텀헤더의 하단 여백을 추가 지정하는 코드를 더했다. 각 요소의 위치와 높이를 직접 계산하는 자바스크립트 코드를 사용하지 않았기 때문에 완벽한 해결책은 아니다. 이 블로그 기준으로는 나쁘지 않지만, Twenty Seventeen 테마 기반이면서 사이트 브랜딩을 위한 이미지, 동영상 표시 기능을 사용 중이라면 레이아웃이 어그러질 수도 있다.
—
250306 7년 전부터 써 온 Twenty Seventeen 테마(https://mincheol.im/84)를 조금씩 고치다가 구상. 250307 작성. 250308 공개. 250311 관리자 로그인 상태를 반영한 CSS 코드와 해당 설명 본문 대거 수정.