헤더에 파비콘 로고 추가 및 표시 스타일 정리

README.md

@@ -9,7 +9,7 @@
 | `index.html` | 페이지 구조, 반응형 스타일, 푸터와 개발자 패널 |
 | `artwork.js` | 아트워크 30종의 캔버스 렌더링, 커서·터치 반응, 개발자 패널 조작 |
 | `artwork-schedule.js` | 시간 슬롯 계산, Seed 기반 난수 생성과 셔플 |
-| `favicon.png` | 사이트 아이콘 |
+| `favicon.png` | 브라우저 아이콘과 헤더 identity 영역의 로고 |
 | `tests/` | 렌더링과 동작을 확인하는 자동 테스트. 웹사이트 실행에 사용되지 않음 |
 
 ## 로컬 실행

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 @@
             <span>COMPANY.</span>
           </h1>
           <div class="identity">
+            <img class="identity-logo" src="favicon.png" width="32" height="32" alt="" decoding="async">
             <p class="identifier micro">NNC</p>
             <p class="domain micro">NONAME.COMPANY</p>
           </div>