안녕하세요 이번 게시글에서는 HTML, CSS를 활용해서 CTA를 만들어보겠습니다.
CTA란 Call to action의 약자로 유저의 즉각적인 반응을 유도하거나 즉각적인 판매를 장려하기 위한 마케팅 용어입니다.
보통 메인 페이지에 서비스를 설명할 수 있는 페이지로 이동하게끔 하는 버튼을 놓거나 사진을 배치하는 편입니다.
우선 구현하려고하는 CTA 예시입니다.
다음은 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
/* container 클래스는 디자인 요소를 위한 CSS 스타일 정의 */
background-color: white; /* 배경색은 흰색 */
color: black; /* 글자색은 검은색 */
overflow: hidden; /* 내용이 넘쳐도 숨김 */
position: relative; /* 상대적 위치 */
display: flex; /* Flexbox 레이아웃 사용 */
align-items: center; /* 가로축 중앙 정렬 */
flex-direction: row; /* 요소들을 행 방향으로 배치 */
border: 2px solid #333333; /* 검은색 테두리 */
background-color: #f5f5f5; /* 회색 배경 */
}
.text-container {
/* 텍스트를 담는 컨테이너에 대한 스타일 */
width: 100%; /* 너비 100% */
padding: 12px 24px; /* 상하 12px, 좌우 24px의 패딩 */
z-index: 20; /* z-index로 레이어 순서 조정 */
}
.title {
font-size: 2.25rem; /* 제목 글자 크기 36px */
font-weight: 800; /* 굵은 글씨 */
line-height: 1.2; /* 줄 간격 */
}
.subtitle {
font-size: 1rem; /* 부제목 글자 크기 16px */
margin-top: 16px; /* 위쪽 마진 16px */
color: #9ca3af; /* 회색 계열의 글자색 */
}
.button-container {
margin-top: 32px; /* 위쪽 마진 32px */
display: flex; /* Flexbox 레이아웃 사용 */
justify-content: flex-start; /* 시작 부분에 내용 정렬 */
}
.button {
padding: 8px 16px; /* 상하 8px, 좌우 16px 패딩 */
background-color: #10b981; /* 배경색은 녹색 */
color: white; /* 글자색은 흰색 */
border: none; /* 테두리 없음 */
border-radius: 0.375rem; /* 모서리 둥글게 */
font-size: 1rem; /* 글자 크기 16px */
font-weight: 600; /* 글자 두께 */
cursor: pointer; /* 커서 모양은 포인터 */
transition: background-color 0.2s ease-in; /* 배경색 변화에 애니메이션 효과 */
}
.button:hover {
background-color: #059669; /* 버튼 위에 마우스를 올리면 색상 변경 */
}
.image-section {
display: flex; /* 이미지 섹션에 Flexbox 레이아웃 적용 */
gap: 16px; /* 요소 사이 간격 16px */
padding: 16px; /* 패딩 16px */
align-items: center; /* 가로축 중앙 정렬 */
}
.image {
width: 50%; /* 이미지 너비 50% */
border-radius: 0.375rem; /* 이미지 모서리 둥글게 */
}
</style>
</head>
<body>
<div class="container">
<div class="text-container">
<h2 class="title">
<span>Mother earth hosts your travel</span>
</h2>
<p class="subtitle">
The state of Utah in the United States is home to lots of beautiful
National Parks, Bryce National Canyon Park ranks as three of the most
magnificent & awe-inspiring.
</p>
<div class="button-container">
<button type="button" class="button">Get started</button>
</div>
</div>
<div class="image-section">
<img
src="/img1"
class="image"
alt="Landscape"
/>
<div>
<img
src="/img2"
class="image"
alt="Landscape"
/>
<img
src="/img3"
class="image"
alt="Landscape"
/>
</div>
</div>
</div>
</body>
</html>'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] 레이아웃 만들기 (0) | 2024.03.16 |
|---|---|
| [HTML/CSS] Bootstrap으로 아코디언 만들기 (0) | 2024.03.12 |
| [HTML/CSS] Bootstrap으로 네비게이션 드로어 만들기 (0) | 2024.02.24 |
| [HTML/CSS] 슬라이드쇼 만들기 (0) | 2024.02.16 |
| [HTML/CSS] 탭 메뉴 만들기 (0) | 2024.02.07 |
