배시은님 포트폴리오 2주차 작업 내용 피드백
메가스터디IT아카데미 SpringBoot 백엔드 개발자 과정 주말반 (25.02.22 ~ 25.09.13). 배시은님의 포트폴리오 1주차 작업 내용에 대한 피드백
Posted 
By
6 min read
배시은님 포트폴리오 2주차 작업 내용 피드백
배시은님 포트폴리오 2주차 작업 내용 피드백
작성일: 2025-08-31
github에 push된 코드를 바탕으로 장점, 단점, 그리고 개선사항을 정리했습니다.
HTML,CSS는 최종적으로 화면에 보이는 결과가 가장 우선됩니다. 아래 사항은 참고만 하시고 적용 여부는 본인이 직접 판단하시면 됩니다.
잘된점 (👍 Good)
1. 시맨틱 태그의 적극적인 활용
main/index.html파일의<header>,<main>,<aside>,<footer>등 시맨틱 태그를 적절하게 사용하여 웹 페이지의 구조를 명확하게 표현했습니다. 이는 검색 엔진 최적화(SEO)와 웹 접근성에 큰 도움이 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- main/index.html -->
<body>
<div class="sticky-guard">
<header id="header" style>
...
</header>
</div>
<main id="main" style="margin-top: 112px;">
...
</main>
<aside id="aside-footer">
...
</aside>
<footer id="footer">
...
</footer>
</body>
2. CSS 변수를 활용한 효율적인 스타일 관리
main/style.css파일에서--header-h: 112px;와 같이 CSS 변수를 사용하여 헤더의 높이를 관리하고 있습니다. 이렇게 변수를 사용하면 높이 변경이 필요할 때 여러 곳을 수정할 필요 없이 변수 값만 변경하면 되므로 유지보수성이 매우 향상됩니다.
1
2
3
4
/* main/style.css:319-321 */
:root { --header-h: 112px; }
.sticky-guard { height: var(--header-h); }
3. 웹 접근성을 고려한 aria-* 속성 사용
main/index.html파일의 네비게이션 메뉴, 버튼 등 다양한 요소에aria-label,aria-expanded,aria-haspopup등의aria-*속성을 사용하여 스크린 리더 사용자와 같은 보조 기술 사용자들의 웹 접근성을 높였습니다.
1
2
3
4
5
6
7
8
9
<!-- main/index.html:20-26 -->
<a id="navbarDropdownMenu-a" href="/flavours"
data-bs-toggle="collapse"
data-bs-target="#navbarDropdownMenu-collapse-a"
class="nav-link nav-link-toggle"
aria-current="page"
aria-expanded="false"
aria-haspopup="true">
아이스크림</a>
개선점 (💡 Suggestion)
1. 일관성 없는 CSS 선택자 사용 (제안)
main/style.css파일에서h2, .h2, .heading-2와 같이 여러 선택자를 한 번에 지정하는 부분과h3, .h3, .heading-3처럼 별도로 지정하는 부분이 혼재되어 있습니다. 스타일 규칙을 보다 일관성 있게 관리하기 위해 관련된 heading 스타일은 한 곳에 모아서 정의하는 것을 제안합니다.
1
2
3
4
5
6
7
/* main/style.css:411-415 */
h1, .h1, .heading-1 {
font-size: 48px;
line-height: 64px;
margin: 0 0 16px;
display: block;
}
- 위 코드처럼
h2,h3등 다른 heading 관련 클래스도 함께 그룹화하여 관리하면 가독성과 유지보수성을 높일 수 있습니다.
2. 인라인 스타일(Inline-style) 사용 지양 (권고)
main/index.html및main/flavours.html의 여러 요소에style속성을 직접 사용하여 스타일을 적용하고 있습니다. 예를 들어<main id="main" style="margin-top: 112px;">와 같은 부분입니다.- 인라인 스타일은 CSS 파일에서의 스타일 재정의를 어렵게 만들고, 코드의 일관성을 해칠 수 있습니다. 가급적 외부 CSS 파일(
style.css)에 클래스로 정의하여 적용하는 것을 권장합니다.
1
2
<!-- main/index.html:103 -->
<main id="main" style="margin-top: 112px;">
- 수정 제안:
style.css파일에 아래와 같은 클래스를 추가하고,1 2 3
.main-content { margin-top: 112px; }
- HTML에서는
style속성 대신 클래스를 사용합니다. ```html
```
3. JavaScript 코드 분리 (권고)
main/main.js파일의 내용이<script>태그 안에 그대로 포함되어 있습니다. JavaScript 코드는 별도의.js파일로 완전히 분리하여 관리하는 것이 좋습니다. 현재는 HTML 파일처럼 보이지만 실제로는 JavaScript 코드만 담고 있습니다.- 파일 내용을 아래와 같이 순수한 JavaScript 코드로 변경하고, HTML에서는
src속성으로 이 파일을 참조하도록 하는 것이 일반적입니다.
1
2
3
4
5
6
7
// main/main.js 의 추천 내용
(function () {
const primary = document.getElementById('navbar-primary');
if (!primary) return;
// ... 이하 나머지 JavaScript 코드
})();
- 이렇게 하면 코드의 재사용성과 관리 효율성을 높일 수 있습니다.
총평
전반적으로 웹 표준과 접근성을 잘 고려하여 구조적으로 튼튼한 HTML 마크업을 작성하셨습니다. CSS 또한 변수를 활용하는 등 좋은 시도들이 돋보입니다. 위에 제안된 몇 가지 개선점들을 참고하여 코드를 다듬는다면 더욱 완성도 높은 프로젝트가 될 것입니다. 수고하셨습니다!
This post is licensed under CC BY 4.0 by the author.