이쁜 박스 공지 만들기 CSS 1가지

이쁜 박스 공지 사항으로 이용하고 있는 이쁜 박스형 공지사항 CSS를 기록형으로 남깁니다. 실제 바로 활용 가능한 CSS로 간단한 조정만 한다면 어렵지 않게 본인 사이트에 맞게 수정도 가능 합니다. 아래 스크린 샷은 실제 타 사이트에 적용한 모습 입니다. 좌측에 녹색 라인과 옅은 회색 배경으로 박스를 간접적으로 표현 및 강조 했습니다.

이쁜 박스 공지 CSS

<div class="notice-box" style="background-color: #f2f2f2; border-left: 6px solid #4CAF50; margin-bottom: 20px; padding: 20px;">
    <p style="margin: 0;">One major benefit of guest posting is the backlink effect. By including links to your own website within your guest post, you can improve your site's search engine ranking and drive more traffic to your content. Join us as a contributor now!</p>
</div>

CSS 코드 설명

위의 CSS 코드는 다음과 같이 작동합니다:
background-color: #f2f2f2;: notice-box 클래스를 가진 요소의 배경색을 #f2f2f2로 설정합니다.
border-left: 6px solid #4CAF50;: notice-box 클래스를 가진 요소의 왼쪽 테두리를 6px 두께의 #4CAF50 색상의 실선으로 설정합니다.
margin-bottom: 20px;: notice-box 클래스를 가진 요소의 아래쪽 여백을 20px로 설정합니다.
padding: 20px;: notice-box 클래스를 가진 요소의 안쪽 여백을 20px로 설정합니다.

내부의 <p> 요소에 대한 스타일은 다음과 같이 작동합니다:
margin: 0;: <p> 요소의 바깥 여백을 제거합니다.


이 CSS 코드는 notice-box 클래스를 가진 요소를 하나의 박스로 만들어주고, 그 안에 텍스트를 포함합니다. 텍스트의 왼쪽에는 6px 두께의 녹색 테두리가 있으며, 안쪽 여백은 20px로 설정되어 텍스트가 테두리에서 멀어지게 됩니다.

• 지난 포스팅에서 소개한 이쁜 박스 CSS 샘플 글과 함께 보면 도움이 될 것입니다.