(30초 읽기) 코드블럭 라운드 적용 📚

안녕! 👋

코드블럭을 더 예쁘게, 감성 넘치게 바꾸고 싶지 않아?
오늘은 코드블럭에 둥근 라운드 스타일을 초간단하게 적용하는 법을 알려줄게! 🎨

---

1️⃣ 기본 코드블럭 라운드 적용

코드블럭에 둥근 모서리를 주려면 아래 CSS 코드를 적용해봐.

 

.hljs {
  border-radius: 15px; /* 코드블럭 둥글게 */
  border: 1px solid #e1e4e8;
  background: #f6f8fa; /* 깔끔한 배경색 */
  padding: 16px;
}

• border-radius: 모서리를 둥글게 만들어줘! (15px이면 적당히 둥글어져!)
• background: 배경색을 #f6f8fa로 바꿔서 눈에 편한 색상으로!
• padding: 코드블럭 내부 여백을 줘서 더 깔끔하게!

✨ 결과

✅ 코드블럭이 둥글둥글해지고, 깔끔한 배경 덕분에 시인성도 좋아졌어! 🛝

---

2️⃣ 언어 표기 영역에도 라운드 추가 💡

코드블럭 언어 표기 부분도 통일감 있게 라운드 처리할 수 있어!

 

.codeLabel > div {
  border-radius: 15px; /* 언어 표기 라운드 */
  background-color: #f6f8fa;
  color: #586069;
  padding: 6px 10px;
  border: 1px solid #e1e4e8;
  margin-bottom: 5px; /* 코드블럭과 간격 */
}

• border-radius: 언어 표기 부분도 둥글게 만들어줘!
• background-color: 코드블럭 배경색과 통일해서 디자인 완성도 Up!
• color: 언어명 텍스트는 눈에 잘 띄는 색상으로!
• margin-bottom: 코드블럭과 간격을 줘서 시각적 안정감 Up!

🎉 완성된 결과는?

✅ 코드블럭과 언어 표기 모두 세련된 라운드 디자인으로 변신!
✅ MZ 감성의 깔끔한 스타일링 완성! 🎨✨

---

🎨 디자인 팁

• border-radius는 15px ~ 20px 정도가 제일 자연스러워.
• background-color는 너무 진하거나 눈부신 색상보다는 중간 톤이 좋아!
• color는 가독성을 위해 회색 계열로!

---

🚀 정리 & 꿀팁

• border-radius로 모서리 둥글게 처리해서 세련된 느낌을 줄 수 있어.
• background-color를 적절히 사용하면 눈에 편안한 코드블럭 완성!
• 코드블럭에 디자인 포인트를 주고 싶다면 언어 표기에도 통일감 있게 적용해봐!
• 프론트엔드 개발자라면 꼭 알아야 할 디자인 스킬 중 하나야! 🎨