프론트엔드스터디HTMLCSSForm웹접근성

프론트엔드 스터디 대면 1주차: HTML 마크업과 폼, 그리고 CSS의 시작

2026년 3월 27일12분 읽기

1. 저번 주 복습

지난주에는 HTML의 기본 구조와 자주 쓰이는 태그들을 배웠습니다. 핵심만 빠르게 짚어보겠습니다.

HTML 기본 태그

제목 태그 (h1 ~ h6): 문서의 계층 구조를 나타냅니다. h1은 페이지당 하나만 사용하는 것이 SEO와 접근성 측면에서 권장됩니다.
문단 태그 (p): 텍스트 문단을 구성합니다.
목록 태그 (ul, ol, dl): 순서 없는 목록, 순서 있는 목록, 설명 목록을 각각 나타냅니다.
이미지 태그 (img): src로 이미지 경로를, alt로 대체 텍스트를 지정합니다.
링크 태그 (a): href로 이동할 URL을, target="_blank"로 새 탭에서 열기를 지정합니다.
표 태그 (table): thead, tbody, tfoot으로 구조를 나누고, colspan, rowspan으로 셀을 병합합니다.

학습 자료에서 다룬 추가 개념

1주차 학습 자료에서는 강의 영상에서 다루지 않은 실무 개념들을 추가로 다뤘습니다. 글로만 읽으셨을 테니 핵심만 다시 짚어보겠습니다.

Open Graph (og 태그): 카카오톡, 슬랙 등에서 링크 공유 시 보이는 썸네일·제목·설명을 제어하는 메타 태그입니다. og:title, og:image, og:description 등을 <head> 안에 작성합니다. og 태그가 없으면 플랫폼이 페이지 내용을 추측하므로 의도치 않은 이미지나 텍스트가 표시될 수 있습니다.
반응형 이미지 (srcset, picture): 모바일에서 4K 이미지를 불러오면 데이터 낭비입니다. srcset을 사용하면 브라우저가 화면 크기에 맞는 최적의 이미지를 자동 선택합니다. <picture> 태그는 조건별로 다른 이미지를 지정할 때 씁니다.
article vs section: article은 떼어내서 다른 곳에 붙여도 독립적으로 의미가 통하는 콘텐츠(블로그 글, 댓글)에, section은 한 페이지 안에서 주제별 그룹화("소개", "특징", "가격표")에 사용합니다.
ARIA 속성: 아이콘만 있는 버튼처럼 시각적으로는 의미가 통하지만 스크린 리더가 읽을 정보가 없을 때 aria-label="검색" 같은 속성을 추가합니다. 단, <div>에 ARIA를 붙이기보다 <button> 같은 시맨틱 태그를 먼저 사용하는 것이 우선입니다.

2. 저번 주 과제 정답 및 풀이

대면 0주차 질문

Q. 웹 페이지에서 시각적으로 완전히 똑같이 굵게 보이는 두 단어가 있습니다. 하나는 CSS로 굵기만 준 것이고, 다른 하나는 HTML의 <strong> 태그를 사용한 것입니다. 눈에는 똑같이 보이는데, 왜 실무에서는 <strong> 같은 시맨틱 태그를 써야 한다고 할까요?

CSS의 font-weight: bold는 순수하게 시각적인 스타일만 변경합니다. 브라우저, 검색 엔진, 스크린 리더 모두 "이 텍스트가 중요하다"는 사실을 알 수 없습니다. 반면 <strong> 태그는 의미론적(Semantic)으로 "이 텍스트가 내용상 중요하다"는 정보를 전달합니다.

검색 엔진(SEO): 구글 같은 검색 엔진은 <strong> 안의 텍스트에 약간의 가중치를 부여합니다. CSS로 굵게 한 텍스트는 그냥 지나칩니다.
스크린 리더(접근성): 스크린 리더는 <strong> 태그를 만나면 강조된 어조로 읽어줍니다. CSS 굵기는 시각적 변화일 뿐, 음성으로 전달되지 않습니다.
유지보수: 나중에 디자인이 바뀌어서 굵기 대신 색상으로 강조하게 되더라도, 시맨틱 태그의 의미는 그대로 유지됩니다.

핵심은 "보이는 것"과 "의미하는 것"은 다르다는 점입니다. 실무에서는 항상 의미를 먼저 생각하고, 스타일은 CSS로 분리하는 것이 좋습니다.

학습 자료 1주차 과제

Q. 웹 접근성과 검색 엔진 최적화(SEO)를 고려할 때, <img> 태그에 alt 속성을 아예 생략하면 어떤 치명적인 문제가 발생할까요? 또한, 단순히 화면의 여백을 채우기 위한 '장식용 이미지'일 경우에는 이 속성을 어떻게 처리해야 할까요?

alt 속성을 생략하면 두 가지 큰 문제가 생깁니다.

스크린 리더 문제: alt가 없으면 스크린 리더는 이미지 파일명을 그대로 읽어줍니다. IMG_20260315_142307.jpg 같은 파일명이 그대로 읽히면 사용자에게 전혀 유용하지 않은 정보가 전달됩니다.
SEO 문제: 검색 엔진은 이미지를 직접 "보지" 못합니다. alt 텍스트를 통해 이미지의 내용을 이해하고 검색 결과에 반영하는데, 이것이 없으면 이미지가 검색에 노출될 기회를 잃습니다.

그렇다면 장식용 이미지는 어떻게 할까요? 빈 alt 속성(alt="")을 명시적으로 작성합니다.

html

<!-- 콘텐츠 이미지: 의미 있는 alt 작성 -->
<img src="team-photo.jpg" alt="2026년 봄 스터디 팀원 단체 사진" />

<!-- 장식용 이미지: 빈 alt를 명시 -->
<img src="decorative-line.png" alt="" />

alt=""를 작성하면 스크린 리더는 이 이미지를 의도적으로 건너뜁니다. 반면 alt 속성 자체를 생략하면 스크린 리더가 이미지를 무시해야 할지 판단할 수 없어서 파일명을 읽어버립니다. "빈 값을 넣는 것"과 "속성을 빼는 것"은 완전히 다른 결과를 만듭니다.

3. 면접 질문

이번 주 범위와 관련된 실제 면접 질문들을 함께 생각해봅시다. 정답을 외우기보다는 자신만의 말로 설명하는 연습을 해보세요.

Q1. 시맨틱 HTML이 무엇이고, 왜 중요한가요?

시맨틱(Semantic) HTML은 태그 자체가 콘텐츠의 의미와 역할을 나타내는 마크업 방식입니다. 예를 들어 <nav>는 네비게이션, <article>은 독립적인 콘텐츠, <header>는 머리말 영역이라는 뜻을 담고 있습니다.

모든 것을 <div>로 작성해도 화면에 보이는 결과는 동일할 수 있습니다. 하지만 시맨틱 태그를 사용하면 세 가지 이점이 있습니다.

접근성: 스크린 리더가 페이지 구조를 파악해서 "네비게이션 영역으로 이동", "본문 영역으로 이동" 같은 단축 탐색을 제공할 수 있습니다.
SEO: 검색 엔진이 페이지의 주제와 구조를 더 정확하게 이해합니다.
유지보수: div.container > div.wrapper > div.inner 보다 header > nav > ul이 코드를 읽는 사람에게 훨씬 명확합니다.

Q2. `div`와 `span`의 차이는 무엇인가요?

둘 다 의미 없는 범용 컨테이너이지만, 표시 방식(display)이 다릅니다.

div: 블록(block) 요소입니다. 한 줄 전체를 차지하며, 위아래로 쌓입니다.
span: 인라인(inline) 요소입니다. 콘텐츠의 흐름 안에서 필요한 부분만 감싸며, 줄바꿈이 일어나지 않습니다.

html

<div>이 문장은 한 줄 전체를 차지합니다.</div>
<p>이 문장에서 <span style="color: red;">이 부분만</span> 빨간색입니다.</p>

Q3. `id`와 `class`의 차이는 무엇인가요?

id: 페이지 내에서 유일해야 합니다. 하나의 요소에만 부여할 수 있고, CSS 우선순위가 클래스보다 높습니다.
class: 여러 요소에 중복해서 사용할 수 있습니다. 재사용 가능한 스타일을 적용할 때 사용합니다.

실무에서는 스타일링에 id를 사용하는 것을 지양합니다. 우선순위가 너무 높아서 나중에 스타일을 덮어쓰기 어렵기 때문입니다. id는 주로 JavaScript에서 특정 요소를 잡거나, <label>의 for 속성 연결 용도로 사용합니다.

4. 관련 포스팅

5. 다음 주 안내

다음 주에는 CSS의 핵심인 박스 모델(Box Model)과 레이아웃 기초를 배웁니다. 모든 HTML 요소가 사각형 상자로 이루어져 있다는 개념을 이해하고, margin, padding, border의 차이를 익히는 것이 목표입니다.

앞으로 학습 자료에서 Tailwind CSS나 React에서의 사용법을 함께 언급하는 내용이 많아집니다. 지금 당장 Tailwind를 쓸 줄 알 필요는 없지만, 미리 비교해두는 이유가 있습니다. 우리가 지금 배우는 순수 CSS 개념(박스 모델, Flexbox, Position 등)은 Tailwind 같은 유틸리티 프레임워크의 기반 원리입니다. 나중에 Tailwind의 p-4, flex, absolute 같은 클래스를 만나면 "아, 이게 padding: 1rem이구나", "이게 display: flex구나"라고 생각하면 더 이해하기 편하니까요.

또한 추후 react를 배우기 시작하면, 바로 tailwindCSS을 스타일링 라이브러리로 가져갈 예정입니다.

다음 주 영상 예습

다음 주 영상(3주차 진도: 02:59:19 ~ 04:28:10)에서는 CSS 스타일링을 본격적으로 시작합니다. 영상을 보기 전에 아래 내용을 가볍게 훑어두면 이해가 빠릅니다.

폰트와 색상: font-family로 글꼴을 지정하는 법, 색상을 Hex(#FF5733), RGB, HSL 등으로 표현하는 법을 다룹니다.
인라인 vs 블록: HTML 요소마다 화면에서 공간을 차지하는 방식이 다릅니다. <div>는 한 줄 전체를, <span>은 콘텐츠 크기만큼만 차지합니다.
박스 모델: 이번 주 가장 중요한 개념입니다. 모든 HTML 요소가 Content → Padding → Border → Margin으로 이루어진 사각형 상자라는 것을 배웁니다.
box-sizing: width: 200px을 줬는데 실제로는 250px이 되는 상황이 생깁니다. 왜 그런지, 어떻게 해결하는지를 다룹니다.

사전 과제

아래 영상의 2주차 진도 구간(01:36:21 ~ 02:59:19)을 시청해주세요. 사용자 입력(Form)부터 CSS 선택자 규칙까지의 내용입니다.

영상: 제대로 파는 HTML & CSS
구간: 01:36:21 ~ 02:59:19 (약 1시간 23분)
링크:
제대로 파는 HTML & CSS - 2주차 진도 시청하기

Post Q&A

오케이징에게 물어보기

프론트엔드 스터디 대면 1주차: HTML 마크업과 폼, 그리고 CSS의 시작 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!

0/500

포스트 목록

/study/clab-26-1/in-person

파일 9개, 폴더 0개

같은 섹션의 대표 이미지

9 posts · latest first

Study26. 05. 25.

1. 저번 주 복습

HTML 기본 태그

학습 자료에서 다룬 추가 개념

2. 저번 주 과제 정답 및 풀이

대면 0주차 질문

학습 자료 1주차 과제

3. 면접 질문

Q1. 시맨틱 HTML이 무엇이고, 왜 중요한가요?

Q2. div와 span의 차이는 무엇인가요?

Q3. id와 class의 차이는 무엇인가요?

4. 관련 포스팅

5. 다음 주 안내

다음 주 영상 예습

사전 과제

오케이징에게 물어보기

포스트 목록

같은 섹션의 대표 이미지

프론트엔드 스터디 대면 9주차: Next.js 렌더링 진화와 웹.

프론트엔드 스터디 대면 8주차: API와 통신 — 프론트엔드와.

프론트엔드 스터디 대면 7주차: React 입문과 프로젝트 구조.

프론트엔드 스터디 대면 6주차(1): HTML/CSS/JS.

프론트엔드 스터디 대면 6주차(2): AI 시대의 개발 방식과.

프론트엔드 스터디 대면 3주차: 박스 모델 실전,.

프론트엔드 스터디 대면 2주차: 폼(Form), CSS.