컴퓨터 언어/HTML, CSS3 Sass(Scss) 정리 Sass(Scss)는 css preprocessor(전처리기) 중 하나입니다. css를 편하게 쓸 수 있는 여러 기능들(nesting, mixins, inheritance 등)을 가진다는 점이 특징입니다. Sass와 Scss는 그 내용은 같지만 문법적인 구조에서 약간의 차이를 가집니다. 가장 큰 차이는 Sass는 들여쓰기로 구분하고 ;을 사용하지 않는 반면, Scss는 {}를 사용하고 ;를 사용한다는 점이 특징입니다. 이 글에서는 Scss를 기준으로 글을 작성해보도록 하겠습니다. 1. 변수 선언 $변수 이름: 값 $w: 100px; $my-color: #ffffff; .container{ $h: 200px !global; height: $h; width: $w; color: $my-color; } .bu.. 2021. 12. 18. [CSS] Flexbox 속성 정리 flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 위 사이트는 css의 flexbox 속성을 이용한 간단한 게임이 있는 사이트입니다. 위 사이트에 있는 속성을 중심으로 flexbox의 속성을 정리해보았습니다. 1. justify-content 주축에 대해서 항목들을 어디로 정렬할지 결정합니다. flex-start: 요소들을 컨테이너의 왼쪽으로 정렬 flex-end: 요소들을 컨테이너의 오른쪽으로 정렬 center: 요소들을 컨테이너의 가운데로 정렬 space-between: 요소들 사이에 동일한 간격을 둠 space-around: 요소들 주위에 동일한 간격을 둠 2. align-items 교차축에 대.. 2020. 12. 13. [CSS] 선택자(Selector) 정리 flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 최근 React Native를 공부하고 있는데요, 이를 위해서 HTML과 CSS도 공부 중입니다. 공부를 하다보니 생활코딩 님의 강의에서 위 링크의 게임을 추천받았는데요, CSS의 선택자를 연습하기 좋은 게임이라고 합니다. 저도 공부하는 입장에서 위 링크에 들어가서 문제를 풀어보았는데요, 위 게임에 나오는 선택자들을 한 번 정리해보았습니다. 정리하면서 아래 문서를 참고했습니다. www.w3schools.com/cssref/css_selectors.asp CSS Selectors Reference CSS Selector.. 2020. 12. 13. 이전 1 다음