class="mx-auto w12 pt-80"
이 클래스 조합은 부트스트랩(BS4 또는 BS5)을 이용한 CSS 스타일링을 나타냅니다. 각 클래스의 의미는 다음과 같습니다:
1.
mx-auto: 이 클래스는 수평 마진을 자동으로 설정합니다. 부트스트랩에서 mx-auto는 요소를 수평 방향으로 중앙에 정렬하는 데 사용됩니다. mx는 margin x-axis(수평 마진)를 의미하며, auto는 자동 마진을 나타냅니다.
2.
w-12: 이 클래스는 요소의 너비를 설정합니다. w-12는 부트스트랩에서 특정 너비를 나타내는데, 정확한 너비는 부트스트랩 버전에 따라 다를 수 있습니다. 일반적으로, w-100은 100% 너비를 의미하므로, w-12는 전체 너비의 약 12%를 나타낼 수 있습니다. 하지만 이것은 부트스트랩 버전과 사용자 정의 스타일에 따라 달라질 수 있습니다.
3.
pt-80: 이 클래스는 상단 패딩(top padding)을 설정합니다. pt-80은 상단에 80 단위의 패딩을 추가합니다. 부트스트랩에서 패딩 값은 보통 0부터 5 사이의 값을 사용하지만, 80과 같은 높은 값은 사용자 정의 클래스일 가능성이 있습니다. 이는 특정 프로젝트나 테마에서 추가적으로 정의된 스타일일 수 있습니다.
이러한 클래스들을 조합하여 HTML 요소에 스타일을 적용할 수 있으며, 부트스트랩의 반응형 디자인 원칙에 따라 다양한 화면 크기에서도 일관된 레이아웃과 디자인을 유지할 수 있습니다.
class="col-9 my-4 pe-5 “
col-9 my-4 pe-5는 Bootstrap 프레임워크에서 사용하는 클래스 조합으로, HTML 요소에 대한 레이아웃 및 스페이싱을 설정합니다. 각 클래스의 의미는 다음과 같습니다:
1.
col-9: 이 클래스는 Bootstrap의 그리드 시스템을 사용하여 요소의 너비를 설정합니다. col-9는 요소가 그리드 시스템의 12개 컬럼 중 9개 컬럼만큼의 너비를 차지하도록 합니다. 즉, 전체 가능 너비의 75% (9/12)를 사용합니다. 이 클래스는 반응형 웹 디자인에서 중요한 역할을 하며, 다양한 화면 크기에서의 요소 크기 조정을 용이하게 합니다.
2.
my-4: 이 클래스는 요소의 상단(margin yaxis top)과 하단(margin yaxis bottom)에 마진을 추가합니다. 4는 Bootstrap에서 정의한 스페이싱 규모 중 하나로, 일반적으로 1.5rem(16px의 기본 폰트 크기를 사용하는 경우 24px)에 해당합니다. 이 클래스는 요소 주변의 수직 공간을 조절하는 데 사용됩니다.
3.
pe-5: 이 클래스는 요소의 오른쪽(padding end)에 패딩을 추가합니다. 5는 상대적으로 큰 패딩 크기를 의미하며, Bootstrap에서는 이를 보통 3rem(48px) 정도로 설정합니다. 이 클래스는 요소의 내부 오른쪽 공간을 조절하는 데 사용됩니다.
이 조합은 요소가 화면의 3/4 너비를 차지하고, 상하 마진이 있으며, 오른쪽에 추가적인 내부 공간(패딩)을 가지도록 스타일링하는 데 사용됩니다. 이러한 스타일링은 웹 페이지의 레이아웃과 공간 분배에 큰 영향을 미칩니다.
.btn.on {
background-color: var(--mint-color);
color: #fff;
}
.btn:hover {
background-color: var(--mint-color);
color: #fff;
transition: all .3s ease-in-out;
}
이 코드는 CSS (Cascading Style Sheets)를 사용하여 웹 페이지 내의 버튼 요소에 대한 스타일을 정의하고 있습니다. 각 부분의 의미는 다음과 같습니다:
1.
.btn.on: 이 선택자는 클래스 btn과 on이 동시에 적용된 HTML 요소를 지정합니다. 예를 들어, <button class="btn on">...</button>와 같이 두 클래스가 모두 적용된 버튼에 대해 스타일을 적용합니다.
•
background-color: var(--mint-color);: 버튼의 배경색을 CSS 변수 -mint-color의 값으로 설정합니다. -mint-color는 다른 곳에서 정의되어야 하는 사용자 정의 속성입니다.
•
color: #fff;: 버튼의 글자색을 흰색(#fff는 흰색을 나타내는 16진 코드)으로 설정합니다.
2.
.btn:hover: 이 선택자는 클래스 btn를 가진 HTML 요소에 마우스를 올렸을 때 적용됩니다. 즉, 사용자가 마우스로 버튼 위에 올라가면 해당 스타일이 적용됩니다.
•
background-color: var(--mint-color);: 마우스 오버 시 버튼의 배경색을 동일하게 CSS 변수 -mint-color의 값으로 설정합니다.
•
color: #fff;: 마우스 오버 시 버튼의 글자색을 흰색으로 유지합니다.
•
transition: all .3s ease-in-out;: 모든 CSS 속성 변화에 대해 0.3초 동안의 전환 효과를 적용합니다. ease-in-out는 전환의 속도가 점점 빨라졌다가 느려지는 효과를 나타냅니다. 이는 버튼에 마우스를 올렸을 때 스타일 변경이 부드럽게 보이도록 합니다.
이 코드는 버튼에 마우스를 올렸을 때 부드러운 색상 전환 효과와 함께 특정 색상과 텍스트 색상을 적용하는 스타일을 정의합니다. CSS 변수를 사용함으로써 색상 값을 쉽게 관리하고 변경할 수 있습니다.