제대로 파는 HTML & CSS - 1주차 진도 시청하기
안녕하세요. 프론트엔드 스터디 1주차에 오신 것을 환영합니다. 이번 주차 영상을 통해 우리는 제목, 문단, 이미지, 표 등 화면에 정보를 나타내는 가장 기본적인 HTML 태그들을 배웠습니다. 브라우저가 화면을 그리는 첫 번째 경험을 하신거에요.
아래 10문제를 막힘없이 풀 수 있다면,
이번 주 학습 영상을 생략하거나, 필요한 부분만 선택적으로 시청하셔도 좋습니다.
바로 하단의 제가 추가로 알면 좋은 개념들을 확인해보세요.
카카오톡이나 슬랙에서 링크를 공유하면 제목, 설명, 이미지가 자동으로 미리보기 카드에 표시되는 것을 본 적이 있으실 겁니다. 이 정보는 HTML을 파싱해서 가져오는 것이 아니라, <head> 태그 내부에 있는 Open Graph (og) 메타 태그를 읽어와서 보여주는 것입니다.
Open Graph는 페이스북이 2010년에 만든 프로토콜로, 웹 페이지가 소셜 미디어에서 어떻게 보일지 제어할 수 있게 해줍니다. 아래처럼 <meta> 태그에 property와 content 속성을 지정하면 됩니다.
<head>
<meta property="og:title" content="프론트엔드 스터디 1주차 모집" />
<meta
property="og:description"
content="웹 개발의 기초부터 탄탄하게 함께 공부해요."
/>
<meta property="og:image" content="https://mysite.com/thumbnail.png" />
<meta property="og:url" content="https://mysite.com/study/week1
만약 og 태그를 설정하지 않으면, 각 플랫폼이 자체 알고리즘으로 페이지 내용을 추측해서 보여주기 때문에 의도하지 않은 텍스트나 이미지가 표시될 수 있습니다. 실무에서는 og 태그 설정이 거의 필수입니다.
하나의 웹 페이지를 데스크톱, 태블릿, 스마트폰 등 다양한 기기에서 열어볼 수 있습니다. 그런데 작은 스마트폰 화면에 4K 해상도의 거대한 이미지를 다운로드하는 것은 데이터 낭비이겠죠? <img>의 srcset 속성이나 <picture> 태그를 사용하면 브라우저가 사용자의 화면 크기와 해상도에 맞춰 가장 적절한 이미지를 스스로 골라 다운로드합니다.
<picture> 태그는 여러 <source>를 나열하고, 조건에 맞는 첫 번째 이미지를 사용합니다. 어떤 조건에도 해당하지 않으면 <img>에 지정된 기본 이미지를 보여줍니다.
<picture>
<source media="(min-width: 800px)" srcset="desktop-image.jpg" />
<img src="mobile-image.jpg" alt="팀 프로젝트 회의 모습" />
</picture>
위 코드에서 브라우저 화면이 800px 이상이면 desktop-image.jpg를, 그보다 작으면 mobile-image.jpg를 불러옵니다. 이 외에도 srcset과 sizes 속성을 <img> 태그에 직접 사용하는 방법도 있습니다.
<img
src="small.jpg"
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
alt="팀 프로젝트 회의 모습"
/>
480w, 800w, 1200w는 각 이미지의 실제 너비(픽셀)를 브라우저에 알려주는
것이고, sizes는 화면 크기에 따라 이미지가 차지할 공간을 알려줍니다.
브라우저는 이 두 정보를 조합해서 최적의 이미지를 선택합니다.
제가 생각했을 때, 시맨틱 HTML을 작성할 때 가장 헷갈리는 부분 중 하나가 <article>과 <section>의 구분입니다. 둘 다 콘텐츠를 묶는 역할을 하지만, 의미가 다릅니다.
<article>: 그 구역만 떼어내서 다른 곳에 붙여넣어도 독립적으로 의미가 통하는 콘텐츠에 사용합니다. 블로그 글, 뉴스 기사, 댓글 하나하나, 상품 카드 등이 해당됩니다.<section>: 하나의 페이지 안에서 주제별로 내용을 그룹화할 때 사용합니다. "소개", "특징", "가격표"처럼 논리적으로 구분되는 영역을 나눌 때 적합합니다.<!-- 블로그 페이지 예시 -->
<section>
<h2>최신 글 목록</h2>
<article>
<h3>HTML 시맨틱 태그의 중요성</h3>
<p>시맨틱 태그를 사용하면 검색 엔진과 스크린 리더가...</p>
</article>
<article>
<h3>CSS Grid vs Flexbox</h3>
<p>레이아웃을 잡을 때 어떤 도구를 선택해야 할까...</p>
</article>
</section
웹사이트를 눈으로 보는 사람은 돋보기 아이콘이 있는 버튼을 보고 "검색 버튼이구나"라고 바로 알 수 있습니다. 하지만 시각 장애가 있어 스크린 리더기를 사용하는 분들은 코드 상의 텍스트 정보에 의존합니다. 아이콘만 들어있는 버튼에 텍스트가 없다면, 스크린 리더는 "버튼"이라고만 읽어주게 됩니다.
이때 ARIA(Accessible Rich Internet Applications) 속성을 활용하면 시각적으로는 보이지 않지만 스크린 리더가 읽을 수 있는 정보를 추가할 수 있습니다.
<!-- aria-label: 요소에 이름표를 붙여줍니다 -->
<button aria-label="검색">
<img src="search-icon.png" alt="" />
</button>
<!-- aria-hidden: 장식용 요소를 스크린 리더가 무시하게 합니다 -->
<span aria-hidden="true">★</span> 평점 4.5점
<!-- aria-expanded: 열림/닫힘 상태를 알려줍니다 -->
<button aria-expanded="false">메뉴 열기</button>
다만 ARIA를 사용하기 전에, 먼저 올바른 시맨틱 HTML 태그를 사용하는 것이 우선입니다. 예를 들어, 클릭 가능한 요소라면 <div>에 ARIA를 잔뜩 붙이는 것보다 <button> 태그를 쓰는 것이 훨씬 낫습니다. ARIA는 시맨틱 태그만으로 부족할 때 보충하는 역할로 생각하면 좋습니다.
다가오는 스터디 모임 전, 아래 질문에 대해 본인만의 생각을 댓글로 남겨주세요.
Q. 웹 접근성과 검색 엔진 최적화(SEO)를 고려할 때,
<img>태그에alt속성을 아예 생략하면 어떤 치명적인 문제가 발생할까요? 또한, 단순히 화면의 여백을 채우기 위한 '장식용 이미지'일 경우에는 이 속성을 어떻게 처리해야 할까요?