| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 정적객체
- 아이콘사용법
- XEIcon
- 의존성문제
- node 오류
- package.json
- window 정책변경
- node설치
- owlcarousel
- 글자들여쓰기
- 플러그인
- git lab clone
- vscode git clone
- fontawesome
- MediaQuery
- googleicon
- 그누보드반응형
- npm install
- react npm install
- legacy-peer
- 단어단위로떨어지기
- npm install 문제
- maxwidth
- minwidth
- slickslider
- 이미지반응형
- 동적객체
- 웹아이콘
- Git clone
- npm start
- Today
- Total
목록CSS/Bootstrap (6)
어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ
이 코드를 📁 node_modules/bootstrap/scss/_type.scss 에서 찾았는데해당 $font-size라는 변수명이 node_modules/bootstrap/scss/_variables.scss에 없당 -_-@each $display, $font-size in $display-font-sizes { .display-#{$display} { @include font-size($font-size); font-weight: $display-font-weight; line-height: $display-line-height; }} 일단 bootstrap 폴더에서만 검색 $font-size가 정의된 파일이 없어서 폴더 내 전체 검색을 해봐도 정의된 내역은 없다...
@use 'sass:map';.navigation { &-menu { display: flex; flex-wrap: wrap; #{ $self } { @include padding((map.get($navigation, padding-y) * 0.5) 0); width: map-deep-get($header, dropdown, width); border: none; border-radius: map-deep-get($header, dropdown, border-radius); box-shadow: $box-shadow; } #{ $self ..
@use 'sass:list';@function map-deep-set($map, $keys, $value) { $maps: ($map); $result: null; @for $i from length($maps) through 1 { $current-map: list.nth($maps, $i); $current-key: list.nth($keys, $i); $current-val: if($i == list.length($maps), $value, $result); $result: map.merge( $current-map, ( $current-key: $current-val,..
앞에서 봤을 땐 mixin 문법에서 사용하기 위해 $self: &를 사용한다고 했는데, 여기서도 사용하고 있어서 봤더니중첩 구조라서 확실하게 가져오기 위해 사용한다고 한다. 원본 SCSS.navigation { $self: &; // → '.navigation' &-menu { #{ $self } { // 여긴 '.navigation-menu .navigation'이 됨 } #{ $self }-link-extra { // 여긴 '.navigation-menu .navigation-link-extra'가 됨 } }} 컴파일 된 CSS.navigation-menu .navigation { /* ... */}.navigation-menu .navigation-li..
👩🏻 알고 싶은 코드.navigation { $self: &; @mixin menu-item-visible($count) { .navigation.navigation-menu .navigation-item-more .navigation &:nth-child(-n + #{$count}), .navigation.navigation-menu > &:nth-child(n + #{$count + 1}) { display: none; } // stylelint-disable selector-max-specificity // stylelint-disable selector-max-class .navigation.navigation-menu > &.navigation-item-more { disp..
** Bootstrap 최신 공식문서https://getbootstrap.com/ BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.com ** Bootstrap v5.1.3 기본 공식문서https://getbootstrap.com/docs/5.1/getting-started/introduction/ IntroductionGet started with Bootstrap, ..