본문 바로가기

Sass

(3)
sass - .scss & .sass 차이점, sass 에서 변수 지정하기 .scss & .sass 차이점 https://www.sassmeister.com/ 간단하게 .scss, .sass 테스트 가능 SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com 가장 큰 차이점은 indented / nested의 구조이다 scss file의 경우 css에서 가능했던 모든 기능을 사용 가능하고 nested 구조를 가지며 sass file은 indented 구조를 가진다 /****.scss file****/ h1 { color: blue; font-size: 2rem; span { color: red;..
grid-alignment (justify-content, align-content) justify-content, align-content 미리보기 HTML 삽입 미리보기할 수 없는 소스 start, center, end, space-around, space-between, space-evenly 의 값을 적용할 수 있다 이전 justify-items, align-items와 같이 부모 요소에 적용하면 된다 코드 예시 section.grid-container { height: 100vh; display: grid; grid-template-columns: repeat(4, 10%); grid-template-rows: repeat(2, 150px); background-color: rgb(255, 255, 255); justify-content: start; align-content: ..
grid alignment (justify-items, align-items) justify-items, align-items 미리보기 HTML 삽입 미리보기할 수 없는 소스 그리드 아이템을 정렬할 때 사용한다. 총 4가지 property (stretch, start, center, end)가 있으며 부모 요소에서 적용할 수 있다 적용 예시 section.grid-container { height: 100vh; display: grid; grid-template-columns: repeat(4, 10%); grid-template-rows: repeat(2, 150px); background-color: rgb(173, 72, 72); justify-items: stretch; align-items: stretch; div.item { font-size: 1.5rem; text-a..