<strong>제목 태그 (h1 ~ h6)</strong>: 문서의 계층 구조를 나타냅니다.
h1은 페이지당 하나만 사용하는 것이 SEO와 접근성 측면에서 권장됩니다.
<strong>문단 태그 (p)</strong>: 텍스트 문단을 구성합니다.
<strong>목록 태그 (ul, ol, dl)</strong>: 순서 없는 목록, 순서 있는 목록,
설명 목록을 각각 나타냅니다.
<strong>이미지 태그 (img)</strong>: src로 이미지 경로를, alt로 대체
텍스트를 지정합니다.
<strong>링크 태그 (a)</strong>: href로 이동할 URL을, target="_blank"로
새 탭에서 열기를 지정합니다.
<strong>표 태그 (table)</strong>: thead, tbody, tfoot으로 구조를
나누고, colspan, rowspan으로 셀을 병합합니다.
<strong>Open Graph (og 태그)</strong>: 카카오톡, 슬랙 등에서 링크 공유 시
보이는 썸네일·제목·설명을 제어하는 메타 태그입니다. og:title, og:image, og:description 등을 <head> 안에 작성합니다. og 태그가 없으면 플랫폼이 페이지 내용을 추측하므로 의도치 않은 이미지나 텍스트가 표시될 수 있습니다.
<strong>반응형 이미지 (srcset, picture)</strong>: 모바일에서 4K 이미지를
불러오면 데이터 낭비입니다. srcset을 사용하면 브라우저가 화면 크기에 맞는 최적의 이미지를 자동 선택합니다. <picture> 태그는 조건별로 다른 이미지를 지정할 때 씁니다.
<strong>article vs section</strong>: article은 떼어내서 다른 곳에 붙여도
독립적으로 의미가 통하는 콘텐츠(블로그 글, 댓글)에, section은 한 페이지 안에서 주제별 그룹화("소개", "특징", "가격표")에 사용합니다.
<strong>ARIA 속성</strong>: 아이콘만 있는 버튼처럼 시각적으로는 의미가 통하지만
스크린 리더가 읽을 정보가 없을 때 aria-label="검색" 같은 속성을 추가합니다. 단, <div>에 ARIA를 붙이기보다 <button> 같은 시맨틱 태그를 먼저 사용하는 것이 우선입니다.
---
<strong>검색 엔진(SEO)</strong>: 구글 같은 검색 엔진은 <strong> 안의
텍스트에 약간의 가중치를 부여합니다. CSS로 굵게 한 텍스트는 그냥 지나칩니다.
<strong>스크린 리더(접근성)</strong>: 스크린 리더는 <strong> 태그를
만나면 강조된 어조로 읽어줍니다. CSS 굵기는 시각적 변화일 뿐, 음성으로 전달되지 않습니다.
<strong>유지보수</strong>: 나중에 디자인이 바뀌어서 굵기 대신 색상으로
강조하게 되더라도, 시맨틱 태그의 의미는 그대로 유지됩니다.
<strong>스크린 리더 문제</strong>: alt가 없으면 스크린 리더는 이미지
파일명을 그대로 읽어줍니다. IMG_20260315_142307.jpg 같은 파일명이 그대로 읽히면 사용자에게 전혀 유용하지 않은 정보가 전달됩니다.
<strong>SEO 문제</strong>: 검색 엔진은 이미지를 직접 "보지" 못합니다. alt
텍스트를 통해 이미지의 내용을 이해하고 검색 결과에 반영하는데, 이것이 없으면 이미지가 검색에 노출될 기회를 잃습니다.
<!-- 콘텐츠 이미지: 의미 있는 alt 작성 -->
<img src="team-photo.jpg" alt="2026년 봄 스터디 팀원 단체 사진" />
<!-- 장식용 이미지: 빈 alt를 명시 -->
<img src="decorative-line.png" alt="" />---
<strong>접근성</strong>: 스크린 리더가 페이지 구조를 파악해서 "네비게이션
영역으로 이동", "본문 영역으로 이동" 같은 단축 탐색을 제공할 수 있습니다.
<strong>SEO</strong>: 검색 엔진이 페이지의 주제와 구조를 더 정확하게
이해합니다.
<strong>유지보수</strong>: div.container > div.wrapper > div.inner 보다
header > nav > ul이 코드를 읽는 사람에게 훨씬 명확합니다.
<strong>div</strong>: 블록(block) 요소입니다. 한 줄 전체를 차지하며,
위아래로 쌓입니다.
<strong>span</strong>: 인라인(inline) 요소입니다. 콘텐츠의 흐름 안에서
필요한 부분만 감싸며, 줄바꿈이 일어나지 않습니다.
<div>이 문장은 한 줄 전체를 차지합니다.</div>
<p>이 문장에서 <span style="color: red;">이 부분만</span> 빨간색입니다.</p><strong>id</strong>: 페이지 내에서 <strong>유일</strong>해야 합니다. 하나의
요소에만 부여할 수 있고, CSS 우선순위가 클래스보다 높습니다.
<strong>class</strong>: 여러 요소에 <strong>중복</strong>해서 사용할 수
있습니다. 재사용 가능한 스타일을 적용할 때 사용합니다.
---
프론트엔드 스터디 1주차 학습 자료: 마크업 그 이상, 실무를 위한 중급 HTML 가이드
프론트엔드 스터디 2주차 학습 자료: 사용자와 소통하는 폼 & CSS의 시작
---
<strong>폰트와 색상</strong>: font-family로 글꼴을 지정하는 법, 색상을
Hex(#FF5733), RGB, HSL 등으로 표현하는 법을 다룹니다.
<strong>인라인 vs 블록</strong>: HTML 요소마다 화면에서 공간을 차지하는 방식이
다릅니다. <div>는 한 줄 전체를, <span>은 콘텐츠 크기만큼만 차지합니다.
<strong>박스 모델</strong>: 이번 주 가장 중요한 개념입니다. 모든 HTML 요소가
Content → Padding → Border → Margin으로 이루어진 사각형 상자라는 것을 배웁니다.
<strong>box-sizing</strong>: width: 200px을 줬는데 실제로는 250px이 되는
상황이 생깁니다. 왜 그런지, 어떻게 해결하는지를 다룹니다.
<strong>영상</strong>: 제대로 파는 HTML & CSS <strong>구간</strong>: 01:36:21 ~ 02:59:19 (약 1시간 23분) <strong>링크</strong>:
Post Q&A
프론트엔드 스터디 대면 1주차: HTML 마크업과 폼, 그리고 CSS의 시작 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!
비동기와 async/await를 배운 뒤, 대면에서는 API를 단순 호출 방법이 아니라 프론트엔드와 백엔드 사이의 계약으로 바라봅니다. HTTP, REST, CORS, 프록시, API 클라이언트 구조, TanStack Query와 파일 배치까지 연결합니다.