문제 URL
https://devchallenges.io/challenge/minimal-blog-card
나의 풀이
Demo URL
https://35y2d.github.io/Join-our-newsletter/
Repository URL
https://github.com/35y2d/Join-our-newsletter
🔍 1. 접근성(Accessibility) 개선
문제점
<input type="text">에는label이 없어서 스크린 리더 사용자들이 어떤 입력 필드인지 알기 어려움.- 버튼이 단순
<button>태그라서 의미가 불분명함. <h1>의 역할이 명확하지만,<section>내부에서<header>를 사용하지 않고 있음.
개선 코드
✅ (1) label 추가 및 aria-label 활용
<div class="input">
<label for="userInput" class="visually-hidden">Enter your email address</label>
<input type="email" id="userInput" placeholder="Enter your email address" aria-label="Email address">
</div>🔹 개선 사항
label을 추가했지만,class="visually-hidden"으로 화면에서는 보이지 않게 함(접근성 향상).type="email"을 사용해서 이메일 입력 필드임을 명확히 함.aria-label="Email address"를 추가해 스크린 리더가 입력 필드를 더 정확하게 안내할 수 있도록 함.
✅ (2) 버튼 접근성 개선
<div class="subscribeButton">
<button type="submit" aria-label="Subscribe to newsletter">Subscribe now</button>
</div>🔹 개선 사항
type="submit"을 명확히 명시하여 폼에서 버튼의 역할을 확실히 함.aria-label="Subscribe to newsletter"를 추가하여 버튼이 정확히 어떤 역할을 하는지 설명.
✅ (3) <h1> 내부 <header> 추가
<header>
<h1>Join our newsletter</h1>
</header>🔹 개선 사항
<header>태그를 추가하여 논리적인 문서 구조를 유지하고 SEO에도 긍정적인 영향을 줌.
🔍 2. SEO 개선
문제점
<meta name="description">내용이 어색함.<img>태그에alt속성이 있지만 더 SEO 친화적으로 개선 가능.
개선 코드
✅ (1) meta description 수정
<meta name="description" content="Subscribe to our newsletter to receive exclusive deals, latest collections, and special offers every week.">🔹 개선 사항
- 기존 문장은 문법이 어색하고 SEO에 적합하지 않음. 자연스럽고 검색 최적화에 더 효과적인 문장으로 수정.
✅ (2) alt 속성 개선
<img src="logo.svg" alt="Brand logo representing our newsletter service" loading="eager" width="52" height="52">🔹 개선 사항
- 단순 "The logo of our service" → "Brand logo representing our newsletter service" 로 변경해 의미를 명확하게 함.
🔍 3. 유지보수성 및 간결함
문제점
- CSS에서
margin을 중복해서 선언(e.g.,.main내부). max-width를 개별 요소마다 지정하지 않고section에서 설정하는 게 더 효율적임.
개선 코드
✅ (1) 중복된 margin 제거
.main {
color: #6C727F;
margin: 0 auto 60px auto;
max-width: 500px;
word-wrap: break-word;
overflow-wrap: break-word;
}🔹 개선 사항
- 기존에는
margin-top: 0; margin-bottom: 60px; margin: 0 auto;로 선언했지만,margin: 0 auto 60px auto;로 한 줄로 정리. overflow-wrap: anywhere;는 최신 브라우저에 맞춰 최적화되므로 유지.
✅ (2) max-width를 section에서 설정
section {
max-width: 600px;
margin: 0 auto;
}🔹 개선 사항
- 개별 요소마다
max-width를 설정하는 대신section에서 전체 적용해 유지보수성을 높임.
🔍 4. 전체 코드 (개선된 코드)
✅ index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Subscribe to our newsletter to receive exclusive deals, latest collections, and special offers every week.">
<title>Join our newsletter</title>
<link rel="preload" as="image" href="logo.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="stylesheet" href="stylesheet.css" media="print" onload="this.media='all'">
</head>
<body>
<section>
<header>
<figure class="image">
<img src="logo.svg" alt="Brand logo representing our newsletter service" loading="eager" width="52" height="52">
</figure>
<h1>Join our newsletter</h1>
</header>
<article class="main">
<p>Keep up with our latest collections, exclusive deals, and special offers!
We introduce a new collection every week, so stay tuned to snag the
hottest items just for you.</p>
</article>
<div class="box">
<div class="input">
<label for="userInput" class="visually-hidden">Enter your email address</label>
<input type="email" id="userInput" placeholder="Enter your email address" aria-label="Email address">
</div>
<div class="subscribeButton">
<button type="submit" aria-label="Subscribe to newsletter">Subscribe now</button>
</div>
<footer class="ps">
<p>Your email is 100% confidential and won’t send you any spam.</p>
</footer>
</div>
</section>
</body>
</html>✅ stylesheet.css
section {
font-family: "Inter", sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.image {
margin-top: 80px;
}
.main {
color: #6C727F;
margin: 0 auto 60px auto;
max-width: 500px;
word-wrap: break-word;
overflow-wrap: break-word;
}
.input input {
width: 100%;
height: 50px;
text-align: center;
}
.subscribeButton button {
width: 100%;
height: 50px;
text-align: center;
}
.box {
box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.03), 0px 8px 12px 0px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
}💡 최종 리뷰
- ✅ 접근성:
label,aria-label,button type추가 - ✅ SEO:
meta description,alt최적화 - ✅ 유지보수성: 중복
margin제거,max-width적용 - ✅ 간결성: 불필요한 속성 정리, 가독성 개선
해야할 것들을 합니다