diff --git a/README.md b/README.md index 3dba955..467fa53 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ | `index.html` | 페이지 구조, 반응형 스타일, 푸터와 개발자 패널 | | `artwork.js` | 아트워크 30종의 캔버스 렌더링, 커서·터치 반응, 개발자 패널 조작 | | `artwork-schedule.js` | 시간 슬롯 계산, Seed 기반 난수 생성과 셔플 | -| `favicon.png` | 사이트 아이콘 | +| `favicon.png` | 브라우저 아이콘과 헤더 identity 영역의 로고 | | `tests/` | 렌더링과 동작을 확인하는 자동 테스트. 웹사이트 실행에 사용되지 않음 | ## 로컬 실행 diff --git a/index.html b/index.html index 8d2fdf9..156081e 100644 --- a/index.html +++ b/index.html @@ -108,8 +108,8 @@ .identity { grid-column: 8 / -1; display: grid; - grid-template-columns: 1fr auto; - grid-template-rows: auto 1fr minmax(28px, auto); + grid-template-columns: 32px 1fr auto; + grid-template-rows: 32px 1fr minmax(28px, auto); align-items: start; gap: 24px 16px; padding: 38px var(--inset) 35px; @@ -125,11 +125,24 @@ } .identifier { + grid-column: 2; + grid-row: 1; + align-self: center; + } + + .identity-logo { grid-column: 1; + grid-row: 1; + display: block; + width: 32px; + height: 32px; + border-radius: 50%; + background: #fff; + object-fit: contain; } .domain { - grid-column: 2; + grid-column: 3; grid-row: 3; align-self: end; text-align: right; @@ -498,7 +511,7 @@ grid-template-columns: 25px 1fr auto; grid-template-rows: auto auto; align-items: center; - gap: 9px 16px; + gap: 2px 16px; padding-block: 17px; border-top: 1px solid var(--line); border-left: 0; @@ -513,6 +526,13 @@ grid-row: 1; } + .identity-logo { + grid-row: 1 / 3; + align-self: center; + width: 25px; + height: 25px; + } + .domain { grid-column: 2 / -1; grid-row: 2; @@ -627,6 +647,7 @@ COMPANY.
+

NNC

NONAME.COMPANY