본문 바로가기

Sass3

[Bootstrap] 부트스트랩 시작하기 부트스트랩: 웹 페이지 디자인의 혁신 부트스트랩(Bootstrap)은 웹 페이지 디자인과 개발을 더욱 쉽고 효율적으로 만들어주는 프레임워크입니다. 원래는 트위터에서 사용하는 레이아웃과 요소들을 표준화하기 위해 만들어졌으나, 지금은 다양한 웹 페이지에서 활용되고 있는 매우 유명한 라이브러리입니다. 이 글에서는 부트스트랩의 기본적인 개념과 사용 방법에 대해 알아보겠습니다. 부트스트랩의 탄생 배경과 현재 상태 부트스트랩은 원래 트위터에서 레이아웃, 버튼, 폼 등의 디자인을 일관되게 만들기 위한 목적으로 시작되었습니다. 현재까지도 계속 업데이트되고 있으며, 메이저 버전 5까지 출시되어 있습니다. 초기의 트위터 특성은 점점 사라지고, 다양한 웹 페이지 디자인에 활용되고 있습니다. 부트스트랩은 CSS 전처리기인 S.. 2023. 10. 10.
Button scss hover not working 원인과 예제 SASS SCSS :hover 예제와 동작하지 않는 사례 - 원인과 해법 서론 SASS(SCSS)는 CSS의 확장 버전으로, 변수, 중첩 규칙, 함수 등을 사용하여 스타일시트 작성을 간편하고 효율적으로 만들어줍니다. 그리고 :hover는 웹 개발에서 자주 사용되는 유용한 CSS 의사 클래스 중 하나입니다. 하지만 때때로, SASS(SCSS)를 사용할 때 :hover가 원하는 대로 동작하지 않는 사례들이 있습니다. 이러한 문제들을 해결하는 방법과 함께, :hover를 SASS(SCSS)에서 사용하는 예제들을 살펴보겠습니다. :hover 사용 예제 먼저, 간단한 예제를 통해 :hover를 SASS(SCSS)에서 어떻게 사용하는지 살펴보겠습니다. // SCSS .button { background-color:.. 2023. 8. 9.
SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기/성별 통계 CSS 디자인 SASS SCSS에서 :hover 상태일 때 a 태그 아래 각기 다른 색을 동일하게 변경하기 소개 이 문서는 SASS(SCSS)를 사용하여 a 태그 아래에 있는 각 요소의 색상을 동일하게 변경하는 방법에 대해 설명합니다. 이 기술은 간단한데, SCSS의 구조를 활용하여 효과적으로 스타일을 적용할 수 있습니다. 해당 방법을 통해 마우스 오버 시 모든 요소의 색이 반전되는 효과를 구현할 수 있습니다. 상세 설명 먼저, 아래와 같은 HTML 구조를 가정해봅시다. Contents 스페인하숙 3화 미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요 위와 같은 구조에서 SCSS를 활용하여 스타일을 적용해보겠습니다. .latest { .card { .. 2021. 7. 5.