CSS 간단한 광고 프로모션 페이지 만들기

게시일: 24. 10. 13. 수정일: 24. 12. 24.

소요 시간: 5분 조회수: 70

광고 프로모션 페이지를 HTML과 CSS로 만드는 방법에 대해 공부했다. 이 작업은 사용자 경험을 극대화하고, 깔끔하면서도 효과적인 레이아웃을 구성하는 데 중요한 과정이다. 기본적인 광고 프로모션 페이지를 만들어보며 코드의 구조와 디자인을 이해해보았다.

헤더

<!-- 헤더 -->
<div class="header">
    <h1>최대 50% 할인!</h1>
</div>

.header {
    background-color: #4CAF50; /* 헤더 배경색 */
    color: white; /* 텍스트 색상 */
    padding: 20px 0; /* 위아래 여백 */
    text-align: center; /* 텍스트 중앙 정렬 */
}

.header h1 {
    margin: 0; /* 기본 여백 없애기 */
    font-size: 36px; /* 제목 크기 설정 */
}

헤더에는 "최대 50% 할인!"이라는 강렬한 제목을 추가했어. 사용자들이 페이지를 처음 접할 때 가장 먼저 눈에 띄는 부분이기 때문에 h1 태그를 사용해서 이 제목을 강조했다. 이 제목의 크기를 36px로 설정하여 강한 시각적 임팩트를 주고, 배경색은 초록색(#4CAF50)으로 해서 대비를 극대화했다. 텍스트 색상은 흰색으로 정해, 배경과의 조화를 이루도록 했다. 헤더의 안쪽 여백은 20픽셀로 설정해서 여유 있는 공간을 만들어주었다.

메인 콘텐츠

<!-- 메인 프로모션 컨텐츠 -->
<div class="main-content">
    <h2>지금 바로 프로모션을 확인하세요!</h2>
    <p>
        특별한 할인 혜택을 제공하는 이번 프로모션은 단 2주 동안만 진행됩니다.<br>
        서두르세요! 최고의 제품을 가장 저렴한 가격에 만나볼 수 있는 기회를 놓치지 마세요.
    </p>
    <a href="#" class="cta-button">지금 쇼핑하기</a>
</div>

.main-content {
    display: flex; /* 플렉스 박스를 사용하여 배치 */
    flex-direction: column; /* 세로 방향으로 배치 */
    align-items: center; /* 중앙 정렬 */
    padding: 50px 20px; /* 여백 설정 */
    background-color: white; /* 배경색 흰색 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 그림자 효과 */
    margin: 30px; /* 외부 여백 */
}

.main-content h2 {
    font-size: 28px; /* 소제목 크기 설정 */
    margin-bottom: 20px; /* 아래 여백 */
    color: #333; /* 텍스트 색상 */
}

.main-content p {
    font-size: 18px; /* 본문 텍스트 크기 */
    margin-bottom: 30px; /* 아래 여백 */
    color: #666; /* 텍스트 색상 */
    text-align: center; /* 텍스트 중앙 정렬 */
    line-height: 1.5; /* 줄 간격 설정 */
}

.cta-button {
    background-color: #ff5722; /* 버튼 배경색 */
    color: white; /* 버튼 텍스트 색상 */
    padding: 15px 30px; /* 버튼 안쪽 여백 */
    font-size: 18px; /* 버튼 텍스트 크기 */
    text-decoration: none; /* 밑줄 없애기 */
    border-radius: 5px; /* 모서리 둥글게 */
    transition: background-color 0.3s ease; /* 배경색 변화 애니메이션 */
}

.cta-button:hover {
    background-color: #e64a19; /* 마우스 오버 시 색상 변화 */
}

메인 콘텐츠 부분에서는 고객들이 프로모션의 세부사항을 쉽게 확인할 수 있도록 안내하는 내용을 작성했다. 소제목으로 "지금 바로 프로모션을 확인하세요!"를 설정했으며, 이 제목의 크기는 28px로 해서 사용자들의 관심을 끌도록 했다. 본문에는 프로모션의 특징과 기간을 설명하며, 줄 간격을 1.5로 설정하여 읽기 편하도록 했다. 마지막으로, "지금 쇼핑하기"라는 버튼을 만들어 고객이 쉽게 클릭할 수 있도록 했고, 이 버튼은 오렌지색(#ff5722)으로 설정해 클릭 유도 효과를 높였다.

광고 배너

<!-- 광고 배너 -->
<div class="promo-banner">
    한정 수량! 모든 구매 고객에게 무료 선물 증정!
</div>

.promo-banner {
    background-color: #ffeb3b; /* 배너 배경색 */
    color: #333; /* 텍스트 색상 */
    padding: 20px; /* 안쪽 여백 */
    text-align: center; /* 텍스트 중앙 정렬 */
    font-size: 20px; /* 텍스트 크기 */
    margin: 50px 0; /* 위아래 여백 */
    border-radius: 10px; /* 모서리 둥글게 */
    border: 1px solid #ccc; /* 테두리 설정 */
}

오늘은 특별한 프로모션을 강조하기 위한 광고 배너를 추가했다. 이 배너는 한정 수량에 대한 긴급성을 전달하기 위해 밝은 노란색(#ffeb3b)으로 설정했어. 배너 안의 텍스트는 중앙 정렬하고, 배경색과 대비를 이루기 위해 어두운 회색(#333)으로 했다. 배너의 크기를 적절히 조절하고, 위아래 여백을 50픽셀로 설정하여 메인 콘텐츠와의 간격을 유지했다. 이렇게 해서 배너가 더욱 눈에 띄도록 만들었다.

푸터

<!-- 하단 -->
<div class="footer">
    <p>&copy; 2024 광고 프로모션 페이지. 모든 권리 보유.</p>
</div>

.footer {
    background-color: #333; /* 푸터 배경색 */
    color: white; /* 텍스트 색상 */
    text-align: center; /* 텍스트 중앙 정렬 */
    padding: 20px 0; /* 여백 설정 */
    margin-top: 50px; /* 위 여백 */
}

.footer p {
    margin: 0; /* 기본 여백 없애기 */
    font-size: 16px; /* 텍스트 크기 */
}

CSS 간단한 광고 프로모션 페이지 만들기

인기글