/* * 서브페이지 공통 레이아웃 (헤더 · GNB · 푸터 · 퀵메뉴). * * 수치 출처: reference/assets/{www,pain}.ezrehabclinic.com/img_up/shop_pds/.../build/ * pc_skin_955_895.css, m_skin_955_895.css 및 크롤된 페이지의 인라인 * .quick_side_nav 스타일. 임의로 만든 값이 없다. * * 원본은 PC/모바일에 서로 다른 파일(pc_skin_*.css / m_skin_*.css)을 서버에서 * 골라 내려주지만, 이 프로젝트는 "PC용·모바일용 파일을 나누지 않는다"는 제약이 * 있으므로 두 파일을 한 파일로 합치고 원본이 이미 쓰고 있던 1024px 분기점을 * 그대로 미디어 쿼리로 재현한다. 두 파일이 갈라지는 세부 값(버튼 색상, 푸터 * 여백 등)은 Task 3 에서 화면별 픽셀 대조로 확정한다 — 여기서는 골격만 세운다. * * 아이콘 폰트: #toggle_left/#toggle_right/#btn_site_top 은 font-size:0 인 채로 * :before { content: '\eXXX' } 로 아이콘을 그린다(원본 icomoon 폰트, 코드포인트도 * 원본 그대로). 파일은 reference/assets/.../aramskin/design/uf2smart222/icomoon/ * 에서 그대로 옮겼다 — 두 사이트가 동일 파일을 쓴다(md5 대조 확인). */ @font-face { font-family: 'icomoon'; src: url('../font/icomoon.eot'); src: url('../font/icomoon.eot') format('embedded-opentype'), url('../font/icomoon.ttf') format('truetype'), url('../font/icomoon.woff') format('woff'), url('../font/icomoon.svg') format('svg'); font-weight: normal; font-style: normal; } /* overflow 를 양쪽 다 hidden 으로 두는 이유(원본과 같은 값이다). overflow-x 만 hidden 으로 두면 세로는 auto 가 되어, 내용이 길어질 때 이 상자가 스스로 스크롤 상자가 된다. 그러면 페이지 전체 캡처에서 보이는 만큼만 찍히고 나머지가 하얗게 잘린다(메인 화면에서 확인). */ #viewport { position: relative; min-height: 100%; width: 100%; overflow: hidden; background: #ffffff; } #viewport > #sub_view { position: relative; max-width: 100%; width: 100%; } /* 헤더 */ #header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; width: 100%; background: #ffffff; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } /* * 통증 사이트는 헤더가 원본부터 다르다 — reference/assets/pain.ezrehabclinic.com/ * .../build/pc_skin_955_895.css 의 "#header {background:#091b3b}" (테두리 없음), * m_skin_955_895.css 의 "#header {position:relative;z-index:200}" (배경·테두리 * 둘 다 없음 — 모바일에서는 흰 바탕 위라 투명이든 흰색이든 결과가 같다). * 소아(ez1095)는 두 파일 모두 배경 없이 테두리만 있다. 처음에는 두 사이트가 * 같은 흰 헤더인 줄 알고 layout.css 를 소아 값 하나로만 썼다가, 공지사항 * 픽셀 대조(2단계 Task 3)에서 통증 헤더 전체가 어긋난 것으로 드러났다 * (헤더 높이 80px 전체가 가로 폭 전체에서 달랐다 — 사이트 배경색 자체가 * 다른데 공통값 하나로 밀어붙인 결과). #viewport 에 site-kids/site-pain * 클래스를 head.php 가 ez_site() 로 붙인다. */ .site-pain #header { border-bottom: none; } #header .inner { position: relative; box-sizing: border-box; } #header .logo { position: relative; box-sizing: border-box; } #header .logo h1 { margin: 0; padding: 0 60px 0 15px; font-size: 0; box-sizing: border-box; } #header .logo h1 span { display: table; width: 100%; table-layout: fixed; } #header .logo h1 .logo_bk { display: none; } #header .logo h1 span a { display: table-cell; height: 50px; vertical-align: middle; } #header .logo h1 img { width: auto; max-height: 20px; } #header .logo button { position: absolute; top: 0; bottom: 0; width: 50px; height: 50px; margin: auto; border: none; background: none; font-size: 0; } #header .logo button:before { font-family: 'icomoon'; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; color: #dddddd; } /* 헤더가 상단 고정 상태로 바뀌면 아이콘이 한 단계 진해진다. */ #viewport.fixed_on #header .logo button:before { color: #aaaaaa; } /* 통증 사이트는 두 상태 모두 #eee 로, 고정 시에도 색이 변하지 않는다. .site-pain 은 body 에 붙으므로 #viewport 보다 반드시 앞에 온다 — 순서를 뒤집으면 영영 매치되지 않아 고정 상태에서 소아 색(#aaa)이 이긴다. */ .site-pain #header .logo button:before, .site-pain #viewport.fixed_on #header .logo button:before { color: #eeeeee; } #header #toggle_right { right: 0; } #header #toggle_right:before { content: '\e902'; width: 40px; height: 40px; font-size: 30px; line-height: 40px; } /* * #toggle_left 는 원본 크롤 두 파일 모두에서 실제로는 절대 보이지 않는다. * PC 크롤(kids-notice.pc.html)에는 마크업이 있지만 pc_skin_955_895.css 의 * "@media(min-width:1024){ #header .logo button{display:none} }" 가 두 * 버튼을 전부 지운다. 모바일 크롤(kids-notice.mo.html)에는 이 버튼 마크업 * 자체가 없다. 즉 우리가 실제로 대조하는 두 뷰포트(1920px PC, 390px 모바일 — * tests/lib/capture.mjs) 어느 쪽에서도 원본은 이 버튼을 그리지 않는다. * 그래서 폭 조건 없이 항상 숨긴다 — 아래 min-width:1024 규칙과 합쳐서가 * 아니라 이 규칙만으로 두 뷰포트 모두를 원본과 맞춘다. */ #header #toggle_left { right: 50px; display: none; } #header #toggle_left:before { content: '\e905'; width: 22px; height: 22px; font-size: 22px; } /* GNB(1뎁스/2뎁스) — 모바일 기본: 숨김, PC 에서만 노출 */ .lnb_p { display: none; } /* * .gnb_p(모바일 크롤에만 있는 로그인/회원가입 드롭다운, kids-notice.mo.html / * pain-notice.mo.html 의 #header > .inner 안, .logo 바로 다음)도 위 #toggle_left * 와 같은 이유로 항상 숨긴다. 원본 두 스킨 CSS 모두 이 클래스를 ".lnb_p, .lnb_p_bg" * 와 한 묶음으로 취급해 "@media(min-width:1024){ display:block }" 이전에는 * 항상 display:none 이다 — 즉 원본 모바일 크롤이 실제로 서비스되는 폭(<1024, * 우리 대조 폭 390px 포함)에서도 화면에는 절대 나타나지 않는다(주석조차 * "Mobile viewport - PC content display none" 이라 붙어 있다). PC 크롤에는 * 이 마크업 자체가 없다. 두 원본 파일을 하나로 합친 우리 코드에서 이 규칙을 * 그대로(= min-width:1024 에서 display:block) 옮기면, 원본에는 결코 없던 * "PC 폭에서 로그인/가입 드롭다운이 보인다"는 새 화면이 생겨 1920px 대조에서 * 오히려 어긋난다. 마크업(head.php)은 원본 그대로 살려 DOM 은 재현하되, * 시각적으로는 두 대조 폭 모두에서 원본과 같은 "안 보임"을 유지한다. */ .gnb_p { display: none; } /* * www/css/default.css 충돌 리셋. * * head.sub.php 는 우리 테마에 자체 head.sub.php 가 없으면(1단계 결정 1이 * 전제한 그대로) www/css/default.css 를 그대로 불러온다. 그 파일은 그누보드 * 기본 테마(#container 930px 폭 float:left + #aside 235px 폭 float:right * 2단 레이아웃)를 겨냥한 것이라, 우리가 같은 id(#container)를 재사용하면 * 그 float/width 가 그대로 걸린다. 원본(아람/2smart 스킨)은 default.css 를 * 아예 안 부르고 자기 전용 리셋(head_basic.css 등)을 쓰므로 이 충돌 자체가 * 없다 — 우리는 jQuery/common.js 를 얻으려고 head.sub.php 를 그대로 쓰기로 * 했으므로(1단계 결정 1, 직접 재구현 금지) default.css 자체를 막을 수는 * 없고, 충돌하는 선언만 되돌린다. * * 실측(1920px, 리뷰가 잡아준 값): #container 가 float:left;width:930px 를 * 물려받아 폭이 930 으로 줄고, 바로 다음 형제인 #footer 는(overflow:hidden * 이 원본 그대로라 새 BFC 를 만드는데) 그 float 를 피해 남은 990px 폭으로 * 옆에 붙어버렸다(930+990=1920, 즉 세로로 쌓이지 않고 가로로 나뉜 것). * #container 의 float 를 지우면 원인이 없어지고 #footer 는 다시 정상적으로 * 아래로 쌓인다 — 좌표를 강제로 고정하는 방식이 아니라 원인 자체를 없애는 * 방식이라 다른 폭에서도 깨지지 않는다. */ #container { position: static; float: none; width: auto; height: auto; min-height: 0; margin: 0; } /* * #close_side 는 좌/우 슬라이드 메뉴(#left_side/#right_side)를 닫는 버튼이다. * 원본은 이 버튼을 "#viewport 에 .left-open/.right-open 클래스가 붙었을 때만" * JS 로 보여준다 — 그 전에는 항상 display:none 이라 0x0 이다. 그 여닫이 JS 는 * 이 정적 골격 작업의 범위 밖이라(#toggle_left/.gnb_p 와 같은 이유), 지금은 * 원본의 "기본 상태"만 재현한다 — 스타일 없는