2024/12 2

반응형 디자인을 위한 Flex 핵심 / flex 속성 정

⭐️ flex 속성이란?flex는 Flexbox 레이아웃에서 요소가 부모 컨테이너 안에서 공간을 차지하는 방법을 지정하는 단축 속성입니다.flex는 다음 세 가지 속성을 조합한 것입니다:flex-grow: 요소가 남는 공간을 얼마나 많이 차지할지 결정flex-shrink: 컨테이너가 작아질 때 요소가 얼마나 줄어들지 결정flex-basis: 요소의 기본 크기를 설정flex: 로 구성되며, 값이 생략된 경우 기본값은 아래와 같습니다:flex: 0 1 auto; ⭐️ flex 속성의 구성 요소(1) flex-grow: 남는 공간 차지flex-grow는 컨테이너에 남는 공간이 있을 때, 요소가 그 공간을 얼마나 차지할지 결정합니다..container { display: flex; gap: 10px;}...

html,css 2024.12.13

SCSS 초보자를 위한 실전 예제: Mixin, Include, For문 활용하기

SCSS에서 mixin, include, 그리고 for문은 코드 재사용성과 유지 보수를 높이는 데 유용합니다. ⭐️ @mixin은 반복적으로 사용할 CSS 코드를 정의하는 데 사용됩니다.//구문@mixin 이름(매개변수들) { 스타일들;}//예시@mixin button-style($color, $size) { background-color: $color; font-size: $size; border: none; border-radius: 5px; padding: 10px 15px; cursor: pointer;} ⭐️ @include는 정의된 mixin을 실제로 적용할 때 사용합니다.//구문@include 이름(인수들);//예시.my-button { @include button-style(..

html,css 2024.12.03
LIST