아임웹 기본 게시판이 마음에 들지 않을 때 – 간단한 CSS로 게시글 꾸미기
왜 이 글을 쓰게 되었나요?
아임웹으로 홈페이지를 만들고 게시판을 사용하다 보니, 기본 디자인이 너무 밋밋하고 밋밋해서 아쉬운 마음이 들었습니다. 특히 중요한 공지사항이나 소식을 올릴 때는 더욱 전문적이고 읽기 좋은 디자인이 필요했죠.
“게시글마다 일일이 꾸미기는 번거롭고, 그렇다고 기본 디자인 그대로 두기에는 너무 아쉽다…”
이런 고민을 하는 분들을 위해 CSS 코드를 한 번만 설정하면 모든 게시글에 자동으로 예쁜 스타일이 적용되는 방법을 공유합니다.
🎯 이 방법의 장점
- ✅ 한 번 설정으로 모든 게시글에 자동 적용
- ✅ SEO에 최적화된 폰트 크기와 구조
- ✅ 모바일에서도 깔끔하게 보이는 반응형 디자인
- ✅ 전문적이고 깔끔한 디자인
- ✅ 한글 읽기에 최적화된 스타일
🛠️ 설정 방법
1단계: Header Code 찾아가기
- 아임웹 관리자페이지 접속
- 환경설정 → SEO(검색엔진최적화) 메뉴 선택
- Header Code 섹션 찾기
2단계: CSS 코드 붙여넣기
아래 코드를 복사해서 Header Code에 붙여넣으세요.
<style>
/* 아임웹 게시판 자동 스타일링 */
.s-board-wrap,
.board-wrap,
.board-container {
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.7;
color: #2c3e50;
}
/* 게시글 본문 영역 */
.board-detail-wrap .board-content,
.content-wrap,
.text-content {
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.7;
color: #2c3e50;
font-size: 16px;
word-break: keep-all;
word-wrap: break-word;
}
/* H1 - 메인 제목 (SEO 최적화 32px) */
.board-detail-wrap h1,
.content-wrap h1,
.text-content h1 {
color: #27ae60 !important;
font-size: 32px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
margin: 0 0 20px 0 !important;
text-align: left !important;
letter-spacing: -0.5px !important;
}
/* H2 - 부제목 (SEO 최적화 24px) */
.board-detail-wrap h2,
.content-wrap h2,
.text-content h2 {
color: #34495e !important;
font-size: 24px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin: 30px 0 15px 0 !important;
text-align: left !important;
letter-spacing: -0.3px !important;
}
/* H3 - 소제목 (SEO 최적화 20px) */
.board-detail-wrap h3,
.content-wrap h3,
.text-content h3 {
color: #2980b9 !important;
font-size: 20px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin: 25px 0 12px 0 !important;
text-align: left !important;
padding-bottom: 8px !important;
border-bottom: 2px solid #27ae60 !important;
letter-spacing: -0.2px !important;
}
/* 본문 단락 최적화 */
.board-detail-wrap p,
.content-wrap p,
.text-content p {
font-size: 16px !important;
line-height: 1.7 !important;
margin-bottom: 16px !important;
color: #2c3e50 !important;
text-align: left !important;
word-break: keep-all !important;
word-wrap: break-word !important;
}
/* 이미지 최적화 */
.board-detail-wrap img,
.content-wrap img,
.text-content img {
max-width: 100% !important;
height: auto !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(39,174,96,0.1) !important;
margin: 24px 0 !important;
display: block !important;
}
/* 리스트 스타일 개선 - 게시물 내용에만 적용 */
.board-detail-wrap ul,
.content-wrap ul,
.text-content ul {
padding-left: 20px !important;
margin: 16px 0 !important;
}
.board-detail-wrap ul li,
.content-wrap ul li,
.text-content ul li {
margin-bottom: 8px !important;
line-height: 1.6 !important;
color: #2c3e50 !important;
position: relative !important;
}
/* 리스트 마커 커스터마이징 - 게시물 내용에만 */
.board-detail-wrap ul li:before,
.content-wrap ul li:before,
.text-content ul li:before {
content: "•" !important;
color: #27ae60 !important;
font-weight: bold !important;
position: absolute !important;
left: -15px !important;
}
/* 게시판 목록 영역의 점 제거 */
.board-list ul li:before,
.s-board-list ul li:before,
.board-table ul li:before,
.list-wrap ul li:before,
table ul li:before,
tbody ul li:before,
tr ul li:before,
td ul li:before {
content: none !important;
display: none !important;
}
/* 강조 텍스트 */
.board-detail-wrap strong,
.content-wrap strong,
.text-content strong {
color: #27ae60 !important;
font-weight: 700 !important;
}
/* 모바일 반응형 최적화 */
@media (max-width: 768px) {
.board-detail-wrap h1,
.content-wrap h1,
.text-content h1 {
font-size: 28px !important;
}
.board-detail-wrap h2,
.content-wrap h2,
.text-content h2 {
font-size: 22px !important;
}
.board-detail-wrap h3,
.content-wrap h3,
.text-content h3 {
font-size: 18px !important;
}
.board-detail-wrap p,
.content-wrap p,
.text-content p {
font-size: 15px !important;
}
}
</style>
3단계: 저장하고 확인하기
- 저장 버튼 클릭
- 기존 게시물로 가서 변화 확인
- 새로 글을 작성해서 스타일 적용 확인
📸 적용 전후 비교
적용 전 (기본 디자인)
- 제목이 눈에 잘 띄지 않음
- 본문이 답답해 보임
- 전체적으로 밋밋하고 재미없는 느낌
적용 후 (개선된 디자인)
- 제목이 눈에 확 들어옴 (32px 큰 글씨 + 그린 컬러)
- 소제목에 밑줄이 생겨서 구분이 명확
- 본문 줄간격이 넓어져서 읽기 편함
- 이미지에 그림자 효과로 더 세련됨
- 리스트에 예쁜 점(•) 표시
🎨 내 브랜드에 맞게 색상 바꾸기
위 코드에서 색상만 바꾸고 싶다면 다음 부분을 수정하세요:
/* 메인 제목 색상 */
color: #27ae60 !important; /* 이 부분을 원하는 색상으로 */
/* 소제목 밑줄 색상 */
border-bottom: 2px solid #27ae60 !important; /* 이 부분도 함께 */
/* 강조 텍스트 색상 */
color: #27ae60 !important; /* 이 부분도 함께 */
업종별 추천 색상
- 의료/건강:
#3498db(파란색) - 교육:
#9b59b6(보라색) - 음식점:
#e74c3c(빨간색) - 뷰티:
#e91e63(핑크색) - 부동산:
#34495e(짙은 회색)
⚠️ 주의사항
- Header Code 위치를 정확히 찾으세요
- 관리자페이지 → 환경설정 → SEO(검색엔진최적화)
- 코드를 정확히 복사하세요
<style>태그부터</style>태그까지 모두 복사
- 기존에 다른 CSS가 있다면
- 기존 코드 아래쪽에 추가하세요
- 변화가 없다면
- 브라우저 새로고침 (Ctrl+F5)
- 모바일에서는 앱 종료 후 재실행
💡 추가 팁
더 예쁘게 꾸미고 싶다면?
게시글 작성할 때 HTML 모드로 바꿔서 이렇게 써보세요:
<h1>메인 제목</h1>
<h2>부제목</h2>
<h3>소제목</h3>
<p>본문 내용...</p>
<ul>
<li>리스트 항목 1</li>
<li>리스트 항목 2</li>
</ul>
글 구조를 잘 잡으려면?
- H1: 게시글 제목 (1개만)
- H2: 큰 단락 제목
- H3: 작은 단락 제목
- P: 일반 본문
- UL/LI: 목록
🎉 마무리
이제 여러분의 아임웹 게시판도 훨씬 전문적이고 읽기 좋은 모습으로 바뀔 거예요!
한 번만 설정하면 앞으로 올리는 모든 게시글에 자동으로 예쁜 스타일이 적용되니까, 더 이상 밋밋한 게시판 때문에 스트레스받지 마세요.
혹시 적용하면서 문제가 생기거나 궁금한 점이 있으시면 댓글로 남겨주세요. 함께 해결해보겠습니다! 😊
이 글이 도움되셨다면 공유도 부탁드려요! 🙏