천천히, 꾸준히

😺 Study/CSS, SCSS

예시1. true, false로 제어 @mixin btn_radius($h, $radius:true) {height:$h, background:#000; @if $radius { >>true border-radius: $h / 2; }@else{ >>false border:1px solid red; } } .btn { @include btn_radius(30px, false); } 예시2. 조건식으로 제어 중앙정렬 @mixin position($x, $y, $z, $w){ position: absolute; left: $x; top: $y; z-index: $z; width: $w; @if $x == 50% and $y == 50%{ transform: translate(-50%, -50%); }@els..

2020. 6. 24.

😺 Study/CSS, SCSS

예시1. 기본문법 응용 @mixin bx ($position, $wid, $color){ border-#{$position}: $wid solid $color; } >> border 방향 부분에 #{$변수} 기입, @include 할 때 방향 써주면 됨 >> $wid=가로값, $color=색상 div { @include bx (right, 2px, red) } >> css에 div{border-right: 2px solid red;}로 적용됨 예시2. for문 응용1 @for $i from 1 to 6 { >> i의 1부터 5까지 반복하겠다. (to는 미만을 뜻함) nav ul .menu#{$i} > a {color: red;} } >> 메뉴 li가 차례대로 선택되며 글자 색상 변경됨 예시2. for문 ..

2020. 6. 24.

😺 Study/CSS, SCSS

// 쉼표 구분자 (적용 후 css에서 확인해보면 '요소, 요소' 식으로 적용됨) // mixin과 비슷하지만 되도록 mixin 쓰길 권장! // 화면 꽉 차는 레이아웃에 가운데 정렬 필요한 요소들에 일괄적으로 적용시 좋음! (반복되는 영역에 쓰기) // %이름 {스타일 적용} 예시) .main { @extend %m0auto; } .footer { @extend %m0auto; } %m0auto { width: 1200px; margin: 0 auto; } >> css에서 확인해보면 .main, .footer{ width: 1200px; margin: 0 auto; }로 적용됨 p.s - 유튜브 리베하얀 영상 참고

2020. 6. 24.

😺 Study/CSS, SCSS

// 반복적인 코드 '@mixin 이름'으로 설정하고, 쓸 때마다 요소에 @include로 불러오기! // 실무에서는 mixin 파일 따로 생성, scss 파일에 연결시켜서 호환! 예시1. 기본문법 응용 @mixin clear{ &:after { content: ""; display: block; clear: both; } } div { @include clear; } >>css 코드에 div:after { content: ""; display: block; clear: both; }로 자동 설정 예시2. 매개변수 응용 @mixin border ($color){ border: 1px solid $color; } div { @include border (blue); } >> $color라는 매개변수를 만들..

2020. 6. 24.

😺 Study/CSS, SCSS

예시) $color: #333; >> $color라는 변수 설정 .btn { &:hover { color : $color; } >> &(가상선택자의 위치 ) .btn을 hover했을 때 색상을 위의 변수로 설정 .lnb { color: $gray; ul { border: 1px; > li { background: pink; & : last-child { background: yellow; } >> li의 마지막 자식 선택 } } } p.s - 유튜브 리베하얀 영상 참고

2020. 6. 24.