1단계에서 웹의 뼈대와 장식을 입히는 기본기를 확인했다면, 2단계에서는 이를 실제 서비스 환경에 맞게 '제대로' 활용하는 방법을 점검합니다.
의미 있는 마크업을 통한 검색 엔진 최적화(SEO), 브라우저의 기본 동작 제어, 복잡한 스타일 충돌 해결, 그리고 현대적인 레이아웃 기법은 프론트엔드 개발자를 꿈꾼다면 가장 고민해야 할 부분이라고 생각하기에 중점적으로 출제했어요.
단순히 화면에 보이는 결과물을 위해서라면, div와 span이면 충분하기에 시맨틱 태그에 대해 잘 모를 수 있겠다고 생각해 출제한 문제입니다. div 태그만 남발하는 것에 'div soup'라는 말이 있을 정도로 유명한 허수 판독기이기에 중요하게 생각해야하는 개념이에요.
시각 장애인용 스크린 리더기를 지원하거나 구글 검색 상단에 노출되게 하려고 합니다. 화면을 모두 div로만 구성하는 것과 header, main 등의 시맨틱 태그를 목적에 맞게 활용하는 것은 결과적으로 어떤 차이를 만들까요?
<div class="header">로고 및 메뉴</div>
<div class="content">메인 기사 내용</div>
<header>로고 및 메뉴</header>
<main>메인 기사 내용</main>
브라우저에 내장된 고유의 동작 원리를 이해하고, 이를 자바스크립트로 제어할 수 있는지 파악합니다. 리액트와 같은 라이브러리를 사용해 화면 깜빡임 없이 데이터를 처리하는 SPA(Single Page Application)를 개발하기 위해 반드시 짚고 넘어가야 하는 개념입니다.
회원가입 폼을 만들었습니다. 사용자가 정보를 다 입력하고 button을 눌렀는데, 기껏 입력한 정보가 화면 새로고침과 함께 다 날아가 버렸습니다. form 태그의 기본 제출(Submit) 동작을 막으려면 어떻게 처리해야 할까요?
const formElement = document.querySelector("form");
formElement.addEventListener("submit", function (event) {
event.preventDefault(); // 화면 새로고침 방지
console.log("폼 데이터 전송을 자바스크립트가 가로챘습니다.");
});
많은 사람들이 CSS가 중요하면 얼마나 중요하겠어 하고 넘어가는 개념들이 많아요. 제가 생각했을 때, 아직도 어렵고 아직도 헷갈리는 개념은 JS도 HTML도 아닌 CSS인거 같아요. 스타일이 겹치거나 내가 작성한 CSS가 화면에 적용되지 않을 때가 진짜 진짜 많아서, CSS를 얼마나 중요하게 배웠는지 알아보려고 물어봤습니다.
특정 버튼을 꾸미려고 CSS 파일에 class="btn"으로 파란색을, id="submit-btn"으로 빨간색을 지정했습니다. 이 버튼은 최종적으로 무슨 색으로 보이며, CSS의 우선순위 규칙은 어떻게 동작할까요?
/* 명시도 점수가 낮음 */
.btn {
background-color: blue;
}
/* 명시도 점수가 높음 (이 스타일이 적용됨) */
#submit-btn {
background-color: red;
}
모던 웹 개발에서 거의 다 쓰는 듯한 flexbox와 grid에 대한 질문입니다. 반응형을 구현할 때 정말 좋은 기술이며, 자주 언급되기에 많이들 알고 있지 않을까 생각해서 출제했습니다.
모바일 화면 한가운데에 로그인 박스를 정렬하고 싶습니다. 부모 요소에 display 속성을 flex로 주었다면, 가로와 세로 모두 정중앙에 오도록 하기 위해 어떤 속성 두 가지를 추가해야 할까요?
.container {
display: flex;
justify-content: center; /* 가로 중앙 정렬 */
align-items: center; /* 세로 중앙 정렬 */
height: 100vh; /* 화면 전체 높이 지정 */
}
본 사전 진단 퀴즈의 기초 개념은 다음의 공식 문서를 참고하여 작성되었습니다.