[🚀 Today I Learn 페이지 만들기] 아지 미션 제출합니다.

[gustn99]

https://gustn99.github.io/web-today-i-learn/

HTML

1. 나만의 갤러리에서 사진 9장은 HTML 태그 중 어떤 요소로 표현하는 것이 좋을까? 이유는 뭐라고 생각했는가?

<ul>과 <li> 태그를 사용하는 것이 가장 좋다.
갤러리는 본질적으로 '이미지들의 목록'이다. 단순히 <div>를 나열하는 것보다 목록을 의미하는 <ul> 태그로 감싸고 각 항목을
<li>로 표현하는 것이 브라우저와 보조 공학 기기(스크린 리더 등)에 이 요소들이 서로 연관된 리스트임을 명확히 알려주기 때문.

2. 뼈대 코드를 기반으로 이미지를 로드하는 방식은 크게 2가지로 나뉘는데 무엇이고 어떻게 사용하고 있는가?

HTML의 <img> 태그를 사용하는 방식과 CSS의 background-image 속성을 사용하는 방식이 있다.
여기서는 프로필, 갤러리, 작품 포스터 등 의미가 중요한 콘텐츠 이미지는 모두 <img> 태그를 사용해 로드하고 있다. 반면, 배경색이나 디자인적 요소(예: 비디오 로딩 전 검은 배경)는 CSS를 통해 제어한다.

3. 시맨틱 태그(예: <header>, <main>, <section>,

<footer> 등)로 문서를 구분할 때, 어떤 기준으로 섹션을 나누고 태그를 적용하는 것이 좋을까?

콘텐츠의 역할과 주제를 기준으로 나눈다.

• <header>: 페이지의 제목이나 주요 내비게이션 등 도입부 요소를 담는다.
• <main>: 페이지의 핵심 콘텐츠가 시작되는 부분을 정의하며, 문서 내에서 단 한 번만 사용한다.
• <section>: '자기소개', '갤러리', 'TIL'처럼 서로 다른 주제를 가진 독립적인 구역을 나눌 때 사용한다.
• <footer>: 저작권 정보, 연락처 등 문서의 하단 정보를 담을 때 사용한다.

4. <img> 태그의 alt 속성은 왜 필요하며, 어떻게 작성하는 것이 좋을까?

웹 접근성과 이미지 로딩 실패 시의 정보 전달을 위해 필요하다.
단순히 "이미지 1"이라고 적기보다는 "활짝 웃고 있는 아지 모습"처럼 이미지가 전달하고자 하는 내용을 구체적으로 묘사하여, 이미지를 볼 수 없는 사용자도 내용을 이해할 수 있도록 작성해야 한다.

5. 이미지를 로드할 때, 상대 경로(relative path)와 절대 경로(absolute path)를 혼용하면 어떤 문제가 발생할 수 있을까?

프로젝트의 유지보수가 어려워지고 환경에 따라 링크가 깨질 수 있다.

• 로컬 환경과 배포 환경(GitHub Pages 등)의 루트 경로가 다를 경우, 절대 경로로 작성된 파일은 찾지 못하는 경우가 발생한다. 프로젝트 내부 자산은 가급적 상대 경로(./images/...)를 사용하여 파일 구조가 바뀌더라도 유연하게 대응할 수 있도록 하는 것이 좋다.

6. <meta> 태그의 viewport 설정과 Open Graph 태그는 각각 어떤 역할을 하는가?

• viewport: 모바일 기기 등 다양한 화면 크기에서 페이지가 적절한 비율로 보이도록 조절한다. (반응형 웹의 기초)
• Open Graph (og:): 카카오톡이나 페이스북 등에 링크를 공유했을 때 미리보기로 나타날 제목, 설명, 이미지를 지정하여 클릭률을 높이는 역할을 한다.

---

CSS

1. 나만의 갤러리에서 9장의 이미지를 보기 좋게 배치하려면, Flexbox와 CSS Grid 중 어떤 것이 더 적합할까? 그 이유는?

CSS Grid가 더 적합하다.
Flexbox는 주로 1차원(가로 또는 세로 한 방향) 레이아웃에 유리한 반면, Grid는 2차원(행과 열) 레이아웃을 정의하는 데 최적화되어 있다. 3x3 형태의 정갈한 격자 구조를 만들 때는 Grid를 사용하는 것이 훨씬 간결하고 정확하다.

2. 태그 선택자, 클래스 선택자, ID 선택자는 각각 언제 사용하는 것이 적절할까?

• 태그 선택자 (h2, p): 문서 전반에 걸친 기본 스타일(폰트, 줄간격 등)을 지정할 때 사용한다.
• 클래스 선택자 (.content-section, .work-card): 여러 요소에서 공통으로 반복 사용되는 스타일을 정의할 때 사용한다. (가장 권장되는 방식)
  • ID 선택자 (#til-form): 페이지 내에서 단 하나만 존재하는 고유한 요소에 스타일을 주거나, JS에서 요소를 찾을 때, 혹은 앵커 링크용으로 사용한다.

3. CSS를 HTML 내에 직접 작성하는 것과 별도 파일로 분리하는 것의 차이는 무엇일까?

• 별도 파일 분리: 관심사의 분리(HTML=구조, CSS=디자인)가 가능해져 가독성이 좋아지고 유지보수가 쉽다. 또한 브라우저가 CSS 파일을 캐싱할 수 있어 성능 면에서도 유리하다.
• 직접 작성 (style 태그/인라인): 구조가 매우 단순할 때는 편할 수 있으나, 코드가 길어지면 관리가 불가능해지고 재사용성이 떨어진다.

---

JavaScript

1. document.getElementById() 와 document.querySelector() 의 차이는 무엇인가?

• getElementById: 오직 ID 값으로만 요소를 찾으며 성능이 미세하게 빠르다.
• querySelector: CSS 선택자 형식(#id, .class,
  div > p)을 모두 사용할 수 있어 훨씬 유연하고 강력한다. 최근에는 코드의 통일성을 위해 querySelector를 더 많이 사용하는 추세이다.

2. 이벤트 리스너를 사용해서 "어떤 일이 일어났을 때 어떤 동작을 실행"하게 만들 수 있다. 자기소개 페이지에서 활용할 수 있는 이벤트에는 어떤 것들이 있을까?

• submit: TIL 작성 폼을 제출할 때 데이터를 처리한다. (현재 구현됨)
• click: 내비게이션 메뉴 클릭 시 부드러운 이동이나, 갤러리 이미지 클릭 시 크게 보기 등에 사용한다.
• mouseover / mouseout: 버튼에 마우스를 올렸을 때 애니메이션 효과를 주는 데 사용한다.

3. innerHTML 로 DOM을 조작할 때 주의해야 할 점은 무엇일까?

보안(XSS)과 성능 문제

• 사용자가 입력한 내용을 그대로 innerHTML에 넣으면 악의적인 스크립트가 실행될 위험이 있다. 또한 innerHTML은 변경 시 해당 요소 하위의 모든 노드를 다시 파싱하므로 빈번한 조작 시 성능 저하가 발생할 수 있다. (신뢰할 수 없는 데이터는 textContent 사용 권장)

---

배포

1. GitHub Pages로 배포한 페이지에서 TIL을 작성하면, 새로고침하거나 재배포했을 때 데이터가 유지될까? 그 이유는?

유지되지 않는다.
GitHub Pages는 정적(Static) 호스팅 서비스이다. JavaScript로 추가한 데이터는 브라우저의 메모리상에 일시적으로만 존재하며, 서버에 저장되지 않기 때문에 새로고침하면 초기 상태로 돌아간다.

2. JavaScript로 추가한 데이터를 영구적으로 저장하려면 어떤 방법이 있을까?

• 브라우저 저장소: LocalStorage나 IndexedDB를 사용하여 사용자의 브라우저에 데이터를 저장한다. (해당 브라우저에서만 유지됨)
• 서버/데이터베이스: Firebase, Supabase 같은 백엔드 서비스나 별도의 API 서버를 구축하여 DB에 영구적으로 기록한다. (모든 환경에서 데이터 유지됨)