css 썸네일형 리스트형 css - SCSS SCSSscss는 css를 보다 쉽고 편하게 작성 및 관리를 위해 만들어진 css 전처리기이다.기본적으로 네스팅 문법을 지원해 코드 작성 및 상속을 보다 쉽게 작성할 수 있다. SCSS 계산기본적으로 css 내에서 계산을 할 땐, calc(); 를 사용했지만SCSS에선 height: 100px * 2; 이런 식으로 바로 계산이 가능하다.import './경로/파일';SCSS 파일 최상단에 위의 코드를 인입해 다른 경로의 SCSS 파일을 가져올 수 있다. autoPrefixLive Sass Complier 확장 설정에서 package.json 파일에 들어가면 설정할 수 있다.-webkit 소스들을 세팅할 수 있다."liveSassCompile.settings.autoprefix": [ .. 더보기 css - flex / grid (grid-area, n줄 말줄임, 말줄임 2줄, 말줄임 2줄 이상) 말줄임 코드를 짤 때, 레이아웃이 급변하며 깨지는 경우가 종종 발생한다.이는 상위요소 중, 어딘가가 width 값이 없기 때문에 발생하는 현상이다. 그럴 땐, min-width: 0; 이라는 형식상의 width 값만을 부여해 width 를 있다고는 선언할 수 있다. display: grid;grid 또한 flex와 같이, 특정한 상황에선 flex 보다 더 효율적으로 요소를 분배시킬 수 있다.grid를 10칸으로 나눈다는 가정 하에, grid는 컬럼을 지정하는 선을 나타내기에 요소에게 지정을 할 땐,10이 아닌 11 (grid 줄의 갯수)를 지정한다. grid-template-column / gtcdisplay: grid; 인 자식 요소들의 컬럼을 지정하는 속성..parents{ display: gr.. 더보기 css - flex, grid (inline-block 여백, width, 말줄임, grid) 2 inline-block || a 태그 여백span과 같은 inline 속성의 태그들은 본인이 크기를 가질 수 없다.하지만 span에 크기와 높이를 부여하고 부모요소에 display: flex; 를 주게 된다면inline이라도 본인의 크기를 가지고 정렬을 할 수 있게 된다. flex 에서의 말줄임.box{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 기본적으로 사용하는 말줄임 코드다.flex 구조에선 말줄임을 담고 있는 덩어리 코드들의 width 값이 필수불가결하다.굳이 지정하지 않아도 되는 width 값을 지정할 땐 min-width: 0; 을 사용하자..parents{ min-width: 0;}.box{ .. 더보기 css - flex (flex, flex-grow, flex-shrink, flex-basis) flex뷰 포트의 요소의 크기가 불명확하거나 동적으로 움직일 때에도 효율적으로 배치시킬 수 있는 css 속성부모요소에 속성을 부여하고 자식들을 제어할 수 있다.기본값 flex : 0 1 auto; flex는 남는 공백을 효율적으로 분배할 수 있는 속성이다. flex-grow / fg / fxg요소 증가의 비율요소의 크기를 간단한 숫자를 통해 비율 조정이 가능하다.ex) flex-grow: 1; 요소의 크기가 동일하게 증가한다.box1, box2, box3이 있고 box1에만 콘텐츠가 있을 때, width값이 없다면 box1은 요소의 넓이 + 비율1을 같이 갖게된다.box1 - contents + 1box2 - 1box3 - 1 위와 같은 이유로 flex-grow로만 크기를 잡는 것은 불가능하다.flex는.. 더보기 이전 1 다음
