사전 진단 퀴즈 2단계 (HTML/CSS 활용)

---

<strong>정답</strong>: 시맨틱 태그를 사용하면 브라우저와 검색 엔진이 페이지의

구조와 핵심 콘텐츠를 명확히 파악할 수 있어 검색 노출 순위가 올라가고, 스크린 리더기가 메뉴와 본문을 구분해서 읽어줄 수 있습니다.

<strong>풀이 과정</strong>: div나 span은 형태만 나눌 뿐 아무런 의미를 가지지

않습니다. 반면 시맨틱 태그(의미론적 태그)는 이름 자체에 자신이 담고 있는 콘텐츠의 성격을 규정합니다. 검색 엔진의 봇(Bot)은 이 태그들을 지표 삼아 사이트의 중요 데이터를 수집합니다.

<div class="header">로고 및 메뉴</div>
<div class="content">메인 기사 내용</div>

<header>로고 및 메뉴</header>
<main>메인 기사 내용</main>

<strong>SEO (Search Engine Optimization)</strong>: 검색 엔진 최적화.

웹사이트가 검색 결과에 더 잘 보이도록 구조를 개선하는 작업입니다.

<strong>AEO (Answer Engine Optimization)</strong>: 답변 엔진 최적화. 음성

비서(시리, 빅스비)나 챗봇, 구글 검색 AI모드 등 직접적인 단일 정답을 제공하는 엔진에 맞게 개선하는 작업입니다.

<strong>GEO (Generative Engine Optimization)</strong>: 생성형 엔진 최적화. LLM

기반의 생성형 AI 검색 엔진에 맞게 개선하는 작업입니다. AI를 통한 검색이 굉장히 빨리 성장하고 있어, 전통적인 SEO가 의미없다는 말도 나올 정도로 요즘 화두가 되는 개념입니다.

<strong>웹 접근성 (Web Accessibility)</strong>: 신체적 환경적 조건에 관계없이

누구나 웹을 이용할 수 있도록 보장하는 규칙입니다.

AEO나 GEO가 나왔다고 한들 SEO와 크게 다르지 않는 방법으로 최적화할 수 있습니다. 물론 차이가 없다곤 못하지만 기본적으로 SEO(시맨틱, 구조화, alt)를 지켜야하며 추가적으로, Q&A 형태나 두괄식 게시물이 유리하다고 알려져 있습니다.

---

<strong>정답</strong>: 이벤트 처리 함수에서 이벤트 객체(event)를 받아,

event.preventDefault() 메서드를 호출합니다.

<strong>풀이 과정</strong>: form 태그 내부의 버튼이 클릭되면, 브라우저는 폼

데이터를 서버로 전송하고 페이지를 완전히 새로고침하는 것을 기본 동작으로 삼고 있습니다. 프론트엔드 환경에서는 이 새로고침을 막은 뒤, 입력된 데이터를 자바스크립트로 가공하여 백엔드 API로 조용히 보내야 합니다.

const formElement = document.querySelector("form");

formElement.addEventListener("submit", function (event) {
  event.preventDefault(); // 화면 새로고침 방지
  console.log("폼 데이터 전송을 자바스크립트가 가로챘습니다.");
});

<strong>Event Object</strong>: 이벤트가 발생했을 때 해당 이벤트의 모든 정보를

담고 있는 객체입니다.

<strong>preventDefault</strong>: 직역하면 '기본 동작을 막다'라는 뜻으로, a

태그의 페이지 이동 기능이나 form 태그의 새로고침 기능을 취소할 때 사용합니다.

---

<strong>정답</strong>: 빨간색으로 보입니다. CSS에서는 id 선택자가 class

선택자보다 명시도(우선순위)가 더 높기 때문입니다.

<strong>풀이 과정</strong>: 브라우저는 여러 스타일이 한 요소에 중복 적용될 때

'명시도 점수'를 계산합니다. 보다 좁고 명확하게 대상을 지정할수록 점수가 높습니다. 태그 이름보다는 클래스가, 클래스보다는 아이디가 더 구체적이므로 아이디의 스타일이 최종적으로 이기게 됩니다.

/* 명시도 점수가 낮음 */
.btn {
  background-color: blue;
}

/* 명시도 점수가 높음 (이 스타일이 적용됨) */
#submit-btn {
  background-color: red;
}

<strong>명시도 순서</strong>: 인라인 스타일(가장 높음) > id 선택자 > class 및 가상 클래스 선택자 > 태그 선택자(가장 낮음) <strong>팁</strong>: 여러 외부 라이브러리를 가져다 쓰게 되면, 스타일이

겹치거나 밀리는 경우가 많습니다. 그럴 땐 !important를 사용하면 몸이 편해집니다.

<strong>팁2</strong>: 그런데 !important를 남발하면 나중에 걷잡을 수 없이

유지보수가 힘들어집니다. 머리가 아파져요.. 가급적 구체적인 선택자 조합을 통해 자연스럽게 명시도를 높이는 것이 좋습니다.

---

<strong>정답</strong>: justify-content 속성과 align-items 속성을 모두 center로

지정해야 합니다.

<strong>풀이 과정</strong>: Flexbox는 가로축(주축)과 세로축(교차축)을 기준으로

내부 요소들을 정렬합니다. 부모 요소를 flex 컨테이너로 선언한 뒤, 두 속성을 모두 center로 맞추면 내부 요소가 완벽한 정중앙에 위치하게 됩니다.

.container {
  display: flex;
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  height: 100vh; /* 화면 전체 높이 지정 */
}

<strong>justify-content</strong>: 주축(기본값은 가로)을 기준으로 요소들을

어떻게 배치할지 결정합니다.

<strong>align-items</strong>: 교차축(기본값은 세로)을 기준으로 요소들을 어떻게

배치할지 결정합니다.

<strong>팁</strong>: 이 방식을 사용하려면 부모 컨테이너가 화면 전체의 높이값을

가지고 있어야 세로 정중앙 배치가 시각적으로 확인됩니다. (예: height: 100vh;)

<strong>팁2</strong>: flex의 방향이 col이면 다르게 적용됩니다. 가로와 세로로

배우면 나중에 정말 어려워요. 주축과 교차축을 이해하는게 좋습니다. 여러 flex를 중첩해서 쓰는 상황이 있기 때문이죠. 하지만 어렵다면 스타일을 넣다 뺐다 하면서 눈으로 확인하는 방법도 있습니다.

---

MDN Web Docs: 시맨틱 HTML

MDN Web Docs: Event.preventDefault()

MDN Web Docs: 명시도

MDN Web Docs: Flexbox