[🥸HTML/CSS]📝클래스 이름 규칙, 네이밍 정하기➰랜딩 페이지

📍 진행상황

1️⃣ 클래스 명세서 작성
2️⃣ 클래스 네이밍 변경

---

📌 클래스 명세서란?

클래스명세서(v1.0).xlsx

1.87MB

 

 

프로젝트를 진행할 수록 클래스의 갯수도 늘어나고 이름이 비슷해지는 부분이 많아지는데요.

 

저의 경우에도 랜딩페이지 개발 5일차 때 개발을 하면 할 수록 클래스가 많아짐에 따라

코드를 작성하다가 헷갈려 곤란을 겪었던 적이 있습니다.

 

작은 프로젝트였지만 추후에 시간이 지남에 따라 프로젝트가 커지면, 큰 혼란을 초래할 수 있겠죠?

이처럼 클래스 네이밍은 개발에 있어서 아주 중요한 부분을 차지합니다.

 

이런 상황에서 클래스명세서를 작성하면 개발에 있어서 한결 편해질 수 있는데요.

 

📁 클래스 명세서 작성법

클래스 명세서는 클래스명, 클래스의 역할, 사용 방법, 규칙 등을 명시한 문서라고 할 수 있습니다.

프로젝트의 복잡성, 팀원 수 등에 따라 문서의 요소가 달라질 수 있고

개인 프로젝트라면 최소한 클래스명, 간단한 설명 정도는 있어야 합니다.

---

📁 언더스코어와 하이픈 차이

✅ `_` 언더스코어
✔️ 파일, 이미지, 폴더에 사용
✅ `-` 하이픈
✔️ CSS 네이밍에 사용

---

📁 이미지 최적화(PNG와 SVG 차이)

✅ `SVG`

✔️ 벡터 방식의 이미지 형식

✔️ PNG 보다 용량이 작고 로딩이 빠르다.

 

✅ `PNG`

✔️ 픽셀 방식의 이미지 형식

✔️ 용량이 크고 로딩이 느리다.

 

👉🏻 둘 다 고화질이지만 벡터 이미지를 더 선호합니다!

 

📝 14일차 부트캠프 회고

1️⃣ 잘했던 점
클래스 명세서 작성과 네이밍 변경으로 인해 코드 관리가 더 체계적이고 혼란을 줄일 수 있었습니다.

2️⃣ 부족했던 점
이미지 최적화 관련해서 지식이 부족해서 처음에는 SVG 형식이 용량이 더 큰 줄 알았는데 공부해보니
오히려 PNG 파일이 용량이 무겁다는 점이 있었습니다.

3️⃣ 향후 개선 방향
다음 시간에는 이미지 최적화를 하기 위해서 파일 형식을 전부 SVG로 바꾸어보도록 하겠습니다.