프론트엔드 스터디를 기획하며 가장 고민한 부분은 참여자마다 웹 개발 경험의 깊이가 다르다는 점이었어요. 모두가 지루하거나 벅차지 않게 학습하려면, 스터디원들의 사전 지식을 파악하는 것이 중요하다고 생각했어요.
애초에 평가를 위해 설문을 기획한 것이 아니기에, 정답을 물어보지 않았어요. 스터디원들이 부담없이 설문 해준 것을 바탕으로, "아 HTML은 다들 익숙하구나, 그러면 리마인드 정도만 진행해야겠다." 하는 커리큘럼을 정하기 위함이었습니다.
사전 진단 퀴즈 포스트는 질문 의도, 문제, 정답, 관련 개념 설명, 팁으로 이루어지며, 총 5단계로 구성되어 있습니다.
1단계에서는 웹 개발의 밑바탕이 되는 HTML과 CSS의 기본 개념을 확인했습니다.
HTML의 가장 기본적인 뼈대인 '태그의 닫힘' 규칙을 이해하고 있는지 파악하기 위함이에요. 빈 태그와 일반 태그의 차이를 안다면, HTML을 한번이라도 배워보았다는 의미라고 생각하기 때문이죠. 무엇보다, 이것은 제가 코어팀(CLab 개발팀)에서 받은 첫번째 피드백 사항이기도 합니다. 리액트에서도 빈 태그로 만들 수 있는 컴포넌트라면 빈 태그로 만드는 것이 관례이며, self-closing을 지키는게 정말 기초 실력이라고 생각해 1번 문제로 출제했습니다.
텍스트를 진하게 만들거나 줄바꿈을 하려고 합니다. strong 태그처럼 여는 태그와 닫는 태그가 모두 필요한 경우와, br이나 img처럼 닫는 태그 없이 단독으로 쓰는 태그의 차이를 구분해서 사용할 수 있나요?
<p>
<strong>중요한 텍스트 구간입니다.</strong>
<br />
<img src="logo.png" alt="사이트 로고" />
</p>
단순히 태그의 이름을 아는 것을 넘어, 태그의 기능을 완성하는 속성(Attribute)을 정확하게 알고 있는지 확인합니다. 리액트 환경에서 작업하면서 점점 무뎌지는 부분이라고 생각해요. 이미 만들어진 디자인 시스템을 사용하는 것에 익숙해지면서, 검색 엔진 최적화(SEO)이나 웹 접근성에 대해 고민하는 시간이 줄어드는데, 이런 점이 HTML을 다시 배운다면 꼭 집고 넘어가고 싶었다고 생각해 출제했습니다.
웹 페이지에 강아지 사진을 넣고, 그 사진을 누르면 특정 사이트로 이동하게 만들려고 합니다. img 태그의 이미지 경로를 지정하는 속성(src, alt)과 a 태그의 링크 속성(href)을 헷갈리지 않고 정확한 위치에 작성할 수 있나요?
<a href="https://example.com">
<img src="dog.jpg" alt="뛰어노는 강아지" />
</a>
HTML(구조)과 CSS(스타일)를 분리하는 관심사의 분리(Separation of Concerns) 개념을 알고 있는지 확인합니다. 단순히 HTML, CSS를 연결하는 방법으로만 배우면 정말 쉽지만, 앞으로 계속해서 나올 관심사의 분리를 느낄 수 있는 첫 번째 상황이라고 생각해요. 수천 줄의 코드를 여러 개발자가 함께 관리하므로, 관심사를 분리하지 않는다면 유지보수가 어려워집니다. 외부 스타일시트를 연결하여 코드의 재사용성을 높이는 구조적 사고를 묻는 질문입니다.
HTML 파일에 작성한 글자 색상을 파란색으로 바꾸고 싶습니다. 태그 안에 직접 style 속성을 적는 방식과, 파일 위쪽에 style 태그를 쓰는 방식, 그리고 별도의 css 파일을 만들어서 link로 연결하는 방식의 차이점을 알고 있나요?
<head>
<link rel="stylesheet" href="styles.css" />
</head>
CSS 레이아웃을 다루기 위한 기초인 margin, padding 자체를 물으면서 박스 모델(Box Model)의 이해도를 묻는 질문입니다. 여백이 예상과 다르게 적용될 때 브라우저의 개발자 도구를 열어 문제를 추적하려면 margin과 padding의 차이를 정확히 알아야 해요. 그냥 간격을 맞출려면 margin이든 padding이든 맞출 수 있는데, 그렇게 맞춰둔 걸 다른 곳에서 재사용한다면, 분명 밀려날꺼에요.
버튼을 하나 만들었는데, 글자 주변의 '내부 여백'을 넓히고 싶고, 다른 버튼과의 '외부 간격'도 띄우고 싶습니다. 이때 margin과 padding 중 어떤 것을 어디에 적용해야 하는지 정확히 알고 있나요?
.button {
padding: 10px 20px; /* 위아래 10px, 양옆 20px의 내부 여백 */
margin-right: 15px; /* 오른쪽 다른 버튼과의 외부 간격 15px */
}
본 사전 진단 퀴즈의 기초 개념은 다음의 공식 문서를 참고하여 작성되었습니다.