본문 바로가기

front_end/css-sass

 (9)
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..
grid areas Grid Areas 미리보기 grid-template-areas 그리드 시스템에서 레이아웃을 짤때 사용 grid-container(부모)에서 grid-template-areas 로 정의하여 사용 가능하다 예시 .grid-container { background-color: #ff7052; display: grid; gap: 25px; grid-template-areas: 'header header header header header header' 'sec-1 sec-1 sec-2 sec-2 sec-3 sec-3' '. sec-4 sec-4 sec-4 sec-4 .' 'sec-5 sec-5 sec-5 sec-6 sec-6 sec-6' 'footer footer footer footer footer foo..
grid item 포지셔닝 css grid item 포지셔닝 포지셔닝의 방법에는 위치를 바꾸는 것, Spanning, template areas를 이용하는 방법이 있다 Set Up html 셋업 item-1 item-2 item-3 item-4 item-5 item-6 item-7 item-8 item-9 item-10 item-11 item-12 css (sass) 셋업 section.grid-container { height: 100vh; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 200px); div.item { font-size: 1.5rem; text-align: center; line-height: 200px; f..
css grid GRID grid 적용 전 grid 적용 후 flexbox와 다르게 2차원적으로 구성되는 특징이 있다 (column, row) 1. grid 적용 방법 grid-container 라는 클래스를 가진 section이 있다고 가정
flexbox alignment 02 (align-items, align-content) setup 부모 컨테이너(이 경우 ul)에 적용하면 된다 css setup * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background-color: rgb(212, 212, 212); } h1 { margin: 20px; font-size: 20px; } ul { padding: 20px; height: 300px; display: flex; } li { list-style: none; color: black; margin: 20px; padding: 10px; width: 40px; font-size: 20px; text-align: center; background-color: rgb(255, 255, 255); } ..
flexbox alignment 01 (justify-content) 플렉스박스 안의 자식 요소를 정렬하는 방법 justify-content align-items align-content mainAxis 상에서 자식 요소를 조작 => justify-content crossAxis 상에서 자식 요소를 조작 => align-items, align-content (Row (default)일 때 row 방향이 mainAxis, column 방향이 crossAxis) Setup / apply 방법 플렉스박스 내 자식 요소들을 조작하는 property이니 부모 요소에 적용하면 된다 html 셋업 1st Child 2nd Child 3rd Child 4th Child css 셋업 /* flexbox container */ ul { background-color: lightslategr..
css flexbox, flex-direction, flex-wrap flexbox 사용 목적 => 부모 요소 내부에 포함된 자식 컨텐츠의 정렬을 쉽게 가능하게 한다 ul 이 li의 부모 (parent) 가 된다 flex-box 적용 전 모습 css code 이 상태에서 부모 요소인 ul에 flexbox 적용 시 자식 요소(li)들이 세로 (Row, mainAxis = row, crossAxis = Column)로 정렬되는 것을 확인할 수 있다 flexbox 적용 시 자식 요소들에 대해 정렬이 가능하다 부모 요소에서 적용 가능한 property는 다음과 같다 1. flex-direction 1.1 flex-direction: row; 디폴트 값으로 설정되어 있으며 자식 요소들의 방향이 row로 정렬 2.2 flex-direction: row-reverse; 플렉스 컨테이너..

티스토리툴바