문제 URL
https://devchallenges.io/challenge/simple-faq-challenge
나의 풀이
-
Demo URL
https://35y2d.github.io/FAQ/ -
Repository URL
https://github.com/35y2d/FAQ
ChatGPT가 첨삭을 해줬는데 뭔말인지 못 알아듣겠다 ㅜㅜ..
정리하면서 다시 한 번 봐야지...
📌 HTML & CSS 코드 평가 및 첨삭
👉 현재 작성된 HTML & CSS 코드의 장점과 개선할 부분을 구체적으로 분석하고, 최적화된 코드로 첨삭해줄게!
✅ 1. 현재 코드의 장점
✔️ 구조가 명확함 → <h1>과 <h2>로 타이틀을 구분하고, <p>와 리스트(<ol>, <ul>)를 활용하여 FAQ 형식이 잘 정리됨
✔️ 폰트 적용이 잘됨 → Inter 폰트를 Google Fonts에서 불러와 가독성이 좋음
✔️ FAQ 구분이 잘됨 → <hr> 태그를 이용하여 섹션을 나누는 방식이 적절함
✔️ 링크 스타일링 적용 → <a> 태그에 text-decoration: none;을 사용하여 기본 밑줄을 제거하고, 색상을 지정함
❌ 2. 개선할 부분 (HTML)
❌ 1. <hr>의 색상이 적용되지 않을 가능성이 있음
<hr style="color : #D2D5DA">→color속성은<hr>에서 동작하지 않을 수 있음 (border-color사용해야 함)
❌ 2. <p> 태그의 내부 패딩이 필요 이상으로 많음
p { padding-bottom: 20px; padding-top: 20px; }→ 위아래 여백이 커서 가독성을 해칠 가능성이 있음
❌ 3. <div class="questions"> 내부 구조가 조금 더 시맨틱(Semantic)하게 작성될 수 있음
<section>태그를 사용하면 구조가 더 명확해지고 접근성이 향상됨
🔧 3. 최적화된 HTML 코드 (수정본)
📌 수정 사항:
<section>을 사용하여 의미론적 구조 강화<hr>색상 조정 (border-color적용)<p>내부 패딩을 줄이고, 전체적인 마진 조정<a>태그 스타일을 CSS에서 관리하도록 개선
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frequently Asked Questions</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="dev.css">
</head>
<body>
<header class="title-section">
<h1>Frequently Asked Questions</h1>
<p>Browse through the most frequently asked questions</p>
</header>
<main class="questions">
<section>
<h2>How can I track my order?</h2>
<p>You can track your order using the following steps:</p>
<ol>
<li>Go to the Order <a class="link" href="order-tracking.html">Tracking page</a>.</li>
<li>Enter your order number and email address.</li>
<li>Click on the Track Order button to view the current status of your shipment.</li>
</ol>
<p>If you encounter any issues, please visit our <a class="link" href="helpcenter.html">Help Center</a>.</p>
<hr>
</section>
<section>
<h2>What is your return policy?</h2>
<p>We offer a 30-day return policy on most items. Here are some key points:</p>
<ul>
<li><b>Items must be in original condition:</b> Unworn, unused, and unwashed.</li>
<li><b>Include original packaging and tags:</b> All items should be returned with their original packaging and tags.</li>
<li><b>Proof of purchase:</b> A receipt or proof of purchase is required.</li>
</ul>
<p>For more detailed information, read our full <a class="link" href="returnpolicy.html">Return Policy</a>.</p>
</section>
</main>
</body>
</html>🔧 4. 최적화된 CSS 코드 (수정본)
📌 수정 사항:
<hr>의 색상을border-color로 변경<p>태그의 내부 패딩을 줄이고, 대신margin-bottom을 사용<a>태그의 스타일을 별도 클래스로 관리
body {
font-family: "Inter", sans-serif;
color: #030616;
margin: 0;
padding: 0;
}
.title-section {
text-align: center;
padding-bottom: 24px;
}
.questions {
background-color: #F8FAFC;
padding: 36px 12px;
}
h1 {
font-size: 36px;
font-weight: 600;
}
h2 {
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
}
p {
font-size: 16px;
font-weight: 400;
margin-bottom: 16px;
}
li {
margin-bottom: 10px;
}
hr {
border: none;
border-top: 1px solid #D2D5DA; /* 색상 적용 */
margin: 24px 0;
}
.link {
color: #4E80EE;
text-decoration: none;
}📌 5. 수정 후 개선된 점
✅ 시맨틱 구조 강화 → <section> 태그 사용으로 접근성과 의미론적 구조 개선
✅ <hr> 색상 문제 해결 → border-color로 스타일 적용
✅ CSS에서 <a> 태그 스타일 관리 → HTML 내 style="..." 삭제하여 코드 유지보수성 향상
✅ 패딩과 마진 최적화 → <p>와 <h2> 태그의 간격을 조정하여 가독성 개선
📌 결론
💡 기존 코드에서 큰 문제는 없었지만, 더 최적화된 방식으로 작성하면 유지보수와 가독성이 좋아짐
💡 시맨틱 태그(<section>, <main>)를 활용하여 구조적으로 더 깔끔한 HTML 코드로 개선 가능
💡 CSS에서 <a> 스타일을 class="link"로 관리하여 코드 일관성을 높임
📌 추가 질문 가능! 예를 들어…
Q1: 반응형(모바일 대응)으로 만들고 싶은데 어떻게 해야 해?
Q2: FAQ 리스트가 많아질 때, 아코디언(클릭하면 열리는) 기능을 추가하려면?
Q3: CSS를 Tailwind나 Bootstrap을 적용해서 간소화할 수 있을까?
