hmw1001
233 lines
10 KiB
Markdown
233 lines
10 KiB
Markdown
# rd.laser 테마 수정 이력
|
||
|
||
> 프로젝트: `E:\project\cafe24_laser`
|
||
> 테마 경로: `theme/rd.laser`
|
||
> 작업 목적: PC 전용 고정 레이아웃 구현 + 모바일 반응형 제거 + 게시판/메뉴/서브타이틀 정상화
|
||
|
||
---
|
||
|
||
## 핵심 개념 (다음 작업 시 참고)
|
||
|
||
### 이 사이트의 레이아웃 구조
|
||
```
|
||
head.sub.php → HTML <head> 태그, viewport, CSS/JS 로드
|
||
head.php → 헤더 출력 (메뉴 + 유동형 광고 + 서브타이틀)
|
||
└ rb.layout_hd/lwd_laser/header.php → 헤더 레이아웃 선택
|
||
└ skin/nav/lwd_laser/nav.skin.php → 실제 메뉴 HTML/CSS/JS
|
||
tail.php → 푸터 출력 + sub-page-container 닫는 태그
|
||
```
|
||
|
||
### PC 고정 레이아웃 원리
|
||
- `<meta name="viewport" content="width=1280, ...">` → 모바일에서도 1280px 기준으로 렌더링
|
||
- `body { min-width: 1280px }` → body 최소 너비 고정 (html에 걸면 안 됨 - 아래 주의사항 참고)
|
||
- 헤더 `position: static` (fixed 아님) → 스크롤 시 헤더도 같이 올라감 (laser.or.kr 방식)
|
||
|
||
### 주의사항 - html vs body min-width
|
||
```
|
||
❌ html { min-width: 1280px }
|
||
→ html이 스크롤 컨테이너가 되어 position:fixed 헤더가 viewport 기준이 아닌
|
||
html 기준으로 고정됨 → 가로 스크롤 시 헤더/메뉴가 따라오지 않음
|
||
|
||
✅ body { min-width: 1280px }
|
||
→ 브라우저 viewport 기준으로 동작, 가로 스크롤 정상
|
||
```
|
||
|
||
### 게시판 스킨 CSS 로드 방식
|
||
그누보드는 board 스킨 CSS를 자동 로드하지 않음.
|
||
각 스킨의 `list.skin.php`, `view.skin.php`, `write.skin.php` 상단에 직접 추가해야 함:
|
||
```php
|
||
$_skin_url = G5_THEME_URL . '/skin/board/스킨폴더명';
|
||
add_stylesheet('<link rel="stylesheet" href="' . $_skin_url . '/style.css?ver=' . G5_SERVER_TIME . '">', 0);
|
||
```
|
||
|
||
---
|
||
|
||
## 요청별 수정 내용
|
||
|
||
---
|
||
|
||
### [요청 1] 모바일 반응형 전부 제거 → PC 전용
|
||
|
||
**문제:** 모바일 미디어쿼리가 PC 레이아웃을 깨뜨림
|
||
|
||
**수정 파일:**
|
||
| 파일 | 변경 내용 |
|
||
|------|-----------|
|
||
| `rb.css/mobile.css` | `@media (max-width:1024px)` 블록 전체 제거 |
|
||
| `rb.css/custom.css` | `@media all and (max-width:1024px)` 블록 전체 제거 |
|
||
| `rb.layout/laser/style.css` | `@media (max-width:768px)`, `@media (max-width:480px)` 제거 |
|
||
| `skin/board/journal/css/style.css` | 모바일 미디어쿼리 제거 |
|
||
| `skin/board/coverage/css/style.css` | 모바일 미디어쿼리 제거 |
|
||
| `skin/board/interview,newsfocus1,2,newtech,photonews,newproduct,notice,rb.bbs,rb.bbs_three_column_layout/css/style.css` | 모바일 미디어쿼리 제거 |
|
||
| `skin/page/greeting,greeting_new,lasertech,lasertech_new,moldjournal,moldjournal_new/css/style.css` | 모바일 미디어쿼리 제거 |
|
||
| `rb.layout,rb.layout_ft,rb.layout_hd` 하위 모든 `style.css` (약 30개) | 모바일 미디어쿼리 제거 |
|
||
| `rb.custom` 하위 모든 `module.css` (약 10개) | 모바일 미디어쿼리 제거 |
|
||
| `css/custom_header.css` | 모바일 패널/오버레이/GNB 스타일 제거 |
|
||
| `skin/nav/lwd_laser/style.css` | 모바일 미디어쿼리 제거 |
|
||
| `skin/nav/lwd_laser_nohp/style.css` | 모바일 미디어쿼리 제거 |
|
||
|
||
---
|
||
|
||
### [요청 2] 메뉴 스킨 모바일 코드 제거
|
||
|
||
**수정 파일:**
|
||
| 파일 | 변경 내용 |
|
||
|------|-----------|
|
||
| `skin/nav/lwd_laser/nav.skin.php` | 모바일 타입 설정 변수, 햄버거 버튼, 모바일 패널 HTML, 모바일 메뉴 JS 제거 |
|
||
| `skin/nav/lwd_laser_nohp/nav.skin.php` | 동일 |
|
||
|
||
---
|
||
|
||
### [요청 3] 가로 스크롤 안 되는 문제 해결
|
||
|
||
**원인:** `html { min-width: 1280px }` → html이 스크롤 컨테이너가 되어 fixed 헤더가 따라오지 않음
|
||
|
||
**수정 파일:**
|
||
| 파일 | 변경 내용 |
|
||
|------|-----------|
|
||
| `css/style_prestige_1.css` | `html { min-width: 1280px }` → `body { min-width: 1280px }` 로 이동 |
|
||
| `rb.css/custom.css` | 동작하지 않던 `body.pc-only-layout { min-width }` 제거 |
|
||
|
||
---
|
||
|
||
### [요청 4] 게시판 스킨 CSS 미적용 문제
|
||
|
||
**원인:** `rb.board.core.*` 스킨 폴더에 CSS 파일이 없고, 로드 코드도 없었음
|
||
|
||
**수정 파일:**
|
||
| 파일 | 변경 내용 |
|
||
|------|-----------|
|
||
| `skin/board/rb.board.core.journal/style.css` | `journal/css/style.css` 복사하여 생성 |
|
||
| `skin/board/rb.board.core.journal/list.skin.php` | 상단에 `add_stylesheet` CSS 로드 코드 추가 |
|
||
| `skin/board/rb.board.core.journal/view.skin.php` | 동일 |
|
||
| `skin/board/rb.board.core.journal/write.skin.php` | 동일 |
|
||
| `skin/board/rb.board.core.coverage/style.css` | `coverage/css/style.css` 복사하여 생성 |
|
||
| `skin/board/rb.board.core.coverage/list.skin.php` | CSS 로드 코드 추가 |
|
||
| `skin/board/rb.board.core.coverage/view.skin.php` | 동일 |
|
||
| `skin/board/rb.board.core.coverage/write.skin.php` | 동일 |
|
||
| `skin/board/rb.board.core/style.css` | journal style.css 복사하여 생성 |
|
||
| `skin/board/rb.board.core/list.skin.php` | CSS 로드 코드 추가 |
|
||
| `skin/board/rb.board.core/view.skin.php` | 동일 |
|
||
| `skin/board/rb.board.core/write.skin.php` | 동일 |
|
||
|
||
**추가 수정:**
|
||
- `journal/css/style.css`, `coverage/css/style.css` 의 `.sub-page-container { padding-top: 0px; !important }` 문법 오류 수정 (`!important` 위치 잘못됨)
|
||
|
||
---
|
||
|
||
### [요청 5] 헤더 fixed → 스크롤과 함께 이동 (laser.or.kr 방식)
|
||
|
||
**원인:** `.lwd-header-wrap { position: fixed }` 로 헤더가 화면에 고정되어 있었음
|
||
|
||
**수정 파일:**
|
||
| 파일 | 변경 내용 |
|
||
|------|-----------|
|
||
| `skin/nav/lwd_laser/style.css` | `.lwd-header-wrap` 에서 `position: fixed; top: 0; left: 0; z-index: 1000` 제거 |
|
||
| `css/style_prestige_1.css` | `body { padding-top: 270px }` → `padding-top: 0` 으로 변경 |
|
||
| `css/style_prestige_1.css` | `.sidebar-inner { top: 290px }` → `top: 20px` 으로 변경 |
|
||
| `skin/nav/lwd_laser/nav.skin.php` | 헤더 높이 동적 계산 JS (`adjustBodyPadding`) 제거 |
|
||
| `skin/board/journal/css/style.css` | PDF viewer header `top: 80px` → `top: 0` |
|
||
| `skin/board/rb.board.core.journal/style.css` | 동일 |
|
||
|
||
---
|
||
|
||
### [요청 6] 서브타이틀 함수 독립화 (게시판에서 서브타이틀 안 나오는 문제)
|
||
|
||
**원인:**
|
||
- `get_sub_title()` 함수가 `nav.skin.php`의 `split_menu_name()`에 의존
|
||
- 게시판 페이지에서 함수 로드 순서 문제로 `split_menu_name` 미정의 오류 발생 가능
|
||
- `$bo_table` 변수를 `$_GET`에서만 읽어서 pretty URL 환경에서 값이 없었음
|
||
|
||
**수정 파일:**
|
||
| 파일 | 변경 내용 |
|
||
|------|-----------|
|
||
| `head.php` | `get_sub_title()`, `get_bo_table_from_url_regex()` 를 `function_exists()` 체크로 감싸 중복 선언 방지 |
|
||
| `head.php` | `split_menu_name` 없어도 동작하는 `get_menu_name_ko()` 독립 함수 추가 |
|
||
| `head.php` | `$bo_table` 변수를 그누보드 전역변수 우선 사용, 없으면 `$_GET` 폴백 |
|
||
|
||
---
|
||
|
||
### [요청 7] 유동형 광고 - 화면 절반 이하로 좁아지면 자동 숨김
|
||
|
||
**원인:** 화면이 좁아지면 광고가 콘텐츠 영역과 겹침
|
||
|
||
**계산 기준:**
|
||
```
|
||
콘텐츠 max-width(1400) + 광고 너비(140) × 2 + 여백(20) × 2 = 1720px
|
||
→ 1720px 이하에서 광고 숨김
|
||
```
|
||
|
||
**수정 파일:**
|
||
| 파일 | 변경 내용 |
|
||
|------|-----------|
|
||
| `css/floating_ads.css` | 파일 끝에 `@media (max-width: 1720px) { .floating-ad { display: none !important; } }` 추가 |
|
||
|
||
---
|
||
|
||
### [요청 8] PC 고정 화면 크기 설정 (모바일에서 PC 레이아웃 그대로 보기)
|
||
|
||
**수정 파일:**
|
||
| 파일 | 변경 내용 |
|
||
|------|-----------|
|
||
| `head.sub.php` | viewport를 `width=1280, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no` 로 변경 |
|
||
|
||
---
|
||
|
||
### [요청 9] 게시판 sticky 사이드바 배경 이동 문제
|
||
|
||
**원인:** `position: sticky` 사이드바에 `align-self: flex-start` 누락
|
||
flex 컨테이너에서 sticky가 동작하려면 반드시 필요
|
||
|
||
**수정 파일:**
|
||
| 파일 | 변경 내용 |
|
||
|------|-----------|
|
||
| `skin/board/journal/css/style.css` | `.layout-sidebar-left, .layout-sidebar-right` 에 `align-self: flex-start` 추가 |
|
||
| `skin/board/coverage/css/style.css` | 동일 |
|
||
| `skin/board/interview,newsfocus1,2,newtech,photonews,newproduct,notice,rb.bbs_three_column_layout/css/style.css` | 동일 (8개 파일) |
|
||
|
||
---
|
||
|
||
## 현재 최종 설정 요약
|
||
|
||
```
|
||
viewport : width=1280 고정 (모바일에서도 PC 레이아웃)
|
||
body : min-width: 1280px, padding-top: 0
|
||
헤더 : position: static (스크롤과 함께 이동)
|
||
유동형 광고 : 화면 1720px 이하에서 자동 숨김
|
||
게시판 CSS : 각 skin.php 상단에서 add_stylesheet로 직접 로드
|
||
서브타이틀 : head.php에서 독립 함수로 처리 (nav.skin.php 의존 없음)
|
||
모바일 코드 : 전체 제거 (미디어쿼리, 햄버거 메뉴, 모바일 패널 등)
|
||
```
|
||
|
||
---
|
||
|
||
## 파일 구조 참고
|
||
|
||
```
|
||
theme/rd.laser/
|
||
├── head.php ← 헤더 출력 (메뉴+광고+서브타이틀)
|
||
├── head.sub.php ← HTML head 태그 (viewport, CSS/JS)
|
||
├── tail.php ← 푸터 출력
|
||
├── css/
|
||
│ ├── style_prestige_1.css ← 전체 레이아웃 기본 스타일
|
||
│ └── floating_ads.css ← 유동형 광고 스타일
|
||
├── rb.css/
|
||
│ ├── style.css ← 그누보드 공통 스타일
|
||
│ ├── mobile.css ← 모바일 스타일 (현재 내용 비움)
|
||
│ └── custom.css ← 커스텀 스타일
|
||
├── rb.layout_hd/lwd_laser/
|
||
│ └── header.php ← 헤더 레이아웃 선택
|
||
└── skin/
|
||
├── nav/lwd_laser/
|
||
│ ├── nav.skin.php ← 메뉴 HTML/JS
|
||
│ └── style.css ← 메뉴 스타일
|
||
└── board/
|
||
├── rb.board.core.journal/
|
||
│ ├── style.css ← 저널 게시판 스타일
|
||
│ ├── list.skin.php ← 목록 (CSS 로드 포함)
|
||
│ ├── view.skin.php ← 뷰 (CSS 로드 포함)
|
||
│ └── write.skin.php ← 쓰기 (CSS 로드 포함)
|
||
├── rb.board.core.coverage/ ← 동일 구조
|
||
└── rb.board.core/ ← 동일 구조
|
||
```
|